feat: support multiple composes (#191)

Author: alexander-akait

src/index.js

@@ -84,54 +84,63 @@ module.exports = (options = {}) => {
           });
 
           root.walkDecls(/^composes$/, (declaration) => {
-            const matches = declaration.value.match(matchImports);
+            const multiple = declaration.value.split(",");
+            const values = [];
 
-            if (!matches) {
-              return;
-            }
-
-            let tmpSymbols;
-            let [
-              ,
-              /*match*/ symbols,
-              doubleQuotePath,
-              singleQuotePath,
-              global,
-            ] = matches;
-
-            if (global) {
-              // Composing globals simply means changing these classes to wrap them in global(name)
-              tmpSymbols = symbols.split(/\s+/).map((s) => `global(${s})`);
-            } else {
-              const importPath = doubleQuotePath || singleQuotePath;
+            multiple.forEach((value) => {
+              const matches = value.trim().match(matchImports);
 
-              let parent = declaration.parent;
-              let parentIndexes = "";
+              if (!matches) {
+                values.push(value);
 
-              while (parent.type !== "root") {
-                parentIndexes =
-                  parent.parent.index(parent) + "_" + parentIndexes;
-                parent = parent.parent;
+                return;
               }
 
-              const { selector } = declaration.parent;
-              const parentRule = `_${parentIndexes}${selector}`;
-
-              addImportToGraph(importPath, parentRule, graph, visited);
+              let tmpSymbols;
+              let [
+                ,
+                /*match*/ symbols,
+                doubleQuotePath,
+                singleQuotePath,
+                global,
+              ] = matches;
+
+              if (global) {
+                // Composing globals simply means changing these classes to wrap them in global(name)
+                tmpSymbols = symbols.split(/\s+/).map((s) => `global(${s})`);
+              } else {
+                const importPath = doubleQuotePath || singleQuotePath;
 
-              importDecls[importPath] = declaration;
-              imports[importPath] = imports[importPath] || {};
+                let parent = declaration.parent;
+                let parentIndexes = "";
 
-              tmpSymbols = symbols.split(/\s+/).map((s) => {
-                if (!imports[importPath][s]) {
-                  imports[importPath][s] = createImportedName(s, importPath);
+                while (parent.type !== "root") {
+                  parentIndexes =
+                    parent.parent.index(parent) + "_" + parentIndexes;
+                  parent = parent.parent;
                 }
 
-                return imports[importPath][s];
-              });
-            }
+                const { selector } = declaration.parent;
+                const parentRule = `_${parentIndexes}${selector}`;
+
+                addImportToGraph(importPath, parentRule, graph, visited);
+
+                importDecls[importPath] = declaration;
+                imports[importPath] = imports[importPath] || {};
+
+                tmpSymbols = symbols.split(/\s+/).map((s) => {
+                  if (!imports[importPath][s]) {
+                    imports[importPath][s] = createImportedName(s, importPath);
+                  }
+
+                  return imports[importPath][s];
+                });
+              }
+
+              values.push(tmpSymbols.join(" "));
+            });
 
-            declaration.value = tmpSymbols.join(" ");
+            declaration.value = values.join(", ");
           });
 
           const importsOrder = topologicalSort(graph, failOnWrongOrder);

test/test-cases/multiple-composes/expected.css

@@ -0,0 +1,37 @@
+:import("path/library.css") {
+  i__imported_importName_0: importName;
+  i__imported_firstImport_1: firstImport;
+  i__imported_secondImport_2: secondImport;
+  i__imported_importName2_6: importName2;
+  i__imported_importName3_7: importName3;
+  i__imported_importName4_8: importName4;
+}
+
+:import("./aa.css") {
+  i__imported_a_3: a;
+}
+
+:import("./bb.css") {
+  i__imported_b_4: b;
+}
+
+:import("./cc.css") {
+  i__imported_c_5: c;
+}
+
+:local(.exportName) {
+  composes: i__imported_importName_0, global(beforeName), global(importName) global(secondImport), i__imported_firstImport_1 i__imported_secondImport_2;
+  other: rule;
+}
+
+:local(.duplicate) {
+  composes: i__imported_a_3, i__imported_b_4, i__imported_c_5, i__imported_a_3, i__imported_c_5;
+}
+
+:local(.spaces) {
+  composes: i__imported_importName_0 i__imported_importName2_6, i__imported_importName3_7 i__imported_importName4_8;
+}
+
+:local(.unknown) {
+  composes: foo bar, baz;
+}

test/test-cases/multiple-composes/source.css

@@ -0,0 +1,16 @@
+:local(.exportName) {
+  composes: importName from "path/library.css", beforeName from global, importName secondImport from global, firstImport secondImport from "path/library.css";
+  other: rule;
+}
+
+:local(.duplicate) {
+  composes: a from "./aa.css", b from "./bb.css", c from "./cc.css", a from "./aa.css", c from "./cc.css";
+}
+
+:local(.spaces) {
+  composes: importName importName2 from "path/library.css", importName3 importName4 from "path/library.css";
+}
+
+:local(.unknown) {
+  composes: foo bar, baz;
+}