Consider adding a variable and apendVariables option

[pascalduez]

https://github.com/postcss/postcss-custom-properties#variables
https://github.com/postcss/postcss-custom-properties#appendvariables

In postcss-apply case that would maybe be named sets?

[kevinSuttle]

@pascalduez FWIW, the only way I know this would work is if you process and then hoist the output to be at the top-most style tag.

It also seems like any time you'd need to share across files you'd need to make every style available in JS, which kind of defeats the purpose of CSS.

webpack-contrib/postcss-loader#99 (comment)

[pascalduez]

@kevinSuttle Thanks for the feedback.
It might be that I need a good night of sleep, but I don't understand a damn thing at what you're trying to explain... Sorry.

[kevinSuttle]

Haha. No worries. If you'd like to do a screenshare or something when you're rested, we can. I'd like to invite @MoOx as well.

[mrtnbroder]

I really really really really need this!

I'm using webpack v2 + css modules + nextcss for writing my css. Currently however, I have to import my global.css file (which holds all the @apply rule-sets) in every component-styles.css where I need these rules. This is very explict, but also very annoying. I'd like to have the variables or sets option here to have them available globally.

Any idea when you could work on this?

[pascalduez]

@mrtnbroder It's on my "priority list", I might need that feature soon as well ;)

[pascalduez]

Available as of [email protected]. See #22

Just wanted to push a first iteration so that you guys can play a bit with it and give feedback hopefully. @mrtnbroder @AdamJo

I guess there will be things to improve/decide, like how it must work with the preserve option.

[pascalduez]

I don't want this to turn into a full blown inJS CSS stuff, but:

currently:

const themes = {
  /* Set names won't be transformed, just `--` will be prepended. */
  'toolbar-theme': {
    /* Declaration properties can either be camel or kebab case. */
    backgroundColor: 'rebeccapurple',
    color: 'white',
    border: '1px solid green',
  },
};

[...]
postcss().use(apply({ sets: themes }))
[...]

/* input */

.Toolbar {
  @apply --toolbar-theme;
}

Maybe we could go with the template trend:

const themes = [
  `--toolbar-theme: { 
    background-color: rebeccapurple;
    color: white;
    border: 1px solid green;
  }`,
];

[...]
postcss().use(apply({ sets: themes }))
[...]