ember-codemod-remove-ember-css-modules 0.1.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Isaac J. Lee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,222 @@
+[![This project uses GitHub Actions for continuous integration.](https://github.com/ijlee2/embroider-css-modules/actions/workflows/ci.yml/badge.svg)](https://github.com/ijlee2/embroider-css-modules/actions/workflows/ci.yml)
+
+# ember-codemod-remove-ember-css-modules
+
+_Codemod to replace `ember-css-modules` with `embroider-css-modules`_
+
+
+## Features
+
+- Preserves your code whenever possible
+- Supports [`glint`](https://typed-ember.gitbook.io/glint/)
+- Focuses on maintainability and extensibility
+
+
+## Usage
+
+You can check [`ember-container-query`](https://github.com/ijlee2/ember-container-query/pull/167) as a reference.
+
+Step 1. Quickly migrate to [`embroider-css-modules`](https://github.com/ijlee2/embroider-css-modules).<sup>1</sup>
+
+```sh
+cd <your/project/path>
+npx ember-codemod-remove-ember-css-modules <arguments>
+```
+
+Step 2. Review the project.
+
+- [x] Update the configuration files.<sup>2</sup>
+- [x] Remove the remaining instances of `local-class` attributes and `{{local-class}}` helpers from `ember-css-modules`.
+- [x] Confirm that you can run all scripts in `package.json`.
+
+Step 3. Celebrate.
+
+<sup>1. Some prerequisites for running `ember-codemod-remove-ember-css-modules`: First, migrate to the Octane layout (flat or nested). You can leverage codemods for [classic](https://github.com/ember-codemods/ember-component-template-colocation-migrator) and [pod](https://github.com/ijlee2/ember-codemod-pod-to-octane) layouts. Second, [refactor code](#how-to-refactor-code) to help the codemod update templates correctly.</sup>
+
+<sup>2. Files such as `.eslintrc.js`, `.prettierrc.js`, `.stylelintrc.js`, `.template-lintrc.js`, `ember-cli-build.js`, `package.json`, `postcss.config.js`, `tsconfig.json`, etc.</sup>
+
+
+### Arguments
+
+<details>
+<summary>Optional: Specify the component structure</summary>
+
+By default, an Octane projects has the flat component structure. Pass `--component-structure` to indicate otherwise.
+
+```sh
+npx ember-codemod-remove-ember-css-modules --component-structure="nested"
+```
+
+</details>
+
+<details>
+<summary>Optional: Specify the project root</summary>
+
+Pass `--root` to run the codemod on a project somewhere else (i.e. not in the current directory).
+
+```sh
+npx ember-codemod-remove-ember-css-modules --root=<your/project/path>
+```
+
+</details>
+
+
+### Limitations
+
+The codemod is designed to cover typical uses of `ember-css-modules`. It is not designed to cover one-off cases.
+
+To better meet your needs, consider cloning the repo and running the codemod locally.
+
+```sh
+cd <your/cloned/repo>
+./bin/ember-codemod-remove-ember-css-modules.js --root=<your/project/path>
+```
+
+
+## How to refactor code
+
+### Remove code inheritance
+
+`ember-css-modules` allows composing (really, inheriting) CSS code in two ways:
+
+- `{{local-class ... from="..."}}` in `*.hbs`
+- `composes: ... from '...';` in `*.css`
+
+Code inheritance can be signs of premature abstraction and incorrect component design. Ideally, you might duplicate code, then refactor it.
+
+If short on time, you can import the relevant `styles` object in the backing class.
+
+<details>
+
+<summary>Before, with <code>ember-css-modules</code></summary>
+
+Case 1:
+
+```hbs
+{{! app/components/ui/form/textarea.hbs }}
+<textarea
+  class={{local-class "input" from "app/components/ui/form/input.css"}}
+/>
+```
+
+Case 2:
+
+```css
+/* app/components/ui/form/textarea.css */
+.textarea {
+  composes: input from "app/components/ui/form/input.css";
+}
+```
+
+```hbs
+{{! app/components/ui/form/textarea.hbs }}
+<textarea
+  local-class="textarea"
+/>
+```
+
+</details>
+
+<details>
+
+<summary>After, with <code>embroider-css-modules</code></summary>
+
+```ts
+/* app/components/ui/form/textarea.ts */
+import Component from '@glimmer/component';
+
+import inputStyles from './input.css';
+import styles from './textarea.css';
+
+export default class UiFormTextareaComponent extends Component {
+  inputStyles = inputStyles;
+  styles = styles;
+}
+```
+
+```hbs
+{{! app/components/ui/form/textarea.hbs }}
+<textarea
+  class={{this.inputStyles.input}}
+/>
+```
+
+</details>
+
+
+### Remove complex string concatenations
+
+In `ember-css-modules`, a string can represent multiple local class names via concatenation. In `embroider-css-modules`, each string represents exactly one.
+
+<details>
+
+<summary>Before, with <code>ember-css-modules</code></summary>
+
+```hbs
+{{! app/components/ui/form/textarea.hbs }}
+<textarea
+  local-class="
+    textarea
+    {{if (or @isDisabled @isReadOnly) 'is-disabled'}}
+  "
+/>
+```
+
+</details>
+
+<details>
+
+<summary>After, with <code>embroider-css-modules</code></summary>
+
+```hbs
+{{! app/components/ui/form/textarea.hbs }}
+<textarea
+  class={{local-class
+    this.styles
+    "textarea"
+    (if (or @isDisabled @isReadOnly) "is-disabled")
+  }}
+/>
+```
+
+</details>
+
+The codemod is not responsible for fixing complex expressions. Refactor templates to provide hints. For example, remove nested conditionals (apply them outside the HTML element) and use the `{{concat}}` helper to group substrings.
+
+<details>
+
+<summary>Before refactor, with <code>ember-css-modules</code></summary>
+
+```hbs
+{{! app/components/ui/form/phone.hbs }}
+<input
+  local-class="input flag-{{@country}}"
+  type="tel"
+/>
+```
+
+</details>
+
+<details>
+
+<summary>After refactor, with <code>ember-css-modules</code></summary>
+
+```hbs
+{{! app/components/ui/form/phone.hbs }}
+<input
+  local-class="input {{concat 'flag-' @country}}"
+  type="tel"
+/>
+```
+
+</details>
+
+
+## Compatibility
+
+* Node.js v16 or above
+
+
+## License
+
+This project is licensed under the [MIT License](LICENSE.md).

package/bin/ember-codemod-remove-ember-css-modules.js

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+'use strict';
+
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+
+import { removeEmberCssModules } from '../src/index.js';
+
+// Provide a title to the process in `ps`
+process.title = 'ember-codemod-remove-ember-css-modules';
+
+// Set codemod options
+const { argv } = yargs(hideBin(process.argv))
+  .option('component-structure', {
+    choices: ['flat', 'nested'],
+    default: 'flat',
+    describe: 'Component structure (how your components are colocated)',
+    type: 'string',
+  })
+  .option('root', {
+    describe: 'Location of your Ember project',
+    type: 'string',
+  });
+
+function castEmptyStringToUndefined(string) {
+  return string === '' ? undefined : string;
+}
+
+const codemodOptions = {
+  componentStructure: castEmptyStringToUndefined(argv['component-structure']),
+  projectRoot: argv['root'] ?? process.cwd(),
+};
+
+removeEmberCssModules(codemodOptions);

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "ember-codemod-remove-ember-css-modules",
+  "version": "0.1.0",
+  "description": "Codemod to replace ember-css-modules with embroider-css-modules",
+  "keywords": [
+    "codemod",
+    "css-modules",
+    "ember-codemod",
+    "ember-css-modules",
+    "emberjs",
+    "embroider-css-modules"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ijlee2/embroider-css-modules.git"
+  },
+  "license": "MIT",
+  "author": "Isaac J. Lee",
+  "main": "src/index.js",
+  "type": "module",
+  "bin": "./bin/ember-codemod-remove-ember-css-modules.js",
+  "files": [
+    "bin/",
+    "src/"
+  ],
+  "directories": {
+    "test": "tests"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.21.4",
+    "ember-template-recast": "^6.1.4",
+    "glob": "^10.0.0",
+    "lodash.template": "^4.5.0",
+    "recast": "^0.23.1",
+    "yargs": "^17.7.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/eslint-parser": "^7.21.3",
+    "@sondr3/minitest": "^0.1.1",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "fixturify": "^3.0.0",
+    "prettier": "^2.8.7"
+  },
+  "engines": {
+    "node": "16.* || >= 18"
+  },
+  "scripts": {
+    "lint": "eslint . --cache",
+    "lint:fix": "eslint . --fix",
+    "test": "mt tests --quiet"
+  }
+}

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

@@ -0,0 +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';<% } %>
+
+export default class <%= entity.classifiedName %>Component extends Component {
+  <%= options.__styles__ %> = <%= options.__styles__ %>;
+}

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

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+
+<% if (options.componentStructure === 'nested') { %>import <%= options.__styles__ %> from './index.css';<% } else { %>import <%= options.__styles__ %> from './<%= entity.fileName %>.css';<% } %>
+
+interface <%= entity.classifiedName %>Signature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class <%= entity.classifiedName %>Component extends Component<<%= entity.classifiedName %>Signature> {
+  <%= options.__styles__ %> = <%= options.__styles__ %>;
+}
+<% if (options.project.hasGlint) { %>
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    '<%= entity.doubleColonizedName %>': typeof <%= entity.classifiedName %>Component;
+    '<%= entity.name %>': typeof <%= entity.classifiedName %>Component;
+  }
+}
+<% } %>

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

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

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

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

package/src/index.js

@@ -0,0 +1,5 @@
+import { migrateEmberApp } from './migration/index.js';
+
+export function removeEmberCssModules(codemodOptions) {
+  migrateEmberApp(codemodOptions);
+}

package/src/migration/ember-app/index.js

@@ -0,0 +1,37 @@
+import {
+  analyzeApp,
+  createOptions,
+  importStylesInComponents,
+  importStylesInRoutes,
+  moveStylesheets,
+  updateAppAppJs,
+  updateComponentTemplates,
+  updatePackageJson,
+  updateRouteTemplates,
+} from './steps/index.js';
+
+export function migrateEmberApp(codemodOptions) {
+  const options = createOptions(codemodOptions);
+  const { hasEmberCssModules } = options.project;
+
+  // Guarantee idempotency
+  if (!hasEmberCssModules) {
+    return;
+  }
+
+  // Prepare for migration
+  const context = analyzeApp(options);
+
+  // Import styles in classes
+  moveStylesheets(options);
+  importStylesInComponents(context, options);
+  importStylesInRoutes(context, options);
+
+  // Update templates
+  updateComponentTemplates(context, options);
+  updateRouteTemplates(context, options);
+
+  // Fine-tune individual files
+  updateAppAppJs(options);
+  updatePackageJson(options);
+}

package/src/migration/ember-app/steps/analyze-app.js

@@ -0,0 +1,155 @@
+import { join, parse } from 'node:path';
+
+import { findFiles, renameDirectory } from '../../../utils/files.js';
+
+function findAndRenameFiles(findOptions, replaceOptions) {
+  const { globPattern, ignoreList, projectRoot } = findOptions;
+  const { from, to } = replaceOptions;
+
+  const filePaths = findFiles(globPattern, {
+    cwd: projectRoot,
+    ignoreList,
+  });
+
+  return filePaths.map((filePath) => {
+    return renameDirectory(filePath, { from, to });
+  });
+}
+
+function analyzeEntities({
+  classFilePaths,
+  stylesheetFilePaths,
+  templateFilePaths,
+}) {
+  const filePaths = [
+    ...classFilePaths,
+    ...stylesheetFilePaths,
+    ...templateFilePaths,
+  ].sort();
+
+  const entities = new Map();
+
+  filePaths.forEach((filePath) => {
+    const { dir, ext, name } = parse(filePath);
+    const entityName = join(dir, name);
+
+    if (entities.has(entityName)) {
+      entities.get(entityName).add(ext);
+
+      return;
+    }
+
+    entities.set(entityName, new Set([ext]));
+  });
+
+  return entities;
+}
+
+function analyzeComponents(options) {
+  const { componentStructure, projectRoot } = options;
+
+  const classFilePaths = findAndRenameFiles(
+    {
+      globPattern: 'app/components/**/*.{js,ts}',
+      ignoreList: ['app/components/**/*.d.ts'],
+      projectRoot,
+    },
+    {
+      from: 'app/components',
+      to: '',
+    }
+  );
+
+  const stylesheetFilePaths = findAndRenameFiles(
+    {
+      globPattern: 'app/components/**/*.css',
+      projectRoot,
+    },
+    {
+      from: 'app/components',
+      to: '',
+    }
+  );
+
+  const templateFilePaths = findAndRenameFiles(
+    {
+      globPattern: 'app/components/**/*.hbs',
+      projectRoot,
+    },
+    {
+      from: 'app/components',
+      to: '',
+    }
+  );
+
+  const entities = analyzeEntities({
+    classFilePaths,
+    stylesheetFilePaths,
+    templateFilePaths,
+  });
+
+  if (componentStructure === 'nested') {
+    return new Map(
+      [...entities.entries()].map(([entityName, extensions]) => {
+        const newEntityName = entityName.replace(/\/index$/, '');
+
+        return [newEntityName, extensions];
+      })
+    );
+  }
+
+  return entities;
+}
+
+function analyzeRoutes(options) {
+  const { projectRoot } = options;
+
+  const classFilePaths = findAndRenameFiles(
+    {
+      globPattern: 'app/controllers/**/*.{js,ts}',
+      ignoreList: ['app/controllers/**/*.d.ts'],
+      projectRoot,
+    },
+    {
+      from: 'app/controllers',
+      to: '',
+    }
+  );
+
+  const stylesheetFilePaths = findAndRenameFiles(
+    {
+      globPattern: 'app/styles/**/*.css',
+      ignoreList: ['app/styles/app.css'],
+      projectRoot,
+    },
+    {
+      from: 'app/styles',
+      to: '',
+    }
+  );
+
+  const templateFilePaths = findAndRenameFiles(
+    {
+      globPattern: 'app/templates/**/*.hbs',
+      ignoreList: ['app/templates/components/**/*'],
+      projectRoot,
+    },
+    {
+      from: 'app/templates',
+      to: '',
+    }
+  );
+
+  return analyzeEntities({
+    classFilePaths,
+    stylesheetFilePaths,
+    templateFilePaths,
+  });
+}
+
+export function analyzeApp(options) {
+  return {
+    components: analyzeComponents(options),
+    routes: analyzeRoutes(options),
+  };
+}

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

@@ -0,0 +1,44 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+function analyzePackageJson(codemodOptions) {
+  const { projectRoot } = codemodOptions;
+
+  try {
+    const packageJsonFile = readFileSync(
+      join(projectRoot, 'package.json'),
+      'utf8'
+    );
+
+    const { dependencies, devDependencies } = JSON.parse(packageJsonFile);
+
+    const projectDependencies = new Map([
+      ...Object.entries(dependencies ?? {}),
+      ...Object.entries(devDependencies ?? {}),
+    ]);
+
+    return {
+      dependencies: projectDependencies,
+      hasEmberCssModules: projectDependencies.has('ember-css-modules'),
+      hasGlint: projectDependencies.has('@glint/core'),
+      hasTypeScript: projectDependencies.has('typescript'),
+    };
+  } catch (e) {
+    throw new SyntaxError(
+      `ERROR: package.json is missing or is not valid. (${e.message})\n`
+    );
+  }
+}
+
+export function createOptions(codemodOptions) {
+  const project = analyzePackageJson(codemodOptions);
+
+  const options = {
+    __styles__: 'styles',
+    componentStructure: codemodOptions.componentStructure,
+    project,
+    projectRoot: codemodOptions.projectRoot,
+  };
+
+  return options;
+}

package/src/migration/ember-app/steps/import-styles-in-components.js

@@ -0,0 +1,43 @@
+import { join } from 'node:path';
+
+import { importStyles } from './shared/index.js';
+
+function getBlueprintFilePaths(options) {
+  const { project } = options;
+
+  if (project.hasTypeScript) {
+    return ['ember-cli/component/typescript.ts'];
+  }
+
+  return ['ember-cli/component/javascript.js'];
+}
+
+function getFilePath(options) {
+  const { componentStructure, project } = options;
+
+  return function (entityName) {
+    let filePath = join('app/components', entityName);
+
+    if (componentStructure === 'nested') {
+      filePath += '/index';
+    }
+
+    if (project.hasTypeScript) {
+      filePath += '.ts';
+    } else {
+      filePath += '.js';
+    }
+
+    return filePath;
+  };
+}
+
+export function importStylesInComponents(context, options) {
+  const customizations = {
+    blueprintFilePaths: getBlueprintFilePaths(options),
+    entities: context.components,
+    getFilePath: getFilePath(options),
+  };
+
+  importStyles(customizations, options);
+}