ember-codemod-remove-global-styles 0.2.1 → 0.3.0

package/README.md

@@ -17,6 +17,41 @@ pnpx ember-codemod-remove-global-styles --src app/assets/app.css
 
 <details>
 
+<summary>Optional: Limit types of files to consider</summary>
+
+By default, the codemod considers components and routes. Pass `--convert` to consider a subset of these.
+
+```sh
+# Components only
+pnpx ember-codemod-remove-global-styles --convert components
+
+# Routes only
+pnpx ember-codemod-remove-global-styles --convert routes
+```
+
+</details>
+
+<details>
+
+<summary>Optional: Limit folders to consider</summary>
+
+By default, the codemod considers all files and folders for components and routes. Pass `--folder` to limit the search to 1 folder. (You may use glob patterns to specify multiple folders.)
+
+```sh
+# `ui` folder only
+pnpx ember-codemod-remove-global-styles --folder ui
+
+# `ui/form` folder only
+pnpx ember-codemod-remove-global-styles --folder ui/form
+
+# `route1` and `route2` folders only
+pnpx ember-codemod-remove-global-styles --convert routes --folder "{route1,route2}"
+```
+
+</details>
+
+<details>
+
 <summary>Optional: Specify the project root</summary>
 
 Pass `--root` to run the codemod somewhere else (i.e. not in the current directory).

package/dist/bin/ember-codemod-remove-global-styles.js

@@ -7,6 +7,15 @@ import { runCodemod } from '../src/index.js';
 process.title = 'ember-codemod-remove-global-styles';
 // Set codemod options
 const argv = yargs(hideBin(process.argv))
+    .option('convert', {
+    choices: ['components', 'routes'],
+    describe: 'Which type of files to consider',
+    type: 'array',
+})
+    .option('folder', {
+    describe: 'Which folder to consider',
+    type: 'string',
+})
     .option('root', {
     describe: 'Where to run the codemod',
     type: 'string',
@@ -17,7 +26,10 @@ const argv = yargs(hideBin(process.argv))
     type: 'string',
 })
     .parseSync();
+const DEFAULT_FOR_CONVERT = ['components', 'routes'];
 const codemodOptions = {
+    convert: new Set(argv['convert'] ?? DEFAULT_FOR_CONVERT),
+    folder: argv['folder'] ?? '',
     projectRoot: argv['root'] ?? process.cwd(),
     src: argv['src'],
 };

package/dist/src/index.js

@@ -1,7 +1,6 @@
-import { analyzeProject, createCssModuleFiles, createOptions, updateProject, } from './steps/index.js';
+import { analyzeProject, createOptions, updateProject } from './steps/index.js';
 export function runCodemod(codemodOptions) {
     const options = createOptions(codemodOptions);
     const project = analyzeProject(options);
-    createCssModuleFiles(project, options);
     updateProject(project, options);
 }

package/dist/src/steps/analyze-project/analyze-components.js

@@ -3,11 +3,14 @@ import { join } from 'node:path';
 import { findFiles } from '@codemod-utils/files';
 import { getEntityData } from './get-entity-data.js';
 export function analyzeComponents(classToStyles, options) {
-    const { projectRoot } = options;
-    const filePaths = findFiles('app/components/**/*.{gjs,gts,hbs}', {
+    const { convert, folder, projectRoot } = options;
+    const components = new Map();
+    if (!convert.components) {
+        return components;
+    }
+    const filePaths = findFiles(join('app/components', folder, '**/*.{gjs,gts,hbs}'), {
         projectRoot,
     });
-    const components = new Map();
     filePaths.forEach((filePath) => {
         const file = readFileSync(join(projectRoot, filePath), 'utf8');
         const entityData = getEntityData(file, {

package/dist/src/steps/analyze-project/analyze-routes.js

@@ -3,11 +3,14 @@ import { join } from 'node:path';
 import { findFiles } from '@codemod-utils/files';
 import { getEntityData } from './get-entity-data.js';
 export function analyzeRoutes(classToStyles, options) {
-    const { projectRoot } = options;
-    const filePaths = findFiles('app/templates/**/*.{gjs,gts,hbs}', {
+    const { convert, folder, projectRoot } = options;
+    const routes = new Map();
+    if (!convert.routes) {
+        return routes;
+    }
+    const filePaths = findFiles(join('app/templates', folder, '**/*.{gjs,gts,hbs}'), {
         projectRoot,
     });
-    const routes = new Map();
     filePaths.forEach((filePath) => {
         const file = readFileSync(join(projectRoot, filePath), 'utf8');
         const entityData = getEntityData(file, {

package/dist/src/steps/create-options.js

@@ -1,6 +1,11 @@
 export function createOptions(codemodOptions) {
-    const { projectRoot, src } = codemodOptions;
+    const { convert, folder, projectRoot, src } = codemodOptions;
     return {
+        convert: {
+            components: convert.has('components'),
+            routes: convert.has('routes'),
+        },
+        folder,
         projectRoot,
         src,
     };

package/dist/src/steps/index.js

@@ -1,4 +1,3 @@
 export * from './analyze-project.js';
-export * from './create-css-module-files.js';
 export * from './create-options.js';
 export * from './update-project.js';

package/dist/src/steps/update-project/create-stylesheets.js

@@ -0,0 +1,39 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { createFiles } from '@codemod-utils/files';
+import { getModuleFilePath, printStyles } from '../../utils/css/index.js';
+function getFile(filePath, options) {
+    const { projectRoot } = options;
+    try {
+        return readFileSync(join(projectRoot, filePath), 'utf8');
+    }
+    catch {
+        return '';
+    }
+}
+function logErrors(cssModuleFilePath, errors) {
+    if (errors.length === 0) {
+        return;
+    }
+    console.warn(`WARNING: ${cssModuleFilePath} may be incorrect.`);
+    console.warn(errors.map((error) => `- ${error}`).join('\n'));
+    console.log();
+}
+export function createStylesheets(project, options) {
+    const fileMap = new Map();
+    project.components.forEach((data, filePath) => {
+        const cssModuleFilePath = getModuleFilePath(filePath);
+        let cssModuleFile = getFile(cssModuleFilePath, options);
+        cssModuleFile += `${printStyles(data.localStyles)}\n`;
+        fileMap.set(cssModuleFilePath, cssModuleFile);
+        logErrors(cssModuleFilePath, data.errors);
+    });
+    project.routes.forEach((data, filePath) => {
+        const cssModuleFilePath = getModuleFilePath(filePath);
+        let cssModuleFile = getFile(cssModuleFilePath, options);
+        cssModuleFile += `${printStyles(data.localStyles)}\n`;
+        fileMap.set(cssModuleFilePath, cssModuleFile);
+        logErrors(cssModuleFilePath, data.errors);
+    });
+    createFiles(fileMap, options);
+}

package/dist/src/steps/update-project/index.js

@@ -0,0 +1,3 @@
+export * from './create-stylesheets.js';
+export * from './update-classes.js';
+export * from './update-templates.js';

package/dist/src/steps/update-project/update-classes.js

@@ -0,0 +1,14 @@
+import { createFiles } from '@codemod-utils/files';
+import { updateClass } from '../../utils/update-project/index.js';
+export function updateClasses(project, options) {
+    const fileMap = new Map();
+    project.components.forEach((_data, templateFilePath) => {
+        const { classFile, classFilePath } = updateClass(templateFilePath, options);
+        fileMap.set(classFilePath, classFile);
+    });
+    project.routes.forEach((_data, templateFilePath) => {
+        const { classFile, classFilePath } = updateClass(templateFilePath, options);
+        fileMap.set(classFilePath, classFile);
+    });
+    createFiles(fileMap, options);
+}

package/dist/src/steps/update-project/update-templates.js

@@ -0,0 +1,14 @@
+import { createFiles } from '@codemod-utils/files';
+import { updateTemplate } from '../../utils/update-project/index.js';
+export function updateTemplates(project, options) {
+    const fileMap = new Map();
+    project.components.forEach((_data, templateFilePath) => {
+        const templateFile = updateTemplate(templateFilePath, options);
+        fileMap.set(templateFilePath, templateFile);
+    });
+    project.routes.forEach((_data, templateFilePath) => {
+        const templateFile = updateTemplate(templateFilePath, options);
+        fileMap.set(templateFilePath, templateFile);
+    });
+    createFiles(fileMap, options);
+}

package/dist/src/steps/update-project.js

@@ -1,46 +1,6 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { updateTemplates } from '@codemod-utils/ast-template-tag';
-import { createFiles } from '@codemod-utils/files';
-import { addLocalClasses, getClassToStyles, getModuleFilePath, } from '../utils/css/index.js';
+import { createStylesheets, updateClasses, updateTemplates, } from './update-project/index.js';
 export function updateProject(project, options) {
-    function getFile(filePath) {
-        return readFileSync(join(options.projectRoot, filePath), 'utf8');
-    }
-    const fileMap = new Map();
-    project.components.forEach((_data, filePath) => {
-        const cssModuleFile = getFile(getModuleFilePath(filePath));
-        let file = getFile(filePath);
-        const data = {
-            classToStyles: getClassToStyles(cssModuleFile),
-            isHbs: filePath.endsWith('.hbs'),
-        };
-        if (filePath.endsWith('.hbs')) {
-            file = addLocalClasses(file, data);
-        }
-        else {
-            file = updateTemplates(file, (code) => {
-                return addLocalClasses(code, data);
-            });
-        }
-        fileMap.set(filePath, file);
-    });
-    project.routes.forEach((_data, filePath) => {
-        const cssModuleFile = getFile(getModuleFilePath(filePath));
-        let file = getFile(filePath);
-        const data = {
-            classToStyles: getClassToStyles(cssModuleFile),
-            isHbs: filePath.endsWith('.hbs'),
-        };
-        if (filePath.endsWith('.hbs')) {
-            file = addLocalClasses(file, data);
-        }
-        else {
-            file = updateTemplates(file, (code) => {
-                return addLocalClasses(code, data);
-            });
-        }
-        fileMap.set(filePath, file);
-    });
-    createFiles(fileMap, options);
+    createStylesheets(project, options);
+    updateClasses(project, options);
+    updateTemplates(project, options);
 }

package/dist/src/utils/css/get-module-file-path.js

@@ -1,3 +1,21 @@
-export function getModuleFilePath(filePath) {
-    return filePath.replace(/(.+)\.(gjs|gts|hbs)$/, '$1.module.css');
+import { join, relative } from 'node:path';
+import { parseFilePath } from '@codemod-utils/files';
+export function getModuleFilePath(templateFilePath) {
+    const { dir, ext, name } = parseFilePath(templateFilePath);
+    if (!['.gjs', '.gts', '.hbs'].includes(ext)) {
+        throw new RangeError('File extension is incorrect.');
+    }
+    const data = {
+        isComponentTemplate: dir.startsWith('app/components'),
+        isRouteTemplate: dir.startsWith('app/templates'),
+        isTemplateTag: ext === '.gjs' || ext === '.gts',
+    };
+    if (data.isTemplateTag) {
+        return join(dir, `${name}.module.css`);
+    }
+    if (data.isRouteTemplate) {
+        const controllersDir = join(dir, relative(dir, 'app/controllers'));
+        return join(controllersDir, `${name}.module.css`);
+    }
+    return join(dir, `${name}.module.css`);
 }

package/dist/src/utils/update-project/index.js

@@ -0,0 +1,2 @@
+export * from './update-class.js';
+export * from './update-template.js';

package/dist/src/utils/update-project/update-class/add-styles-to-class.js

@@ -0,0 +1,22 @@
+import { AST } from '@codemod-utils/ast-javascript';
+export function addStylesToClass(file, data) {
+    if (data.isTemplateTag) {
+        return file;
+    }
+    const traverse = AST.traverse(data.isTypeScript);
+    const ast = traverse(file, {
+        visitClassDeclaration(path) {
+            const { body } = path.node.body;
+            const nodesToAdd = [
+                AST.builders.classProperty(AST.builders.identifier('styles'), AST.builders.identifier('styles')),
+            ];
+            if (body.length > 0) {
+                // @ts-expect-error: Incorrect type
+                nodesToAdd.push(AST.builders.noop());
+            }
+            body.unshift(...nodesToAdd);
+            return false;
+        },
+    });
+    return AST.print(ast);
+}

package/dist/src/utils/update-project/update-class/get-class-file.js

@@ -0,0 +1,61 @@
+import { readFileSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { findFiles, parseFilePath } from '@codemod-utils/files';
+export function getClassFile(templateFilePath, options) {
+    const { projectRoot } = options;
+    const { dir, ext, name } = parseFilePath(templateFilePath);
+    const data = {
+        isRouteTemplate: dir.startsWith('app/templates'),
+        isTemplateTag: ext === '.gjs' || ext === '.gts',
+    };
+    if (data.isTemplateTag) {
+        const classFile = readFileSync(join(projectRoot, templateFilePath), 'utf8');
+        return {
+            classFile,
+            classFilePath: templateFilePath,
+        };
+    }
+    if (data.isRouteTemplate) {
+        const controllersDir = join(dir, relative(dir, 'app/controllers'));
+        const classFilePaths = findFiles(join(controllersDir, `${name}.{js,ts}`), {
+            projectRoot,
+        });
+        if (classFilePaths.length === 0) {
+            const classFilePath = join(controllersDir, `${name}.js`);
+            return {
+                classFilePath,
+                classFile: [
+                    `import Controller from '@ember/controller';`,
+                    ``,
+                    `export default class extends Controller {}`,
+                    ``,
+                ].join('\n'),
+            };
+        }
+        const classFilePath = classFilePaths[0];
+        return {
+            classFilePath,
+            classFile: readFileSync(join(projectRoot, classFilePath), 'utf8'),
+        };
+    }
+    const classFilePaths = findFiles(join(dir, `${name}.{js,ts}`), {
+        projectRoot,
+    });
+    if (classFilePaths.length === 0) {
+        const classFilePath = join(dir, `${name}.js`);
+        return {
+            classFilePath,
+            classFile: [
+                `import Component from '@glimmer/component';`,
+                ``,
+                `export default class extends Component {}`,
+                ``,
+            ].join('\n'),
+        };
+    }
+    const classFilePath = classFilePaths[0];
+    return {
+        classFilePath,
+        classFile: readFileSync(join(projectRoot, classFilePath), 'utf8'),
+    };
+}

package/dist/src/utils/update-project/update-class/import-stylesheet.js

@@ -0,0 +1,18 @@
+import { AST } from '@codemod-utils/ast-javascript';
+export function importStylesheet(file, data) {
+    const traverse = AST.traverse(data.isTypeScript);
+    let canSkip = false;
+    traverse(file, {
+        visitImportDeclaration(path) {
+            const importPath = path.node.source.value;
+            if (importPath === `./${data.fileName}.css` ||
+                importPath === `./${data.fileName}.module.css`) {
+                canSkip = true;
+            }
+            return false;
+        },
+    });
+    return canSkip
+        ? file
+        : [`import styles from './${data.fileName}.module.css';`, file].join('\n');
+}

package/dist/src/utils/update-project/update-class/index.js

@@ -0,0 +1,4 @@
+export * from './add-styles-to-class.js';
+export * from './get-class-file.js';
+export * from './import-stylesheet.js';
+export * from './replace-template-only-component.js';

package/dist/src/utils/update-project/update-class/replace-template-only-component.js

@@ -0,0 +1,39 @@
+import { AST } from '@codemod-utils/ast-javascript';
+export function replaceTemplateOnlyComponent(file, data) {
+    if (data.isTemplateTag) {
+        return file;
+    }
+    const traverse = AST.traverse(data.isTypeScript);
+    const ast = traverse(file, {
+        visitCallExpression(path) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            if (path.value.callee.name !== 'templateOnlyComponent') {
+                return false;
+            }
+            const superClass = AST.builders.identifier('Component');
+            if (data.isTypeScript) {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+                superClass.typeAnnotation = path.value.typeParameters;
+            }
+            return AST.builders.classExpression(null, AST.builders.classBody([
+                AST.builders.classProperty(AST.builders.identifier('styles'), AST.builders.identifier('styles')),
+            ]), superClass);
+        },
+        visitImportDeclaration(path) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            if (path.value.source.value !== '@ember/component/template-only') {
+                return false;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            const defaultImport = path.value.specifiers.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            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);
+}

package/dist/src/utils/update-project/update-class.js

@@ -0,0 +1,29 @@
+import { updateJavaScript } from '@codemod-utils/ast-template-tag';
+import { parseFilePath } from '@codemod-utils/files';
+import { addStylesToClass, getClassFile, importStylesheet, replaceTemplateOnlyComponent, } from './update-class/index.js';
+export function updateClass(templateFilePath, options) {
+    // eslint-disable-next-line prefer-const
+    let { classFile, classFilePath } = getClassFile(templateFilePath, options);
+    const { ext, name } = parseFilePath(classFilePath);
+    const data = {
+        fileName: name,
+        isTemplateTag: ext === '.gjs' || ext === '.gts',
+        isTypeScript: ext === '.gts' || ext === '.ts',
+    };
+    if (data.isTemplateTag) {
+        classFile = updateJavaScript(classFile, (code) => {
+            return importStylesheet(code, data);
+        });
+        return {
+            classFile,
+            classFilePath,
+        };
+    }
+    classFile = replaceTemplateOnlyComponent(classFile, data);
+    classFile = importStylesheet(classFile, data);
+    classFile = addStylesToClass(classFile, data);
+    return {
+        classFile,
+        classFilePath,
+    };
+}

package/dist/src/utils/update-project/update-template.js

@@ -0,0 +1,19 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { updateTemplates } from '@codemod-utils/ast-template-tag';
+import { addLocalClasses, getClassToStyles, getModuleFilePath, } from '../css/index.js';
+export function updateTemplate(templateFilePath, options) {
+    const { projectRoot } = options;
+    const cssModuleFile = readFileSync(join(projectRoot, getModuleFilePath(templateFilePath)), 'utf8');
+    const templateFile = readFileSync(join(projectRoot, templateFilePath), 'utf8');
+    const data = {
+        classToStyles: getClassToStyles(cssModuleFile),
+        isHbs: templateFilePath.endsWith('.hbs'),
+    };
+    if (data.isHbs) {
+        return addLocalClasses(templateFile, data);
+    }
+    return updateTemplates(templateFile, (code) => {
+        return addLocalClasses(code, data);
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-codemod-remove-global-styles",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Codemod to localize global styles",
   "keywords": [
     "codemod",
@@ -42,9 +42,9 @@
     "eslint": "^9.39.1",
     "prettier": "^3.6.2",
     "typescript": "^5.9.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/eslint-config-node": "0.0.0"
   },
   "engines": {
     "node": "20.* || >= 22"

package/dist/src/steps/create-css-module-files/get-file.js

@@ -1,11 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-export function getFile(filePath, options) {
-    const { projectRoot } = options;
-    try {
-        return readFileSync(join(projectRoot, filePath), 'utf8');
-    }
-    catch {
-        return '';
-    }
-}

package/dist/src/steps/create-css-module-files/index.js

@@ -1,2 +0,0 @@
-export * from './get-file.js';
-export * from './log-errors.js';

package/dist/src/steps/create-css-module-files/log-errors.js

@@ -1,8 +0,0 @@
-export function logErrors(errors, data) {
-    if (errors.length === 0) {
-        return;
-    }
-    console.warn(`WARNING: ${data.cssModuleFilePath} may be incorrect.`);
-    console.warn(errors.map((error) => `- ${error}`).join('\n'));
-    console.log();
-}

package/dist/src/steps/create-css-module-files.js

@@ -1,21 +0,0 @@
-import { createFiles } from '@codemod-utils/files';
-import { getModuleFilePath, printStyles } from '../utils/css/index.js';
-import { getFile, logErrors } from './create-css-module-files/index.js';
-export function createCssModuleFiles(project, options) {
-    const fileMap = new Map();
-    project.components.forEach((data, filePath) => {
-        const cssModuleFilePath = getModuleFilePath(filePath);
-        let cssModuleFile = getFile(cssModuleFilePath, options);
-        cssModuleFile += `${printStyles(data.localStyles)}\n`;
-        fileMap.set(cssModuleFilePath, cssModuleFile);
-        logErrors(data.errors, { cssModuleFilePath });
-    });
-    project.routes.forEach((data, filePath) => {
-        const cssModuleFilePath = getModuleFilePath(filePath);
-        let cssModuleFile = getFile(cssModuleFilePath, options);
-        cssModuleFile += `${printStyles(data.localStyles)}\n`;
-        fileMap.set(cssModuleFilePath, cssModuleFile);
-        logErrors(data.errors, { cssModuleFilePath });
-    });
-    createFiles(fileMap, options);
-}