feat: implement CSS Modules (#28)

Co-authored-by: 三咲智子 Kevin Deng <[email protected]>

Author: nicksrandall

src/core/transform.ts

@@ -1,4 +1,5 @@
 import { Buffer } from 'node:buffer'
+import { readFile } from 'node:fs/promises'
 import { transform } from 'lightningcss'
 import type { Options } from './options'
 
@@ -23,3 +24,34 @@ export function transformCss(
     map: 'map' in res ? res.map?.toString() : undefined,
   }
 }
+
+export async function transformCssModule(
+  id: string,
+  options: Options['options'],
+): Promise<{ code: string; map?: string; exports: string; id: string }> {
+  const actualId = id.replace(/\?css_module$/, '')
+  const code = await readFile(actualId, 'utf-8')
+  const filename = cleanUrl(actualId)
+  const res = transform({
+    cssModules: true,
+    ...options,
+    filename,
+    code: Buffer.from(code),
+  })
+  const compiledId = actualId
+    .replaceAll('\\', '/')
+    .replace(/\.module\.css$/, '.module_built.css')
+  return {
+    code: res.code.toString(),
+    map: 'map' in res ? res.map?.toString() : undefined,
+    id: compiledId,
+    exports: res.exports
+      ? Object.entries(res.exports)
+          .map(
+            ([name, { name: className }]) =>
+              `export const ${name} = "${className}";`,
+          )
+          .join('\n')
+      : '',
+  }
+}

src/index.ts

@@ -1,13 +1,16 @@
+import path from 'node:path'
 import { createFilter } from '@rollup/pluginutils'
 import { createUnplugin, type UnpluginInstance } from 'unplugin'
 import { resolveOption, type Options } from './core/options'
-import { transformCss } from './core/transform'
+import { transformCss, transformCssModule } from './core/transform'
 
 const plugin: UnpluginInstance<Options | undefined, false> = createUnplugin(
   (rawOptions = {}) => {
     const options = resolveOption(rawOptions)
     const filter = createFilter(options.include, options.exclude)
 
+    const transformedFiles = new Map<string, string>()
+
     const name = 'unplugin-lightningcss'
     return {
       name,
@@ -17,9 +20,36 @@ const plugin: UnpluginInstance<Options | undefined, false> = createUnplugin(
         return filter(id)
       },
 
+      resolveId(id, importer) {
+        if (id.endsWith('.module_built.css')) return id
+        if (id.endsWith('.module.css')) {
+          return `${path.resolve(path.dirname(importer || ''), id)}?css_module`
+        }
+      },
+
       transform(code, id) {
         return transformCss(id, code, options.options)
       },
+
+      async load(id) {
+        if (id.endsWith('.module_built.css')) {
+          const code = transformedFiles.get(id)!
+          return { id, code }
+        }
+        if (id.endsWith('?css_module')) {
+          const {
+            code,
+            map,
+            exports,
+            id: compiledId,
+          } = await transformCssModule(id, options.options)
+          transformedFiles.set(compiledId, code)
+          return {
+            code: `import "${compiledId}";\n${exports}`,
+            map,
+          }
+        }
+      },
     }
   },
 )

tests/__snapshots__/transform.test.ts.snap

@@ -1,5 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`CSS Modules > should transform CSS Modules 1`] = `
+"// assets/asset-B_IWpIjy
+.dummy_dummy_button{color:red;bakcground-color:blue}
+
+// index.js
+const button = "dummy_button";
+
+const btn = document.createElement('div').classList.add(button);
+document.body.append(btn);
+"
+`;
+
 exports[`transform > tests/fixtures/basic.css 1`] = `
 "// assets/asset-CuZ0KhGL
 .red{color:red}

tests/css-module-fixture/index.js

@@ -0,0 +1,4 @@
+import * as styles from './styles.module.css'
+
+const btn = document.createElement('div').classList.add(styles.button)
+document.body.append(btn)

tests/css-module-fixture/styles.module.css

@@ -0,0 +1,4 @@
+.button {
+  color: red;
+  bakcground-color: blue;
+}

tests/transform.test.ts

@@ -1,7 +1,7 @@
 import { resolve } from 'node:path'
 import { rollupBuild, testFixtures } from '@sxzz/test-utils'
 import css from 'rollup-plugin-css-only'
-import { describe } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import LightningCSS from '../src/rollup'
 
 describe('transform', async () => {
@@ -24,3 +24,24 @@ describe('transform', async () => {
     { cwd: resolve(__dirname, '..'), promise: true },
   )
 })
+
+describe('CSS Modules', () => {
+  it('should transform CSS Modules', async () => {
+    const entry = resolve(__dirname, './css-module-fixture/index.js')
+    const { snapshot } = await rollupBuild(entry, [
+      LightningCSS({
+        options: {
+          minify: true,
+          targets: {
+            ie: 11,
+          },
+          cssModules: {
+            pattern: 'dummy_[local]',
+          },
+        },
+      }),
+      css(),
+    ])
+    expect(snapshot).toMatchSnapshot()
+  })
+})