ember-codemod-remove-ember-css-modules 0.1.3 → 0.1.5

package/README.md

@@ -19,7 +19,7 @@ You can check [`ember-container-query`](https://github.com/ijlee2/ember-containe
 Step 1. Quickly migrate to [`embroider-css-modules`](https://github.com/ijlee2/embroider-css-modules).<sup>1</sup>
 
 ```sh
-cd <your/project/path>
+cd <path/to/your/project>
 npx ember-codemod-remove-ember-css-modules <arguments>
 ```
 
@@ -29,9 +29,7 @@ Step 2. Review the project.
 - [x] Remove the remaining instances of `local-class` attributes and `{{local-class}}` helpers from `ember-css-modules`.
 - [x] Confirm that you can run all scripts in `package.json`.
 
-Step 3. Celebrate.
-
-<sup>1. Some prerequisites for running `ember-codemod-remove-ember-css-modules`: 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](#how-to-refactor-code) 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>
 
@@ -55,7 +53,7 @@ npx ember-codemod-remove-ember-css-modules --component-structure="nested"
 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=<your/project/path>
+npx ember-codemod-remove-ember-css-modules --root=<path/to/your/project>
 ```
 
 </details>
@@ -68,8 +66,8 @@ The codemod is designed to cover typical uses of `ember-css-modules`. It is not
 To better meet your needs, consider cloning the repo and running the codemod locally.
 
 ```sh
-cd <your/cloned/repo>
-./bin/ember-codemod-remove-ember-css-modules.js --root=<your/project/path>
+cd <path/to/cloned/repo>
+./bin/ember-codemod-remove-ember-css-modules.js --root=<path/to/your/project>
 ```
 
 
@@ -181,7 +179,7 @@ In `ember-css-modules`, a string can represent multiple local class names via co
 
 </details>
 
-The codemod is not responsible for fixing 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.
+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>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-codemod-remove-ember-css-modules",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Codemod to replace ember-css-modules with embroider-css-modules",
   "keywords": [
     "codemod",
@@ -27,19 +27,17 @@
     "test": "tests"
   },
   "dependencies": {
-    "@babel/parser": "^7.21.9",
-    "@codemod-utils/blueprints": "^0.1.1",
-    "@codemod-utils/files": "^0.1.0",
-    "@codemod-utils/json": "^0.1.1",
-    "ember-template-recast": "^6.1.4",
-    "recast": "^0.23.2",
+    "@codemod-utils/ast": "^0.1.1",
+    "@codemod-utils/blueprints": "^0.1.2",
+    "@codemod-utils/files": "^0.3.1",
+    "@codemod-utils/json": "^0.2.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@codemod-utils/tests": "^0.1.0",
+    "@codemod-utils/tests": "^0.1.2",
     "@sondr3/minitest": "^0.1.1",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.41.0",
+    "concurrently": "^8.2.0",
+    "eslint": "^8.42.0",
     "prettier": "^2.8.8",
     "@shared-configs/eslint-config": "0.0.0",
     "@shared-configs/prettier": "0.0.0"

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

@@ -1,18 +1,18 @@
 import { join, parse } from 'node:path';
 
-import { findFiles, renameDirectory } from '@codemod-utils/files';
+import { findFiles, renamePathByDirectory } from '@codemod-utils/files';
 
 function findAndRenameFiles(findOptions, replaceOptions) {
   const { globPattern, ignoreList, projectRoot } = findOptions;
   const { from, to } = replaceOptions;
 
   const filePaths = findFiles(globPattern, {
-    cwd: projectRoot,
     ignoreList,
+    projectRoot,
   });
 
   return filePaths.map((filePath) => {
-    return renameDirectory(filePath, { from, to });
+    return renamePathByDirectory(filePath, { from, to });
   });
 }
 

package/src/migration/ember-app/steps/create-options.js

@@ -1,33 +1,19 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
+import { readPackageJson } from '@codemod-utils/json';
 
 function analyzePackageJson(codemodOptions) {
-  const { projectRoot } = codemodOptions;
-
-  try {
-    const packageJsonFile = readFileSync(
-      join(projectRoot, 'package.json'),
-      'utf8',
-    );
-
-    const { dependencies, devDependencies } = JSON.parse(packageJsonFile);
-
-    const projectDependencies = new Map([
-      ...Object.entries(dependencies ?? {}),
-      ...Object.entries(devDependencies ?? {}),
-    ]);
-
-    return {
-      dependencies: projectDependencies,
-      hasEmberCssModules: projectDependencies.has('ember-css-modules'),
-      hasGlint: projectDependencies.has('@glint/core'),
-      hasTypeScript: projectDependencies.has('typescript'),
-    };
-  } catch (e) {
-    throw new SyntaxError(
-      `ERROR: package.json is missing or is not valid. (${e.message})\n`,
-    );
-  }
+  const { dependencies, devDependencies } = readPackageJson(codemodOptions);
+
+  const projectDependencies = new Map([
+    ...Object.entries(dependencies ?? {}),
+    ...Object.entries(devDependencies ?? {}),
+  ]);
+
+  return {
+    dependencies: projectDependencies,
+    hasEmberCssModules: projectDependencies.has('ember-css-modules'),
+    hasGlint: projectDependencies.has('@glint/core'),
+    hasTypeScript: projectDependencies.has('typescript'),
+  };
 }
 
 export function createOptions(codemodOptions) {

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

@@ -9,8 +9,8 @@ function moveRouteStylesheets(options) {
   const { projectRoot } = options;
 
   const filePaths = findFiles('app/styles/**/*.css', {
-    cwd: projectRoot,
     ignoreList: ['app/styles/app.css'],
+    projectRoot,
   });
 
   const pathMapping = mapFilePaths(filePaths, {
@@ -25,7 +25,7 @@ function moveAppCssToAssets(options) {
   const { projectRoot } = options;
 
   const filePaths = findFiles('app/styles/app.css', {
-    cwd: projectRoot,
+    projectRoot,
   });
 
   const pathMapping = mapFilePaths(filePaths, {

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

@@ -1,15 +1,15 @@
 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 { ASTJavaScript as AST } from '../../../../utils/abstract-syntax-tree.js';
 import { blueprintsRoot } from '../../../../utils/blueprints.js';
 import { parseEntityName } from '../../../../utils/string.js';
 
 function removeTemplateOnlyComponentMethod(file, data) {
-  const traverse = AST.traverse(data.hasTypeScript);
+  const traverse = AST.traverse(data.isTypeScript);
 
   const ast = traverse(file, {
     visitCallExpression(path) {
@@ -19,7 +19,7 @@ function removeTemplateOnlyComponentMethod(file, data) {
 
       const superClass = AST.builders.identifier('Component');
 
-      if (data.hasTypeScript) {
+      if (data.isTypeScript) {
         superClass.typeAnnotation = path.value.typeParameters;
       }
 
@@ -63,7 +63,7 @@ function removeTemplateOnlyComponentMethod(file, data) {
 }
 
 function importStylesInClass(file, data) {
-  const traverse = AST.traverse(data.hasTypeScript);
+  const traverse = AST.traverse(data.isTypeScript);
 
   // Find the last import statement
   let lastImportDeclarationPath;
@@ -101,7 +101,7 @@ function importStylesInClass(file, data) {
 }
 
 function addStylesAsClassProperty(file, data) {
-  const traverse = AST.traverse(data.hasTypeScript);
+  const traverse = AST.traverse(data.isTypeScript);
 
   const ast = traverse(file, {
     visitClassDeclaration(path) {
@@ -154,25 +154,25 @@ function updateClass(customizations, options) {
   const { __styles__, projectRoot } = options;
 
   const { ext: fileExtension, name: fileName } = parse(filePath);
-  const hasTypeScript = fileExtension === '.ts';
+  const isTypeScript = fileExtension === '.ts';
 
   let file = readFileSync(join(projectRoot, filePath), 'utf8');
 
   try {
     file = removeTemplateOnlyComponentMethod(file, {
       __styles__,
-      hasTypeScript,
+      isTypeScript,
     });
 
     file = importStylesInClass(file, {
       __styles__,
       fileName,
-      hasTypeScript,
+      isTypeScript,
     });
 
     file = addStylesAsClassProperty(file, {
       __styles__,
-      hasTypeScript,
+      isTypeScript,
     });
 
     const fileMapping = new Map([[filePath, file]]);

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

@@ -1,10 +1,9 @@
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 
+import { ASTHandlebars as AST } from '@codemod-utils/ast';
 import { createFiles } from '@codemod-utils/files';
 
-import { ASTHandlebars as AST } from '../../../../utils/abstract-syntax-tree.js';
-
 function sanitizeClassAndLocalClassAttributes(file) {
   function removeAttributeWithoutValue(attributeName, attributes) {
     const attributeIndex = attributes.findIndex(
@@ -34,7 +33,9 @@ function sanitizeClassAndLocalClassAttributes(file) {
     }
   }
 
-  const ast = AST.traverse(file, {
+  const traverse = AST.traverse();
+
+  const ast = traverse(file, {
     ElementNode(node) {
       const { attributes } = node;
 
@@ -47,7 +48,9 @@ function sanitizeClassAndLocalClassAttributes(file) {
 }
 
 function mergeClassAndLocalClassAttributes(file, data) {
-  const ast = AST.traverse(file, {
+  const traverse = AST.traverse();
+
+  const ast = traverse(file, {
     ElementNode(node) {
       // Check that both class and local-class attributes exist
       const { attributes } = node;
@@ -139,7 +142,9 @@ function removeLocalClassHelpers(file, data) {
     return value === '';
   }
 
-  const ast = AST.traverse(file, {
+  const traverse = AST.traverse();
+
+  const ast = traverse(file, {
     AttrNode(node) {
       if (node.name !== 'class') {
         return;
@@ -332,7 +337,9 @@ function removeLocalClassAttributes(file, data) {
     }, []);
   }
 
-  const ast = AST.traverse(file, {
+  const traverse = AST.traverse();
+
+  const ast = traverse(file, {
     ElementNode(node) {
       // Check if the local-class attribute (still) exists
       const { attributes } = node;

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

@@ -1,12 +1,11 @@
 import { readFileSync } from 'node:fs';
 import { extname, join } from 'node:path';
 
+import { ASTJavaScript as AST } from '@codemod-utils/ast';
 import { createFiles, findFiles } from '@codemod-utils/files';
 
-import { ASTJavaScript as AST } from '../../../utils/abstract-syntax-tree.js';
-
 function addCssEntryPoint(file, data) {
-  const traverse = AST.traverse(data.hasTypeScript);
+  const traverse = AST.traverse(data.isTypeScript);
 
   const ast = traverse(file, {
     visitProgram(path) {
@@ -31,7 +30,7 @@ export function updateAppAppJs(options) {
   const { projectRoot } = options;
 
   const filePaths = findFiles('app/app.{js,ts}', {
-    cwd: projectRoot,
+    projectRoot,
   });
 
   if (filePaths.length !== 1) {
@@ -45,13 +44,13 @@ export function updateAppAppJs(options) {
   const filePath = filePaths[0];
 
   const fileExtension = extname(filePath);
-  const hasTypeScript = fileExtension === '.ts';
+  const isTypeScript = fileExtension === '.ts';
 
   let file = readFileSync(join(projectRoot, filePath), 'utf8');
 
   try {
     file = addCssEntryPoint(file, {
-      hasTypeScript,
+      isTypeScript,
     });
 
     const fileMapping = new Map([[filePath, file]]);

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

@@ -1,7 +1,11 @@
-import { readFileSync, writeFileSync } from 'node:fs';
+import { writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 
-import { convertToMap, convertToObject } from '@codemod-utils/json';
+import {
+  convertToMap,
+  convertToObject,
+  readPackageJson,
+} from '@codemod-utils/json';
 
 import { getVersion } from '../../../utils/blueprints.js';
 
@@ -46,14 +50,12 @@ function updateScripts(packageJson, options) {
 export function updatePackageJson(options) {
   const { projectRoot } = options;
 
-  const oldPath = join(projectRoot, 'package.json');
-  const oldFile = readFileSync(oldPath, 'utf8');
-  const packageJson = JSON.parse(oldFile);
-
+  const packageJson = readPackageJson(options);
   updateDevDependencies(packageJson, options);
   updateScripts(packageJson, options);
 
-  const newFile = JSON.stringify(packageJson, null, 2) + '\n';
+  const destination = join(projectRoot, 'package.json');
+  const file = JSON.stringify(packageJson, null, 2) + '\n';
 
-  writeFileSync(oldPath, newFile, 'utf8');
+  writeFileSync(destination, file, 'utf8');
 }

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

@@ -1,9 +1,9 @@
 import { decideVersion } from '@codemod-utils/blueprints';
 
 const latestVersions = new Map([
-  ['embroider-css-modules', '0.1.1'],
-  ['type-css-modules', '0.1.1'],
-  ['webpack', '5.81.0'],
+  ['embroider-css-modules', '0.1.6'],
+  ['type-css-modules', '0.1.4'],
+  ['webpack', '5.86.0'],
 ]);
 
 export function getVersion(packageName, options) {

package/src/utils/abstract-syntax-tree/handlebars.js

@@ -1,20 +0,0 @@
-import { builders, print, transform } from 'ember-template-recast';
-
-function traverseHandlebars(file, visitMethods = {}) {
-  const { ast } = transform({
-    plugin() {
-      return visitMethods;
-    },
-    template: file,
-  });
-
-  return ast;
-}
-
-const tools = {
-  builders,
-  print,
-  traverse: traverseHandlebars,
-};
-
-export default tools;

package/src/utils/abstract-syntax-tree/javascript.js

@@ -1,103 +0,0 @@
-import { parse as babelParser } from '@babel/parser';
-import { parse, print, types, visit } from 'recast';
-
-/* https://github.com/benjamn/recast/blob/v1.4.0/lib/options.ts */
-const formattingOptions = {
-  quote: 'single',
-};
-
-/* https://github.com/facebook/jscodeshift/blob/v0.14.0/parser/babel5Compat.js */
-const jsOptions = {
-  sourceType: 'module',
-  allowHashBang: true,
-  ecmaVersion: Infinity,
-  allowImportExportEverywhere: true,
-  allowReturnOutsideFunction: true,
-  startLine: 1,
-  tokens: true,
-  plugins: [
-    'estree',
-    'jsx',
-    'asyncGenerators',
-    'classProperties',
-    'doExpressions',
-    'exportExtensions',
-    'functionBind',
-    'functionSent',
-    'objectRestSpread',
-    'dynamicImport',
-    'nullishCoalescingOperator',
-    'optionalChaining',
-    [
-      'decorators',
-      {
-        decoratorsBeforeExport: false,
-      },
-    ],
-  ],
-};
-
-/* https://github.com/facebook/jscodeshift/blob/v0.14.0/parser/tsOptions.js */
-const tsOptions = {
-  sourceType: 'module',
-  allowImportExportEverywhere: true,
-  allowReturnOutsideFunction: true,
-  startLine: 1,
-  tokens: true,
-  plugins: [
-    'asyncGenerators',
-    'bigInt',
-    'classPrivateMethods',
-    'classPrivateProperties',
-    'classProperties',
-    'decorators-legacy',
-    'doExpressions',
-    'dynamicImport',
-    'exportDefaultFrom',
-    'exportExtensions',
-    'exportNamespaceFrom',
-    'functionBind',
-    'functionSent',
-    'importMeta',
-    'nullishCoalescingOperator',
-    'numericSeparator',
-    'objectRestSpread',
-    'optionalCatchBinding',
-    'optionalChaining',
-    ['pipelineOperator', { proposal: 'minimal' }],
-    'throwExpressions',
-    'typescript',
-  ],
-};
-
-function getParseOptions(hasTypeScript) {
-  const options = hasTypeScript ? tsOptions : jsOptions;
-
-  return {
-    parser: {
-      parse(file) {
-        return babelParser(file, options);
-      },
-    },
-  };
-}
-
-function traverse(hasTypeScript) {
-  return function (file, visitMethods) {
-    const ast = parse(file, getParseOptions(hasTypeScript));
-
-    visit(ast, visitMethods);
-
-    return ast;
-  };
-}
-
-const tools = {
-  builders: types.builders,
-  print(ast) {
-    return print(ast, formattingOptions).code;
-  },
-  traverse,
-};
-
-export default tools;

package/src/utils/abstract-syntax-tree.js

@@ -1,2 +0,0 @@
-export { default as ASTHandlebars } from './abstract-syntax-tree/handlebars.js';
-export { default as ASTJavaScript } from './abstract-syntax-tree/javascript.js';