CSS modules for Embroider projects
npm install embroider-css-modules
_CSS modules for Embroider projects_
The addon provides tools 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
- tag
``shFor apps
pnpm add -D embroider-css-modules
Use Glint and *.hbs files?
Extend this addon's template registry to get native types.
ts
/ types/index.d.ts /
import '@glint/environment-ember-loose';
import '@glint/environment-ember-template-imports';import type EmbroiderCssModulesRegistry from 'embroider-css-modules/template-registry';
declare module '@glint/environment-ember-loose/registry' {
export default interface Registry extends EmbroiderCssModulesRegistry, / other addon registries / {
// local entries
}
}
`
API
The addon provides 1 helper:
-
$3
#### Why use it?
The
helper is useful when you want to apply multiple styles.`glimmer-js
/ app/components/hello.gjs /
import { local } from 'embroider-css-modules';import styles from './hello.module.css';
Hello world!
`To conditionally apply multiple styles, use the
helper.`glimmer-js
/ app/components/hello.gjs /
import { array } from '@ember/helper';
import { local } from 'embroider-css-modules';import styles from './hello.module.css';
styles
"message"
(if @hide (array "hide" "after-3-sec"))
}}
>
Hello world!
#### Arguments
The
helper uses positional arguments so that styles are applied in sequence. Pass the styles object first, then the local class name(s).
#### Output
The
{{local}}` helper returns a concatenated string. The string lists the global class names in the same order as the local ones.- Ember.js v4.12 or above
- Node.js v20 or above
See the Contributing guide for details.
This project is licensed under the MIT License.