Create-react-app: Background-color: Transparent

[iamstratos]

Is this a bug report?

Maybe?

When I'm building my project, the background-color value transparent is automatically changed to initial. I cannot really understand why and how though :/
I need a way to disable this.

I'm using scss (with node-sass package).
My browserlist:

"browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],

Expected Behavior

background-color: transparent

Actual Behavior

background-color: initial

[heyimalex]

I'm unable to repro using stock CRA, could you give more details or an actual example project?

[xie-yz]

It occurs in my project too，but I also cannot repro using CRA

[heyimalex]

Any other details? Showing up during dev or after build? Are you seeing it in the inspector or actually in the build artifacts? Are you using css modules or scss? What's your browserlist say?

[iamstratos]

I've updated my original post with more information.

Looks like it's PostCSS autoprefixer's problem.
https://facebook.github.io/create-react-app/docs/post-processing-css

I've tried to use some comments to disable it as it is documented on the link below but it didn't work.
https://github.com/postcss/autoprefixer#disabling

[romanlex]

I have same problem and found another issue https://github.com/postcss/autoprefixer/issues/1213
@iamstratos have you solved this problem?

[romanlex]

@heyimalex after disable OptimizeCSSAssetsPlugin all work properly

[romanlex]

bug https://github.com/cssnano/cssnano/issues/721

[iamstratos]

@romanlex I haven't solved it.
How can I disable OptimizeCSSAssetsPlugin?

[romanlex]

@iamstratos You can disable OptimizeCSSAssetsPlugin when change webpack config after ejecting CRA

[iamstratos]

@iamstratos You can disable OptimizeCSSAssetsPlugin when change webpack config after ejecting CRA

I see. I'll need a solution without ejecting though.
Thanks for the reply!

[bugzpodder]

You can try if postcss.config.js works for you (I haven't tried), or rewire the config using react-app-rewired for now. Once the fix is released you can use yarn resolutions to pin the cssnano version.

[romanlex]

@bugzpodder Can you tell me please
Does the CRA support IE11?
In the repo of cssnano I found what default browserlist from cra doesn't have IE11

[romanlex]

@iamstratos
Workaround: Change browserlist in your package.json

"browserslist": [
      ">0.2%",
      "not dead",
      "ie >= 11",
      "not op_mini all"
    ]

[iamstratos]

@romanlex looks like it's working. thank you!

[bugzpodder]

You can always change your browserslist to support ie11. https://facebook.github.io/create-react-app/docs/supported-browsers-features