feat: supports multiple composes (#1582)

Author: alexander-akait

README.md

@@ -487,6 +487,15 @@ To import a local classname from another module.
 
 To import from multiple modules use multiple `composes:` rules.
 
+```css
+:local(.className) {
+  composes: edit highlight from "./edit.css", button from "module/button.css", classFromThisModule;
+  background: red;
+}
+```
+
+or
+
 ```css
 :local(.className) {
   composes: edit highlight from "./edit.css";

package-lock.json

@@ -57,9 +57,9 @@
   "dependencies": {
     "icss-utils": "^5.1.0",
     "postcss": "^8.4.33",
-    "postcss-modules-extract-imports": "^3.0.0",
+    "postcss-modules-extract-imports": "^3.1.0",
     "postcss-modules-local-by-default": "^4.0.5",
-    "postcss-modules-scope": "^3.1.2",
+    "postcss-modules-scope": "^3.2.0",
     "postcss-modules-values": "^4.0.0",
     "postcss-value-parser": "^4.2.0",
     "semver": "^7.5.4"

package.json

@@ -21031,6 +21031,123 @@ Array [
 
 exports[`"modules" option should work with global compose: warnings 1`] = `Array []`;
 
+exports[`"modules" option should work with multiple compose: errors 1`] = `Array []`;
+
+exports[`"modules" option should work with multiple compose: module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../src/runtime/noSourceMaps.js\\";
+import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\";
+import ___CSS_LOADER_ICSS_IMPORT_0___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!./alias.css\\";
+import ___CSS_LOADER_ICSS_IMPORT_1___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!./alias-1.css\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_0___, \\"\\", true);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_1___, \\"\\", true);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \`.RsClSIMkfTMmUvwYT4aD {
+  color: red;
+}
+
+.OdpZEdUc2oHF96Xqdoba {
+  color: blue;
+}
+
+.A3lCTIjOyIaMw91SUTt_ {
+  color: blue;
+}
+
+.global-class {
+  padding: 10px;
+}
+
+.global-class-1 {
+  padding: 10px;
+}
+
+.global-class-2 {
+  padding: 10px;
+}
+
+.BwiLdQraIwYyRAA53QEQ {
+  color: gainsboro;
+}
+
+.DemABT8Zz2xVnnu848uO {
+}
+\`, \\"\\"]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	\\"other-class\\": \`RsClSIMkfTMmUvwYT4aD\`,
+	\\"class-1\\": \`OdpZEdUc2oHF96Xqdoba\`,
+	\\"class-2\\": \`A3lCTIjOyIaMw91SUTt_\`,
+	\\"class\\": \`BwiLdQraIwYyRAA53QEQ RsClSIMkfTMmUvwYT4aD OdpZEdUc2oHF96Xqdoba A3lCTIjOyIaMw91SUTt_ \${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"imported-alias\\"]} \${___CSS_LOADER_ICSS_IMPORT_1___.locals[\\"imported-alias-2\\"]} \${___CSS_LOADER_ICSS_IMPORT_1___.locals[\\"imported-alias-3\\"]} global-class global-class-1 global-class-2\`,
+	\\"class-other\\": \`DemABT8Zz2xVnnu848uO RsClSIMkfTMmUvwYT4aD OdpZEdUc2oHF96Xqdoba\`
+};
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"modules" option should work with multiple compose: result 1`] = `
+Array [
+  Array [
+    "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/composes/alias.css",
+    ".dnhKs1AYKq4KodZdfzcx {
+  display: table;
+}
+",
+    "",
+  ],
+  Array [
+    "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/composes/alias-1.css",
+    ".Lg5UPByIZH1XWiASCk_q {
+  background: red;
+}
+
+.QllkotlwlKJ4pFhiIzqP {
+  background: red;
+}
+",
+    "",
+  ],
+  Array [
+    "./modules/composes/multiple.css",
+    ".RsClSIMkfTMmUvwYT4aD {
+  color: red;
+}
+
+.OdpZEdUc2oHF96Xqdoba {
+  color: blue;
+}
+
+.A3lCTIjOyIaMw91SUTt_ {
+  color: blue;
+}
+
+.global-class {
+  padding: 10px;
+}
+
+.global-class-1 {
+  padding: 10px;
+}
+
+.global-class-2 {
+  padding: 10px;
+}
+
+.BwiLdQraIwYyRAA53QEQ {
+  color: gainsboro;
+}
+
+.DemABT8Zz2xVnnu848uO {
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"modules" option should work with multiple compose: warnings 1`] = `Array []`;
+
 exports[`"modules" option should work with the "[local]" placeholder for the "localIdentName" option: errors 1`] = `Array []`;
 
 exports[`"modules" option should work with the "[local]" placeholder for the "localIdentName" option: module 1`] = `

test/__snapshots__/modules-option.test.js.snap

@@ -0,0 +1,7 @@
+.imported-alias-2 {
+  background: red;
+}
+
+.imported-alias-3 {
+  background: red;
+}

test/fixtures/modules/composes/alias-1.css

@@ -0,0 +1,38 @@
+.other-class {
+  color: red;
+}
+
+.class-1 {
+  color: blue;
+}
+
+.class-2 {
+  color: blue;
+}
+
+:global(.global-class) {
+  padding: 10px;
+}
+
+:global(.global-class-1) {
+  padding: 10px;
+}
+
+:global(.global-class-2) {
+  padding: 10px;
+}
+
+.class {
+  composes:
+    other-class,
+    class-1 class-2,
+    imported-alias from './alias.css',
+    imported-alias-2 imported-alias-3 from './alias-1.css',
+    global-class from global,
+    global-class-1 global-class-2 from global;
+  color: gainsboro;
+}
+
+.class-other {
+  composes: other-class class-1;
+}

test/fixtures/modules/composes/multiple.css

@@ -0,0 +1,5 @@
+import css from './multiple.css';
+
+__export__ = css;
+
+export default css;

test/fixtures/modules/composes/multiple.js

@@ -2433,4 +2433,20 @@ describe('"modules" option', () => {
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
+
+  it("should work with multiple compose", async () => {
+    const compiler = getCompiler("./modules/composes/multiple.js", {
+      modules: true,
+    });
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource("./modules/composes/multiple.css", stats)
+    ).toMatchSnapshot("module");
+    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
+      "result"
+    );
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
 });