ember-codemod-remove-ember-css-modules 0.3.0 → 0.4.0

package/README.md

@@ -4,6 +4,17 @@
 
 _Codemod to replace `ember-css-modules` with `embroider-css-modules`_
 
+1. [Features](#features)
+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)
+
 
 ## Features
 
@@ -98,7 +109,7 @@ Case 1:
 ```hbs
 {{! app/components/ui/form/textarea.hbs }}
 <textarea
-  class={{local-class "input" from "app/components/ui/form/input.css"}}
+  class={{local-class "input" from="app/components/ui/form/input.css"}}
 />
 ```
 
@@ -217,7 +228,7 @@ The codemod may fail to update complex expressions. Refactor templates to provid
 
 ## Compatibility
 
-* Node.js v16 or above
+- Node.js v16 or above
 
 
 ## Contributing

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

@@ -0,0 +1,43 @@
+import { findFiles, renamePathByDirectory } from '@codemod-utils/files';
+import { analyzeFilePaths } from './analyze-file-paths.js';
+export function analyzeComponents(options) {
+    const { componentStructure, projectRoot } = options;
+    const classFilePaths = findFiles('app/components/**/*.{js,ts}', {
+        ignoreList: ['app/components/**/*.d.ts'],
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/components',
+            to: '',
+        });
+    });
+    const stylesheetFilePaths = findFiles('app/components/**/*.css', {
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/components',
+            to: '',
+        });
+    });
+    const templateFilePaths = findFiles('app/components/**/*.hbs', {
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/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-app/steps/analyze-app/analyze-file-paths.js

@@ -0,0 +1,15 @@
+import { join, parse } from 'node:path';
+export function analyzeFilePaths(filePaths) {
+    const entities = new Map();
+    filePaths.forEach((filePath) => {
+        const { dir, ext, name } = parse(filePath);
+        const entityName = join(dir, name);
+        if (entities.has(entityName)) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            entities.get(entityName).add(ext);
+            return;
+        }
+        entities.set(entityName, new Set([ext]));
+    });
+    return entities;
+}

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

@@ -0,0 +1,38 @@
+import { findFiles, renamePathByDirectory } from '@codemod-utils/files';
+import { analyzeFilePaths } from './analyze-file-paths.js';
+export function analyzeRoutes(options) {
+    const { projectRoot } = options;
+    const classFilePaths = findFiles('app/controllers/**/*.{js,ts}', {
+        ignoreList: ['app/controllers/**/*.d.ts'],
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/controllers',
+            to: '',
+        });
+    });
+    const stylesheetFilePaths = findFiles('app/styles/**/*.css', {
+        ignoreList: ['app/styles/app.css'],
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/styles',
+            to: '',
+        });
+    });
+    const templateFilePaths = findFiles('app/templates/**/*.hbs', {
+        ignoreList: ['app/templates/components/**/*'],
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/templates',
+            to: '',
+        });
+    });
+    const filePaths = [
+        ...classFilePaths,
+        ...stylesheetFilePaths,
+        ...templateFilePaths,
+    ].sort();
+    return analyzeFilePaths(filePaths);
+}

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

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

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

@@ -1,96 +1,4 @@
-import { join, parse } from 'node:path';
-import { findFiles, renamePathByDirectory } from '@codemod-utils/files';
-function analyzeFilePaths(filePaths) {
-    const entities = new Map();
-    filePaths.forEach((filePath) => {
-        const { dir, ext, name } = parse(filePath);
-        const entityName = join(dir, name);
-        if (entities.has(entityName)) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            entities.get(entityName).add(ext);
-            return;
-        }
-        entities.set(entityName, new Set([ext]));
-    });
-    return entities;
-}
-function analyzeComponents(options) {
-    const { componentStructure, projectRoot } = options;
-    const classFilePaths = findFiles('app/components/**/*.{js,ts}', {
-        ignoreList: ['app/components/**/*.d.ts'],
-        projectRoot,
-    }).map((filePath) => {
-        return renamePathByDirectory(filePath, {
-            from: 'app/components',
-            to: '',
-        });
-    });
-    const stylesheetFilePaths = findFiles('app/components/**/*.css', {
-        projectRoot,
-    }).map((filePath) => {
-        return renamePathByDirectory(filePath, {
-            from: 'app/components',
-            to: '',
-        });
-    });
-    const templateFilePaths = findFiles('app/components/**/*.hbs', {
-        projectRoot,
-    }).map((filePath) => {
-        return renamePathByDirectory(filePath, {
-            from: 'app/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;
-}
-function analyzeRoutes(options) {
-    const { projectRoot } = options;
-    const classFilePaths = findFiles('app/controllers/**/*.{js,ts}', {
-        ignoreList: ['app/controllers/**/*.d.ts'],
-        projectRoot,
-    }).map((filePath) => {
-        return renamePathByDirectory(filePath, {
-            from: 'app/controllers',
-            to: '',
-        });
-    });
-    const stylesheetFilePaths = findFiles('app/styles/**/*.css', {
-        ignoreList: ['app/styles/app.css'],
-        projectRoot,
-    }).map((filePath) => {
-        return renamePathByDirectory(filePath, {
-            from: 'app/styles',
-            to: '',
-        });
-    });
-    const templateFilePaths = findFiles('app/templates/**/*.hbs', {
-        ignoreList: ['app/templates/components/**/*'],
-        projectRoot,
-    }).map((filePath) => {
-        return renamePathByDirectory(filePath, {
-            from: 'app/templates',
-            to: '',
-        });
-    });
-    const filePaths = [
-        ...classFilePaths,
-        ...stylesheetFilePaths,
-        ...templateFilePaths,
-    ].sort();
-    return analyzeFilePaths(filePaths);
-}
+import { analyzeComponents, analyzeRoutes } from './analyze-app/index.js';
 export function analyzeApp(options) {
     return {
         components: analyzeComponents(options),

package/dist/src/migration/ember-app/steps/import-styles/create-class.js

@@ -0,0 +1,20 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { processTemplate } from '@codemod-utils/blueprints';
+import { createFiles } from '@codemod-utils/files';
+import { blueprintsRoot } from '../../../../utils/blueprints.js';
+import { parseEntityName } from '../../../../utils/string.js';
+export function createClass(entityName, { customizations, options }) {
+    const { blueprintFilePaths, getFilePath } = customizations;
+    const entity = parseEntityName(entityName);
+    const filePath = getFilePath(entityName);
+    const fileMap = new Map(blueprintFilePaths.map((blueprintFilePath) => {
+        const blueprintFile = readFileSync(join(blueprintsRoot, blueprintFilePath), 'utf8');
+        const file = processTemplate(blueprintFile, {
+            entity,
+            options,
+        });
+        return [filePath, file];
+    }));
+    createFiles(fileMap, options);
+}

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

@@ -0,0 +1,16 @@
+import { createClass } from './create-class.js';
+import { updateClass } from './update-class.js';
+export function importStyles(entities, options) {
+    for (const [entityName, extensions] of entities) {
+        const hasClass = extensions.has('.js') || extensions.has('.ts');
+        const hasStylesheet = extensions.has('.css');
+        if (!hasStylesheet) {
+            continue;
+        }
+        if (!hasClass) {
+            createClass(entityName, options);
+            continue;
+        }
+        updateClass(entityName, options);
+    }
+}

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

@@ -2,10 +2,7 @@
 import { readFileSync } from 'node:fs';
 import { join, parse } from 'node:path';
 import { ASTJavaScript as AST } from '@codemod-utils/ast';
-import { processTemplate } from '@codemod-utils/blueprints';
 import { createFiles } from '@codemod-utils/files';
-import { blueprintsRoot } from '../../../../utils/blueprints.js';
-import { parseEntityName } from '../../../../utils/string.js';
 function removeTemplateOnlyComponentMethod(file, data) {
     const traverse = AST.traverse(data.isTypeScript);
     const ast = traverse(file, {
@@ -80,21 +77,7 @@ function addStylesAsClassProperty(file, data) {
     });
     return AST.print(ast);
 }
-function createClass(entityName, { customizations, options }) {
-    const { blueprintFilePaths, getFilePath } = customizations;
-    const entity = parseEntityName(entityName);
-    const filePath = getFilePath(entityName);
-    const fileMap = new Map(blueprintFilePaths.map((blueprintFilePath) => {
-        const blueprintFile = readFileSync(join(blueprintsRoot, blueprintFilePath), 'utf8');
-        const file = processTemplate(blueprintFile, {
-            entity,
-            options,
-        });
-        return [filePath, file];
-    }));
-    createFiles(fileMap, options);
-}
-function updateClass(entityName, { customizations, options }) {
+export function updateClass(entityName, { customizations, options }) {
     const { getFilePath } = customizations;
     const { __styles__, projectRoot } = options;
     const filePath = getFilePath(entityName);
@@ -120,17 +103,3 @@ function updateClass(entityName, { customizations, options }) {
         console.warn(`${message}\n`);
     }
 }
-export function importStyles(entities, options) {
-    for (const [entityName, extensions] of entities) {
-        const hasClass = extensions.has('.js') || extensions.has('.ts');
-        const hasStylesheet = extensions.has('.css');
-        if (!hasStylesheet) {
-            continue;
-        }
-        if (!hasClass) {
-            createClass(entityName, options);
-            continue;
-        }
-        updateClass(entityName, 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 './shared/import-styles.js';
+import { importStyles } from './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 './shared/import-styles.js';
+import { importStyles } from './import-styles/index.js';
 function getBlueprintFilePaths(options) {
     const { project } = options;
     if (project.hasTypeScript) {

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

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

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

@@ -9,7 +9,16 @@ function updateDevDependencies(packageJson, options) {
     packagesToDelete.forEach((packageName) => {
         devDependencies.delete(packageName);
     });
-    const packagesToInstall = new Set(['embroider-css-modules']);
+    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');
     }

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

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

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

@@ -0,0 +1,10 @@
+import { updateTemplate } from './update-template.js';
+export function updateTemplates(entities, options) {
+    for (const [entityName, extensions] of entities) {
+        const hasTemplate = extensions.has('.hbs');
+        if (!hasTemplate) {
+            continue;
+        }
+        updateTemplate(entityName, options);
+    }
+}

package/dist/src/migration/ember-app/steps/{shared/update-templates.js → update-templates/update-template.js}

@@ -327,7 +327,7 @@ function removeLocalClassAttributes(file, data) {
     });
     return AST.print(ast);
 }
-function updateTemplate(entityName, { customizations, options }) {
+export function updateTemplate(entityName, { customizations, options }) {
     const { getFilePath } = customizations;
     const { __styles__, projectRoot } = options;
     const filePath = getFilePath(entityName);
@@ -351,12 +351,3 @@ function updateTemplate(entityName, { customizations, options }) {
         console.warn(`${message}\n`);
     }
 }
-export function updateTemplates(entities, options) {
-    for (const [entityName, extensions] of entities) {
-        const hasTemplate = extensions.has('.hbs');
-        if (!hasTemplate) {
-            continue;
-        }
-        updateTemplate(entityName, options);
-    }
-}

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

@@ -1,8 +1,14 @@
 import { decideVersion } from '@codemod-utils/blueprints';
 const latestVersions = new Map([
-    ['embroider-css-modules', '0.1.7'],
-    ['type-css-modules', '0.1.5'],
-    ['webpack', '5.86.0'],
+    ['@embroider/compat', '3.0.2'],
+    ['@embroider/core', '3.0.2'],
+    ['@embroider/webpack', '3.0.0'],
+    ['autoprefixer', '10.4.14'],
+    ['embroider-css-modules', '0.1.9'],
+    ['postcss', '8.4.24'],
+    ['postcss-loader', '7.3.3'],
+    ['type-css-modules', '0.2.2'],
+    ['webpack', '5.87.0'],
 ]);
 export function getVersion(packageName, options) {
     const { project } = options;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-codemod-remove-ember-css-modules",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Codemod to replace ember-css-modules with embroider-css-modules",
   "keywords": [
     "codemod",
@@ -38,12 +38,12 @@
     "@types/node": "^16.11.7",
     "@types/yargs": "^17.0.24",
     "concurrently": "^8.2.0",
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
     "prettier": "^2.8.8",
     "typescript": "^5.1.3",
     "@shared-configs/eslint-config-node": "0.0.0",
-    "@shared-configs/prettier": "0.0.0",
-    "@shared-configs/typescript": "0.0.0"
+    "@shared-configs/typescript": "0.0.0",
+    "@shared-configs/prettier": "0.0.0"
   },
   "engines": {
     "node": "16.* || >= 18"