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

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

@@ -0,0 +1,354 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-non-null-assertion */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { ASTHandlebars as AST } from '@codemod-utils/ast';
+import { createFiles } from '@codemod-utils/files';
+function sanitizeClassAndLocalClassAttributes(file) {
+    function removeAttributeWithoutValue(attributeName, attributes) {
+        const attributeIndex = attributes.findIndex(
+        // @ts-ignore: Assume that types from external packages are correct
+        (attribute) => attribute.name === attributeName);
+        if (attributeIndex === -1) {
+            return;
+        }
+        const attribute = attributes[attributeIndex];
+        // @ts-ignore: Assume that types from external packages are correct
+        if (attribute.isValueless) {
+            attributes.splice(attributeIndex, 1);
+            return;
+        }
+        // @ts-ignore: Assume that types from external packages are correct
+        if (attribute.value.type !== 'TextNode') {
+            return;
+        }
+        // @ts-ignore: Assume that types from external packages are correct
+        const attributeValue = attribute.value.chars.trim();
+        if (attributeValue === '') {
+            attributes.splice(attributeIndex, 1);
+            return;
+        }
+    }
+    const traverse = AST.traverse();
+    const ast = traverse(file, {
+        ElementNode(node) {
+            const { attributes } = node;
+            removeAttributeWithoutValue('class', attributes);
+            removeAttributeWithoutValue('local-class', attributes);
+        },
+    });
+    return AST.print(ast);
+}
+function mergeClassAndLocalClassAttributes(file, data) {
+    const traverse = AST.traverse();
+    const 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) {
+        // @ts-ignore: Assume that types from external packages are correct
+        const hasFromArgument = path.hash.pairs.some((pair) => pair.key === 'from');
+        if (hasFromArgument) {
+            throw new RangeError(
+            // @ts-ignore: Assume that types from external packages are correct
+            `Unable to handle the {{local-class}} helper's \`from\` key. See lines ${path.loc.start.line}-${path.loc.end.line}.`);
+        }
+        // @ts-ignore: Assume that types from external packages are correct
+        const param = path.params[0];
+        if (param === undefined) {
+            return true;
+        }
+        if (param.type !== 'StringLiteral') {
+            return false;
+        }
+        const value = param.value.trim();
+        return value === '';
+    }
+    const traverse = AST.traverse();
+    const ast = traverse(file, {
+        // @ts-ignore: Assume that types from external packages are correct
+        AttrNode(node) {
+            if (node.name !== 'class') {
+                return;
+            }
+            const hasLocalClassHelper = node.value.type === 'MustacheStatement' &&
+                // @ts-ignore: Assume that types from external packages are correct
+                node.value.path.original === 'local-class';
+            if (!hasLocalClassHelper) {
+                return;
+            }
+            if (canRemoveLocalClassHelper(node.value)) {
+                return null;
+            }
+            // @ts-ignore: Assume that types from external packages are correct
+            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) {
+            // @ts-ignore: Assume that types from external packages are correct
+            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) {
+        // @ts-ignore: Assume that types from external packages are correct
+        switch (param.type) {
+            case 'StringLiteral': {
+                // @ts-ignore: Assume that types from external packages are correct
+                const localClassNames = param.value.trim().split(/\s+/);
+                if (localClassNames.length === 1) {
+                    // @ts-ignore: Assume that types from external packages are correct
+                    param.value = localClassNames[0];
+                }
+                else {
+                    param = AST.builders.sexpr('array', localClassNames.map(AST.builders.string));
+                }
+                break;
+            }
+            case 'SubExpression': {
+                // @ts-ignore: Assume that types from external packages are correct
+                switch (param.path.original) {
+                    case 'if':
+                    case 'unless': {
+                        // @ts-ignore: Assume that types from external packages are correct
+                        const subparams = param.params.map(transformParam);
+                        // @ts-ignore: Assume that types from external packages are correct
+                        param = AST.builders.sexpr(param.path.original, subparams);
+                        break;
+                    }
+                }
+                break;
+            }
+        }
+        return param;
+    }
+    // @ts-ignore: Assume that types from external packages are correct
+    function transformPart(part) {
+        // @ts-ignore: Assume that types from external packages are correct
+        switch (part.type) {
+            case 'MustacheStatement': {
+                // @ts-ignore: Assume that types from external packages are correct
+                switch (part.path.original) {
+                    case 'concat': {
+                        // eslint-disable-next-line no-inner-declarations
+                        function hasPathExpression(params) {
+                            // @ts-ignore: Assume that types from external packages are correct
+                            return params.some((param) => param.type === 'PathExpression');
+                        }
+                        // @ts-ignore: Assume that types from external packages are correct
+                        if (hasPathExpression(part.params)) {
+                            return AST.builders.mustache(AST.builders.path('get'), [
+                                AST.builders.path(`this.${data.__styles__}`),
+                                // @ts-ignore: Assume that types from external packages are correct
+                                AST.builders.sexpr(part.path.original, part.params),
+                            ]);
+                        }
+                        // @ts-ignore: Assume that types from external packages are correct
+                        const params = part.params.map(transformParam);
+                        return AST.builders.mustache('local-class', [
+                            AST.builders.path(`this.${data.__styles__}`),
+                            ...params,
+                        ]);
+                    }
+                    case 'if':
+                    case 'unless': {
+                        // @ts-ignore: Assume that types from external packages are correct
+                        const params = part.params.map(transformParam);
+                        return AST.builders.mustache('local-class', [
+                            AST.builders.path(`this.${data.__styles__}`),
+                            // @ts-ignore: Assume that types from external packages are correct
+                            AST.builders.sexpr(part.path.original, params),
+                        ]);
+                    }
+                    default: {
+                        return AST.builders.mustache(AST.builders.path('get'), [
+                            AST.builders.path(`this.${data.__styles__}`),
+                            // @ts-ignore: Assume that types from external packages are correct
+                            part.path,
+                        ]);
+                    }
+                }
+            }
+            case 'TextNode': {
+                // @ts-ignore: Assume that types from external packages are correct
+                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) => {
+            // @ts-ignore: Assume that types from external packages are correct
+            accumulator.push(transformPart(part));
+            if (index < numParts - 1) {
+                // @ts-ignore: Assume that types from external packages are correct
+                accumulator.push(AST.builders.text(' '));
+            }
+            return accumulator;
+        }, []);
+    }
+    const traverse = AST.traverse();
+    const 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';
+                    // @ts-ignore: Assume that types from external packages are correct
+                    localClassAttribute.value.parts = transformParts(localClassAttribute.value.parts);
+                    break;
+                }
+                case 'MustacheStatement': {
+                    localClassAttribute.name = 'class';
+                    // @ts-ignore: Assume that types from external packages are correct
+                    localClassAttribute.value = transformPart(localClassAttribute.value);
+                    break;
+                }
+                case 'TextNode': {
+                    localClassAttribute.name = 'class';
+                    // @ts-ignore: Assume that types from external packages are correct
+                    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__}`),
+                // @ts-ignore: Assume that types from external packages are correct
+                transformParam(node.value),
+            ]);
+        },
+    });
+    return AST.print(ast);
+}
+function updateTemplate(entityName, { customizations, options }) {
+    const { getFilePath } = customizations;
+    const { __styles__, projectRoot } = options;
+    const filePath = getFilePath(entityName);
+    const data = {
+        __styles__,
+    };
+    try {
+        let file = readFileSync(join(projectRoot, filePath), 'utf8');
+        file = sanitizeClassAndLocalClassAttributes(file);
+        file = mergeClassAndLocalClassAttributes(file, data);
+        file = removeLocalClassHelpers(file, data);
+        file = removeLocalClassAttributes(file, data);
+        const fileMap = new Map([[filePath, file]]);
+        createFiles(fileMap, options);
+    }
+    catch (error) {
+        let message = `WARNING: updateTemplate could not update \`${filePath}\`. Please update the file manually.`;
+        if (error instanceof Error) {
+            message += ` (${error.message})`;
+        }
+        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/migration/ember-app/steps/update-app-app-js.js

@@ -0,0 +1,46 @@
+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';
+function addCssEntryPoint(file, data) {
+    const traverse = AST.traverse(data.isTypeScript);
+    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}', {
+        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 data = {
+        isTypeScript: fileExtension === '.ts',
+    };
+    try {
+        let file = readFileSync(join(projectRoot, filePath), 'utf8');
+        file = addCssEntryPoint(file, data);
+        const fileMap = new Map([[filePath, file]]);
+        createFiles(fileMap, options);
+    }
+    catch (error) {
+        let message = `WARNING: updateAppAppJs could not update \`${filePath}\`. Please update the file manually.`;
+        if (error instanceof Error) {
+            message += ` (${error.message})`;
+        }
+        console.warn(`${message}\n`);
+    }
+}

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

@@ -0,0 +1,22 @@
+import { join } from 'node:path';
+import { updateTemplates } from './shared/update-templates.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 = {
+        getFilePath: getFilePath(options),
+    };
+    updateTemplates(context.components, {
+        customizations,
+        options,
+    });
+}

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

@@ -0,0 +1,38 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { convertToMap, convertToObject, readPackageJson, } from '@codemod-utils/json';
+import { getVersion } from '../../../utils/blueprints.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 = getVersion(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 packageJson = readPackageJson(options);
+    updateDevDependencies(packageJson, options);
+    updateScripts(packageJson, options);
+    const destination = join(projectRoot, 'package.json');
+    const file = JSON.stringify(packageJson, null, 2) + '\n';
+    writeFileSync(destination, file, 'utf8');
+}

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

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

package/dist/src/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/blueprints/blueprints-root.js

@@ -0,0 +1,4 @@
+import { join } from 'node:path';
+import { getFilePath } from '@codemod-utils/blueprints';
+const fileURL = import.meta.url;
+export const blueprintsRoot = join(getFilePath(fileURL), '../../../../blueprints');

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

@@ -0,0 +1,13 @@
+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'],
+]);
+export function getVersion(packageName, options) {
+    const { project } = options;
+    return decideVersion(packageName, {
+        dependencies: project.dependencies,
+        latestVersions,
+    });
+}

package/dist/src/utils/string/ember-cli-string-utils/camelize.js

@@ -0,0 +1,11 @@
+/* https://github.com/ember-cli/ember-cli-string-utils/blob/v1.1.0/index.js */
+const STRING_CAMELIZE_REGEXP = /(-|_|\.|\s)+(.)?/g;
+export function camelize(value) {
+    return value
+        .replace(STRING_CAMELIZE_REGEXP, function (_match, _separator, character) {
+        return character ? character.toUpperCase() : '';
+    })
+        .replace(/^([A-Z])/, function (match) {
+        return match.toLowerCase();
+    });
+}

package/dist/src/utils/string/ember-cli-string-utils/classify.js

@@ -0,0 +1,10 @@
+/* https://github.com/ember-cli/ember-cli-string-utils/blob/v1.1.0/index.js */
+import { camelize } from './camelize.js';
+export function classify(value) {
+    const tokens = value.split('.');
+    const tokensTransformed = tokens.map((token) => {
+        const camelized = camelize(token);
+        return camelized.charAt(0).toUpperCase() + camelized.substring(1);
+    });
+    return tokensTransformed.join('.');
+}

package/{src → dist/src}/utils/string/entity-name/classify.js

@@ -1,6 +1,5 @@
 /* https://github.com/emberjs/ember.js/blob/v4.12.0/blueprints/component/index.js#L255-L256 */
 import { classify } from '../ember-cli-string-utils/classify.js';
-
 export function classifyEntityName(entityName) {
-  return classify(entityName.replace(/\//g, '-'));
+    return classify(entityName.replace(/\//g, '-'));
 }

package/{src → dist/src}/utils/string/entity-name/double-colonize.js

@@ -1,10 +1,7 @@
 /* https://github.com/emberjs/ember.js/blob/v4.12.0/blueprints/component-test/index.js#L13-L16 */
 import { classify } from '../ember-cli-string-utils/classify.js';
-
 export function doubleColonizeEntityName(entityName) {
-  const tokens = entityName.split('/');
-
-  const tokensTransformed = tokens.map(classify);
-
-  return tokensTransformed.join('::');
+    const tokens = entityName.split('/');
+    const tokensTransformed = tokens.map(classify);
+    return tokensTransformed.join('::');
 }

package/dist/src/utils/string/entity-name/parse.js

@@ -0,0 +1,15 @@
+import { parse } from 'node:path';
+import { classifyEntityName } from './classify.js';
+import { doubleColonizeEntityName } from './double-colonize.js';
+export function parseEntityName(entityName) {
+    const classifiedName = classifyEntityName(entityName);
+    const doubleColonizedName = doubleColonizeEntityName(entityName);
+    const { name: fileName } = parse(entityName);
+    const entity = {
+        classifiedName,
+        doubleColonizedName,
+        fileName,
+        name: entityName,
+    };
+    return entity;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-codemod-remove-ember-css-modules",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Codemod to replace ember-css-modules with embroider-css-modules",
   "keywords": [
     "codemod",
@@ -16,40 +16,46 @@
   },
   "license": "MIT",
   "author": "Isaac J. Lee",
-  "main": "src/index.js",
   "type": "module",
-  "bin": "./bin/ember-codemod-remove-ember-css-modules.js",
-  "files": [
-    "bin/",
-    "src/"
-  ],
+  "main": "dist/src/index.js",
+  "bin": "dist/bin/ember-codemod-remove-ember-css-modules.js",
   "directories": {
     "test": "tests"
   },
+  "files": [
+    "blueprints",
+    "dist"
+  ],
   "dependencies": {
-    "@codemod-utils/ast": "^0.1.1",
-    "@codemod-utils/blueprints": "^0.1.2",
-    "@codemod-utils/files": "^0.3.1",
-    "@codemod-utils/json": "^0.2.0",
+    "@codemod-utils/ast": "^0.2.0",
+    "@codemod-utils/blueprints": "^0.2.0",
+    "@codemod-utils/files": "^0.4.1",
+    "@codemod-utils/json": "^0.3.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@codemod-utils/tests": "^0.1.2",
+    "@codemod-utils/tests": "^0.2.2",
     "@sondr3/minitest": "^0.1.1",
+    "@types/node": "^16.11.7",
+    "@types/yargs": "^17.0.24",
     "concurrently": "^8.2.0",
     "eslint": "^8.42.0",
     "prettier": "^2.8.8",
+    "typescript": "^5.1.3",
     "@shared-configs/eslint-config": "0.0.0",
-    "@shared-configs/prettier": "0.0.0"
+    "@shared-configs/prettier": "0.0.0",
+    "@shared-configs/typescript": "0.0.0"
   },
   "engines": {
     "node": "16.* || >= 18"
   },
   "scripts": {
+    "build": "tsc --project tsconfig.build.json && chmod +x dist/bin/ember-codemod-remove-ember-css-modules.js",
     "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
     "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "test": "mt tests --quiet"
+    "lint:types": "tsc --noEmit",
+    "test": "tsc --build && mt dist-for-testing --quiet"
   }
 }