ember-codemod-remove-global-styles

Codemod to localize global styles

Why use it?

Moving from global styles to CSS modules can be tedious and error-prone. Run this codemod to get started.

The codemod:

• Statically analyzes code (no need to build projects)
• Supports v1 apps (classic, Webpack), v2 apps (Vite)
• Light and fast

Usage

Step 1. Quickly migrate.1,2

cd <path/to/your/project>
pnpx ember-codemod-remove-global-styles <arguments>

Step 2. Review the package.

• [x] Fix format and lint errors.3
• [x] Run tests.

1. The codemod assumes that your apps and addons follow the Octane layout (flat or nested). If not, you can run codemods to move away from classic and pod.

2. The codemod assumes a single CSS file, where you have defined all global styles that you own. You can obtain such a file by exploring the dist/assets folder.

3. If you need lint configs that support *.module.css, you can install packages from @ijlee2-frontend-configs.

Arguments

You must pass --src to indicate the location of your global stylesheet.

pnpx ember-codemod-remove-global-styles --src app/assets/app.css

By default, the codemod considers components and routes. Pass --convert to consider a subset of these.

# Components only
pnpx ember-codemod-remove-global-styles --convert components

# Routes only
pnpx ember-codemod-remove-global-styles --convert routes

By default, the codemod considers all files and folders for components, routes, and tests. Pass --entity to limit the search to 1 entity and its sub-entities (if any). You may use curly braces to specify multiple entities.

# `ui/form` only
pnpx ember-codemod-remove-global-styles --entity ui/form

# `route1` and `route2` only
pnpx ember-codemod-remove-global-styles --convert routes --entity "{route1,route2}"

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

pnpx ember-codemod-remove-global-styles --root <path/to/your/project>

Limitations

The codemod is designed to cover typical cases. It is not designed to cover one-off cases.

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-global-styles.js --root <path/to/your/project>

Compatibility

• Node.js v22 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.