postcss-css-variables
postcss-css-variables copied to clipboard
MadLittleMods
Define global variables as css file
It's just a suggestion for implement.
Now global variables defined as 'variables' in options. And it is an js object.
For me it would be better to import variables as file instead, for example:
options: { variablesPath: 'src/variables.css' }
P.S. Why I need it:
It's because I use css-modules and have no way to set variables declarations somewhere top.
It is possible to import variables from every file which needs them, but I'm using variables as a method to decouple components from global files :) As a context for component...
The solution I use for now is implicitly importing of variables file in sass-loader.
Yes! This is what I've been trying to do - just reference a "global_variables.css" file that has my variables, custom-media, mixins, etc. and have webpack/postcss deliver them to all my app pages/components without me having to explicitly @import that file into every other CSS file in my app.
This would be great. We have a project structure with separate CSS files for each component, and currently we have to duplicate the shared CSS custom props in every CSS file to enable IE11. The bloat really adds up.
This is still an issue, and given I have css modules, this prevents me from using this plugin, the custom-properties plugin has a importFrom option that works exactly like I need but doesn't do the local variables. Can't win.
@MadLittleMods I really need this and would like to start working on a PR. Could you give me some hints on how you would approach this problem?
@damianfrizzi Some rough overview,
- Move the variable collection into a re-usable function, https://github.com/MadLittleMods/postcss-css-variables/blob/fe5c821b8feedbe80d8f4399a2b80ca166bb3515/index.js#L152-L199
- Setup a PostCSS processor to run against
options.variablesCssFile - Add the variables collected to the
map, https://github.com/MadLittleMods/postcss-css-variables/blob/fe5c821b8feedbe80d8f4399a2b80ca166bb3515/index.js#L92-L93
My solution has been to just point to a css file and not use this plugin anymore. Unless you have IE as a requirement, custom properties are fully supported now. https://caniuse.com/css-variables
// variables.css
:root {
--blackColor: hsl(0, 0%, 0%);
}