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

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

@@ -0,0 +1,39 @@
+import { join } from 'node:path';
+
+import { importStyles } from './shared/index.js';
+
+function getBlueprintFilePaths(options) {
+  const { project } = options;
+
+  if (project.hasTypeScript) {
+    return ['ember-cli/controller/typescript.ts'];
+  }
+
+  return ['ember-cli/controller/javascript.js'];
+}
+
+function getFilePath(options) {
+  const { project } = options;
+
+  return function (entityName) {
+    let filePath = join('app/controllers', entityName);
+
+    if (project.hasTypeScript) {
+      filePath += '.ts';
+    } else {
+      filePath += '.js';
+    }
+
+    return filePath;
+  };
+}
+
+export function importStylesInRoutes(context, options) {
+  const customizations = {
+    blueprintFilePaths: getBlueprintFilePaths(options),
+    entities: context.routes,
+    getFilePath: getFilePath(options),
+  };
+
+  importStyles(customizations, options);
+}

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

@@ -0,0 +1,9 @@
+export * from './analyze-app.js';
+export * from './create-options.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/src/migration/ember-app/steps/move-stylesheets.js

@@ -0,0 +1,51 @@
+import {
+  createFiles,
+  findFiles,
+  mapFilePaths,
+  moveFiles,
+} from '../../../utils/files.js';
+
+function moveRouteStylesheets(options) {
+  const { projectRoot } = options;
+
+  const filePaths = findFiles('app/styles/**/*.css', {
+    cwd: projectRoot,
+    ignoreList: ['app/styles/app.css'],
+  });
+
+  const pathMapping = mapFilePaths(filePaths, {
+    from: 'app/styles',
+    to: 'app/controllers',
+  });
+
+  moveFiles(pathMapping, options);
+}
+
+function moveAppCssToAssets(options) {
+  const { projectRoot } = options;
+
+  const filePaths = findFiles('app/styles/app.css', {
+    cwd: projectRoot,
+  });
+
+  const pathMapping = mapFilePaths(filePaths, {
+    from: 'app/styles',
+    to: 'app/assets',
+  });
+
+  moveFiles(pathMapping, options);
+
+  const fileMapping = new Map([
+    [
+      'app/styles/app.css',
+      '/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */\n',
+    ],
+  ]);
+
+  createFiles(fileMapping, options);
+}
+
+export function moveStylesheets(options) {
+  moveRouteStylesheets(options);
+  moveAppCssToAssets(options);
+}

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

@@ -0,0 +1,211 @@
+import { readFileSync } from 'node:fs';
+import { join, parse } from 'node:path';
+
+import { ASTJavaScript as AST } from '../../../../utils/abstract-syntax-tree.js';
+import {
+  blueprintRoot,
+  processTemplate,
+} from '../../../../utils/blueprints.js';
+import { createFiles } from '../../../../utils/files.js';
+import { parseEntityName } from '../../../../utils/string.js';
+
+function removeTemplateOnlyComponentMethod(file, data) {
+  const traverse = AST.traverse(data.hasTypeScript);
+
+  const ast = traverse(file, {
+    visitCallExpression(path) {
+      if (path.value.callee.name !== 'templateOnlyComponent') {
+        return false;
+      }
+
+      const superClass = AST.builders.identifier('Component');
+
+      if (data.hasTypeScript) {
+        superClass.typeAnnotation = path.value.typeParameters;
+      }
+
+      return AST.builders.classExpression(
+        null,
+        AST.builders.classBody([
+          AST.builders.classProperty(
+            AST.builders.identifier(data.__styles__),
+            AST.builders.identifier(data.__styles__)
+          ),
+        ]),
+        superClass
+      );
+    },
+
+    visitImportDeclaration(path) {
+      if (path.value.source.value !== '@ember/component/template-only') {
+        return false;
+      }
+
+      const defaultImport = path.value.specifiers.find(
+        (specifier) => specifier.type === 'ImportDefaultSpecifier'
+      );
+
+      if (defaultImport?.local?.name !== 'templateOnlyComponent') {
+        return false;
+      }
+
+      return AST.builders.importDeclaration(
+        [
+          AST.builders.importDefaultSpecifier(
+            AST.builders.identifier('Component')
+          ),
+        ],
+        AST.builders.literal('@glimmer/component')
+      );
+    },
+  });
+
+  return AST.print(ast);
+}
+
+function importStylesInClass(file, data) {
+  const traverse = AST.traverse(data.hasTypeScript);
+
+  // Find the last import statement
+  let lastImportDeclarationPath;
+
+  const ast = traverse(file, {
+    visitImportDeclaration(path) {
+      if (!lastImportDeclarationPath) {
+        lastImportDeclarationPath = path;
+      } else if (path.node.start > lastImportDeclarationPath.node.start) {
+        lastImportDeclarationPath = path;
+      }
+
+      return false;
+    },
+  });
+
+  // Append the styles import
+  const nodes = ast.program.body;
+  const index = lastImportDeclarationPath?.name ?? -1;
+
+  nodes.splice(
+    index + 1,
+    0,
+    AST.builders.importDeclaration(
+      [
+        AST.builders.importDefaultSpecifier(
+          AST.builders.identifier(data.__styles__)
+        ),
+      ],
+      AST.builders.literal(`./${data.fileName}.css`)
+    )
+  );
+
+  return AST.print(ast);
+}
+
+function addStylesAsClassProperty(file, data) {
+  const traverse = AST.traverse(data.hasTypeScript);
+
+  const ast = traverse(file, {
+    visitClassDeclaration(path) {
+      const { body } = path.node.body;
+
+      const nodesToAdd = [
+        AST.builders.classProperty(
+          AST.builders.identifier(data.__styles__),
+          AST.builders.identifier(data.__styles__)
+        ),
+      ];
+
+      if (body.length > 0) {
+        nodesToAdd.push(AST.builders.noop());
+      }
+
+      body.unshift(...nodesToAdd);
+
+      return false;
+    },
+  });
+
+  return AST.print(ast);
+}
+
+function createClass(customizations, options) {
+  const { blueprintFilePaths, entity, filePath } = customizations;
+
+  const fileMapping = new Map(
+    blueprintFilePaths.map((blueprintFilePath) => {
+      const blueprintFile = readFileSync(
+        join(blueprintRoot, blueprintFilePath),
+        'utf8'
+      );
+
+      const file = processTemplate(blueprintFile, {
+        entity,
+        options,
+      });
+
+      return [filePath, file];
+    })
+  );
+
+  createFiles(fileMapping, options);
+}
+
+function updateClass(customizations, options) {
+  const { filePath } = customizations;
+  const { __styles__, projectRoot } = options;
+
+  const { ext: fileExtension, name: fileName } = parse(filePath);
+  const hasTypeScript = fileExtension === '.ts';
+
+  let file = readFileSync(join(projectRoot, filePath), 'utf8');
+
+  try {
+    file = removeTemplateOnlyComponentMethod(file, {
+      __styles__,
+      hasTypeScript,
+    });
+
+    file = importStylesInClass(file, {
+      __styles__,
+      fileName,
+      hasTypeScript,
+    });
+
+    file = addStylesAsClassProperty(file, {
+      __styles__,
+      hasTypeScript,
+    });
+
+    const fileMapping = new Map([[filePath, file]]);
+
+    createFiles(fileMapping, options);
+  } catch (e) {
+    console.warn(
+      `WARNING: updateClass could not update \`${filePath}\`. Please update the file manually. (${e.message})\n`
+    );
+  }
+}
+
+export function importStyles(customizations, options) {
+  const { blueprintFilePaths, entities, getFilePath } = customizations;
+
+  for (const [entityName, extensions] of entities) {
+    const hasClass = extensions.has('.js') || extensions.has('.ts');
+    const hasStylesheet = extensions.has('.css');
+
+    if (!hasStylesheet) {
+      continue;
+    }
+
+    const entity = parseEntityName(entityName);
+    const filePath = getFilePath(entityName);
+
+    if (!hasClass) {
+      createClass({ blueprintFilePaths, entity, filePath }, options);
+
+      continue;
+    }
+
+    updateClass({ filePath }, options);
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './import-styles.js';
+export * from './update-templates.js';