Merge pull request #9 from css-modules/new-plugin

New plugin

Author: TrySound

package.json

@@ -53,6 +53,7 @@
   "license": "MIT",
   "dependencies": {
     "icss-replace-symbols": "^1.0.2",
+    "icss-utils": "^2.1.0",
     "lodash.foreach": "^3.0.3",
     "postcss": "^5.0.10"
   },
@@ -64,6 +65,7 @@
     "husky": "^0.13.3",
     "jest": "^20.0.4",
     "lint-staged": "^3.5.0",
-    "prettier": "^1.3.1"
+    "prettier": "^1.3.1",
+    "strip-indent": "^2.0.0"
   }
 }

readme.md

@@ -1,28 +1,21 @@
 postcss-icss
 ============
 
-A CSS Modules parser to extract tokens from the css file. Provides opportunity to process multiple files. Supports both synchronous and asynchronous file loaders.
+A CSS Modules parser to extract tokens from the css file. Provides opportunity to process multiple files.
 
 ## API
 
-In order to use it you should provide a `fetch` function which should load contents of files and process it with the PostCSS instance. `fetch` function should return tokens or promise object which will resolve into tokens.
+In order to use it you should provide a `fetch` function which should load contents of files and process it with the PostCSS instance.
+`fetch` function should return  promise object which will resolve into tokens.
 
-```javascript
-var Parser = require('postcss-modules-parser');
+```js
+const ICSS = require('postcss-icss');
 
-/**
- * @param  {string} to   Path to the new file. Could be any.
- * @param  {string} from Path to the source file. Should be absolute.
- * @return {object}      Tokens
- */
-function fetch(to, from) {
+function fetch(importee, importerDir, processor) {
   // load content
-  return instance.process(css, {from: filename}).root.tokens;
+  return processor.process(css, { from: filename })
+    .then(result => result.messages.find(d => d.type === "icss").exportTokens);
 }
 
-new Parser({fetch: fetch});
+postcss([ ICSS({ fetch }) ]);
 ```
-
-See the examples:
-- asynchronous loader: [test/helper/async-loader.js](https://github.com/css-modules/postcss-modules-parser/blob/master/test/helper/async-loader.js)
-- synchronous loader: [test/helper/sync-loader.js](https://github.com/css-modules/postcss-modules-parser/blob/master/test/helper/sync-loader.js)

src/index.js

@@ -1,75 +1,67 @@
 /* eslint-env node */
+import fs from "fs";
+import path from "path";
 import postcss from "postcss";
-import forEach from "lodash.foreach";
-import replaceSymbols from "icss-replace-symbols";
-const importRegexp = /^:import\((.+)\)$/;
-const exportRegexp = /^:export$/;
+import { replaceSymbols, replaceValueSymbols, extractICSS } from "icss-utils";
 
-/**
- * @param  {object}  promise
- * @return {boolean}
- */
-function isPromise(promise) {
-  return typeof promise === "object" && typeof promise.then === "function";
-}
-
-/**
- * @param  {object} css
- * @param  {object} translations
- */
-function proceed(css, translations) {
-  const exportTokens = {};
-
-  replaceSymbols(css, translations);
-
-  css.walkRules(exportRegexp, rule => {
-    rule.walkDecls(decl => {
-      forEach(
-        translations,
-        (value, key) => (decl.value = decl.value.replace(key, value))
-      );
-      exportTokens[decl.prop] = decl.value;
+const readFile = filepath =>
+  new Promise((resolve, reject) => {
+    fs.readFile(filepath, "utf-8", (err, content) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(content);
+      }
     });
-
-    rule.remove();
   });
 
-  css.tokens = exportTokens;
-}
+const defaultFetch = (importee, importerDir, processor) => {
+  const ext = path.extname(importee);
+  if (ext !== ".css") {
+    return Promise.resolve({
+      default: importee
+    });
+  }
+  const from = path.resolve(importerDir, importee);
+  return readFile(from)
+    .then(content => processor.process(content, { from }))
+    .then(result => result.messages.find(d => d.type === "icss").exportTokens);
+};
 
-/**
- * @param  {function} options.fetch
- * @return {function}
- */
-module.exports = postcss.plugin("postcss-icss", ({ fetch } = {}) => css => {
-  // https://github.com/postcss/postcss/blob/master/docs/api.md#inputfile
-  const file = css.source.input.file;
+module.exports = postcss.plugin("postcss-icss", (options = {}) => (
+  css,
+  result
+) => {
+  const importerDir = css.source.input.file
+    ? path.dirname(css.source.input.file)
+    : process.cwd();
+  const fetch = options.fetch || defaultFetch;
 
-  const translations = {};
-  const promises = [];
+  const { icssImports, icssExports } = extractICSS(css);
 
-  let iteration = 0;
+  const promises = Object.keys(icssImports).map(key => {
+    const importee = key.replace(/^['"]|['"]$/g, "");
+    return fetch(importee, importerDir, result.processor).then(exportTokens => {
+      const importTokens = icssImports[key];
+      return Object.keys(importTokens).reduce((acc, token) => {
+        acc[token] = exportTokens[importTokens[token]];
+        return acc;
+      }, {});
+    });
+  });
 
-  css.walkRules(importRegexp, rule => {
-    const dependency = RegExp.$1.replace(/^["']|["']$/g, "");
-    const result = fetch(dependency, file, iteration++);
+  return Promise.all(promises).then(results => {
+    const replacements = Object.assign({}, ...results);
+    replaceSymbols(css, replacements);
 
-    if (isPromise(result)) {
-      result.then(exports => {
-        rule.walkDecls(decl => (translations[decl.prop] = exports[decl.value]));
-        rule.remove();
-      });
+    Object.keys(icssExports).forEach(key => {
+      icssExports[key] = replaceValueSymbols(icssExports[key], replacements);
+    });
 
-      promises.push(result);
-    } else {
-      rule.walkDecls(decl => (translations[decl.prop] = result[decl.value]));
-      rule.remove();
-    }
+    result.messages.push({
+      type: "icss",
+      plugin: "postcss-icss",
+      exportTokens: icssExports
+    });
   });
-
-  if (promises.length === 0) {
-    return void proceed(css, translations);
-  }
-
-  return Promise.all(promises).then(() => proceed(css, translations));
 });

test/fixture/multiple/expected.json

@@ -0,0 +1,4 @@
+:export {
+  export1: exported1;
+  export2: exported2;
+}