embroider-css-modules

CSS modules for Embroider projects

What is it?

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
• <template> tag

Installation

# For apps
pnpm add -D embroider-css-modules

# For addons (install as a dependency)
pnpm add embroider-css-modules

Extend this addon's template registry to get native types.

/* 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:

• {{local}}

Helper: {{local}}

Why use it?

The {{local}} helper is useful when you want to apply multiple styles.

/* app/components/hello.gjs */
import { local } from 'embroider-css-modules';

import styles from './hello.module.css';

<template>
  <div class={{local styles "message" "hide"}}>
    Hello world!
  </div>
</template>

To conditionally apply multiple styles, use the {{array}} helper.

/* app/components/hello.gjs */
import { array } from '@ember/helper';
import { local } from 'embroider-css-modules';

import styles from './hello.module.css';

<template>
  <div
    class={{local
      styles
      "message"
      (if @hide (array "hide" "after-3-sec"))
    }}
  >
    Hello world!
  </div>
</template>

Arguments

The {{local}} 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.

Compatibility

• Ember.js v4.12 or above
• Node.js v20 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.