CSS custom properties are not polyfilled

Created by: C-Higgins

Is this a bug report?

Yes

I have CSS variables (custom properties) in my CSS, which are not supported by IE. The CRA docs state "Support for new CSS features like the all property, break properties, custom properties, and media query ranges are automatically polyfilled to add support for older browsers." However, they are not polyfilled when they are imported from another file.

Steps to reproduce

// A.css
:root {
  --test: #fff;
}

// B.css
@import 'A.css'
body {
  color: var(--test)
}

Expected Behavior

The built CSS file should have the CSS variables processed out and replace the var(--) calls with the proper values

Actual Behavior

The autoprefixer works as expected, adding vendor prefixes and such, and changing the browserslist settings do alter the outputted CSS in some way. However, no browserslist setting is making the custom properties be post-processed, and as such the CSS will not work on IE. It seems like the variable replacement is happening before the concatenation from imports, and so it doesn't find the property definition from other files.

Note that I also deleted node_modules and package-lock and the issue persists.