fix: add and test support for CSS modules composes

mrmckeb · mrmckeb · commit 680b39e5a078 · 2023-03-11T16:06:01.000+11:00
diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
     "lodash.camelcase": "^4.3.0",
     "postcss": "^8.4.21",
     "postcss-load-config": "^3.1.4",
+    "postcss-modules-extract-imports": "^3.0.0",
     "postcss-modules-local-by-default": "^4.0.0",
     "postcss-modules-scope": "^3.0.0",
     "reserved-words": "^0.1.2",
@@ -68,6 +69,7 @@
     "@types/less": "^3.0.3",
     "@types/lodash.camelcase": "^4.3.7",
     "@types/node": "^18.14.0",
+    "@types/postcss-modules-extract-imports": "^3.0.2",
     "@types/reserved-words": "^0.1.0",
     "@types/sass": "^1.43.1",
     "@types/stylus": "^0.48.38",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/helpers/__tests__/fixtures/_composed.css b/src/helpers/__tests__/fixtures/_composed.css
@@ -0,0 +1,3 @@
+.className {
+  width: 100%;
+}
diff --git a/src/helpers/__tests__/fixtures/test.module.css b/src/helpers/__tests__/fixtures/test.module.css
@@ -34,3 +34,12 @@
     opacity: 1;
   }
 }
+
+.composed {
+  composes: classA;
+  display: block;
+}
+
+.composed-from-other-file {
+  composes: className from './_composed.css';
+}
diff --git a/src/helpers/getProcessor.ts b/src/helpers/getProcessor.ts
@@ -2,13 +2,15 @@ import postcss, { AcceptedPlugin } from 'postcss';
 import Processor from 'postcss/lib/processor';
 import postcssLocalByDefault from 'postcss-modules-local-by-default';
 import postcssModulesScope from 'postcss-modules-scope';
+import postcssModulesExtractImports from 'postcss-modules-extract-imports';
 
 export const getProcessor = (
   additionalPlugins: AcceptedPlugin[] = [],
 ): Processor =>
   postcss([
     ...additionalPlugins,
     postcssLocalByDefault(),
+    postcssModulesExtractImports(),
     postcssModulesScope({
       generateScopedName: (name) => name,
     }),

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.className {`
	`2`	`+ width: 100%;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -34,3 +34,12 @@`
`34`	`34`	`opacity: 1;`
`35`	`35`	`}`
`36`	`36`	`}`
	`37`	`+`
	`38`	`+.composed {`
	`39`	`+ composes: classA;`
	`40`	`+ display: block;`
	`41`	`+}`
	`42`	`+`
	`43`	`+.composed-from-other-file {`
	`44`	`+ composes: className from './_composed.css';`
	`45`	`+}`