README.md

embroider-css-modules

CSS modules for Embroider projects

What is it?

embroider-css-modules provides a set of tools and conventions to help you implement CSS modules. It is compatible with "bleeding-edge" Ember:

• Embroider on the strictest settings (including route splitting)
• TypeScript + Glint
• <template> tag

A key idea behind embroider-css-modules: There is some way to map local class names to global ones. The how is loosely tied to Ember and allowed to change in the future.

// We can somehow map local class names to global ones
const styles = {
  'container': 'lzeQ4',
  'is-inline': 'mJGCE',
  'is-wide': '_2lPSR',
  'no-feedback': 'YpQbt',
};

In short, embroider-css-modules depends little on how CSS modules is implemented. It focuses on providing tools and conventions that improve your developer experience (DX).

Package overview

• ember-codemod-remove-ember-css-modules
• embroider-css-modules
• type-css-modules

Guides

• Migrate from ember-css-modules
• Migrate from ember-modern-css
• Refactor code
• Set up CSS modules (apps built with Vite)
• Set up CSS modules (apps built with Webpack)
• Set up CSS modules (v2 addons)

Limitations

What embroider-css-modules looks like is:

• Quite stable for apps
• Quite stable for v2 addons
• Unknown for v1 addons (including engines) - likely won't be implemented

Non-Embroider projects can use ember-css-modules. V2 addons with embroider-css-modules do work on non-Embroider projects, i.e. you can use both addons at the same time.

Contributing

See the Contributing guide for details.

Credits

The webpack implementation is possible, thanks to ideas from Ember + Modern CSS by @evoactivity. Special thanks to the maintainers of ember-css-modules, who paved the Ember way to CSS modules.

License

This project is licensed under the MIT License.