Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ijlee2/embroider-css-modules
CSS modules for Embroider projects
https://github.com/ijlee2/embroider-css-modules
css-modules ember-addon ember-codemod ember-polaris emberjs embroider glint typescript
Last synced: 3 days ago
JSON representation
CSS modules for Embroider projects
- Host: GitHub
- URL: https://github.com/ijlee2/embroider-css-modules
- Owner: ijlee2
- License: mit
- Created: 2023-03-30T06:14:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-05T07:58:56.000Z (28 days ago)
- Last Synced: 2024-09-22T22:38:14.352Z (11 days ago)
- Topics: css-modules, ember-addon, ember-codemod, ember-polaris, emberjs, embroider, glint, typescript
- Language: TypeScript
- Homepage: https://embroider-css-modules.netlify.app/
- Size: 5.47 MB
- Stars: 15
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://github.com/ijlee2/embroider-css-modules/actions/workflows/ci.yml)
[](https://percy.io/Isaac/embroider-css-modules)
# 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](https://github.com/css-modules/css-modules). It is compatible with "bleeding-edge" Ember:
- [Embroider on the strictest settings](https://github.com/embroider-build/embroider/#options) (including route splitting)
- [TypeScript](https://www.typescriptlang.org/docs/) + [Glint](https://typed-ember.gitbook.io/glint/)
- [`` tag](https://github.com/ember-template-imports/ember-template-imports)
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.
```ts
// 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](/packages/ember-codemod-remove-ember-css-modules/README.md)
- [embroider-css-modules](/packages/embroider-css-modules/README.md)
- [type-css-modules](/packages/type-css-modules/README.md)
## Guides
- [Migrate from ember-css-modules](./docs/written-guides/migrate-from-ember-css-modules.md)
- [Migrate from ember-modern-css](./docs/written-guides/migrate-from-ember-modern-css.md)
- [Refactor code](./docs/written-guides/refactor-code.md)
- [Set up CSS modules (apps built with Vite)](./docs/written-guides/set-up-css-modules-apps-built-with-vite.md)
- [Set up CSS modules (apps built with Webpack)](./docs/written-guides/set-up-css-modules-apps-built-with-webpack.md)
- [Set up CSS modules (v2 addons)](./docs/written-guides/set-up-css-modules-v2-addons.md)
## 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`](https://github.com/salsify/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](CONTRIBUTING.md) guide for details.
## Credits
The `webpack` implementation is possible, thanks to ideas from [Ember + Modern CSS](https://github.com/evoactivity/ember-modern-css) by [@evoactivity](https://github.com/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](LICENSE.md).