Postcss-preset-env only add fallbacks when using the variables in same file

Is this a bug report?

I’m not sure, could be me using it wrong.

Did you try recovering your dependencies?

I created a completely new create-react-app project. So everything should be up to date.

Environment

Environment Info:

System: OS: macOS 10.14 CPU: x64 Intel® Core™ i5-5257U CPU @ 2.70GHz Binaries: Node: 10.10.0 - ~/.nvm/versions/node/v10.10.0/bin/node Yarn: 1.10.1 - /usr/local/bin/yarn npm: 6.4.1 - ~/.nvm/versions/node/v10.10.0/bin/npm Browsers: Chrome: 70.0.3538.77 Firefox: 62.0.3 Safari: 12.0 npmPackages: react: ^16.6.0 => 16.6.0 react-dom: ^16.6.0 => 16.6.0 react-scripts: 2.0.5 => 2.0.5 npmGlobalPackages: create-react-app: Not Found

Steps to Reproduce

(Write your steps here:)

1. create new react app
2. add css variable in index.css, and then use that variable both in index.css and app.css.
3. Apply class names on elements.

/* index.css */
:root {
	--color: red;
}

.text-a {
	font-size: 22px;
	color: var(--color);
}

/* app.css */
.text-b {
	font-size: 22px;
	color: var(--color);
}

Expected Behavior

With postcss-preset-env I expect it apply fallbacks on both classes. like this.

.text-a { 
    font-size:  22px;
	color:  red;
	color:  var(--color);
}

Actual Behavior

It only happens on the class that is written in the same file as root variables is applied. Which in this case is .text-a

Importing that file doesn’t seem to solve it either.

Reproducible Demo

https://github.com/rickbrunstedt/postcss-cra-bug-maybe

[bluesbroz]

I had the same issue.

The problem is that imported css-files are processed separately by webpack loaders and the plugin which adds fallbacks (postcss-custom-properties inside of postcss-preset-env in postcss-loader) just doesn’t aware of other css-files in that moment.

There is option importFrom which you can provide to that plugin, and you can declare it in ‘postcss-preset-env’ (importFrom) (it will be passed down to ‘postcss-custom-properties’).

But unfortunately there is no way to pass this option to ‘postcss-preset-env’ right now: webpack.config.js.

{
  // Options for PostCSS as we reference these options twice
  // Adds vendor prefixing based on your specified browser support in
  // package.json
  loader: require.resolve('postcss-loader'),
  options: {
    // Necessary for external CSS imports to work
    // https://github.com/facebook/create-react-app/issues/2677
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
      }),
    ],
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
},

[iansu]

These plugins only work with CSS variables defined on the root. There isn’t really a good general solution for this problem but CSS custom properties are widely supported in browsers now so this shouldn’t be an issue.