feat(processor): allow composes anywhere in a rule

Fixes #645 BREAKING CHANGE: previously `modular-css` would require that `composes` be the first declaration in a rule. This restriction has been removed due to better solutions for enforcing that behavior existing now (stylelint-order).
tivac · Aug 12, 2019 · 22b48b7 · 22b48b7
1 parent 21ca528
commit 22b48b7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 35 deletions.
diff --git a/packages/processor/plugins/composition.js b/packages/processor/plugins/composition.js
@@ -11,22 +11,6 @@ const parser = require("../parsers/composes.js");
 
 const plugin = "modular-css-composition";
 
-// Loop through all previous nodes in the container to ensure
-// that composes (or a comment) comes first
-const composesFirst = (decl) => {
-    let prev = decl.prev();
-
-    while(prev) {
-        if(prev.type !== "comment") {
-            throw decl.error("composes must be the first declaration", {
-                word : "composes",
-            });
-        }
-
-        prev = prev.prev();
-    }
-};
-
 module.exports = (css, result) => {
     const { opts } = result;
 
@@ -47,8 +31,6 @@ module.exports = (css, result) => {
         const details = parser.parse(decl.value);
         const selectors = decl.parent.selectors.map(identifiers.parse);
 
-        composesFirst(decl);
-
         // https://github.com/tivac/modular-css/issues/238
         if(selectors.some(({ length }) => length > 1)) {
             throw decl.error(

diff --git a/packages/processor/test/__snapshots__/composition.test.js.snap b/packages/processor/test/__snapshots__/composition.test.js.snap
@@ -9,6 +9,16 @@ Object {
 }
 `;
 
+exports[`/processor.js composition should allow composes anywhere 1`] = `
+Object {
+  "multiple-composes.css": Object {
+    "a": "a",
+    "b": "a b",
+    "c": "a b c",
+  },
+}
+`;
+
 exports[`/processor.js composition should compose a single class 1`] = `
 Object {
   "single-composes.css": Object {

diff --git a/packages/processor/test/composition.test.js b/packages/processor/test/composition.test.js
@@ -69,23 +69,6 @@ describe("/processor.js", () => {
             }
         });
 
-        it("should fail if composes isn't the first property", async () => {
-            try {
-                await processor.string(
-                    "./invalid/composes-first.css",
-                    dedent(`
-                        .a { color: red; }
-                        .b {
-                            color: blue;
-                            composes: a;
-                        }
-                    `)
-                );
-            } catch({ message }) {
-                expect(message).toMatch(`composes must be the first declaration`);
-            }
-        });
-
         it("should fail on rules that use multiple selectors", async () => {
             try {
                 await processor.string(
@@ -130,6 +113,29 @@ describe("/processor.js", () => {
 
             expect(compositions).toMatchSnapshot();
         });
+
+        it("should allow composes anywhere", async () => {
+            await processor.string(
+                "./multiple-composes.css",
+                dedent(`
+                    .a { color: red; }
+                    .b {
+                        background: blue;
+                        composes: a;
+                    }
+                    .c {
+                        border: 1px solid red;
+                        composes: a;
+                        text-weight: bold;
+                        composes: b;
+                    }
+                `)
+            );
+
+            const { compositions } = await processor.output();
+
+            expect(compositions).toMatchSnapshot();
+        });
 
         it("should compose from globals", async () => {
             await processor.string(