ember-codemod-remove-ember-css-modules 1.2.0 → 2.0.0

package/README.md

@@ -8,9 +8,6 @@ _Codemod to replace `ember-css-modules` with `embroider-css-modules`_
 1. [Usage](#usage)
     - [Arguments](#arguments)
     - [Limitations](#limitations)
-1. [How to refactor code](#how-to-refactor-code)
-    - [Remove code inheritance](#remove-code-inheritance)
-    - [Remove complex string concatenations](#remove-complex-string-concatenations)
 1. [Compatibility](#compatibility)
 1. [Contributing](#contributing)
 1. [License](#license)
@@ -21,30 +18,30 @@ _Codemod to replace `ember-css-modules` with `embroider-css-modules`_
 The codemod helps you:
 
 - Remove `ember-css-modules` syntax from an Embroider app
-- Set up `embroider-css-modules` on an Embroider app
 - Remove `ember-css-modules` syntax from a v2 addon
 
-It takes [`glint`](https://typed-ember.gitbook.io/glint/) into account, and preserves your code whenever possible.
+It preserves your code whenever possible.
 
 
 ## Usage
 
 You can find a migration example in [`ember-container-query`](https://github.com/ijlee2/ember-container-query/pull/167).
 
-Step 1. Quickly migrate to [`embroider-css-modules`](https://github.com/ijlee2/embroider-css-modules).<sup>1</sup>
+Step 1. Quickly remove `ember-css-modules` syntax.<sup>1</sup>
 
 ```sh
 cd <path/to/your/project>
 npx ember-codemod-remove-ember-css-modules <arguments>
 ```
 
-Step 2. Review the project.
+Manually remove the remaining instances of `local-class` attributes and `{{local-class}}` helpers.
 
-- [x] Update the configuration files.<sup>2</sup>
-- [x] Remove the remaining instances of `local-class` attributes and `{{local-class}}` helpers from `ember-css-modules`.
+Step 2. Update project configurations.
+
+- [x] Set up CSS modules (see the guides for [apps](../../docs/written-guides/set-up-css-modules-apps.md) and [v2 addons](../../docs/written-guides/set-up-css-modules-v2-addons.md)).
 - [x] Confirm that you can run all scripts in `package.json`.
 
-<sup>1. Some prerequisites for running the codemod: First, migrate to the Octane layout (flat or nested). You can leverage codemods for [classic](https://github.com/ember-codemods/ember-component-template-colocation-migrator) and [pod](https://github.com/ijlee2/ember-codemod-pod-to-octane) layouts. Second, [refactor code](#how-to-refactor-code) to help the codemod update templates correctly.</sup>
+<sup>1. Some prerequisites for running the codemod: First, migrate to the Octane layout (flat or nested). You can leverage codemods for [classic](https://github.com/ember-codemods/ember-component-template-colocation-migrator) and [pod](https://github.com/ijlee2/ember-codemod-pod-to-octane) layouts. Second, [refactor code](../../docs/refactor-code.md) to help the codemod update templates correctly.</sup>
 
 <sup>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.</sup>
 
@@ -63,7 +60,7 @@ npx ember-codemod-remove-ember-css-modules --type v2-addon
 
 <summary>Optional: Specify the component structure</summary>
 
-By default, an Octane project has the flat component structure. Pass `--component-structure` to indicate otherwise.
+By default, an Embroider project has the flat component structure. Pass `--component-structure` to indicate otherwise.
 
 ```sh
 npx ember-codemod-remove-ember-css-modules --component-structure nested
@@ -109,167 +106,6 @@ pnpm build
 ```
 
 
-## How to refactor code
-
-### Remove code inheritance
-
-`ember-css-modules` allows composing (really, inheriting) CSS code in two ways:
-
-- `composes: ... from '...';` in `*.css`
-- `{{local-class ... from="..."}}` in `*.hbs`
-
-The first syntax will continue to work in an Embroider app, provided that the import path is either `global` or a relative path.
-
-```css
-/* app/components/ui/form/textarea.css */
-.textarea {
-  composes: input from "./input.css";
-}
-
-.is-disabled {
-  composes: input-disabled from global;
-}
-
-/* These do not work */
-.textarea {
-  composes: input from "my-app/components/ui/form/input.css";
-}
-
-.textarea {
-  composes: input from "my-v2-addon/components/ui/form/input.css";
-}
-```
-
-The second syntax isn't supported by the `{{local}}` helper from `embroider-css-modules`, so you will need to update the template and stylesheet accordingly.
-
-However, note that the presence of `composes` (in a set of related components) may indicate a premature abstraction and an incorrect component design. Ideally, you might duplicate the CSS, then refactor the components. If short on time, you can import the relevant `styles` object in the backing class.
-
-<details>
-
-<summary>Before, with <code>ember-css-modules</code></summary>
-
-Case 1:
-
-```hbs
-{{! app/components/ui/form/textarea.hbs }}
-<textarea
-  class={{local-class "input" from="my-app/components/ui/form/input.css"}}
-/>
-```
-
-Case 2:
-
-```css
-/* app/components/ui/form/textarea.css */
-.textarea {
-  composes: input from "my-app/components/ui/form/input.css";
-}
-```
-
-```hbs
-{{! app/components/ui/form/textarea.hbs }}
-<textarea
-  local-class="textarea"
-/>
-```
-
-</details>
-
-<details>
-
-<summary>After, with <code>embroider-css-modules</code></summary>
-
-```ts
-/* app/components/ui/form/textarea.ts */
-import Component from '@glimmer/component';
-
-import inputStyles from './input.css';
-import styles from './textarea.css';
-
-export default class UiFormTextareaComponent extends Component {
-  inputStyles = inputStyles;
-  styles = styles;
-}
-```
-
-```hbs
-{{! app/components/ui/form/textarea.hbs }}
-<textarea
-  class={{this.inputStyles.input}}
-/>
-```
-
-</details>
-
-
-### Remove complex string concatenations
-
-In `ember-css-modules`, a string can represent multiple local class names via concatenation. In `embroider-css-modules`, each string represents exactly one.
-
-<details>
-
-<summary>Before, with <code>ember-css-modules</code></summary>
-
-```hbs
-{{! app/components/ui/form/textarea.hbs }}
-<textarea
-  local-class="
-    textarea
-    {{if (or @isDisabled @isReadOnly) 'is-disabled'}}
-  "
-/>
-```
-
-</details>
-
-<details>
-
-<summary>After, with <code>embroider-css-modules</code></summary>
-
-```hbs
-{{! app/components/ui/form/textarea.hbs }}
-<textarea
-  class={{local-class
-    this.styles
-    "textarea"
-    (if (or @isDisabled @isReadOnly) "is-disabled")
-  }}
-/>
-```
-
-</details>
-
-The codemod may fail to update complex expressions. Refactor templates to provide hints. For example, remove nested conditionals (apply them outside the HTML element) and use the `{{concat}}` helper to group substrings.
-
-<details>
-
-<summary>Before refactor, with <code>ember-css-modules</code></summary>
-
-```hbs
-{{! app/components/ui/form/phone.hbs }}
-<input
-  local-class="input flag-{{@country}}"
-  type="tel"
-/>
-```
-
-</details>
-
-<details>
-
-<summary>After refactor, with <code>ember-css-modules</code></summary>
-
-```hbs
-{{! app/components/ui/form/phone.hbs }}
-<input
-  local-class="input {{concat 'flag-' @country}}"
-  type="tel"
-/>
-```
-
-</details>
-
-
 ## Compatibility
 
 - Node.js v18 or above

package/dist/src/migration/ember-app/index.js

@@ -1,12 +1,7 @@
 import { createOptions } from '../../utils/steps/create-options.js';
-import { analyzeProject, importStylesInComponents, importStylesInRoutes, moveStylesheets, updateAppAppJs, updateComponentTemplates, updatePackageJson, updateRouteTemplates, } from './steps/index.js';
+import { analyzeProject, importStylesInComponents, importStylesInRoutes, moveStylesheets, updateComponentTemplates, updateRouteTemplates, } from './steps/index.js';
 export function migrateEmberApp(codemodOptions) {
     const options = createOptions(codemodOptions);
-    const { hasEmberCssModules } = options.project;
-    // Guarantee idempotency
-    if (!hasEmberCssModules) {
-        return;
-    }
     // Prepare for migration
     const context = analyzeProject(options);
     // Import styles in classes
@@ -16,7 +11,4 @@ export function migrateEmberApp(codemodOptions) {
     // Update templates
     updateComponentTemplates(context, options);
     updateRouteTemplates(context, options);
-    // Fine-tune individual files
-    updateAppAppJs(options);
-    updatePackageJson(options);
 }

package/dist/src/migration/ember-app/steps/index.js

@@ -2,7 +2,5 @@ export * from './analyze-project.js';
 export * from './import-styles-in-components.js';
 export * from './import-styles-in-routes.js';
 export * from './move-stylesheets.js';
-export * from './update-app-app-js.js';
 export * from './update-component-templates.js';
-export * from './update-package-json.js';
 export * from './update-route-templates.js';

package/dist/src/migration/ember-app/steps/move-stylesheets.js

@@ -1,4 +1,11 @@
 import { createFiles, findFiles, mapFilePaths, moveFiles, } from '@codemod-utils/files';
+function canSkip(options) {
+    const { projectRoot } = options;
+    const filePaths = findFiles('app/assets/app.css', {
+        projectRoot,
+    });
+    return filePaths.length === 1;
+}
 function moveRouteStylesheets(options) {
     const { projectRoot } = options;
     const filePaths = findFiles('app/styles/**/*.css', {
@@ -12,6 +19,9 @@ function moveRouteStylesheets(options) {
     moveFiles(pathMapping, options);
 }
 function moveAppCssToAssets(options) {
+    if (canSkip(options)) {
+        return;
+    }
     const { projectRoot } = options;
     const filePaths = findFiles('app/styles/app.css', {
         projectRoot,

package/dist/src/utils/blueprints.js

@@ -1,2 +1 @@
 export * from './blueprints/blueprints-root.js';
-export * from './blueprints/get-version.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-codemod-remove-ember-css-modules",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Codemod to replace ember-css-modules with embroider-css-modules",
   "keywords": [
     "codemod",
@@ -44,8 +44,8 @@
     "prettier": "^3.2.5",
     "typescript": "^5.4.2",
     "@shared-configs/eslint-config-node": "0.0.0",
-    "@shared-configs/typescript": "0.0.0",
-    "@shared-configs/prettier": "0.0.0"
+    "@shared-configs/prettier": "0.0.0",
+    "@shared-configs/typescript": "0.0.0"
   },
   "engines": {
     "node": "18.* || >= 20"

package/dist/src/migration/ember-app/steps/update-app-app-js.js

@@ -1,46 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { extname, join } from 'node:path';
-import { AST } from '@codemod-utils/ast-javascript';
-import { createFiles, findFiles } from '@codemod-utils/files';
-function addCssEntryPoint(file, data) {
-    const traverse = AST.traverse(data.isTypeScript);
-    const ast = traverse(file, {
-        visitProgram(path) {
-            const nodesToAdd = [
-                AST.builders.importDeclaration([], AST.builders.literal('./assets/app.css')),
-                AST.builders.noop(),
-            ];
-            path.value.body.unshift(...nodesToAdd);
-            return false;
-        },
-    });
-    return AST.print(ast);
-}
-export function updateAppAppJs(options) {
-    const { projectRoot } = options;
-    const filePaths = findFiles('app/app.{js,ts}', {
-        projectRoot,
-    });
-    if (filePaths.length !== 1) {
-        console.warn('WARNING: updateAppAppJs could not find app.{js,ts} in the app folder. Will skip this step.\n');
-        return;
-    }
-    const filePath = filePaths[0];
-    const fileExtension = extname(filePath);
-    const data = {
-        isTypeScript: fileExtension === '.ts',
-    };
-    try {
-        let file = readFileSync(join(projectRoot, filePath), 'utf8');
-        file = addCssEntryPoint(file, data);
-        const fileMap = new Map([[filePath, file]]);
-        createFiles(fileMap, options);
-    }
-    catch (error) {
-        let message = `WARNING: updateAppAppJs could not update \`${filePath}\`. Please update the file manually.`;
-        if (error instanceof Error) {
-            message += ` (${error.message})`;
-        }
-        console.warn(`${message}\n`);
-    }
-}

package/dist/src/migration/ember-app/steps/update-package-json.js

@@ -1,47 +0,0 @@
-import { writeFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { convertToMap, convertToObject, readPackageJson, } from '@codemod-utils/json';
-import { getVersion } from '../../../utils/blueprints.js';
-function updateDevDependencies(packageJson, options) {
-    const { project } = options;
-    const devDependencies = convertToMap(packageJson['devDependencies']);
-    const packagesToDelete = ['ember-css-modules'];
-    packagesToDelete.forEach((packageName) => {
-        devDependencies.delete(packageName);
-    });
-    const packagesToInstall = new Set([
-        '@embroider/compat',
-        '@embroider/core',
-        '@embroider/webpack',
-        'autoprefixer',
-        'embroider-css-modules',
-        'postcss',
-        'postcss-loader',
-        'webpack',
-    ]);
-    if (project.hasTypeScript) {
-        packagesToInstall.add('type-css-modules');
-    }
-    [...packagesToInstall].sort().forEach((packageName) => {
-        const version = getVersion(packageName, options);
-        devDependencies.set(packageName, version);
-    });
-    packageJson['devDependencies'] = convertToObject(devDependencies);
-}
-function updateScripts(packageJson, options) {
-    const { project } = options;
-    const scripts = convertToMap(packageJson.scripts);
-    if (project.hasTypeScript) {
-        scripts.set('prelint:types', 'type-css-modules --src app');
-    }
-    packageJson['scripts'] = convertToObject(scripts);
-}
-export function updatePackageJson(options) {
-    const { projectRoot } = options;
-    const packageJson = readPackageJson(options);
-    updateDevDependencies(packageJson, options);
-    updateScripts(packageJson, options);
-    const destination = join(projectRoot, 'package.json');
-    const file = JSON.stringify(packageJson, null, 2) + '\n';
-    writeFileSync(destination, file, 'utf8');
-}

package/dist/src/utils/blueprints/get-version.js

@@ -1,19 +0,0 @@
-import { decideVersion } from '@codemod-utils/blueprints';
-const latestVersions = new Map([
-    ['@embroider/compat', '3.2.1'],
-    ['@embroider/core', '3.2.1'],
-    ['@embroider/webpack', '3.1.5'],
-    ['autoprefixer', '10.4.15'],
-    ['embroider-css-modules', '1.0.0'],
-    ['postcss', '8.4.29'],
-    ['postcss-loader', '7.3.3'],
-    ['type-css-modules', '1.0.0'],
-    ['webpack', '5.88.2'],
-]);
-export function getVersion(packageName, options) {
-    const { project } = options;
-    return decideVersion(packageName, {
-        dependencies: project.dependencies,
-        latestVersions,
-    });
-}