Create-react-app: autorepfixer does not respect rules

[FDiskas]

Is this a bug report?

YES

Did you try recovering your dependencies?

Fresh install
create-react-app: 1.5.2
YARN version v1.3.2

Which terms did you search for in User Guide?

autoprefixer, css, display: grid

Environment

1. node -v: v8.9.1
2. npm -v: 5.6.0
3. yarn --version (if you use Yarn): 1.5.2
4. npm ls react-scripts (if you haven’t ejected):

Then, specify:

1. Operating system: Ubuntu based
2. Browser and version (if relevant):

Steps to Reproduce

(Write your steps here:)

1. npm i -g create-react-app
2. create-react-app autoprefixer
3. add .demo { display: grid } to App.css file
4. yarn build
5. open generated css file in build directory and check .demo class content

Expected Behavior

.demo {
display: -ms-grid;
display: grid;
}

Actual Behavior

.demo{display:grid}

I tried to eject and change the autoprefixer option by adding grid: true it works

Folow https://github.com/postcss/autoprefixer/issues/603#issuecomment-365015199

SO please add that option to your webpack autoprefixer config by default

[BuckyMaler]

This isn't a create-react-app bug, being that autoprefixer has CSS Grid Layout prefixing disabled by default and to my knowledge create-react-app makes no claims to CSS Grid Layout support.

However, this could be a beneficial proposal. It's important to note though, even with autoprefixer configured to prefix Grid properties, developers will likely need to consider using feature queriers to better support IE 10+. The Grid implementation that exists in IE 10+ is based on the 2011 specification, and the implementation supported today in Chrome, Firefox, and Safari is quite different.

Rachel Andrew, has a great article discussing the challenges of Grid support in IE, which I came across when reading through MDN.

That all being said, configuring autoprefixer to prefix Grid properties would be helpful for IE, although additional CSS overhead is likely.

If it's decided that Grid prefixing should be enabled, I'd be happy to submit a PR.

FYI, I haven't used Grid myself just yet, but I know it's super 🔥 right now, and will likely only grow in popularity.

[thomastvedt]

Any news here? I don't want to eject, prefixing manually for now.. :)

[joelrindfleisch]

@BuckyMaler what would be the detriment to just setting grid to true in the webpack.config?

[BuckyMaler]

@joelrindfleisch none. Just be aware of the IE 10+ pain points mentioned above, and know that based on browserslist config CSS output size may increase due to additional vendor prefixing.

[Timer]

Grid is off by default. This will be documented.