Sp-dev-docs: Autoprefixer and Browserslist is outdate and CSS Grid support missing

[StfBauer]

Category

• [ ] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Autoprefixer should only support actually supported browser and fallback CSS grid layout syntax.

Observed Behavior

In the following file the CSS autoprefixer browser support is defined:
/node_modules/@microsoft/gulp-core-build-sass/lib/SassTask.js

This definition means that from a CSS side of things even IE10 would be supported.
https://browserl.ist/?q=%3E+1%25%2Clast+2+versions%2Cie+%3E%3D+10

Which is as I know not the case anymore a better option would be to use the following browser support definition:

"> 1%","last 2 versions","ie > 11","not dead"

In addition, CSS grid is already supported in IE11 (with vendor-specific prefixes).
https://caniuse.com/#feat=css-grid

To support this in SPFx an additional setting is required so the overall configuration should look like this. So the overall configuration should look like this:

{
  grid: true,
  browsers: ["> 1%","last 2 versions","ie > 11","not dead"]
}

The current version used as the autoprefixer is "~9.1.3". This is the first version for CSS Grid included according to my research.
https://css-tricks.com/css-grid-in-ie-duplicate-area-names-now-supported/#article-header-id-11

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[KevinTCoughlin]

@StfBauer this PR merged yesterday should allow the configuration of autoprefixer - https://github.com/microsoft/rushstack/pull/1891. We also updated the associated dependencies. You can override the SASS build task configuration using replaceConfigor similar API.

@microsoft/[email protected] has the change: https://www.npmjs.com/package/@microsoft/gulp-core-build-sass/v/4.11.0

cc: @andrewconnell @lucabandMSFT

[andrewconnell]

Tagging as fixed next drop as it will assume to take effect in SPFx v1.11...

[KevinTCoughlin]

Tagging as fixed next drop as it will assume to take effect in SPFx v1.11...

Yes, it should be included cc: @lucabandMSFT @johnguy0. We see significant savings by eliminating outdated vendor prefixes and want the community to benefit also.

[StfBauer]

@KevinTCoughlin so I can configure everything in package.json or via config file?