ember-codemod-remove-ember-css-modules 1.0.0 → 1.1.1

package/README.md

@@ -93,12 +93,34 @@ pnpm build
 
 `ember-css-modules` allows composing (really, inheriting) CSS code in two ways:
 
-- `{{local-class ... from="..."}}` in `*.hbs`
 - `composes: ... from '...';` in `*.css`
+- `{{local-class ... from="..."}}` in `*.hbs`
+
+The first syntax will continue to work in an Embroider app, provided that the import path is either `global` or a relative path.
+
+```css
+/* app/components/ui/form/textarea.css */
+.textarea {
+  composes: input from "./input.css";
+}
+
+.is-disabled {
+  composes: input-disabled from global;
+}
+
+/* These do not work */
+.textarea {
+  composes: input from "my-app/components/ui/form/input.css";
+}
+
+.textarea {
+  composes: input from "my-v2-addon/components/ui/form/input.css";
+}
+```
 
-Code inheritance can be signs of premature abstraction and incorrect component design. Ideally, you might duplicate code, then refactor it.
+The second syntax isn't supported by the `{{local}}` helper from `embroider-css-modules`, so you will need to update the template and stylesheet accordingly.
 
-If short on time, you can import the relevant `styles` object in the backing class.
+However, note that the presence of `composes` (in a set of related components) may indicate a premature abstraction and an incorrect component design. Ideally, you might duplicate the CSS, then refactor the components. If short on time, you can import the relevant `styles` object in the backing class.
 
 <details>
 
@@ -109,7 +131,7 @@ Case 1:
 ```hbs
 {{! app/components/ui/form/textarea.hbs }}
 <textarea
-  class={{local-class "input" from="app/components/ui/form/input.css"}}
+  class={{local-class "input" from="my-app/components/ui/form/input.css"}}
 />
 ```
 
@@ -118,7 +140,7 @@ Case 2:
 ```css
 /* app/components/ui/form/textarea.css */
 .textarea {
-  composes: input from "app/components/ui/form/input.css";
+  composes: input from "my-app/components/ui/form/input.css";
 }
 ```
 

package/dist/src/blueprints/ember-cli/component/javascript.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 
-<% if (options.componentStructure === 'nested') { %>import <%= options.__styles__ %> from './index.css';<% } else { %>import <%= options.__styles__ %> from './<%= entity.fileName %>.css';<% } %>
+<% if (options.componentStructure === 'nested') { %>import styles from './index.css';<% } else { %>import styles from './<%= entity.fileName %>.css';<% } %>
 
 export default class <%= entity.classifiedName %>Component extends Component {
-  <%= options.__styles__ %> = <%= options.__styles__ %>;
+  styles = styles;
 }

package/dist/src/blueprints/ember-cli/component/typescript.ts

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 
-<% if (options.componentStructure === 'nested') { %>import <%= options.__styles__ %> from './index.css';<% } else { %>import <%= options.__styles__ %> from './<%= entity.fileName %>.css';<% } %>
+<% if (options.componentStructure === 'nested') { %>import styles from './index.css';<% } else { %>import styles from './<%= entity.fileName %>.css';<% } %>
 
 interface <%= entity.classifiedName %>Signature {
   // The arguments accepted by the component
@@ -14,7 +14,7 @@ interface <%= entity.classifiedName %>Signature {
 }
 
 export default class <%= entity.classifiedName %>Component extends Component<<%= entity.classifiedName %>Signature> {
-  <%= options.__styles__ %> = <%= options.__styles__ %>;
+  styles = styles;
 }
 <% if (options.project.hasGlint) { %>
 declare module '@glint/environment-ember-loose/registry' {

package/dist/src/blueprints/ember-cli/controller/javascript.js

@@ -1,7 +1,7 @@
 import Controller from '@ember/controller';
 
-import <%= options.__styles__ %> from './<%= entity.fileName %>.css';
+import styles from './<%= entity.fileName %>.css';
 
 export default class <%= entity.classifiedName %>Controller extends Controller {
-  <%= options.__styles__ %> = <%= options.__styles__ %>;
+  styles = styles;
 }

package/dist/src/blueprints/ember-cli/controller/typescript.ts

@@ -1,7 +1,7 @@
 import Controller from '@ember/controller';
 
-import <%= options.__styles__ %> from './<%= entity.fileName %>.css';
+import styles from './<%= entity.fileName %>.css';
 
 export default class <%= entity.classifiedName %>Controller extends Controller {
-  <%= options.__styles__ %> = <%= options.__styles__ %>;
+  styles = styles;
 }

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

@@ -15,7 +15,6 @@ function analyzePackageJson(codemodOptions) {
 export function createOptions(codemodOptions) {
     const project = analyzePackageJson(codemodOptions);
     const options = {
-        __styles__: 'styles',
         componentStructure: codemodOptions.componentStructure,
         project,
         projectRoot: codemodOptions.projectRoot,

package/dist/src/migration/ember-app/steps/import-styles/update-class.js

@@ -15,7 +15,7 @@ function removeTemplateOnlyComponentMethod(file, data) {
                 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__)),
+                AST.builders.classProperty(AST.builders.identifier('styles'), AST.builders.identifier('styles')),
             ]), superClass);
         },
         visitImportDeclaration(path) {
@@ -54,9 +54,7 @@ function importStylesInClass(file, data) {
     const nodes = ast.program.body;
     // @ts-ignore: Assume that types from external packages are correct
     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`)));
+    nodes.splice(index + 1, 0, AST.builders.importDeclaration([AST.builders.importDefaultSpecifier(AST.builders.identifier('styles'))], AST.builders.literal(`./${data.fileName}.css`)));
     return AST.print(ast);
 }
 function addStylesAsClassProperty(file, data) {
@@ -65,7 +63,7 @@ function addStylesAsClassProperty(file, data) {
         visitClassDeclaration(path) {
             const { body } = path.node.body;
             const nodesToAdd = [
-                AST.builders.classProperty(AST.builders.identifier(data.__styles__), AST.builders.identifier(data.__styles__)),
+                AST.builders.classProperty(AST.builders.identifier('styles'), AST.builders.identifier('styles')),
             ];
             if (body.length > 0) {
                 // @ts-ignore: Assume that types from external packages are correct
@@ -79,11 +77,10 @@ function addStylesAsClassProperty(file, data) {
 }
 export function updateClass(entityName, { customizations, options }) {
     const { getFilePath } = customizations;
-    const { __styles__, projectRoot } = options;
+    const { projectRoot } = options;
     const filePath = getFilePath(entityName);
     const { ext, name } = parseFilePath(filePath);
     const data = {
-        __styles__,
         fileName: name,
         isTypeScript: ext === '.ts',
     };

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

@@ -38,7 +38,7 @@ function sanitizeClassAndLocalClassAttributes(file) {
     });
     return AST.print(ast);
 }
-function mergeClassAndLocalClassAttributes(file, data) {
+function mergeClassAndLocalClassAttributes(file) {
     const traverse = AST.traverse();
     const ast = traverse(file, {
         ElementNode(node) {
@@ -63,14 +63,14 @@ function mergeClassAndLocalClassAttributes(file, data) {
             let params;
             if (localClassNames.length === 1) {
                 params = [
-                    AST.builders.path(`this.${data.__styles__}.${localClassNames[0]}`),
+                    AST.builders.path(`this.styles.${localClassNames[0]}`),
                     AST.builders.string(` ${classAttributeValue}`),
                 ];
             }
             else {
                 params = [
-                    AST.builders.sexpr('local-class', [
-                        AST.builders.path(`this.${data.__styles__}`),
+                    AST.builders.sexpr('local', [
+                        AST.builders.path('this.styles'),
                         ...localClassNames.map(AST.builders.string),
                     ]),
                     AST.builders.string(` ${classAttributeValue}`),
@@ -83,7 +83,7 @@ function mergeClassAndLocalClassAttributes(file, data) {
     });
     return AST.print(ast);
 }
-function removeLocalClassHelpers(file, data) {
+function removeLocalClassHelpers(file) {
     /*
       The {{local-class}} helper from ember-css-modules allows
       1 positional argument. The argument's value is presumed
@@ -131,11 +131,29 @@ function removeLocalClassHelpers(file, data) {
             }
             const localClassNames = param.value.trim().split(/\s+/);
             if (localClassNames.length === 1) {
-                node.value = AST.builders.mustache(AST.builders.path(`this.${data.__styles__}.${localClassNames[0]}`));
+                node.value = AST.builders.mustache(AST.builders.path(`this.styles.${localClassNames[0]}`));
                 return;
             }
-            node.value = AST.builders.mustache(AST.builders.path('local-class'), [
-                AST.builders.path(`this.${data.__styles__}`),
+            node.value = AST.builders.mustache(AST.builders.path('local'), [
+                AST.builders.path('this.styles'),
+                ...localClassNames.map(AST.builders.string),
+            ]);
+        },
+        MustacheStatement(node) {
+            if (node.path.type !== 'PathExpression' ||
+                node.path.original !== 'local-class') {
+                return;
+            }
+            const param = node.params[0];
+            if (param.type !== 'StringLiteral') {
+                return;
+            }
+            const localClassNames = param.value.trim().split(/\s+/);
+            if (localClassNames.length === 1) {
+                return AST.builders.mustache(AST.builders.path(`this.styles.${localClassNames[0]}`));
+            }
+            return AST.builders.mustache(AST.builders.path('local'), [
+                AST.builders.path('this.styles'),
                 ...localClassNames.map(AST.builders.string),
             ]);
         },
@@ -154,17 +172,17 @@ function removeLocalClassHelpers(file, data) {
             }
             const localClassNames = param.value.trim().split(/\s+/);
             if (localClassNames.length === 1) {
-                return AST.builders.path(`this.${data.__styles__}.${localClassNames[0]}`);
+                return AST.builders.path(`this.styles.${localClassNames[0]}`);
             }
-            return AST.builders.sexpr(AST.builders.path('local-class'), [
-                AST.builders.path(`this.${data.__styles__}`),
+            return AST.builders.sexpr(AST.builders.path('local'), [
+                AST.builders.path('this.styles'),
                 ...localClassNames.map(AST.builders.string),
             ]);
         },
     });
     return AST.print(ast);
 }
-function removeLocalClassAttributes(file, data) {
+function removeLocalClassAttributes(file) {
     function transformParam(param) {
         // @ts-ignore: Assume that types from external packages are correct
         switch (param.type) {
@@ -213,15 +231,15 @@ function removeLocalClassAttributes(file, data) {
                         // @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__}`),
+                                AST.builders.path('this.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__}`),
+                        return AST.builders.mustache('local', [
+                            AST.builders.path('this.styles'),
                             ...params,
                         ]);
                     }
@@ -229,15 +247,15 @@ function removeLocalClassAttributes(file, data) {
                     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__}`),
+                        return AST.builders.mustache('local', [
+                            AST.builders.path('this.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__}`),
+                            AST.builders.path('this.styles'),
                             // @ts-ignore: Assume that types from external packages are correct
                             part.path,
                         ]);
@@ -252,10 +270,10 @@ function removeLocalClassAttributes(file, data) {
                 }
                 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(`this.styles.${localClassNames[0]}`));
                 }
-                return AST.builders.mustache(AST.builders.path('local-class'), [
-                    AST.builders.path(`this.${data.__styles__}`),
+                return AST.builders.mustache(AST.builders.path('local'), [
+                    AST.builders.path('this.styles'),
                     ...localClassNames.map(AST.builders.string),
                 ]);
             }
@@ -315,11 +333,11 @@ function removeLocalClassAttributes(file, data) {
             if (newValue.type === 'StringLiteral') {
                 node.value = AST.builders.path(
                 // @ts-ignore: Assume that types from external packages are correct
-                `this.${data.__styles__}.${newValue.value}`);
+                `this.styles.${newValue.value}`);
                 return;
             }
-            node.value = AST.builders.sexpr('local-class', [
-                AST.builders.path(`this.${data.__styles__}`),
+            node.value = AST.builders.sexpr('local', [
+                AST.builders.path('this.styles'),
                 // @ts-ignore: Assume that types from external packages are correct
                 newValue,
             ]);
@@ -329,17 +347,14 @@ function removeLocalClassAttributes(file, data) {
 }
 export function updateTemplate(entityName, { customizations, options }) {
     const { getFilePath } = customizations;
-    const { __styles__, projectRoot } = options;
+    const { 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);
+        file = mergeClassAndLocalClassAttributes(file);
+        file = removeLocalClassHelpers(file);
+        file = removeLocalClassAttributes(file);
         const fileMap = new Map([[filePath, file]]);
         createFiles(fileMap, options);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-codemod-remove-ember-css-modules",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Codemod to replace ember-css-modules with embroider-css-modules",
   "keywords": [
     "codemod",
@@ -26,26 +26,26 @@
     "dist"
   ],
   "dependencies": {
-    "@codemod-utils/ast-javascript": "^1.0.0",
-    "@codemod-utils/ast-template": "^1.0.0",
-    "@codemod-utils/blueprints": "^1.0.0",
-    "@codemod-utils/ember-cli-string": "^1.0.0",
-    "@codemod-utils/files": "^1.0.0",
-    "@codemod-utils/json": "^1.0.0",
+    "@codemod-utils/ast-javascript": "^1.2.0",
+    "@codemod-utils/ast-template": "^1.1.0",
+    "@codemod-utils/blueprints": "^1.1.0",
+    "@codemod-utils/ember-cli-string": "^1.1.0",
+    "@codemod-utils/files": "^1.1.0",
+    "@codemod-utils/json": "^1.1.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@codemod-utils/tests": "^1.0.0",
+    "@codemod-utils/tests": "^1.1.1",
     "@sondr3/minitest": "^0.1.2",
-    "@types/node": "^18.17.15",
-    "@types/yargs": "^17.0.24",
-    "concurrently": "^8.2.1",
-    "eslint": "^8.49.0",
+    "@types/node": "^18.18.7",
+    "@types/yargs": "^17.0.29",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.52.0",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2",
+    "@shared-configs/typescript": "0.0.0",
     "@shared-configs/eslint-config-node": "0.0.0",
-    "@shared-configs/prettier": "0.0.0",
-    "@shared-configs/typescript": "0.0.0"
+    "@shared-configs/prettier": "0.0.0"
   },
   "engines": {
     "node": "18.* || >= 20"