Can't configure CSS prefixing with browserslist

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

CSS, autoprefixer

Environment

  System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i7-4712HQ CPU @ 2.30GHz
  Binaries:
    Yarn: 1.12.3 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
    Internet Explorer: 11.0.17134.1
  npmPackages:
    react: ^16.7.0 => 16.7.0
    react-dom: ^16.7.0 => 16.7.0
    react-scripts: 1.x => 1.1.5
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

1. Create a new project with react-scripts@1.1.5
2. Include the following in App.css

.aClass {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.anotherClass {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex
}

1. Configure browserslist in package.json, according to https://facebook.github.io/create-react-app/docs/post-processing-css

You can customize your target support browsers by adjusting the browserslist key in package.json according to the Browserslist specification.

My configuration is:

  "browserslist": [
    "Chrome >= 17"
  ],

I tried adding the same configuration also as .browserslistrc file.

Expected Behavior

I expect CSS bundle to include

.aClass {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.anotherClass {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex
}

(since this is the result I get from https://autoprefixer.github.io/ with filter Chrome >= 17 and the given CSS)

Actual Behavior

Bundle only includes the following for my two classes (notice -webkit- prefixed styles are missing):

.aClass {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.anotherClass {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -ms-inline-flexbox;
    display: inline-flex
}

Reproducible Demo

https://github.com/PiDayDev/cra-css

Clone the repo., execute npm install and then npm run build Check CSS file generated in build folder.

[mrmckeb]

Ah, I understand @PiDayDev - sorry I misread.

I think you’ll need to move to 2.x, or customise the config yourself I’m sorry… Let me know if we can be of any more help.

[PiDayDev]

Thanks for your answer 👍 at least now it’s clear I’m not lucky 😆… 😞