Postcss-preset-env only add fallbacks when using the variables in same file
Created by: rickbrunstedt
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(R) Core(TM) 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:)
- create new react app
- add css variable in index.css, and then use that variable both in index.css and app.css.
- 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.