Merge pull request #116 from css-modules/contracts

Test contracts

Author: TrySound

README.md

@@ -4,7 +4,7 @@
 [travis-img]: https://travis-ci.org/css-modules/postcss-icss-selectors.svg
 [travis]: https://travis-ci.org/css-modules/postcss-icss-selectors
 
-PostCSS plugin for css modules to to local-scope classes and ids
+PostCSS plugin for css modules to local-scope classes and ids
 
 ## Usage
 
@@ -70,6 +70,18 @@ In global mode
 Converts every new local name in #id or .class defintion to global alias.
 By default returns `[name]__[local]---[hash:base64:5]`.
 
+### Messages
+
+postcss-icss-selectors passes result.messages for each local-scoped class or id
+
+```
+{
+  plugin: 'postcss-icss-selectors',
+  type: 'icss-scoped',
+  name: string, // local-scoped identifier
+  value: string // generated global identifier
+}
+```
 
 ## License
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "postcss-icss-selectors",
   "version": "1.2.0",
-  "description": "PostCSS plugin for css modules to to local-scope classes and ids",
+  "description": "PostCSS plugin for css modules to local-scope classes and ids",
   "keywords": [
     "css-modules",
     "postcss",

src/index.js

@@ -111,19 +111,60 @@ const walkRules = (css, callback) => {
   });
 };
 
-module.exports = postcss.plugin(plugin, (options = {}) => css => {
+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) =>
+  messages.find(msg => msg.type === "icss-value" && msg.value === name);
+
+const isRedeclared = (messages, name) =>
+  messages.find(msg => msg.type === "icss-scoped" && msg.name === name);
+
+const getComposed = (messages, name) =>
+  messages
+    .filter(msg => msg.type === "icss-composed" && msg.name === name)
+    .map(msg => msg.value);
+
+const composeAliases = (aliases, messages) =>
+  Object.keys(aliases).reduce(
+    (acc, name) =>
+      Object.assign({}, acc, {
+        [name]: [aliases[name], ...getComposed(messages, name)].join(" ")
+      }),
+    {}
+  );
+
+module.exports = postcss.plugin(plugin, (options = {}) => (css, result) => {
   const generateScopedName =
     options.generateScopedName ||
     genericNames("[name]__[local]---[hash:base64:5]");
   const input = (css && css.source && css.source.input) || {};
-  const { icssImports, icssExports } = extractICSS(css);
   const aliases = {};
-  const getAlias = name => {
-    const alias = generateScopedName(name, input.from, input.css);
-    aliases[name] = alias;
-    return alias;
-  };
   walkRules(css, rule => {
+    const getAlias = name => {
+      if (aliases[name]) {
+        return aliases[name];
+      }
+      // icss-value contract
+      if (isValue(result.messages, name)) {
+        return name;
+      }
+      const alias = generateScopedName(name, input.from, input.css);
+      // icss-scoped contract
+      if (isRedeclared(result.messages, name)) {
+        result.warn(`'${name}' already declared`, { node: rule });
+      }
+      aliases[name] = alias;
+      return alias;
+    };
     try {
       rule.selector = localizeSelectors(
         rule.selector,
@@ -134,7 +175,7 @@ module.exports = postcss.plugin(plugin, (options = {}) => css => {
       throw rule.error(e.message);
     }
   });
-  css.prepend(
-    createICSSRules(icssImports, Object.assign({}, icssExports, aliases))
-  );
+  result.messages.push(...getMessages(aliases));
+  // icss-composed contract
+  addExports(css, composeAliases(aliases, result.messages));
 });

test/test.js

@@ -3,13 +3,15 @@ import postcss from "postcss";
 import stripIndent from "strip-indent";
 import plugin from "../src";
 
-const strip = input =>
-  stripIndent(input).replace(/^\n/, "").replace(/\s+$/, "");
+const strip = input => stripIndent(input).trim();
 const compile = (input, options) =>
   postcss([plugin(options)])
     .process(input, options)
     .catch(e => Promise.reject(e.message));
 const generateScopedName = name => `__scope__${name}`;
+const messagesPlugin = messages => (css, result) => {
+  result.messages.push(...messages);
+};
 
 const runCSS = ({ fixture, expected, options }) => {
   return expect(
@@ -26,6 +28,28 @@ const runError = ({ fixture, error, options }) => {
   );
 };
 
+const runMessages = ({
+  fixture,
+  inputMessages = [],
+  outputMessages,
+  warnings = [],
+  expected
+}) => {
+  const processor = postcss([
+    messagesPlugin(inputMessages),
+    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));
+    }
+  });
+};
+
 test("scope selectors", () => {
   return runCSS({
     fixture: `
@@ -657,3 +681,192 @@ test("save :import statemtents", () => {
     `
   });
 });
+
+test("dispatch messages with all locals", () => {
+  return runMessages({
+    fixture: `
+      .foo {}
+      .foo .bar {}
+      :global .baz :local(.zab) {}
+    `,
+    outputMessages: [
+      {
+        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: "zab",
+        value: "__scope__zab"
+      }
+    ]
+  });
+});
+
+test("icss-scoped contract", () => {
+  const inputMessages = [
+    {
+      plugin: "previous-plugin",
+      type: "icss-scoped",
+      name: "foo",
+      value: "__declared__foo"
+    }
+  ];
+  return runMessages({
+    fixture: `
+      :export {
+        foo: __declared__foo
+      }
+      .foo {}
+      .bar {}
+      .foo {}
+    `,
+    expected: `
+      :export {
+        foo: __scope__foo;
+        bar: __scope__bar
+      }
+      .__scope__foo {}
+      .__scope__bar {}
+      .__scope__foo {}
+    `,
+    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"
+      }
+    ],
+    warnings: [`'foo' already declared`]
+  });
+});
+
+test("icss-composed contract", () => {
+  const inputMessages = [
+    {
+      plugin: "previous-plugin",
+      type: "icss-composed",
+      name: "foo",
+      value: "__compose__foo1"
+    },
+    {
+      plugin: "previous-plugin",
+      type: "icss-composed",
+      name: "foo",
+      value: "__compose__foo2"
+    },
+    {
+      plugin: "previous-plugin",
+      type: "icss-composed",
+      name: "bar",
+      value: "__compose__bar"
+    }
+  ];
+  return runMessages({
+    fixture: `
+      :export {
+        foo: __compose__foo;
+        baz: __declared__baz
+      }
+      .foo {}
+      .bar {}
+      .baz {}
+    `,
+    expected: `
+      :export {
+        foo: __scope__foo __compose__foo1 __compose__foo2;
+        baz: __scope__baz;
+        bar: __scope__bar __compose__bar
+      }
+      .__scope__foo {}
+      .__scope__bar {}
+      .__scope__baz {}
+    `,
+    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"
+      }
+    ]
+  });
+});
+
+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"
+    }
+  ];
+  return runMessages({
+    fixture: `
+      :export {
+        foo: __declared__foo
+      }
+      .__declared__foo {}
+      .__declared__bar {}
+      .baz {}
+    `,
+    expected: `
+      :export {
+        foo: __declared__foo;
+        baz: __scope__baz
+      }
+      .__declared__foo {}
+      .__declared__bar {}
+      .__scope__baz {}
+    `,
+    inputMessages,
+    outputMessages: [
+      ...inputMessages,
+      {
+        plugin: "postcss-icss-selectors",
+        type: "icss-scoped",
+        name: "baz",
+        value: "__scope__baz"
+      }
+    ]
+  });
+});