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

package/README.md

@@ -12,7 +12,7 @@ _Codemod to localize global styles_
 You must pass `--src` to indicate the location of your global stylesheet.
 
 ```sh
-ember-codemod-remove-global-styles --src app/assets/app.css
+pnpx ember-codemod-remove-global-styles --src app/assets/app.css
 ```
 
 <details>
@@ -22,7 +22,7 @@ ember-codemod-remove-global-styles --src app/assets/app.css
 Pass `--root` to run the codemod somewhere else (i.e. not in the current directory).
 
 ```sh
-npx ember-codemod-remove-global-styles --root <path/to/your/project>
+pnpx ember-codemod-remove-global-styles --root <path/to/your/project>
 ```
 
 </details>

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

@@ -13,6 +13,7 @@ export function updateProject(project, options) {
         let file = getFile(filePath);
         const data = {
             classToStyles: getClassToStyles(cssModuleFile),
+            isHbs: filePath.endsWith('.hbs'),
         };
         if (filePath.endsWith('.hbs')) {
             file = addLocalClasses(file, data);
@@ -29,6 +30,7 @@ export function updateProject(project, options) {
         let file = getFile(filePath);
         const data = {
             classToStyles: getClassToStyles(cssModuleFile),
+            isHbs: filePath.endsWith('.hbs'),
         };
         if (filePath.endsWith('.hbs')) {
             file = addLocalClasses(file, data);

package/dist/src/utils/css/add-local-classes/processor.js

@@ -1,11 +1,14 @@
 import { AST } from '@codemod-utils/ast-template';
 export class Processor {
-    classToStyles;
+    args;
     constructor(args) {
-        this.classToStyles = args.classToStyles;
+        this.args = args;
+    }
+    getLocalClass(className) {
+        return this.args.isHbs ? `this.styles.${className}` : `styles.${className}`;
     }
     isLocal(className) {
-        return this.classToStyles.has(className);
+        return this.args.classToStyles.has(className);
     }
     processConcatStatement(nodeValue) {
         const parts = nodeValue.parts
@@ -63,7 +66,7 @@ export class Processor {
         if (classNames.length === 1) {
             const className = classNames[0];
             return this.isLocal(className)
-                ? AST.builders.path(`styles.${className}`)
+                ? AST.builders.path(this.getLocalClass(className))
                 : nodeValue;
         }
         const hasLocalClass = classNames.some(this.isLocal.bind(this));
@@ -73,7 +76,10 @@ export class Processor {
         const parts = classNames
             .map((className) => {
             return this.isLocal(className)
-                ? [AST.builders.path(`styles.${className}`), AST.builders.string(' ')]
+                ? [
+                    AST.builders.path(this.getLocalClass(className)),
+                    AST.builders.string(' '),
+                ]
                 : [AST.builders.string(`${className} `), AST.builders.string(' ')];
         })
             .flat();
@@ -81,6 +87,33 @@ export class Processor {
         parts.splice(-1);
         return AST.builders.sexpr(AST.builders.path('concat'), parts);
     }
+    processSubExpression(nodeValue) {
+        switch (nodeValue.path.type) {
+            case 'PathExpression': {
+                switch (nodeValue.path.original) {
+                    case 'if':
+                    case 'unless': {
+                        if (nodeValue.params[1]?.type === 'StringLiteral') {
+                            // @ts-expect-error: Incorrect type
+                            nodeValue.params[1] = this.processStringLiteral(nodeValue.params[1]);
+                        }
+                        if (nodeValue.params[2]?.type === 'StringLiteral') {
+                            // @ts-expect-error: Incorrect type
+                            nodeValue.params[2] = this.processStringLiteral(nodeValue.params[2]);
+                        }
+                        break;
+                    }
+                }
+                break;
+            }
+            case 'StringLiteral': {
+                // @ts-expect-error: Incorrect type
+                nodeValue.path = this.processStringLiteral(nodeValue.path);
+                break;
+            }
+        }
+        return nodeValue;
+    }
     processTextNode(nodeValue) {
         const classNames = nodeValue.chars.split(/\s+/).filter(Boolean);
         if (classNames.length === 0) {
@@ -89,7 +122,7 @@ export class Processor {
         if (classNames.length === 1) {
             const className = classNames[0];
             return this.isLocal(className)
-                ? AST.builders.mustache(`styles.${className}`)
+                ? AST.builders.mustache(this.getLocalClass(className))
                 : nodeValue;
         }
         const hasLocalClass = classNames.some(this.isLocal.bind(this));
@@ -99,7 +132,10 @@ export class Processor {
         const parts = classNames
             .map((className) => {
             return this.isLocal(className)
-                ? [AST.builders.path(`styles.${className}`), AST.builders.string(' ')]
+                ? [
+                    AST.builders.path(this.getLocalClass(className)),
+                    AST.builders.string(' '),
+                ]
                 : [AST.builders.string(className), AST.builders.string(' ')];
         })
             .flat();

package/dist/src/utils/css/add-local-classes.js

@@ -23,6 +23,22 @@ export function addLocalClasses(file, data) {
                 }
             }
         },
+        HashPair(node) {
+            if (node.key !== 'class') {
+                return;
+            }
+            switch (node.value.type) {
+                case 'StringLiteral': {
+                    // @ts-expect-error: Incorrect type
+                    node.value = processor.processStringLiteral(node.value);
+                    break;
+                }
+                case 'SubExpression': {
+                    node.value = processor.processSubExpression(node.value);
+                    break;
+                }
+            }
+        },
     });
     return AST.print(ast);
 }

package/dist/src/utils/css/get-classes/processor.js

@@ -60,6 +60,35 @@ export class Processor {
             this.classes.add(className);
         });
     }
+    processSubExpression(nodeValue) {
+        switch (nodeValue.path.type) {
+            case 'PathExpression': {
+                switch (nodeValue.path.original) {
+                    case 'if':
+                    case 'unless': {
+                        if (nodeValue.params[1]?.type === 'StringLiteral') {
+                            this.processStringLiteral(nodeValue.params[1]);
+                        }
+                        if (nodeValue.params[2]?.type === 'StringLiteral') {
+                            this.processStringLiteral(nodeValue.params[2]);
+                        }
+                        break;
+                    }
+                    default: {
+                        const isLocalClass = nodeValue.path.original.startsWith('styles.');
+                        if (!isLocalClass) {
+                            this.errors.push(`Could not analyze {{${nodeValue.path.original}}} in template, line ${nodeValue.loc.start.line}.`);
+                        }
+                    }
+                }
+                break;
+            }
+            case 'StringLiteral': {
+                this.processStringLiteral(nodeValue.path);
+                break;
+            }
+        }
+    }
     processTextNode(nodeValue) {
         const classNames = extractClasses(nodeValue.chars);
         classNames.forEach((className) => {

package/dist/src/utils/css/get-classes.js

@@ -23,6 +23,21 @@ export function getClasses(file) {
                 }
             }
         },
+        HashPair(node) {
+            if (node.key !== 'class') {
+                return;
+            }
+            switch (node.value.type) {
+                case 'StringLiteral': {
+                    processor.processStringLiteral(node.value);
+                    break;
+                }
+                case 'SubExpression': {
+                    processor.processSubExpression(node.value);
+                    break;
+                }
+            }
+        },
     });
     return processor.print();
 }

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

@@ -1,3 +1,3 @@
 export function getModuleFilePath(filePath) {
-    return filePath.replace(/\.(gjs|gts|hbs)$/, '.module.css');
+    return filePath.replace(/(.+)\.(gjs|gts|hbs)$/, '$1.module.css');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-codemod-remove-global-styles",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Codemod to localize global styles",
   "keywords": [
     "codemod",