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

embroider-css-modules is stable for v1 apps (Webpack), v2 apps (Vite), and v2 addons.

There's no known implementation for v1 apps (classic) and v1 addons (including engines). These projects can use ember-css-modules in the meantime.

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.