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

package/README.md

@@ -5,8 +5,38 @@
 _Codemod to localize global styles_
 
 
+## Why use it?
+
+Moving from global styles to CSS modules can be tedious and error-prone. Run this codemod to get started.
+
+The codemod:
+
+- Statically analyzes code (no need to build projects)
+- Supports v1 apps (classic, Webpack), v2 apps (Vite)
+- Light and fast
+
+
 ## Usage
 
+Step 1. Quickly migrate.<sup>1,2</sup>
+
+```sh
+cd <path/to/your/project>
+pnpx ember-codemod-remove-global-styles <arguments>
+```
+
+Step 2. Review the package.
+
+- [x] Fix format and lint errors.<sup>3</sup>
+- [x] Run tests.
+
+<sup>1. The codemod assumes that your apps and addons follow the Octane layout (flat or nested). If not, you can run codemods to move away from [classic](https://github.com/ember-codemods/ember-component-template-colocation-migrator) and [pod](https://github.com/ijlee2/ember-codemod-pod-to-octane).</sup>
+
+<sup>2. The codemod assumes a single CSS file, where you have defined all global styles that you own. You can obtain such a file by exploring the `dist/assets` folder.</sup>
+
+<sup>3. If you need lint configs that support `*.module.css`, you can install packages from [`@ijlee2-frontend-configs`](https://github.com/ijlee2/frontend-configs).</sup>
+
+
 ### Arguments
 
 You must pass `--src` to indicate the location of your global stylesheet.

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

@@ -5,7 +5,10 @@ export class Processor {
         this.args = args;
     }
     getLocalClass(className) {
-        return this.args.isHbs ? `this.styles.${className}` : `styles.${className}`;
+        return `${this.getStyles()}.${className}`;
+    }
+    getStyles() {
+        return this.args.isHbs ? 'this.styles' : 'styles';
     }
     isLocal(className) {
         return this.args.classToStyles.has(className);
@@ -69,20 +72,37 @@ export class Processor {
                 ? AST.builders.path(this.getLocalClass(className))
                 : nodeValue;
         }
-        const hasLocalClass = classNames.some(this.isLocal.bind(this));
-        if (!hasLocalClass) {
+        const allGlobal = classNames.every((className) => !this.isLocal(className));
+        if (allGlobal) {
             return nodeValue;
         }
-        const parts = classNames
-            .map((className) => {
-            return this.isLocal(className)
-                ? [
-                    AST.builders.path(this.getLocalClass(className)),
-                    AST.builders.string(' '),
-                ]
-                : [AST.builders.string(`${className} `), AST.builders.string(' ')];
-        })
-            .flat();
+        const allLocal = classNames.every(this.isLocal.bind(this));
+        if (allLocal) {
+            const parts = [
+                AST.builders.path(this.getStyles()),
+                ...classNames.map((className) => AST.builders.string(className)),
+            ];
+            return AST.builders.sexpr(AST.builders.path('local'), parts);
+        }
+        const parts = [];
+        const globalClasses = [];
+        classNames.forEach((className) => {
+            if (!this.isLocal(className)) {
+                globalClasses.push(className);
+                return;
+            }
+            if (globalClasses.length > 0) {
+                parts.push(AST.builders.string(globalClasses.join(' ')));
+                parts.push(AST.builders.string(' '));
+            }
+            parts.push(AST.builders.path(this.getLocalClass(className)));
+            parts.push(AST.builders.string(' '));
+            globalClasses.length = 0;
+        });
+        if (globalClasses.length > 0) {
+            parts.push(AST.builders.string(globalClasses.join(' ')));
+            parts.push(AST.builders.string(' '));
+        }
         // Remove space at the end
         parts.splice(-1);
         return AST.builders.sexpr(AST.builders.path('concat'), parts);
@@ -125,20 +145,37 @@ export class Processor {
                 ? AST.builders.mustache(this.getLocalClass(className))
                 : nodeValue;
         }
-        const hasLocalClass = classNames.some(this.isLocal.bind(this));
-        if (!hasLocalClass) {
+        const allGlobal = classNames.every((className) => !this.isLocal(className));
+        if (allGlobal) {
             return nodeValue;
         }
-        const parts = classNames
-            .map((className) => {
-            return this.isLocal(className)
-                ? [
-                    AST.builders.path(this.getLocalClass(className)),
-                    AST.builders.string(' '),
-                ]
-                : [AST.builders.string(className), AST.builders.string(' ')];
-        })
-            .flat();
+        const allLocal = classNames.every(this.isLocal.bind(this));
+        if (allLocal) {
+            const parts = [
+                AST.builders.path(this.getStyles()),
+                ...classNames.map((className) => AST.builders.string(className)),
+            ];
+            return AST.builders.mustache(AST.builders.path('local'), parts);
+        }
+        const parts = [];
+        const globalClasses = [];
+        classNames.forEach((className) => {
+            if (!this.isLocal(className)) {
+                globalClasses.push(className);
+                return;
+            }
+            if (globalClasses.length > 0) {
+                parts.push(AST.builders.string(globalClasses.join(' ')));
+                parts.push(AST.builders.string(' '));
+            }
+            parts.push(AST.builders.path(this.getLocalClass(className)));
+            parts.push(AST.builders.string(' '));
+            globalClasses.length = 0;
+        });
+        if (globalClasses.length > 0) {
+            parts.push(AST.builders.string(globalClasses.join(' ')));
+            parts.push(AST.builders.string(' '));
+        }
         // Remove space at the end
         parts.splice(-1);
         return AST.builders.mustache(AST.builders.path('concat'), parts);

package/dist/src/utils/css/get-class-to-styles/extract-classes.js

@@ -1,4 +1,6 @@
 export function extractClasses(selector) {
     const matches = Array.from(selector.matchAll(/\.([\w-]+)/g));
-    return matches.map((results) => results[1]);
+    return matches
+        .map((results) => results[1])
+        .map((selector) => selector.trim());
 }

package/dist/src/utils/css/get-class-to-styles/extract-root-class.js

@@ -1,5 +1,5 @@
 export function extractRootClass(selector) {
-    const matches = selector.match(/^\.([\w-]+).*$/);
+    const matches = selector.match(/^\.([\w-]+)/);
     if (matches === null) {
         return undefined;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-codemod-remove-global-styles",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Codemod to localize global styles",
   "keywords": [
     "codemod",
@@ -43,8 +43,8 @@
     "prettier": "^3.6.2",
     "typescript": "^5.9.3",
     "@shared-configs/prettier": "0.0.0",
-    "@shared-configs/typescript": "0.0.0",
-    "@shared-configs/eslint-config-node": "0.0.0"
+    "@shared-configs/eslint-config-node": "0.0.0",
+    "@shared-configs/typescript": "0.0.0"
   },
   "engines": {
     "node": "20.* || >= 22"