search

csstools / postcss-advanced-variables

Use Sass-like variables, conditionals, and iterators in CSS
Creative Commons Zero v1.0 Universal
127 stars 33 forks source link

Global declarations #90

Closed jods4 closed 6 months ago

jods4 commented 3 years ago

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 3 years ago

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?

romainmenke commented 6 months ago

This is possible with the generic plugin : https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-global-data#readme