Introduce rollup-plugin-preprocess-css-modules package

Author: dfreeman

package.json

@@ -1,11 +1,21 @@
 {
   "private": true,
   "workspaces": [
+    "packages/ember-local-class",
+    "packages/glimmer-local-class-transform",
+    "packages/rollup-plugin-preprocess-css-modules",
     "packages/ember-css-modules",
     "test-packages/embroider-app",
     "test-packages/octane-addon",
     "test-packages/octane-addon-with-module-name",
     "test-packages/plugin-addon",
     "test-packages/sass-app"
-  ]
+  ],
+  "scripts": {
+    "build": "yarn workspace glimmer-local-class-transform prepare && yarn workspace rollup-plugin-preprocess-css-modules prepare && yarn workspace addon-v2 build"
+  },
+  "volta": {
+    "node": "22.15.0",
+    "yarn": "1.22.22"
+  }
 }

packages/rollup-plugin-preprocess-css-modules/.eslintrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier"],
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+  "env": {
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  }
+}

packages/rollup-plugin-preprocess-css-modules/.gitignore

@@ -0,0 +1 @@
+dist/

packages/rollup-plugin-preprocess-css-modules/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 100
+}

packages/rollup-plugin-preprocess-css-modules/README.md

@@ -0,0 +1,44 @@
+# `rollup-plugin-preprocess-css-modules`
+
+TODO
+
+```js
+// my-component.js
+import styles from './my-component.module.css';
+export default `
+  <h1 class="${styles.title}">Hello, world!</h1>
+`;
+```
+
+```css
+/* my-component.module.css */
+.title {
+  color: darkblue;
+}
+```
+
+===>
+
+```js
+// my-component.js
+import styles from './my-component.module.css.js';
+export default `
+  <h1 class="${styles.title}">Hello, world!</h1>
+`;
+```
+
+```js
+// my-component.module.css.js
+import './my-component.css';
+
+export default {
+  title: '_title_abc123_',
+};
+```
+
+```css
+/* my-component.css */
+._title_abc123_ {
+  color: darkblue;
+}
+```

packages/rollup-plugin-preprocess-css-modules/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "rollup-plugin-preprocess-css-modules",
+  "version": "1.0.0-alpha.0",
+  "description": "A Rollup plugin to preprocess CSS Modules into standard CSS for library distribution",
+  "license": "MIT",
+  "author": "Dan Freeman",
+  "homepage": "https://github.com/salsify/ember-css-modules/tree/master/packages/rollup-plugin-preprocess-css-modules",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/salsify/ember-css-modules.git",
+    "directory": "packages/rollup-plugin-preprocess-css-modules"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./dist/rollup-plugin.js"
+  },
+  "scripts": {
+    "prepare": "tsc --project tsconfig.build.json",
+    "test": "vitest run"
+  },
+  "files": [
+    "README.md",
+    "dist/**/!(*.test.*)"
+  ],
+  "dependencies": {
+    "minimatch": "^10.0.3",
+    "postcss": "^8.5.6",
+    "postcss-modules": "^6.0.1"
+  },
+  "devDependencies": {
+    "@types/common-tags": "^1.8.4",
+    "common-tags": "^1.8.2",
+    "eslint": "^8.22.0",
+    "fixturify-project": "^7.1.3",
+    "prettier": "^3.2.5",
+    "rollup": "^4.43.0",
+    "typescript": "^5.4.5",
+    "vitest": "^1.6.0"
+  },
+  "peerDependencies": {
+    "rollup": "^4.0.0"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

packages/rollup-plugin-preprocess-css-modules/src/rollup-plugin.test.ts

@@ -0,0 +1,100 @@
+import { readdir, readFile } from 'node:fs/promises';
+import { OutputOptions, rollup } from 'rollup';
+import { Project } from 'fixturify-project';
+import { describe, test, expect } from 'vitest';
+import { stripIndent } from 'common-tags';
+import { Addon } from '@embroider/addon-dev/rollup';
+import { preprocessCSSModules } from './rollup-plugin.js';
+
+describe('rollup-plugin-preprocess-css-modules', () => {
+  type Tree = { [name: string]: string | Tree };
+  async function readTree(path: string): Promise<Tree> {
+    let result: Tree = {};
+    for (let entry of await readdir(path, { withFileTypes: true })) {
+      let fullPath = `${path}/${entry.name}`;
+      if (entry.isDirectory()) {
+        result[entry.name] = await readTree(fullPath);
+      } else if (entry.isFile()) {
+        result[entry.name] = await readFile(fullPath, { encoding: 'utf8' });
+      }
+    }
+    return result;
+  }
+
+  test('generally works', async () => {
+    let project = new Project({
+      files: {
+        src: {
+          'index.js': stripIndent`
+            import styles from './styles.module.css';
+            
+            export const fooClass = styles.foo;
+          `,
+          'constants.module.css': stripIndent`
+            @value fooColor: green;
+          `,
+          'styles.module.css': stripIndent`
+            @value fooColor from './constants.module.css';
+            
+            .foo {
+              color: fooColor;
+            }
+          `,
+          'unused.module.css': stripIndent`
+            .unused {
+              color: red;
+            }
+          `,
+        },
+      },
+    });
+
+    let addon = new Addon({
+      srcDir: `${project.baseDir}/src`,
+      destDir: `${project.baseDir}/dist`,
+    });
+
+    await project.write();
+
+    let bundle = await rollup({
+      plugins: [
+        addon.publicEntrypoints(['index.js']),
+        preprocessCSSModules({
+          generateScopedName: (name) => `_${name}_abc123_`,
+        }),
+        addon.keepAssets(['**/*.css']),
+      ],
+    });
+
+    await bundle.write(addon.output() as OutputOptions);
+
+    expect(new Set(bundle.watchFiles)).toEqual(
+      new Set([
+        `${project.baseDir}/src/index.js`,
+        `${project.baseDir}/src/constants.module.css`,
+        `${project.baseDir}/src/styles.module.css`,
+      ]),
+    );
+
+    expect(await readTree(`${project.baseDir}/dist`)).toEqual({
+      'index.js':
+        stripIndent`
+          import "./styles.css"
+          ;
+
+          var styles = {"foo":"_foo_abc123_"};
+
+          const fooClass = styles.foo;
+
+          export { fooClass };
+          //# sourceMappingURL=index.js.map
+        ` + '\n',
+      'styles.css': stripIndent`
+        ._foo_abc123_ {
+          color: green;
+        }
+      `,
+      'index.js.map': `{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}`,
+    });
+  });
+});

packages/rollup-plugin-preprocess-css-modules/src/rollup-plugin.ts

@@ -0,0 +1,88 @@
+import type { Plugin, PluginContext, SourceMapInput } from 'rollup';
+import { Minimatch } from 'minimatch';
+import postcss from 'postcss';
+import modules from 'postcss-modules';
+
+type SeenRecord = { css: string; js: string; json: Record<string, string>; map: SourceMapInput };
+
+export type PreprocessCSSModulesConfig = {
+  include?: string;
+  generateScopedName?: (name: string, filename: string, css: string) => string;
+  getOutputFilename?: (filename: string) => string;
+};
+
+export function preprocessCSSModules({
+  include = '**/*.module.css',
+  getOutputFilename = (filename: string) => filename.replace(/\.module\.css$/, '.css'),
+  generateScopedName,
+}: PreprocessCSSModulesConfig = {}): Plugin<unknown> {
+  let seen = new Map<string, SeenRecord>();
+  let includeMatcher = new Minimatch(include, {});
+
+  return {
+    name: 'rollup-plugin-preprocess-css-modules',
+
+    async resolveId(source, importer, options) {
+      let { cssModuleSource } = options.attributes;
+      if (cssModuleSource) {
+        this.addWatchFile(cssModuleSource);
+        return { id: source, meta: { cssModuleSource } };
+      } else {
+        let file = await this.resolve(source, importer, { ...options, skipSelf: true });
+        if (file && includeMatcher.match(file.id)) {
+          return { ...file, id: `${file.id}.js`, meta: { ...file.meta, cssModule: true } };
+        }
+      }
+    },
+
+    async load(id) {
+      let meta = this.getModuleInfo(id)?.meta;
+      if (meta?.cssModuleSource) {
+        return seen.get(meta.cssModuleSource)?.css;
+      } else if (meta?.cssModule) {
+        let result = await processModule(this, id);
+        return result.js;
+      }
+    },
+  };
+
+  async function processModule(ctx: PluginContext, id: string): Promise<SeenRecord> {
+    let inputPath = id.replace(/\.js$/, '');
+    let outputPath = getOutputFilename(inputPath);
+    let rawContent = await ctx.fs.readFile(inputPath, { encoding: 'utf8' });
+    let js: string | undefined, json: Record<string, string> | undefined;
+    let processor = postcss([
+      modules({
+        generateScopedName,
+        Loader: class {
+          async fetch(path: string, fromModule: string) {
+            let resolved = await ctx.resolve(path, fromModule, { skipSelf: false });
+            if (resolved) await ctx.load(resolved);
+            return (
+              seen.get(resolved?.id.replace(/\.js$/, '') ?? '')?.json ??
+              ctx.error('Internal error: CSS module mapping not found')
+            );
+          }
+        },
+        getJSON: (inputFilename, mapping) => {
+          if (inputFilename === inputPath) {
+            json = mapping;
+            js = [
+              `import ${JSON.stringify(outputPath)} with { cssModuleSource: ${JSON.stringify(inputPath)} };`,
+              `export default ${JSON.stringify(json)};`,
+            ].join('\n');
+          }
+        },
+      }),
+    ]);
+
+    let { css, map } = await processor.process(rawContent, { from: inputPath, to: outputPath });
+    if (!js || !json) {
+      throw new Error(`Failed to process CSS module: ${inputPath}`);
+    }
+
+    let result = { js, json, css, map: map?.toJSON() as SourceMapInput };
+    seen.set(inputPath, result);
+    return result;
+  }
+}

packages/rollup-plugin-preprocess-css-modules/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["**/*.test.ts"]
+}

packages/rollup-plugin-preprocess-css-modules/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "strict": true,
+    "module": "nodenext",
+    "target": "esnext",
+    "outDir": "dist",
+    "declaration": true,
+    "skipLibCheck": true
+  }
+}