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

package/README.md

@@ -18,14 +18,18 @@ _Codemod to replace `ember-css-modules` with `embroider-css-modules`_
 
 ## Features
 
-- Preserves your code whenever possible
-- Supports [`glint`](https://typed-ember.gitbook.io/glint/)
-- Focuses on maintainability and extensibility
+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.
 
 
 ## Usage
 
-You can check [`ember-container-query`](https://github.com/ijlee2/ember-container-query/pull/167) as a reference.
+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>
 
@@ -47,24 +51,34 @@ Step 2. Review the project.
 
 ### Arguments
 
+You must pass `--type` to indicate what type of project you have.
+
+```sh
+npx ember-codemod-remove-ember-css-modules --type app
+npx ember-codemod-remove-ember-css-modules --type v2-addon
+```
+
+
 <details>
+
 <summary>Optional: Specify the component structure</summary>
 
 By default, an Octane project has the flat component structure. Pass `--component-structure` to indicate otherwise.
 
 ```sh
-npx ember-codemod-remove-ember-css-modules --component-structure="nested"
+npx ember-codemod-remove-ember-css-modules --component-structure nested
 ```
 
 </details>
 
 <details>
+
 <summary>Optional: Specify the project root</summary>
 
 Pass `--root` to run the codemod on a project somewhere else (i.e. not in the current directory).
 
 ```sh
-npx ember-codemod-remove-ember-css-modules --root=<path/to/your/project>
+npx ember-codemod-remove-ember-css-modules --root <path/to/your/project>
 ```
 
 </details>
@@ -74,6 +88,14 @@ npx ember-codemod-remove-ember-css-modules --root=<path/to/your/project>
 
 The codemod is designed to cover typical uses of `ember-css-modules`. It is not designed to cover one-off cases.
 
+<details>
+
+<summary>V2 Addons</summary>
+
+The codemod updates components only. Please see [Set up CSS modules (v2 addons)](../../docs/written-guides/set-up-css-modules-v2-addons.md) to set up `embroider-css-modules`.
+
+</details>
+
 To better meet your needs, consider cloning the repo and running the codemod locally.
 
 ```sh

package/dist/bin/ember-codemod-remove-ember-css-modules.js

@@ -17,10 +17,17 @@ const argv = yargs(hideBin(process.argv))
     .option('root', {
     describe: 'Location of your Ember project',
     type: 'string',
+})
+    .option('type', {
+    choices: ['app', 'v2-addon'],
+    demandOption: true,
+    describe: 'Type of your Ember project',
+    type: 'string',
 })
     .parseSync();
 const codemodOptions = {
     componentStructure: argv['component-structure'],
     projectRoot: argv['root'] ?? process.cwd(),
+    projectType: argv['type'],
 };
 removeEmberCssModules(codemodOptions);

package/dist/src/index.js

@@ -1,4 +1,13 @@
-import { migrateEmberApp } from './migration/index.js';
+import { migrateEmberApp, migrateEmberV2Addon } from './migration/index.js';
 export function removeEmberCssModules(codemodOptions) {
-    migrateEmberApp(codemodOptions);
+    switch (codemodOptions.projectType) {
+        case 'app': {
+            migrateEmberApp(codemodOptions);
+            break;
+        }
+        case 'v2-addon': {
+            migrateEmberV2Addon(codemodOptions);
+            break;
+        }
+    }
 }

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

@@ -1,4 +1,5 @@
-import { analyzeApp, createOptions, importStylesInComponents, importStylesInRoutes, moveStylesheets, updateAppAppJs, updateComponentTemplates, updatePackageJson, updateRouteTemplates, } from './steps/index.js';
+import { createOptions } from '../../utils/steps/create-options.js';
+import { analyzeProject, importStylesInComponents, importStylesInRoutes, moveStylesheets, updateAppAppJs, updateComponentTemplates, updatePackageJson, updateRouteTemplates, } from './steps/index.js';
 export function migrateEmberApp(codemodOptions) {
     const options = createOptions(codemodOptions);
     const { hasEmberCssModules } = options.project;
@@ -7,7 +8,7 @@ export function migrateEmberApp(codemodOptions) {
         return;
     }
     // Prepare for migration
-    const context = analyzeApp(options);
+    const context = analyzeProject(options);
     // Import styles in classes
     moveStylesheets(options);
     importStylesInComponents(context, options);

package/dist/src/migration/ember-app/steps/{analyze-app → analyze-project}/analyze-components.js

@@ -1,5 +1,5 @@
 import { findFiles, renamePathByDirectory } from '@codemod-utils/files';
-import { analyzeFilePaths } from './analyze-file-paths.js';
+import { analyzeFilePaths } from '../../../../utils/steps/analyze-project/analyze-file-paths.js';
 export function analyzeComponents(options) {
     const { componentStructure, projectRoot } = options;
     const classFilePaths = findFiles('app/components/**/*.{js,ts}', {

package/dist/src/migration/ember-app/steps/{analyze-app → analyze-project}/analyze-routes.js

@@ -1,5 +1,5 @@
 import { findFiles, renamePathByDirectory } from '@codemod-utils/files';
-import { analyzeFilePaths } from './analyze-file-paths.js';
+import { analyzeFilePaths } from '../../../../utils/steps/analyze-project/analyze-file-paths.js';
 export function analyzeRoutes(options) {
     const { projectRoot } = options;
     const classFilePaths = findFiles('app/controllers/**/*.{js,ts}', {

package/dist/src/migration/ember-app/steps/analyze-project.js

@@ -0,0 +1,7 @@
+import { analyzeComponents, analyzeRoutes } from './analyze-project/index.js';
+export function analyzeProject(options) {
+    return {
+        components: analyzeComponents(options),
+        routes: analyzeRoutes(options),
+    };
+}

package/dist/src/migration/ember-app/steps/import-styles-in-components.js

@@ -1,5 +1,5 @@
 import { join } from 'node:path';
-import { importStyles } from './import-styles/index.js';
+import { importStyles } from '../../../utils/steps/import-styles/index.js';
 function getBlueprintFilePaths(options) {
     const { project } = options;
     if (project.hasTypeScript) {

package/dist/src/migration/ember-app/steps/import-styles-in-routes.js

@@ -1,5 +1,5 @@
 import { join } from 'node:path';
-import { importStyles } from './import-styles/index.js';
+import { importStyles } from '../../../utils/steps/import-styles/index.js';
 function getBlueprintFilePaths(options) {
     const { project } = options;
     if (project.hasTypeScript) {

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

@@ -1,5 +1,4 @@
-export * from './analyze-app.js';
-export * from './create-options.js';
+export * from './analyze-project.js';
 export * from './import-styles-in-components.js';
 export * from './import-styles-in-routes.js';
 export * from './move-stylesheets.js';

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

@@ -1,5 +1,5 @@
 import { join } from 'node:path';
-import { updateTemplates } from './update-templates/index.js';
+import { updateTemplates } from '../../../utils/steps/update-templates/index.js';
 function getFilePath(options) {
     const { componentStructure } = options;
     return function (entityName) {

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

@@ -1,5 +1,5 @@
 import { join } from 'node:path';
-import { updateTemplates } from './update-templates/index.js';
+import { updateTemplates } from '../../../utils/steps/update-templates/index.js';
 function getFilePath() {
     return function (entityName) {
         let filePath = join('app/templates', entityName);

package/dist/src/migration/ember-v2-addon/index.js

@@ -0,0 +1,8 @@
+import { createOptions } from '../../utils/steps/create-options.js';
+import { analyzeProject, importStylesInComponents, updateComponentTemplates, } from './steps/index.js';
+export function migrateEmberV2Addon(codemodOptions) {
+    const options = createOptions(codemodOptions);
+    const context = analyzeProject(options);
+    importStylesInComponents(context, options);
+    updateComponentTemplates(context, options);
+}

package/dist/src/migration/ember-v2-addon/steps/analyze-project/analyze-components.js

@@ -0,0 +1,43 @@
+import { findFiles, renamePathByDirectory } from '@codemod-utils/files';
+import { analyzeFilePaths } from '../../../../utils/steps/analyze-project/analyze-file-paths.js';
+export function analyzeComponents(options) {
+    const { componentStructure, projectRoot } = options;
+    const classFilePaths = findFiles('src/components/**/*.{js,ts}', {
+        ignoreList: ['src/components/**/*.d.ts'],
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'src/components',
+            to: '',
+        });
+    });
+    const stylesheetFilePaths = findFiles('src/components/**/*.css', {
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'src/components',
+            to: '',
+        });
+    });
+    const templateFilePaths = findFiles('src/components/**/*.hbs', {
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'src/components',
+            to: '',
+        });
+    });
+    const filePaths = [
+        ...classFilePaths,
+        ...stylesheetFilePaths,
+        ...templateFilePaths,
+    ].sort();
+    const entities = analyzeFilePaths(filePaths);
+    if (componentStructure === 'nested') {
+        return new Map(Array.from(entities.entries()).map(([entityName, extensions]) => {
+            const newEntityName = entityName.replace(/\/index$/, '');
+            return [newEntityName, extensions];
+        }));
+    }
+    return entities;
+}

package/dist/src/migration/ember-v2-addon/steps/analyze-project/index.js

@@ -0,0 +1 @@
+export * from './analyze-components.js';

package/dist/src/migration/ember-v2-addon/steps/analyze-project.js

@@ -0,0 +1,7 @@
+import { analyzeComponents } from './analyze-project/index.js';
+export function analyzeProject(options) {
+    return {
+        components: analyzeComponents(options),
+        routes: new Map(),
+    };
+}

package/dist/src/migration/ember-v2-addon/steps/import-styles-in-components.js

@@ -0,0 +1,35 @@
+import { join } from 'node:path';
+import { importStyles } from '../../../utils/steps/import-styles/index.js';
+function getBlueprintFilePaths(options) {
+    const { project } = options;
+    if (project.hasTypeScript) {
+        return ['ember-cli/component/typescript.ts'];
+    }
+    return ['ember-cli/component/javascript.js'];
+}
+function getFilePath(options) {
+    const { componentStructure, project } = options;
+    return function (entityName) {
+        let filePath = join('src/components', entityName);
+        if (componentStructure === 'nested') {
+            filePath += '/index';
+        }
+        if (project.hasTypeScript) {
+            filePath += '.ts';
+        }
+        else {
+            filePath += '.js';
+        }
+        return filePath;
+    };
+}
+export function importStylesInComponents(context, options) {
+    const customizations = {
+        blueprintFilePaths: getBlueprintFilePaths(options),
+        getFilePath: getFilePath(options),
+    };
+    importStyles(context.components, {
+        customizations,
+        options,
+    });
+}

package/dist/src/migration/ember-v2-addon/steps/index.js

@@ -0,0 +1,3 @@
+export * from './analyze-project.js';
+export * from './import-styles-in-components.js';
+export * from './update-component-templates.js';

package/dist/src/migration/ember-v2-addon/steps/update-component-templates.js

@@ -0,0 +1,22 @@
+import { join } from 'node:path';
+import { updateTemplates } from '../../../utils/steps/update-templates/index.js';
+function getFilePath(options) {
+    const { componentStructure } = options;
+    return function (entityName) {
+        let filePath = join('src/components', entityName);
+        if (componentStructure === 'nested') {
+            filePath += '/index';
+        }
+        filePath += '.hbs';
+        return filePath;
+    };
+}
+export function updateComponentTemplates(context, options) {
+    const customizations = {
+        getFilePath: getFilePath(options),
+    };
+    updateTemplates(context.components, {
+        customizations,
+        options,
+    });
+}

package/dist/src/migration/index.js

@@ -1 +1,2 @@
 export * from './ember-app/index.js';
+export * from './ember-v2-addon/index.js';

package/dist/src/{migration/ember-app → utils}/steps/create-options.js

@@ -13,11 +13,12 @@ function analyzePackageJson(codemodOptions) {
     };
 }
 export function createOptions(codemodOptions) {
+    const { componentStructure, projectRoot, projectType } = codemodOptions;
     const project = analyzePackageJson(codemodOptions);
-    const options = {
-        componentStructure: codemodOptions.componentStructure,
+    return {
+        componentStructure,
         project,
-        projectRoot: codemodOptions.projectRoot,
+        projectRoot,
+        projectType,
     };
-    return options;
 }

package/dist/src/{migration/ember-app → utils}/steps/import-styles/create-class.js

@@ -3,7 +3,7 @@ import { join } from 'node:path';
 import { processTemplate } from '@codemod-utils/blueprints';
 import { classify, doubleColonize } from '@codemod-utils/ember-cli-string';
 import { createFiles, parseFilePath } from '@codemod-utils/files';
-import { blueprintsRoot } from '../../../../utils/blueprints.js';
+import { blueprintsRoot } from '../../blueprints.js';
 export function createClass(entityName, { customizations, options }) {
     const { blueprintFilePaths, getFilePath } = customizations;
     const entity = {

package/dist/src/{migration/ember-app → utils}/steps/import-styles/update-class.js

@@ -3,6 +3,19 @@ import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { AST } from '@codemod-utils/ast-javascript';
 import { createFiles, parseFilePath } from '@codemod-utils/files';
+function canSkip(file, data) {
+    const traverse = AST.traverse(data.isTypeScript);
+    let canSkip = false;
+    traverse(file, {
+        visitImportDeclaration(path) {
+            if (path.node.source.value === `./${data.fileName}.css`) {
+                canSkip = true;
+            }
+            return false;
+        },
+    });
+    return canSkip;
+}
 function removeTemplateOnlyComponentMethod(file, data) {
     const traverse = AST.traverse(data.isTypeScript);
     const ast = traverse(file, {
@@ -86,6 +99,9 @@ export function updateClass(entityName, { customizations, options }) {
     };
     try {
         let file = readFileSync(join(projectRoot, filePath), 'utf8');
+        if (canSkip(file, data)) {
+            return;
+        }
         file = removeTemplateOnlyComponentMethod(file, data);
         file = importStylesInClass(file, data);
         file = addStylesAsClassProperty(file, data);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-codemod-remove-ember-css-modules",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Codemod to replace ember-css-modules with embroider-css-modules",
   "keywords": [
     "codemod",
@@ -37,15 +37,15 @@
   "devDependencies": {
     "@codemod-utils/tests": "^1.1.2",
     "@sondr3/minitest": "^0.1.2",
-    "@types/node": "^18.19.17",
+    "@types/node": "^18.19.23",
     "@types/yargs": "^17.0.32",
     "concurrently": "^8.2.2",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "prettier": "^3.2.5",
-    "typescript": "^5.3.3",
+    "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/eslint-config-node": "0.0.0"
+    "@shared-configs/prettier": "0.0.0"
   },
   "engines": {
     "node": "18.* || >= 20"

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

@@ -1,7 +0,0 @@
-import { analyzeComponents, analyzeRoutes } from './analyze-app/index.js';
-export function analyzeApp(options) {
-    return {
-        components: analyzeComponents(options),
-        routes: analyzeRoutes(options),
-    };
-}