Open MeoMix opened 9 years ago
Hi @MeoMix
If I get it right you want to be able to load some styles in two different use cases.
Like the use case are completely opposite, I find using two différent plugins makes sense. For me the ICSS approach is more component-centric so you aren't suppose to touch the global environment with it (event it you can)
As a good practice, I personally always keep resets out of SystemJS stuff. Like resets/normalizes are critical for the good behave of my pages I generally try to inline them in the header whenever possible :bomb:
Yeah I tend to agree, however, it is a bit shit to have to install two plugins, when the only difference between them is the list of PostCSS loaders they use.
What I'd prefer is a proper configuration, but I haven't looked in to SystemJS recently to see what it now supports (there's been a couple of new versions since I started this project). Something like:
System.config({
paths: {
"globals/*.css": {
loader: "jspm-loader-css@1.0.0",
plugins: []
},
"*.css": {
loader: "jspm-loader-css@1.0.0",
plugins: ["postcss-local-by-default", "postcss-extract-imports", "postcss-scope"]
}
}
});
...or something. @douglasduteil you might be more up to date with what SystemJS can do, what do you think?
Loading CSS on a per-module basis makes sense for 99% of code, but it's still common to want to load a
reset.css
file and/or acore.css
file. These files are independent of a given module and provide global changes to CSS.Looking at https://github.com/geelen/glenmaddern.com I see that you load global files like so:
where
css-global
is mapped as:This works, but the entire point of using
!css
is to allow for additional postCSS plugins to be extended onto the base loader. Those plugins won't be applied for any global files which isn't intuitive.Is there a sensible & DRY way of having both of these use cases go through the same suite of plugins?