Skip to content

Instantly share code, notes, and snippets.

@ro-savage

ro-savage/css-modules-and-globals.md

Created February 25, 2017 00:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ro-savage/d419177daf6ed403c387e4eb2766c9d2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ro-savage/d419177daf6ed403c387e4eb2766c9d2 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Modules - Playing nice with regular css
Raw
css-modules-and-globals.md

There is an on going issue with using non-css module css in projects.

This causes issues with people needing to change webpack config, or mainters need to create a css-module specific version. We should not be forcing people to go through a bunch of configuration to get css modules and standard css to play nicely together.

I suggest a few ways to solve this problem long term, and I think the change should come from CSS Modules as it is non-standard.

  1. Change extension All CSS Modules have the file extension .cssm (or module.css). Then any loaders would know these are CSS modules, and other imports are standard css.

  2. New language feature CSS Modules standard be updated to specifically declare they are modules. E.g. rather than :global{}. All modules would com under :modules {}. This can be done easily because all CSS modules go through postCSS. Just have :modules {} at the top and include everything else inside.

  3. Importing style defaults All imports that are in JS/ES6 style import <name> from <file> are imported as modules. Anything else is imported without styles.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment