Fix icss-composed and icss-value contract combination

Author: TrySound

package.json

@@ -57,6 +57,7 @@
     "css-selector-tokenizer": "^0.7.0",
     "generic-names": "^1.0.2",
     "icss-utils": "^3.0.1",
+    "lodash": "^4.17.4",
     "postcss": "^6.0.2"
   },
   "devDependencies": {

src/index.js

@@ -3,6 +3,7 @@ import postcss from "postcss";
 import Tokenizer from "css-selector-tokenizer";
 import { extractICSS, createICSSRules } from "icss-utils";
 import genericNames from "generic-names";
+import fromPairs from "lodash/fromPairs";
 
 const plugin = "postcss-icss-selectors";
 
@@ -111,18 +112,15 @@ const walkRules = (css, callback) => {
   });
 };
 
-const addExports = (css, aliases) => {
-  const { icssImports, icssExports } = extractICSS(css);
-  const exports = Object.assign({}, icssExports, aliases);
-  css.prepend(createICSSRules(icssImports, exports));
-};
-
 const getMessages = aliases =>
-  Object.keys(aliases)
-    .map(name => ({ plugin, type: "icss-scoped", name, value: aliases[name] }))
-    .reduce((acc, msg) => [...acc, msg], []);
-
-const isValue = (messages, name) =>
+  Object.keys(aliases).map(name => ({
+    plugin,
+    type: "icss-scoped",
+    name,
+    value: aliases[name]
+  }));
+
+const getValue = (messages, name) =>
   messages.find(msg => msg.type === "icss-value" && msg.value === name);
 
 const isRedeclared = (messages, name) =>
@@ -150,30 +148,43 @@ const composeAliases = (aliases, messages) =>
     {}
   );
 
+const mapMessages = (messages, type) =>
+  fromPairs(
+    messages.filter(msg => msg.type === type).map(msg => [msg.name, msg.value])
+  );
+
+const composeExports = messages => {
+  const composed = messages.filter(msg => msg.type === "icss-composed");
+  const values = mapMessages(messages, "icss-value");
+  const scoped = mapMessages(messages, "icss-scoped");
+  const aliases = Object.assign({}, scoped, values);
+  return composeAliases(aliases, composed);
+};
+
 module.exports = postcss.plugin(plugin, (options = {}) => (css, result) => {
+  const { icssImports, icssExports } = extractICSS(css);
   const generateScopedName =
     options.generateScopedName ||
     genericNames("[name]__[local]---[hash:base64:5]");
   const input = (css && css.source && css.source.input) || {};
-  const composedMessages = result.messages.filter(
-    msg => msg.type === "icss-composed"
-  );
   const aliases = {};
   walkRules(css, rule => {
     const getAlias = name => {
       if (aliases[name]) {
         return aliases[name];
       }
       // icss-value contract
-      if (isValue(result.messages, name)) {
+      const valueMsg = getValue(result.messages, name);
+      if (valueMsg) {
+        aliases[valueMsg.name] = name;
         return name;
       }
       const alias = generateScopedName(name, input.from, input.css);
+      aliases[name] = alias;
       // icss-scoped contract
       if (isRedeclared(result.messages, name)) {
         result.warn(`'${name}' already declared`, { node: rule });
       }
-      aliases[name] = alias;
       return alias;
     };
     try {
@@ -187,6 +198,8 @@ module.exports = postcss.plugin(plugin, (options = {}) => (css, result) => {
     }
   });
   result.messages.push(...getMessages(aliases));
-  // icss-composed contract
-  addExports(css, composeAliases(aliases, composedMessages));
+  // contracts
+  const composedExports = composeExports(result.messages);
+  const exports = Object.assign({}, icssExports, composedExports);
+  css.prepend(createICSSRules(icssImports, exports));
 });

test/test.js

@@ -40,16 +40,23 @@ const runMessages = ({
     plugin({ generateScopedName })
   ]).process(strip(fixture));
   return processor.then(result => {
-    expect(result.messages.filter(msg => msg.type !== "warning")).toEqual(
-      outputMessages
-    );
-    expect(result.warnings().map(msg => msg.text)).toEqual(warnings);
     if (expected) {
       expect(result.css).toEqual(strip(expected));
     }
+    expect(result.warnings().map(msg => msg.text)).toEqual(warnings);
+    expect(result.messages.filter(msg => msg.type !== "warning")).toEqual(
+      outputMessages
+    );
   });
 };
 
+const getMsg = (name, value) => ({
+  plugin: "postcss-icss-selectors",
+  type: "icss-scoped",
+  name,
+  value
+});
+
 test("scope selectors", () => {
   return runCSS({
     fixture: `
@@ -788,24 +795,9 @@ test("icss-composed contract", () => {
     inputMessages,
     outputMessages: [
       ...inputMessages,
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "foo",
-        value: "__scope__foo"
-      },
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "bar",
-        value: "__scope__bar"
-      },
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "baz",
-        value: "__scope__baz"
-      }
+      getMsg("foo", "__scope__foo"),
+      getMsg("bar", "__scope__bar"),
+      getMsg("baz", "__scope__baz")
     ]
   });
 });
@@ -842,36 +834,11 @@ test("icss-composed contract with local dependencies", () => {
     inputMessages,
     outputMessages: [
       ...inputMessages,
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "foo",
-        value: "__scope__foo"
-      },
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "bar",
-        value: "__scope__bar"
-      },
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "baz",
-        value: "__scope__baz"
-      },
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "tar",
-        value: "__scope__tar"
-      },
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "doo",
-        value: "__scope__doo"
-      }
+      getMsg("foo", "__scope__foo"),
+      getMsg("bar", "__scope__bar"),
+      getMsg("baz", "__scope__baz"),
+      getMsg("tar", "__scope__tar"),
+      getMsg("doo", "__scope__doo")
     ]
   });
 });
@@ -897,36 +864,16 @@ test("icss-composed contract with recursive local composition", () => {
     inputMessages,
     outputMessages: [
       ...inputMessages,
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "foo",
-        value: "__scope__foo"
-      },
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "bar",
-        value: "__scope__bar"
-      }
+      getMsg("foo", "__scope__foo"),
+      getMsg("bar", "__scope__bar")
     ]
   });
 });
 
 test("icss-value contract", () => {
   const inputMessages = [
-    {
-      plugin: "previous-plugin",
-      type: "icss-value",
-      name: "foo",
-      value: "__declared__foo"
-    },
-    {
-      plugin: "previous-plugin",
-      type: "icss-value",
-      name: "bar",
-      value: "__declared__bar"
-    }
+    { type: "icss-value", name: "foo", value: "__declared__foo" },
+    { type: "icss-value", name: "bar", value: "__declared__bar" }
   ];
   return runMessages({
     fixture: `
@@ -940,6 +887,7 @@ test("icss-value contract", () => {
     expected: `
       :export {
         foo: __declared__foo;
+        bar: __declared__bar;
         baz: __scope__baz
       }
       .__declared__foo {}
@@ -949,12 +897,45 @@ test("icss-value contract", () => {
     inputMessages,
     outputMessages: [
       ...inputMessages,
-      {
-        plugin: "postcss-icss-selectors",
-        type: "icss-scoped",
-        name: "baz",
-        value: "__scope__baz"
+      getMsg("foo", "__declared__foo"),
+      getMsg("bar", "__declared__bar"),
+      getMsg("baz", "__scope__baz")
+    ]
+  });
+});
+
+test("icss-value and icss-composed together", () => {
+  const inputMessages = [
+    { type: "icss-composed", name: "bar", value: "foo" },
+    { type: "icss-value", name: "foo", value: "__value__foo" }
+  ];
+  return runMessages({
+    fixture: `
+      :import('path') {
+        foo: __value__foo
+      }
+      :export {
+        foo: __value__foo
       }
+      .__value__foo {}
+      .bar {}
+    `,
+    expected: `
+      :import('path') {
+        foo: __value__foo
+      }
+      :export {
+        foo: __value__foo;
+        bar: __scope__bar __value__foo
+      }
+      .__value__foo {}
+      .__scope__bar {}
+    `,
+    inputMessages,
+    outputMessages: [
+      ...inputMessages,
+      getMsg("foo", "__value__foo"),
+      getMsg("bar", "__scope__bar")
     ]
   });
 });