migrate-from-ember-css-modules.md

Migrate from ember-css-modules

Have an Embroider app that depends on ember-css-modules? In a few steps, you can replace it with embroider-css-modules so that you can enable stricter Embroider settings.

1. Remove ember-css-modules syntax
2. Update project configurations
3. Enable stricter Embroider settings

Note

If you get lost, you can check ember-container-query for reference.

Remove ember-css-modules syntax

Run the provided codemod to get started.

# From the project root
npx ember-codemod-remove-ember-css-modules --type app

You may also want to refactor code.

Update project configurations

Please follow steps 1 and 2 for Embroider apps:

• Install dependencies
• Configure Webpack

Enable stricter Embroider settings

In ember-cli-build.js, you may now be able to apply stricter settings for Embroider.

For simplicity, only the options for @embroider/compat are shown. (The rest of the file remains the same.)

const options = {
  packagerOptions: { /* ... */ },
  skipBabel: { /* ... */ },
  staticAddonTestSupportTrees: true,
  staticAddonTrees: true, // <-- new
  staticComponents: true, // <-- new
  staticEmberSource: true,
  staticHelpers: true, // <-- new
  staticModifiers: true,
};