Merge pull request #3 from css-modules/options

Options

Author: sokra

src/index.js

@@ -4,43 +4,44 @@ const declWhitelist = ['extends'],
   declFilter = new RegExp(`^(${declWhitelist.join('|')})$`),
   matchImports = /^([\w\s]+?)\s+from\s+(?:"([^"]+)"|'([^']+)')$/;
 
-const processor = (css) => {
-  let imports = {};
+const processor = postcss.plugin('modules-extract-imports', function(options) {
+  return (css) => {
+    let imports = {};
+    let importIndex = 0;
+    let createImportedName = options && options.createImportedName || ((importName/*, path*/) => `__imported_${importName}_${importIndex++}`);
 
-  // Find any declaration that supports imports
-  css.eachDecl(declFilter, (decl) => {
-    let matches = decl.value.match(matchImports);
-    if (matches) {
-      let [/*match*/, symbols, doubleQuotePath, singleQuotePath] = matches;
-      let path = doubleQuotePath || singleQuotePath;
-      imports[path] = imports[path] || {};
-      let tmpSymbols = symbols.split(/\s+/)
-        .map(s => {
-          if(!imports[path][s]) {
-            imports[path][s] = `__tmp_${s}_${processor.getRandomStr()}`;
-          }
-          return imports[path][s];
-        });
-      decl.value = tmpSymbols.join(' ');
-    }
-  });
+    // Find any declaration that supports imports
+    css.eachDecl(declFilter, (decl) => {
+      let matches = decl.value.match(matchImports);
+      if (matches) {
+        let [/*match*/, symbols, doubleQuotePath, singleQuotePath] = matches;
+        let path = doubleQuotePath || singleQuotePath;
+        imports[path] = imports[path] || {};
+        let tmpSymbols = symbols.split(/\s+/)
+          .map(s => {
+            if(!imports[path][s]) {
+              imports[path][s] = createImportedName(s, path);
+            }
+            return imports[path][s];
+          });
+        decl.value = tmpSymbols.join(' ');
+      }
+    });
 
-  // If we've found any imports, insert :import rules
-  Object.keys(imports).reverse().forEach(path => {
-    let pathImports = imports[path];
-    css.prepend(postcss.rule({
-      selector: `:import("${path}")`,
-      after: "\n",
-      nodes: Object.keys(pathImports).map(importedSymbol => postcss.decl({
-        prop: importedSymbol,
-        value: pathImports[importedSymbol],
-        before: "\n  "
-      }))
-    }));
-  });
-};
-
-processor.defaultRandomStr = () => Math.random().toString(36).substr(2, 8);
-processor.getRandomStr = processor.defaultRandomStr; // Easy to be mocked out
+    // If we've found any imports, insert :import rules
+    Object.keys(imports).reverse().forEach(path => {
+      let pathImports = imports[path];
+      css.prepend(postcss.rule({
+        selector: `:import("${path}")`,
+        after: "\n",
+        nodes: Object.keys(pathImports).map(importedSymbol => postcss.decl({
+          prop: importedSymbol,
+          value: pathImports[importedSymbol],
+          before: "\n  "
+        }))
+      }));
+    });
+  };
+});
 
 export default processor;

test/custom-import-name.js

@@ -0,0 +1,19 @@
+"use strict";
+
+/*globals describe it */
+
+var assert = require("assert");
+var postcss = require("postcss");
+var processor = require("../");
+
+
+describe("custom-import-name", function() {
+  it("should allow to provide a custom imported name", function() {
+    var input = ":local(.name) { extends: abc from \"def\"; }";
+    var expected = ":import(\"def\") {\n  abc: abc-from-def;\n}\n:local(.name) { extends: abc-from-def; }";
+    var pipeline = postcss([processor({
+      createImportedName: function(importName, path) { return importName + "-from-" + path; }
+    })]);
+    assert.equal(pipeline.process(input).css, expected);
+  });
+});

test/test-cases.js

@@ -19,8 +19,6 @@ describe("test-cases", function() {
   fs.readdirSync(testDir).forEach(function(testCase) {
     if(fs.existsSync(path.join(testDir, testCase, "source.css"))) {
       it("should " + testCase.replace(/-/g, " "), function() {
-        var i = 0;
-        processor.getRandomStr = function() { return "rand" + (i++); };
         var input = normalize(fs.readFileSync(path.join(testDir, testCase, "source.css"), "utf-8"));
         var expected = normalize(fs.readFileSync(path.join(testDir, testCase, "expected.css"), "utf-8"));
         assert.equal(pipeline.process(input).css, expected);

test/test-cases/import-consolidate/expected.css

@@ -1,16 +1,16 @@
 :import("path/library.css") {
-  importName: __tmp_importName_rand0;
-  secondImport: __tmp_secondImport_rand1;
-  thirdImport: __tmp_thirdImport_rand2;
+  importName: __imported_importName_0;
+  secondImport: __imported_secondImport_1;
+  thirdImport: __imported_thirdImport_2;
 }
 :import("path/other-lib.css") {
-  otherLibImport: __tmp_otherLibImport_rand3;
+  otherLibImport: __imported_otherLibImport_3;
 }
 :local(.exportName) {
-  extends: __tmp_importName_rand0 __tmp_secondImport_rand1;
+  extends: __imported_importName_0 __imported_secondImport_1;
   other: rule;
 }
 :local(.otherExport) {
-  extends: __tmp_thirdImport_rand2;
-  extends: __tmp_otherLibImport_rand3;
+  extends: __imported_thirdImport_2;
+  extends: __imported_otherLibImport_3;
 }

test/test-cases/import-local-extends/expected.css

@@ -0,0 +1,4 @@
+:local(.exportName) {
+  extends: localName;
+  other: rule;
+}

test/test-cases/import-local-extends/source.css

@@ -0,0 +1,4 @@
+:local(.exportName) {
+  extends: localName;
+  other: rule;
+}

test/test-cases/import-media/expected.css

@@ -1,17 +1,17 @@
 :import("path/library.css") {
-  importName: __tmp_importName_rand0;
-  importName2: __tmp_importName2_rand1;
+  importName: __imported_importName_0;
+  importName2: __imported_importName2_1;
 }
 
 @media screen {
   :local(.exportName) {
-    extends: __tmp_importName_rand0;
-    extends: __tmp_importName2_rand1;
+    extends: __imported_importName_0;
+    extends: __imported_importName2_1;
     other: rule2;
   }
 }
 
 :local(.exportName) {
-  extends: __tmp_importName_rand0;
+  extends: __imported_importName_0;
   other: rule;
 }

test/test-cases/import-multiple-classes/expected.css

@@ -1,5 +1,5 @@
 :import("path/library.css") {
-  importName: __tmp_importName_rand0;
-  secondImport: __tmp_secondImport_rand1;
+  importName: __imported_importName_0;
+  secondImport: __imported_secondImport_1;
 }
-:local(.exportName) { extends: __tmp_importName_rand0 __tmp_secondImport_rand1; other: rule; }
+:local(.exportName) { extends: __imported_importName_0 __imported_secondImport_1; other: rule; }

test/test-cases/import-multiple-references/expected.css

@@ -1,17 +1,17 @@
 :import("path/library.css") {
-  importName: __tmp_importName_rand0;
-  secondImport: __tmp_secondImport_rand1;
-  importName2: __tmp_importName2_rand3;
+  importName: __imported_importName_0;
+  secondImport: __imported_secondImport_1;
+  importName2: __imported_importName2_3;
 }
 :import("path/library2.css") {
-  importName: __tmp_importName_rand2;
+  importName: __imported_importName_2;
 }
 :local(.exportName) {
-  extends: __tmp_importName_rand0 __tmp_secondImport_rand1;
-  extends: __tmp_importName_rand2;
-  extends: __tmp_importName2_rand3;
+  extends: __imported_importName_0 __imported_secondImport_1;
+  extends: __imported_importName_2;
+  extends: __imported_importName2_3;
 }
 :local(.exportName2) {
-  extends: __tmp_secondImport_rand1;
-  extends: __tmp_secondImport_rand1;
+  extends: __imported_secondImport_1;
+  extends: __imported_secondImport_1;
 }

test/test-cases/import-single-quotes/expected.css

@@ -1,7 +1,7 @@
 :import("path/library.css") {
-  importName: __tmp_importName_rand0;
+  importName: __imported_importName_0;
 }
 :local(.exportName) {
-  extends: __tmp_importName_rand0;
+  extends: __imported_importName_0;
   other: rule;
 }