csstools/postcss-advanced-variables

Global declarations

jods4 opened this issue · 2 comments

jods4 commented

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.

tbredin commented

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?

  • 👍1