Define global variables as css file

[artem-popov]

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.

[nathanchase]

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.

[cheshrkat]

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.

[mbulfair]

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]

@mbulfair Pull request welcome

[rajatbarman]

Need this functionality for people using css-modules

[damianfrizzi]

@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?

[MadLittleMods]

@damianfrizzi Some rough overview,

• Move the variable collection into a re-usable function,

  postcss-css-variables/index.js

  Lines 152 to 199 in fe5c821

  	// Collect all of the variables defined
  	// ---------------------------------------------------------
  	// ---------------------------------------------------------
  	//console.log('Collecting variables defined START');
  	eachCssVariableDeclaration(css, function(decl) {
  	var declParentRule = decl.parent;
  	var valueResults = logResolveValueResult(resolveValue(decl, map));
  	// Split out each selector piece into its own declaration for easier logic down the road
  	decl.parent.selectors.forEach(function(selector) {
  	// Create a detached clone
  	var splitOutRule = shallowCloneNode(decl.parent);
  	splitOutRule.selector = selector;
  	splitOutRule.parent = decl.parent.parent;
  	var declClone = decl.clone();
  	splitOutRule.append(declClone);
  	var prop = decl.prop;
  	map[prop] = (map[prop] || []).concat({
  	decl: declClone,
  	prop: prop,
  	calculatedInPlaceValue: valueResults.value,
  	isImportant: decl.important || false,
  	variablesUsed: valueResults.variablesUsed,
  	parent: splitOutRule,
  	// variables inside root or at-rules (eg. @media, @support)
  	isUnderAtRule: splitOutRule.parent.type === 'atrule'
  	});
  	});
  	// Remove the variable declaration because they are pretty much useless after we resolve them
  	if(!opts.preserve) {
  	decl.remove();
  	}
  	// Or we can also just show the computed value used for that variable
  	else if(opts.preserve === 'computed') {
  	decl.value = valueResults.value;
  	}
  	// Otherwise just keep them as var declarations
  	//else {}
  	// We add to the clean up list if we removed some variable declarations to make it become an empty rule
  	// We clean up later on because we don't want to modify the AST when we still need to reference these later on
  	if(declParentRule.nodes.length <= 0) {
  	nodesToRemoveAtEnd.push(declParentRule);
  	}
  	});

• Setup a PostCSS processor to run against options.variablesCssFile
• Add the variables collected to the map,

  postcss-css-variables/index.js

  Lines 92 to 93 in fe5c821

  	// Map of variable names to a list of declarations
  	var map = {};

[DevinCarl]

any update about this implement?

[nilsgabriel]

Is there any other solution to solve this?

[nathanchase]

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%);
}