Loading global CSS modules while applying PostCSS plugins.

[MeoMix]

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 a core.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:

import './reset.css!css-global'
import './core.css!css-global'

where css-global is mapped as:

"css-global": "npm:[email protected]",

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?

[douglasduteil]

Hi @MeoMix

If I get it right you want to be able to load some styles in two different use cases.

1. The old way. A global CSS file to change the environment of the whole page.
2. The ICSS way. To keep some styles isolated and change uniquely some targeted DOM nodes.

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)

[douglasduteil]

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 💣

[geelen]

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: "[email protected]",
      plugins: []
    },
    "*.css": {
      loader: "[email protected]",
      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?