@ember-local-class

These packages allow you to use css-modules the same way you are using it with ember-css-modules, using Babel.

So:

<div local-class="my-scoped-class">Hello</div>

becomes

<div class="my-scoped-class___aX123">Hello</div>

Compatibility

• Ember.js v3.28 or above
• Embroider or ember-auto-import v2

Installation

Add the packages

pnpm i --save-dev @ember-local-class/helper @ember-local-class/babel

Reference the babel plugin in your babel config

const buildBabelPlugin = require('@ember-local-class/babel');

module.exports = (api) => {
  api.cache(true);

  return {
    plugins: [buildBabelPlugin({ cssExtension: 'css' })],
  };
};

babel.config.js

Enable css modules in your embroider config

return require('@embroider/compat').compatBuild(app, Webpack, {
  packagerOptions: {
    cssLoaderOptions: {
      modules: {
        mode: 'local'
      },
    },
  },
};

ember-cli-build.js

Usage

Place a css stylesheet next to your components / templates, the plugin will resolve styles files this way:

• my-component.hbs -> my-component.css
• template.hbs -> styles.css
• index.hbs -> styles.css

You may change the styles files extension to something else by passing a custom cssExtension to the babel plugin helper like so:

// ...
plugins: [buildBabelPlugin({ cssExtension: 'module.css' })],
// will resolve my-component.module.css or styles.module.css

Why this?

You could decide to opt-in for another css module alternative under embroider but that would mean

• Updating all your components JS files to import stylesheets, then exposing them to your templates.
• Replacing all your local-class attributes with a more classic "class" attribute, updating all the strings from local-class="myClass" to something like class={{this.styles.myClass}}

This package gives you the choice of using both "new" and "local-class" approaches and still be able to compile with staticComponents on.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.