ember-codemod-remove-ember-css-modules 0.1.0

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

@@ -0,0 +1,437 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { ASTHandlebars as AST } from '../../../../utils/abstract-syntax-tree.js';
+import { createFiles } from '../../../../utils/files.js';
+
+function sanitizeClassAndLocalClassAttributes(file) {
+  function removeAttributeWithoutValue(attributeName, attributes) {
+    const attributeIndex = attributes.findIndex(
+      (attribute) => attribute.name === attributeName
+    );
+
+    if (attributeIndex === -1) {
+      return;
+    }
+
+    const attribute = attributes[attributeIndex];
+
+    if (attribute.isValueless) {
+      attributes.splice(attributeIndex, 1);
+      return;
+    }
+
+    if (attribute.value.type !== 'TextNode') {
+      return;
+    }
+
+    const attributeValue = attribute.value.chars.trim();
+
+    if (attributeValue === '') {
+      attributes.splice(attributeIndex, 1);
+      return;
+    }
+  }
+
+  const ast = AST.traverse(file, {
+    ElementNode(node) {
+      const { attributes } = node;
+
+      removeAttributeWithoutValue('class', attributes);
+      removeAttributeWithoutValue('local-class', attributes);
+    },
+  });
+
+  return AST.print(ast);
+}
+
+function mergeClassAndLocalClassAttributes(file, data) {
+  const ast = AST.traverse(file, {
+    ElementNode(node) {
+      // Check that both class and local-class attributes exist
+      const { attributes } = node;
+
+      const localClassAttributeIndex = attributes.findIndex(
+        (attribute) => attribute.name === 'local-class'
+      );
+      const classAttributeIndex = attributes.findIndex(
+        (attribute) => attribute.name === 'class'
+      );
+
+      if (localClassAttributeIndex === -1 || classAttributeIndex === -1) {
+        return;
+      }
+
+      // Merge attributes only when both have TextNode values
+      const localClassAttribute = attributes[localClassAttributeIndex];
+      const classAttribute = attributes[classAttributeIndex];
+
+      if (
+        localClassAttribute.value.type !== 'TextNode' ||
+        classAttribute.value.type !== 'TextNode'
+      ) {
+        return;
+      }
+
+      const localClassAttributeValue = localClassAttribute.value.chars.trim();
+      const classAttributeValue = classAttribute.value.chars.trim();
+
+      // Update the class attribute
+      const localClassNames = localClassAttributeValue.split(/\s+/);
+      let params;
+
+      if (localClassNames.length === 1) {
+        params = [
+          AST.builders.path(`this.${data.__styles__}.${localClassNames[0]}`),
+          AST.builders.string(` ${classAttributeValue}`),
+        ];
+      } else {
+        params = [
+          AST.builders.sexpr('local-class', [
+            AST.builders.path(`this.${data.__styles__}`),
+            ...localClassNames.map(AST.builders.string),
+          ]),
+          AST.builders.string(` ${classAttributeValue}`),
+        ];
+      }
+
+      attributes[classAttributeIndex].value = AST.builders.mustache(
+        AST.builders.path('concat'),
+        params
+      );
+
+      // Remove the local-class attribute
+      attributes.splice(localClassAttributeIndex, 1);
+    },
+  });
+
+  return AST.print(ast);
+}
+
+function removeLocalClassHelpers(file, data) {
+  /*
+    The {{local-class}} helper from ember-css-modules allows
+    1 positional argument. The argument's value is presumed
+    to be a concatenated string or `undefined`.
+  */
+  function canRemoveLocalClassHelper(path) {
+    const hasFromArgument = path.hash.pairs.some((pair) => pair.key === 'from');
+
+    if (hasFromArgument) {
+      throw new RangeError(
+        `Unable to handle the {{local-class}} helper's \`from\` key. See lines ${path.loc.start.line}-${path.loc.end.line}.`
+      );
+    }
+
+    const param = path.params[0];
+
+    if (param === undefined) {
+      return true;
+    }
+
+    if (param.type !== 'StringLiteral') {
+      return false;
+    }
+
+    const value = param.value.trim();
+
+    return value === '';
+  }
+
+  const ast = AST.traverse(file, {
+    AttrNode(node) {
+      if (node.name !== 'class') {
+        return;
+      }
+
+      const hasLocalClassHelper =
+        node.value.type === 'MustacheStatement' &&
+        node.value.path.original === 'local-class';
+
+      if (!hasLocalClassHelper) {
+        return;
+      }
+
+      if (canRemoveLocalClassHelper(node.value)) {
+        return null;
+      }
+
+      const param = node.value.params[0];
+
+      if (param.type !== 'StringLiteral') {
+        return;
+      }
+
+      const localClassNames = param.value.trim().split(/\s+/);
+
+      if (localClassNames.length === 1) {
+        node.value = AST.builders.mustache(
+          AST.builders.path(`this.${data.__styles__}.${localClassNames[0]}`)
+        );
+
+        return;
+      }
+
+      node.value = AST.builders.mustache(AST.builders.path('local-class'), [
+        AST.builders.path(`this.${data.__styles__}`),
+        ...localClassNames.map(AST.builders.string),
+      ]);
+    },
+
+    SubExpression(node) {
+      const hasLocalClassHelper = node.path.original === 'local-class';
+
+      if (!hasLocalClassHelper) {
+        return;
+      }
+
+      if (canRemoveLocalClassHelper(node)) {
+        return AST.builders.string('');
+      }
+
+      const param = node.params[0];
+
+      if (param.type !== 'StringLiteral') {
+        return node;
+      }
+
+      const localClassNames = param.value.trim().split(/\s+/);
+
+      if (localClassNames.length === 1) {
+        return AST.builders.path(
+          `this.${data.__styles__}.${localClassNames[0]}`
+        );
+      }
+
+      return AST.builders.sexpr(AST.builders.path('local-class'), [
+        AST.builders.path(`this.${data.__styles__}`),
+        ...localClassNames.map(AST.builders.string),
+      ]);
+    },
+  });
+
+  return AST.print(ast);
+}
+
+function removeLocalClassAttributes(file, data) {
+  function transformParam(param) {
+    switch (param.type) {
+      case 'StringLiteral': {
+        const localClassNames = param.value.trim().split(/\s+/);
+
+        if (localClassNames.length === 1) {
+          param.value = localClassNames[0];
+        } else {
+          param = AST.builders.sexpr(
+            'array',
+            localClassNames.map(AST.builders.string)
+          );
+        }
+
+        break;
+      }
+
+      case 'SubExpression': {
+        switch (param.path.original) {
+          case 'if':
+          case 'unless': {
+            const subparams = param.params.map(transformParam);
+
+            param = AST.builders.sexpr(param.path.original, subparams);
+
+            break;
+          }
+        }
+
+        break;
+      }
+    }
+
+    return param;
+  }
+
+  function transformPart(part) {
+    switch (part.type) {
+      case 'MustacheStatement': {
+        switch (part.path.original) {
+          case 'concat': {
+            // eslint-disable-next-line no-inner-declarations
+            function hasPathExpression(params) {
+              return params.some((param) => param.type === 'PathExpression');
+            }
+
+            if (hasPathExpression(part.params)) {
+              return AST.builders.mustache(AST.builders.path('get'), [
+                AST.builders.path(`this.${data.__styles__}`),
+                AST.builders.sexpr(part.path.original, part.params),
+              ]);
+            }
+
+            const params = part.params.map(transformParam);
+
+            return AST.builders.mustache('local-class', [
+              AST.builders.path(`this.${data.__styles__}`),
+              ...params,
+            ]);
+          }
+
+          case 'if':
+          case 'unless': {
+            const params = part.params.map(transformParam);
+
+            return AST.builders.mustache('local-class', [
+              AST.builders.path(`this.${data.__styles__}`),
+              AST.builders.sexpr(part.path.original, params),
+            ]);
+          }
+
+          default: {
+            return AST.builders.mustache(AST.builders.path('get'), [
+              AST.builders.path(`this.${data.__styles__}`),
+              part.path,
+            ]);
+          }
+        }
+      }
+
+      case 'TextNode': {
+        const value = part.chars.trim();
+
+        if (value === '') {
+          return part;
+        }
+
+        const localClassNames = value.split(/\s+/);
+
+        if (localClassNames.length === 1) {
+          return AST.builders.mustache(
+            AST.builders.path(`this.${data.__styles__}.${localClassNames[0]}`)
+          );
+        }
+
+        return AST.builders.mustache(AST.builders.path('local-class'), [
+          AST.builders.path(`this.${data.__styles__}`),
+          ...localClassNames.map(AST.builders.string),
+        ]);
+      }
+    }
+  }
+
+  function transformParts(parts) {
+    const numParts = parts.length;
+
+    return parts.reduce((accumulator, part, index) => {
+      accumulator.push(transformPart(part));
+
+      if (index < numParts - 1) {
+        accumulator.push(AST.builders.text(' '));
+      }
+
+      return accumulator;
+    }, []);
+  }
+
+  const ast = AST.traverse(file, {
+    ElementNode(node) {
+      // Check if the local-class attribute (still) exists
+      const { attributes } = node;
+
+      const localClassAttributeIndex = attributes.findIndex(
+        (attribute) => attribute.name === 'local-class'
+      );
+
+      if (localClassAttributeIndex === -1) {
+        return;
+      }
+
+      // Change the local-class attribute to class
+      const localClassAttribute = attributes[localClassAttributeIndex];
+
+      switch (localClassAttribute.value.type) {
+        case 'ConcatStatement': {
+          localClassAttribute.name = 'class';
+          localClassAttribute.value.parts = transformParts(
+            localClassAttribute.value.parts
+          );
+
+          break;
+        }
+
+        case 'MustacheStatement': {
+          localClassAttribute.name = 'class';
+          localClassAttribute.value = transformPart(localClassAttribute.value);
+
+          break;
+        }
+
+        case 'TextNode': {
+          localClassAttribute.name = 'class';
+          localClassAttribute.value = transformPart(localClassAttribute.value);
+
+          break;
+        }
+      }
+    },
+
+    HashPair(node) {
+      if (node.key !== 'local-class') {
+        return;
+      }
+
+      node.key = 'class';
+      node.value = AST.builders.sexpr('local-class', [
+        AST.builders.path(`this.${data.__styles__}`),
+        transformParam(node.value),
+      ]);
+    },
+  });
+
+  return AST.print(ast);
+}
+
+function updateTemplate(customizations, options) {
+  const { filePath } = customizations;
+  const { __styles__, projectRoot } = options;
+
+  let file = readFileSync(join(projectRoot, filePath), 'utf8');
+
+  try {
+    file = sanitizeClassAndLocalClassAttributes(file);
+
+    file = mergeClassAndLocalClassAttributes(file, {
+      __styles__,
+    });
+
+    file = removeLocalClassHelpers(file, {
+      __styles__,
+    });
+
+    file = removeLocalClassAttributes(file, {
+      __styles__,
+    });
+
+    const fileMapping = new Map([[filePath, file]]);
+
+    createFiles(fileMapping, options);
+  } catch (e) {
+    console.warn(
+      `WARNING: updateTemplate could not update \`${filePath}\`. Please update the file manually. (${e.message})\n`
+    );
+  }
+}
+
+export function updateTemplates(customizations, options) {
+  const { entities, getFilePath } = customizations;
+
+  for (const [entityName, extensions] of entities) {
+    const hasTemplate = extensions.has('.hbs');
+
+    if (!hasTemplate) {
+      continue;
+    }
+
+    const filePath = getFilePath(entityName);
+
+    updateTemplate({ filePath }, options);
+  }
+}

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

@@ -0,0 +1,64 @@
+import { readFileSync } from 'node:fs';
+import { extname, join } from 'node:path';
+
+import { ASTJavaScript as AST } from '../../../utils/abstract-syntax-tree.js';
+import { createFiles, findFiles } from '../../../utils/files.js';
+
+function addCssEntryPoint(file, data) {
+  const traverse = AST.traverse(data.hasTypeScript);
+
+  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}', {
+    cwd: 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 hasTypeScript = fileExtension === '.ts';
+
+  let file = readFileSync(join(projectRoot, filePath), 'utf8');
+
+  try {
+    file = addCssEntryPoint(file, {
+      hasTypeScript,
+    });
+
+    const fileMapping = new Map([[filePath, file]]);
+
+    createFiles(fileMapping, options);
+  } catch (e) {
+    console.warn(
+      `WARNING: updateAppAppJs could not update \`${filePath}\`. Please update the file manually. (${e.message})\n`
+    );
+  }
+}

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

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

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

@@ -0,0 +1,58 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { decideVersion } from '../../../utils/blueprints.js';
+import { convertToMap, convertToObject } from '../../../utils/json.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-css-modules']);
+
+  if (project.hasTypeScript) {
+    packagesToInstall.add('type-css-modules');
+  }
+
+  [...packagesToInstall].sort().forEach((packageName) => {
+    const version = decideVersion(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 oldPath = join(projectRoot, 'package.json');
+  const oldFile = readFileSync(oldPath, 'utf8');
+  const packageJson = JSON.parse(oldFile);
+
+  updateDevDependencies(packageJson, options);
+  updateScripts(packageJson, options);
+
+  const newFile = JSON.stringify(packageJson, null, 2) + '\n';
+
+  writeFileSync(oldPath, newFile, 'utf8');
+}

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

@@ -0,0 +1,22 @@
+import { join } from 'node:path';
+
+import { updateTemplates } from './shared/index.js';
+
+function getFilePath() {
+  return function (entityName) {
+    let filePath = join('app/templates', entityName);
+
+    filePath += '.hbs';
+
+    return filePath;
+  };
+}
+
+export function updateRouteTemplates(context, options) {
+  const customizations = {
+    entities: context.routes,
+    getFilePath: getFilePath(),
+  };
+
+  updateTemplates(customizations, options);
+}

package/src/migration/index.js

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

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

@@ -0,0 +1,20 @@
+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;