Skip to content

ijlee2/embroider-css-modules

Repository files navigation

This project uses GitHub Actions for continuous integration. This project is using Percy.io for visual regression testing.

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:

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

Guides

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.