Closed pascalduez closed 6 years ago
@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.
https://github.com/postcss/postcss-loader/issues/99#issuecomment-250267059
@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.
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.
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?
@mrtnbroder It's on my "priority list", I might need that feature soon as well ;)
Available as of postcss-apply@0.6.0
. 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.
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 }))
[...]
https://github.com/postcss/postcss-custom-properties#variables https://github.com/postcss/postcss-custom-properties#appendvariables
In
postcss-apply
case that would maybe be namedsets
?