babel-hbs-css-modules v3.0.0

babel-hbs-css-modules

This package allow you to setup css-modules under embroider while still keeping a ember-css-modules-like experience.

1. automatically import styles next to the HBS template
2. Merge local-class attribute into class

How to use

Add the plugin to your ember-cli-build babel config:

const buildBabelPlugin = require('"babel-hbs-css-modules")
let app = new EmberApp({
  // ...
  babel: {
    plugins: [
      // ...
      buildBabelPlugin(),
    ];
  }
})

Options you can provide to buildBabelPlugin:

{
  cssExtension: "css";
}

Enable CSS modules via embroider

Enable css modules via the cssLoaderOptions in embroider

return require('@embroider/compat').compatBuild(app, Webpack, {
  packagerOptions: {
    cssLoaderOptions: {
      // enable CSS modules
      modules: {
        // css-modules configuration ...
      },
    },
  },
};

Setup a local-class helper

This package replace all local-class arguments with a local-class helper under the hood. It doesn't expose this helper right now so you have to create one by yourself:

• Create a helper under helpers/local-class.js with the following code:

import { helper } from '@ember/component/helper';

function localClass(args, { styles }) {
  return args
    .map((arg) =>
      arg
        .split(' ')
        .map((str) => {
          if (str in styles) return styles[str];
          throw new Error(`Classname ${str} doesn't exist in stylesheet`);
        })
        .join(' ')
    )
    .join(' ');
}

export default helper(localClass);

Profit

???