ember-codemod-remove-ember-css-modules 0.4.3 → 1.1.0

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";
 }
 ```
 
@@ -228,7 +250,7 @@ The codemod may fail to update complex expressions. Refactor templates to provid
 
 ## Compatibility
 
-- Node.js v16 or above
+- Node.js v18 or above
 
 
 ## Contributing

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/analyze-app/analyze-file-paths.js

@@ -6,7 +6,6 @@ export function analyzeFilePaths(filePaths) {
         const { dir, ext, name } = parseFilePath(filePath);
         const entityName = join(dir, name);
         if (entities.has(entityName)) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             entities.get(entityName).add(ext);
             return;
         }

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

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { AST } from '@codemod-utils/ast-javascript';
@@ -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-app-app-js.js

@@ -10,7 +10,6 @@ function addCssEntryPoint(file, data) {
                 AST.builders.importDeclaration([], AST.builders.literal('./assets/app.css')),
                 AST.builders.noop(),
             ];
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
             path.value.body.unshift(...nodesToAdd);
             return false;
         },
@@ -26,7 +25,6 @@ export function updateAppAppJs(options) {
         console.warn('WARNING: updateAppAppJs could not find app.{js,ts} in the app folder. Will skip this step.\n');
         return;
     }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const filePath = filePaths[0];
     const fileExtension = extname(filePath);
     const data = {

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

@@ -26,7 +26,6 @@ function updateDevDependencies(packageJson, options) {
         const version = getVersion(packageName, options);
         devDependencies.set(packageName, version);
     });
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     packageJson['devDependencies'] = convertToObject(devDependencies);
 }
 function updateScripts(packageJson, options) {
@@ -35,7 +34,6 @@ function updateScripts(packageJson, options) {
     if (project.hasTypeScript) {
         scripts.set('prelint:types', 'type-css-modules --src app');
     }
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     packageJson['scripts'] = convertToObject(scripts);
 }
 export function updatePackageJson(options) {

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

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { AST } from '@codemod-utils/ast-template';
@@ -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/dist/src/utils/blueprints/get-version.js

@@ -1,14 +1,14 @@
 import { decideVersion } from '@codemod-utils/blueprints';
 const latestVersions = new Map([
-    ['@embroider/compat', '3.0.2'],
-    ['@embroider/core', '3.0.2'],
-    ['@embroider/webpack', '3.0.0'],
-    ['autoprefixer', '10.4.14'],
-    ['embroider-css-modules', '0.1.9'],
-    ['postcss', '8.4.24'],
+    ['@embroider/compat', '3.2.1'],
+    ['@embroider/core', '3.2.1'],
+    ['@embroider/webpack', '3.1.5'],
+    ['autoprefixer', '10.4.15'],
+    ['embroider-css-modules', '1.0.0'],
+    ['postcss', '8.4.29'],
     ['postcss-loader', '7.3.3'],
-    ['type-css-modules', '0.2.2'],
-    ['webpack', '5.87.0'],
+    ['type-css-modules', '1.0.0'],
+    ['webpack', '5.88.2'],
 ]);
 export function getVersion(packageName, options) {
     const { project } = options;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-codemod-remove-ember-css-modules",
-  "version": "0.4.3",
+  "version": "1.1.0",
   "description": "Codemod to replace ember-css-modules with embroider-css-modules",
   "keywords": [
     "codemod",
@@ -26,29 +26,29 @@
     "dist"
   ],
   "dependencies": {
-    "@codemod-utils/ast-javascript": "^0.3.4",
-    "@codemod-utils/ast-template": "^0.3.1",
-    "@codemod-utils/blueprints": "^0.2.1",
-    "@codemod-utils/ember-cli-string": "^0.1.1",
-    "@codemod-utils/files": "^0.5.3",
-    "@codemod-utils/json": "^0.4.2",
+    "@codemod-utils/ast-javascript": "^1.1.1",
+    "@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.1.0",
+    "@codemod-utils/json": "^1.0.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@codemod-utils/tests": "^0.3.1",
-    "@sondr3/minitest": "^0.1.1",
-    "@types/node": "^16.18.47",
-    "@types/yargs": "^17.0.24",
+    "@codemod-utils/tests": "^1.0.1",
+    "@sondr3/minitest": "^0.1.2",
+    "@types/node": "^18.18.5",
+    "@types/yargs": "^17.0.28",
     "concurrently": "^8.2.1",
-    "eslint": "^8.48.0",
+    "eslint": "^8.51.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": "16.* || >= 18"
+    "node": "18.* || >= 20"
   },
   "scripts": {
     "build": "./build.sh --production",