embroider-css-modules

CSS modules for Embroider projects

What is it?

embroider-css-modules provides tools and conventions to help you use CSS modules in Embroider projects. It works on "bleeding-edge" Ember:

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

A key idea behind embroider-css-modules: How we map local class names to global ones has little to do with Ember. It's also 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',
};

As you will see in the Guides below, we delegate the how to Rollup, Webpack, and Vite—build tools from the wider JavaScript. With fewer responsibilities, embroider-css-modules can focus on improving developer experience (DX).

Package overview

• ember-codemod-remove-ember-css-modules
• ember-codemod-remove-global-styles
• 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

For classic v1 apps (i.e. without Webpack) and v1 addons, you will want to use ember-css-modules.

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.