postcss-advanced-variables icon indicating copy to clipboard operation
postcss-advanced-variables copied to clipboard

Global declarations

Open jods4 opened this issue 4 years ago • 1 comments

Currently the variables option allows you to have a global list of variables (e.g. from JS or JSON).

It would be nice if that feature was extended to support a CSS filename, which would be prepended as an @import to all other CSS files.

This way would support sharing other declarations such as @mixin and not just $variables.

jods4 avatar May 12 '21 09:05 jods4

In the past with sass builds I have used this plugin to provide a set of global resources to all of my sass blocks, whether they're in a scss file or in my single file components.

I agree it would be great to add this as a feature to let postcss-advanced-variables work the same way — in particular it feels messy importing just my mixins partial into every Vue component that needs it.

I propose adding an option like so which would make the contained variables / mixins from resources.css available to all postcss blocks in the project:

require('postcss-advanced-variables')({
  globalResources: `@/assets/styles/resources.css`
});

Something like this would hugely improve the usefulness of this plugin when using variables and mixins, IMO.

Is it possible?

tbredin avatar Jul 12 '21 00:07 tbredin