ember-codemod-remove-ember-css-modules

Codemod to replace ember-css-modules with embroider-css-modules

1. Features
2. Usage
   • Arguments
   • Limitations
3. Compatibility
4. Contributing
5. License

Features

The codemod helps you:

• Remove ember-css-modules syntax from an Embroider app
• Remove ember-css-modules syntax from a v2 addon

It preserves your code whenever possible.

Usage

You can find a migration example in ember-container-query.

Step 1. Quickly remove ember-css-modules syntax.¹

cd <path/to/your/project>
npx ember-codemod-remove-ember-css-modules <arguments>

Manually remove the remaining instances of local-class attributes and {{local-class}} helpers.

Step 2. Update project configurations.²

• [x] Set up CSS modules (see the guides for apps and v2 addons).
• [x] Confirm that you can run all scripts in package.json.

^{1. Some prerequisites for running the codemod: First, migrate to the Octane layout (flat or nested). You can leverage codemods for classic and pod layouts. Second, refactor code to help the codemod update templates correctly.}

^{2. Files such as .eslintrc.js, .prettierrc.js, .stylelintrc.js, .template-lintrc.js, ember-cli-build.js, package.json, postcss.config.js, tsconfig.json, etc.}

Arguments

You must pass --type to indicate what type of project you have.

npx ember-codemod-remove-ember-css-modules --type app
npx ember-codemod-remove-ember-css-modules --type v2-addon

Optional: Specify the component structure

By default, an Embroider project has the flat component structure. Pass --component-structure to indicate otherwise.

npx ember-codemod-remove-ember-css-modules --component-structure nested

Optional: Specify the project root

Pass --root to run the codemod on a project somewhere else (i.e. not in the current directory).

npx ember-codemod-remove-ember-css-modules --root <path/to/your/project>

Limitations

The codemod is designed to cover typical uses of ember-css-modules. It is not designed to cover one-off cases.

V2 Addons

The codemod updates components only.

To better meet your needs, consider cloning the repo and running the codemod locally.

cd <path/to/cloned/repo>

# Compile TypeScript
pnpm build

# Run codemod
./dist/bin/ember-codemod-remove-ember-css-modules.js --root=<path/to/your/project>

Compatibility

• Node.js v20 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.