Merge pull request #7 from css-modules/icss-compatibility

Don't duplicate ICSS imports

Author: geelen

package.json

@@ -7,11 +7,11 @@
     "lint": "eslint src",
     "build": "babel --out-dir lib src",
     "watch": "chokidar src -c 'npm run build'",
-    "pretest": "npm run lint && npm run build",
-    "test": "mocha",
+    "posttest": "npm run lint && npm run build",
+    "test": "mocha --compilers js:babel/register",
     "autotest": "chokidar src test -c 'npm test'",
     "precover": "npm run lint && npm run build",
-    "cover": "istanbul cover node_modules/mocha/bin/_mocha",
+    "cover": "babel-istanbul cover node_modules/.bin/_mocha",
     "travis": "npm run cover -- --report lcovonly",
     "prepublish": "npm run build"
   },
@@ -39,12 +39,12 @@
   "devDependencies": {
     "babel": "^5.4.7",
     "babel-eslint": "^3.1.9",
+    "babel-istanbul": "^0.2.10",
     "babelify": "^6.1.2",
     "chokidar-cli": "^0.2.1",
     "codecov.io": "^0.1.2",
     "coveralls": "^2.11.2",
     "eslint": "^0.22.1",
-    "istanbul": "^0.3.14",
     "mocha": "^2.2.5"
   }
 }

src/index.js

@@ -2,7 +2,8 @@ import postcss from 'postcss';
 
 const declWhitelist = ['composes'],
   declFilter = new RegExp( `^(${declWhitelist.join( '|' )})$` ),
-  matchImports = /^(.+?)\s+from\s+(?:"([^"]+)"|'([^']+)')$/;
+  matchImports = /^(.+?)\s+from\s+(?:"([^"]+)"|'([^']+)')$/,
+  icssImport = /^:import\((?:"([^"]+)"|'([^']+)')\)/;
 
 const processor = postcss.plugin( 'modules-extract-imports', function ( options ) {
   return ( css ) => {
@@ -28,19 +29,33 @@ const processor = postcss.plugin( 'modules-extract-imports', function ( options
       }
     } );
 
-    // If we've found any imports, insert :import rules
+    // If we've found any imports, insert or append :import rules
+    let existingImports = {};
+    css.eachRule(rule => {
+      let matches = icssImport.exec(rule.selector);
+      if (matches) {
+        let [/*match*/, doubleQuotePath, singleQuotePath] = matches;
+        existingImports[doubleQuotePath || singleQuotePath] = rule;
+      }
+    });
+
     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( {
+      let rule = existingImports[path];
+      if (!rule) {
+        rule = postcss.rule( {
+          selector: `:import("${path}")`,
+          after: "\n"
+        } );
+        css.prepend( rule );
+      }
+      Object.keys( imports[path] ).forEach( importedSymbol => {
+        rule.push(postcss.decl( {
           value: importedSymbol,
-          prop: pathImports[importedSymbol],
+          prop: imports[path][importedSymbol],
           before: "\n  ",
           _autoprefixerDisabled: true
-        } ) )
-      } ) );
+        } ) );
+      } );
     } );
   };
 } );

test/test-cases.js

@@ -6,7 +6,7 @@ var assert = require("assert");
 var fs = require("fs");
 var path = require("path");
 var postcss = require("postcss");
-var processor = require("../");
+var processor = require("../src");
 
 var pipeline = postcss([processor]);
 

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

@@ -0,0 +1,8 @@
+:import("path/library.css") {
+  something: else;
+  i__imported_importName_0: importName;
+}
+
+:local(.exportName) {
+  composes: i__imported_importName_0;
+}

test/test-cases/existing-import/source.css

@@ -0,0 +1,7 @@
+:import("path/library.css") {
+  something: else;
+}
+
+:local(.exportName) {
+  composes: importName from 'path/library.css';
+}