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

package/README.md

@@ -9,7 +9,11 @@ _Codemod to localize global styles_
 
 ### Arguments
 
-[PROVIDE REQUIRED AND OPTIONAL ARGUMENTS.]
+You must pass `--src` to indicate the location of your global stylesheet.
+
+```sh
+ember-codemod-remove-global-styles --src app/assets/app.css
+```
 
 <details>
 

package/dist/src/index.js

@@ -1,6 +1,7 @@
-import { analyzeProject, createCssModuleFiles, createOptions, } from './steps/index.js';
+import { analyzeProject, createCssModuleFiles, createOptions, updateProject, } from './steps/index.js';
 export function runCodemod(codemodOptions) {
     const options = createOptions(codemodOptions);
     const project = analyzeProject(options);
     createCssModuleFiles(project, options);
+    updateProject(project, options);
 }

package/dist/src/steps/analyze-project/analyze-components.js

@@ -0,0 +1,22 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { findFiles } from '@codemod-utils/files';
+import { getEntityData } from './get-entity-data.js';
+export function analyzeComponents(classToStyles, options) {
+    const { projectRoot } = options;
+    const filePaths = findFiles('app/components/**/*.{gjs,gts,hbs}', {
+        projectRoot,
+    });
+    const components = new Map();
+    filePaths.forEach((filePath) => {
+        const file = readFileSync(join(projectRoot, filePath), 'utf8');
+        const entityData = getEntityData(file, {
+            classToStyles,
+            isHbs: filePath.endsWith('.hbs'),
+        });
+        if (entityData.localStyles.length > 0) {
+            components.set(filePath, entityData);
+        }
+    });
+    return components;
+}

package/dist/src/steps/analyze-project/analyze-routes.js

@@ -0,0 +1,22 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { findFiles } from '@codemod-utils/files';
+import { getEntityData } from './get-entity-data.js';
+export function analyzeRoutes(classToStyles, options) {
+    const { projectRoot } = options;
+    const filePaths = findFiles('app/templates/**/*.{gjs,gts,hbs}', {
+        projectRoot,
+    });
+    const routes = new Map();
+    filePaths.forEach((filePath) => {
+        const file = readFileSync(join(projectRoot, filePath), 'utf8');
+        const entityData = getEntityData(file, {
+            classToStyles,
+            isHbs: filePath.endsWith('.hbs'),
+        });
+        if (entityData.localStyles.length > 0) {
+            routes.set(filePath, entityData);
+        }
+    });
+    return routes;
+}

package/dist/src/steps/analyze-project/get-entity-data.js

@@ -0,0 +1,36 @@
+import { findTemplateTags } from '@codemod-utils/ast-template-tag';
+import { getClasses } from '../../utils/css/index.js';
+function getLocalStyles(classes, data) {
+    const classesSet = new Set(classes);
+    const localStyles = classes.reduce((accumulator, className) => {
+        const styles = data.classToStyles.get(className) ?? [];
+        const filteredStyles = styles.filter(({ classes }) => {
+            return classes.every((className) => classesSet.has(className));
+        });
+        accumulator.push(...filteredStyles);
+        return accumulator;
+    }, []);
+    return localStyles;
+}
+export function getEntityData(file, data) {
+    const classes = [];
+    const errors = [];
+    if (data.isHbs) {
+        const output = getClasses(file);
+        classes.push(...output.classes);
+        errors.push(...output.errors);
+    }
+    else {
+        const templateTags = findTemplateTags(file);
+        templateTags.forEach(({ contents }) => {
+            const output = getClasses(contents);
+            classes.push(...output.classes);
+            errors.push(...output.errors);
+        });
+    }
+    return {
+        classes,
+        errors,
+        localStyles: getLocalStyles(classes, data),
+    };
+}

package/dist/src/steps/analyze-project/index.js

@@ -0,0 +1,2 @@
+export * from './analyze-components.js';
+export * from './analyze-routes.js';

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

@@ -1,11 +1,15 @@
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { getClassToStyles } from '../utils/css/index.js';
+import { analyzeComponents, analyzeRoutes } from './analyze-project/index.js';
 export function analyzeProject(options) {
     const { projectRoot, src } = options;
     const stylesheet = readFileSync(join(projectRoot, src), 'utf8');
     const classToStyles = getClassToStyles(stylesheet);
+    const components = analyzeComponents(classToStyles, options);
+    const routes = analyzeRoutes(classToStyles, options);
     return {
-        classToStyles,
+        components,
+        routes,
     };
 }

package/dist/src/steps/create-css-module-files/get-file.js

@@ -0,0 +1,11 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+export function getFile(filePath, options) {
+    const { projectRoot } = options;
+    try {
+        return readFileSync(join(projectRoot, filePath), 'utf8');
+    }
+    catch {
+        return '';
+    }
+}

package/dist/src/steps/create-css-module-files/index.js

@@ -0,0 +1,2 @@
+export * from './get-file.js';
+export * from './log-errors.js';

package/dist/src/steps/create-css-module-files/log-errors.js

@@ -0,0 +1,8 @@
+export function logErrors(errors, data) {
+    if (errors.length === 0) {
+        return;
+    }
+    console.warn(`WARNING: ${data.cssModuleFilePath} may be incorrect.`);
+    console.warn(errors.map((error) => `- ${error}`).join('\n'));
+    console.log();
+}

package/dist/src/steps/create-css-module-files.js

@@ -1,54 +1,21 @@
-import { existsSync, readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { findTemplateTags } from '@codemod-utils/ast-template-tag';
-import { createFiles, findFiles } from '@codemod-utils/files';
-import { getClasses, getModuleFilePath, printStyles, } from '../utils/css/index.js';
+import { createFiles } from '@codemod-utils/files';
+import { getModuleFilePath, printStyles } from '../utils/css/index.js';
+import { getFile, logErrors } from './create-css-module-files/index.js';
 export function createCssModuleFiles(project, options) {
-    const { projectRoot } = options;
-    const filePaths = findFiles('app/{components,templates}/**/*.{gjs,gts,hbs}', {
-        projectRoot,
-    });
     const fileMap = new Map();
-    filePaths.forEach((filePath) => {
-        const file = readFileSync(join(projectRoot, filePath), 'utf8');
-        const classes = [];
-        const errors = [];
-        if (filePath.endsWith('.hbs')) {
-            const output = getClasses(file);
-            classes.push(...output.classes);
-            errors.push(...output.errors);
-        }
-        else {
-            const templateTags = findTemplateTags(file);
-            templateTags.forEach(({ contents }) => {
-                const output = getClasses(contents);
-                classes.push(...output.classes);
-                errors.push(...output.errors);
-            });
-        }
-        const classesSet = new Set(classes);
-        const localStyles = classes.reduce((accumulator, className) => {
-            const styles = project.classToStyles.get(className) ?? [];
-            const filteredStyles = styles.filter(({ classes }) => {
-                return classes.every((className) => classesSet.has(className));
-            });
-            accumulator.push(...filteredStyles);
-            return accumulator;
-        }, []);
-        if (localStyles.length === 0) {
-            return;
-        }
+    project.components.forEach((data, filePath) => {
+        const cssModuleFilePath = getModuleFilePath(filePath);
+        let cssModuleFile = getFile(cssModuleFilePath, options);
+        cssModuleFile += `${printStyles(data.localStyles)}\n`;
+        fileMap.set(cssModuleFilePath, cssModuleFile);
+        logErrors(data.errors, { cssModuleFilePath });
+    });
+    project.routes.forEach((data, filePath) => {
         const cssModuleFilePath = getModuleFilePath(filePath);
-        let cssModuleFile = existsSync(join(projectRoot, cssModuleFilePath))
-            ? readFileSync(join(projectRoot, cssModuleFilePath), 'utf8')
-            : '';
-        cssModuleFile += `${printStyles(localStyles)}\n`;
+        let cssModuleFile = getFile(cssModuleFilePath, options);
+        cssModuleFile += `${printStyles(data.localStyles)}\n`;
         fileMap.set(cssModuleFilePath, cssModuleFile);
-        if (errors.length > 0) {
-            console.warn(`WARNING: ${cssModuleFilePath} may be incorrect.`);
-            console.warn(errors.map((error) => `- ${error}`).join('\n'));
-            console.log();
-        }
+        logErrors(data.errors, { cssModuleFilePath });
     });
-    createFiles(fileMap, { projectRoot });
+    createFiles(fileMap, options);
 }

package/dist/src/steps/index.js

@@ -1,3 +1,4 @@
 export * from './analyze-project.js';
 export * from './create-css-module-files.js';
 export * from './create-options.js';
+export * from './update-project.js';

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

@@ -0,0 +1,44 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { updateTemplates } from '@codemod-utils/ast-template-tag';
+import { createFiles } from '@codemod-utils/files';
+import { addLocalClasses, getClassToStyles, getModuleFilePath, } from '../utils/css/index.js';
+export function updateProject(project, options) {
+    function getFile(filePath) {
+        return readFileSync(join(options.projectRoot, filePath), 'utf8');
+    }
+    const fileMap = new Map();
+    project.components.forEach((_data, filePath) => {
+        const cssModuleFile = getFile(getModuleFilePath(filePath));
+        let file = getFile(filePath);
+        const data = {
+            classToStyles: getClassToStyles(cssModuleFile),
+        };
+        if (filePath.endsWith('.hbs')) {
+            file = addLocalClasses(file, data);
+        }
+        else {
+            file = updateTemplates(file, (code) => {
+                return addLocalClasses(code, data);
+            });
+        }
+        fileMap.set(filePath, file);
+    });
+    project.routes.forEach((_data, filePath) => {
+        const cssModuleFile = getFile(getModuleFilePath(filePath));
+        let file = getFile(filePath);
+        const data = {
+            classToStyles: getClassToStyles(cssModuleFile),
+        };
+        if (filePath.endsWith('.hbs')) {
+            file = addLocalClasses(file, data);
+        }
+        else {
+            file = updateTemplates(file, (code) => {
+                return addLocalClasses(code, data);
+            });
+        }
+        fileMap.set(filePath, file);
+    });
+    createFiles(fileMap, options);
+}

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

@@ -0,0 +1 @@
+export * from './processor.js';

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

@@ -0,0 +1,110 @@
+import { AST } from '@codemod-utils/ast-template';
+export class Processor {
+    classToStyles;
+    constructor(args) {
+        this.classToStyles = args.classToStyles;
+    }
+    isLocal(className) {
+        return this.classToStyles.has(className);
+    }
+    processConcatStatement(nodeValue) {
+        const parts = nodeValue.parts
+            .map((part) => {
+            switch (part.type) {
+                case 'MustacheStatement': {
+                    return [
+                        this.processMustacheStatement(part),
+                        AST.builders.text(' '),
+                    ];
+                }
+                case 'TextNode': {
+                    return [this.processTextNode(part), AST.builders.text(' ')];
+                }
+                default: {
+                    return part;
+                }
+            }
+        })
+            .flat();
+        return AST.builders.concat(parts);
+    }
+    processMustacheStatement(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;
+    }
+    processStringLiteral(nodeValue) {
+        const classNames = nodeValue.original.split(/\s+/).filter(Boolean);
+        if (classNames.length === 0) {
+            return AST.builders.text('');
+        }
+        if (classNames.length === 1) {
+            const className = classNames[0];
+            return this.isLocal(className)
+                ? AST.builders.path(`styles.${className}`)
+                : nodeValue;
+        }
+        const hasLocalClass = classNames.some(this.isLocal.bind(this));
+        if (!hasLocalClass) {
+            return nodeValue;
+        }
+        const parts = classNames
+            .map((className) => {
+            return this.isLocal(className)
+                ? [AST.builders.path(`styles.${className}`), AST.builders.string(' ')]
+                : [AST.builders.string(`${className} `), AST.builders.string(' ')];
+        })
+            .flat();
+        // Remove space at the end
+        parts.splice(-1);
+        return AST.builders.sexpr(AST.builders.path('concat'), parts);
+    }
+    processTextNode(nodeValue) {
+        const classNames = nodeValue.chars.split(/\s+/).filter(Boolean);
+        if (classNames.length === 0) {
+            return AST.builders.text('');
+        }
+        if (classNames.length === 1) {
+            const className = classNames[0];
+            return this.isLocal(className)
+                ? AST.builders.mustache(`styles.${className}`)
+                : nodeValue;
+        }
+        const hasLocalClass = classNames.some(this.isLocal.bind(this));
+        if (!hasLocalClass) {
+            return nodeValue;
+        }
+        const parts = classNames
+            .map((className) => {
+            return this.isLocal(className)
+                ? [AST.builders.path(`styles.${className}`), AST.builders.string(' ')]
+                : [AST.builders.string(className), AST.builders.string(' ')];
+        })
+            .flat();
+        // Remove space at the end
+        parts.splice(-1);
+        return AST.builders.mustache(AST.builders.path('concat'), parts);
+    }
+}

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

@@ -0,0 +1,28 @@
+import { AST } from '@codemod-utils/ast-template';
+import { Processor } from './add-local-classes/index.js';
+export function addLocalClasses(file, data) {
+    const processor = new Processor(data);
+    const traverse = AST.traverse();
+    const ast = traverse(file, {
+        AttrNode(node) {
+            if (node.name !== 'class') {
+                return;
+            }
+            switch (node.value.type) {
+                case 'ConcatStatement': {
+                    node.value = processor.processConcatStatement(node.value);
+                    break;
+                }
+                case 'MustacheStatement': {
+                    node.value = processor.processMustacheStatement(node.value);
+                    break;
+                }
+                case 'TextNode': {
+                    node.value = processor.processTextNode(node.value);
+                    break;
+                }
+            }
+        },
+    });
+    return AST.print(ast);
+}

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

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

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

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

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

@@ -0,0 +1,3 @@
+export function extractSelectors(selectorList) {
+    return selectorList.split(/\s*,\s*/);
+}

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

@@ -0,0 +1,3 @@
+export * from './extract-classes.js';
+export * from './extract-root-class.js';
+export * from './extract-selectors.js';

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

@@ -1,28 +1,18 @@
 import postcss from 'postcss';
-function getClasses(selector) {
-    const matches = Array.from(selector.matchAll(/\.([\w-]+)/g));
-    return matches.map((results) => results[1]);
-}
-function getRootClass(selector) {
-    const matches = selector.match(/^\.([\w-]+).*$/);
-    if (matches === null) {
-        return undefined;
-    }
-    return matches[1];
-}
+import { extractClasses, extractRootClass, extractSelectors, } from './get-class-to-styles/index.js';
 export function getClassToStyles(file) {
     const classToStyles = new Map();
     function processRule(node) {
-        const allSelectors = node.selector.split(/\s*,\s*/);
+        const selectors = extractSelectors(node.selector);
         const clone = node.clone();
-        allSelectors.forEach((selector) => {
-            const containerClass = getRootClass(selector);
+        selectors.forEach((selector) => {
+            const containerClass = extractRootClass(selector);
             if (containerClass === undefined) {
                 return;
             }
             clone.selector = selector;
             const data = {
-                classes: getClasses(selector),
+                classes: extractClasses(selector),
                 location: {
                     end: node.source.end,
                     start: node.source.start,

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

@@ -0,0 +1 @@
+export * from './processor.js';

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

@@ -0,0 +1,69 @@
+function extractClasses(value) {
+    return value.split(/\s+/).filter(Boolean);
+}
+export class Processor {
+    classes = new Set();
+    errors = [];
+    print() {
+        const { classes, errors } = this;
+        return {
+            classes: Array.from(classes),
+            errors,
+        };
+    }
+    processConcatStatement(nodeValue) {
+        nodeValue.parts.forEach((part) => {
+            switch (part.type) {
+                case 'MustacheStatement': {
+                    this.processMustacheStatement(part);
+                    break;
+                }
+                case 'TextNode': {
+                    this.processTextNode(part);
+                    break;
+                }
+            }
+        });
+    }
+    processMustacheStatement(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;
+            }
+        }
+    }
+    processStringLiteral(nodeValue) {
+        const classNames = extractClasses(nodeValue.original);
+        classNames.forEach((className) => {
+            this.classes.add(className);
+        });
+    }
+    processTextNode(nodeValue) {
+        const classNames = extractClasses(nodeValue.chars);
+        classNames.forEach((className) => {
+            this.classes.add(className);
+        });
+    }
+}

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

@@ -1,48 +1,7 @@
 import { AST } from '@codemod-utils/ast-template';
+import { Processor } from './get-classes/index.js';
 export function getClasses(file) {
-    const classes = new Set();
-    const errors = [];
-    function processMustacheStatement(nodeValue) {
-        switch (nodeValue.path.type) {
-            case 'PathExpression': {
-                switch (nodeValue.path.original) {
-                    case 'if':
-                    case 'unless': {
-                        if (nodeValue.params[1]?.type === 'StringLiteral') {
-                            processStringLiteral(nodeValue.params[1]);
-                        }
-                        if (nodeValue.params[2]?.type === 'StringLiteral') {
-                            processStringLiteral(nodeValue.params[2]);
-                        }
-                        break;
-                    }
-                    default: {
-                        const isLocalClass = nodeValue.path.original.startsWith('styles.');
-                        if (!isLocalClass) {
-                            errors.push(`Could not analyze {{${nodeValue.path.original}}} in template, line ${nodeValue.loc.start.line}.`);
-                        }
-                    }
-                }
-                break;
-            }
-            case 'StringLiteral': {
-                processStringLiteral(nodeValue.path);
-                break;
-            }
-        }
-    }
-    function processStringLiteral(nodeValue) {
-        const classNames = nodeValue.original.split(/\s+/).filter(Boolean);
-        classNames.forEach((className) => {
-            classes.add(className);
-        });
-    }
-    function processTextNode(nodeValue) {
-        const classNames = nodeValue.chars.split(/\s+/).filter(Boolean);
-        classNames.forEach((className) => {
-            classes.add(className);
-        });
-    }
+    const processor = new Processor();
     const traverse = AST.traverse();
     traverse(file, {
         AttrNode(node) {
@@ -51,33 +10,19 @@ export function getClasses(file) {
             }
             switch (node.value.type) {
                 case 'ConcatStatement': {
-                    node.value.parts.forEach((part) => {
-                        switch (part.type) {
-                            case 'MustacheStatement': {
-                                processMustacheStatement(part);
-                                break;
-                            }
-                            case 'TextNode': {
-                                processTextNode(part);
-                                break;
-                            }
-                        }
-                    });
+                    processor.processConcatStatement(node.value);
                     break;
                 }
                 case 'MustacheStatement': {
-                    processMustacheStatement(node.value);
+                    processor.processMustacheStatement(node.value);
                     break;
                 }
                 case 'TextNode': {
-                    processTextNode(node.value);
+                    processor.processTextNode(node.value);
                     break;
                 }
             }
         },
     });
-    return {
-        classes: Array.from(classes),
-        errors,
-    };
+    return processor.print();
 }

package/dist/src/utils/css/index.js

@@ -1,3 +1,4 @@
+export * from './add-local-classes.js';
 export * from './get-class-to-styles.js';
 export * from './get-classes.js';
 export * from './get-module-file-path.js';

package/package.json

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