How to specify a folder with global (legacy) styles ?

yched commented 6 years ago

I'm planning to move an existing app, with a large existing global CSS codebase (SCSS actually, but that probably doesn't matter here), over to css-modules. That means starting with a set of global styles, and progressively moving it to component-scoped styles.

AFAICT, I have two options, depending on whether I include 'postcss-modules-local-by-default' or not in the list of postcssPlugins :

include it : then I have to go through all my existing SCSS codebase and add global:() switches everywhere (sounds prohibitively tedious), before I can start moving pieces of it to component-scoped.
or leave it out : my existing SCSS codebase works out of the box, but I have to add local:() switches to all the component-scoped as I go (and then remove them at the end when I'm done gutting the pile of global styles)

I'm looking for a way to keep 'local scope" as default behavior, but specify a "legacy" folder whose content will be scoped globally. It seems the postcss-modules plugin has such an option (globalModulePath, but I can't see how to get a similar behavior within meteor-css-modules.

(related question as a total noob in this area : I'm wondering why meteor-css-modules uses the series of postcss-modules-(value|local-by-default|...) plugins rather than the postcss-modules plugin directly ?)

akanix42 commented 6 years ago

For global CSS, you'll want to use the passthroughPaths option. I've got it documented here https://github.com/nathantreid/meteor-css-modules/wiki/Package-Options but basically you'll need to use a config like this in your package.json:

{
  "cssModules": {
    "passthroughPaths": [
      "path/to/legacy-css/"
    ]
  }
}

As for why I'm not using postcss-modules - I haven't gotten around to it! 😄 My plugin was actually created before the postcss-modules package and for a while I was unaware of it. I ended up using postcss-modules when I implemented a very basic version of CSS modules into the akryum:vue-component plugin and since then I've been meaning to switch to it here as well, but haven't taken the time to do so.

yched commented 6 years ago

Thanks for the quick reply @nathantreid!

passthroughPaths is what I was looking for indeed, awesome! I guess I overlooked it because I wrongly throught it would skip SASS processing as well, but apparently it doesn't. It just skips postcss processing, is that correct ? (might be worth a note in the doc ?)

postcss-modules : heh, right, things like that happens :-)

Thanks for the help and the great package!

akanix42 / meteor-css-modules

How to specify a folder with global (legacy) styles ? #112