Merge pull request #4 from css-modules/reorder-import-statements

Reorder import statements & use composes from here on in

Author: geelen

src/index.js

@@ -1,14 +1,14 @@
 import postcss from 'postcss';
 
-const declWhitelist = ['extends'],
+const declWhitelist = ['composes'],
   declFilter = new RegExp(`^(${declWhitelist.join('|')})$`),
   matchImports = /^([\w\s]+?)\s+from\s+(?:"([^"]+)"|'([^']+)')$/;
 
 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++}`);
+    let createImportedName = options && options.createImportedName || ((importName/*, path*/) => `i__imported_${importName}_${importIndex++}`);
 
     // Find any declaration that supports imports
     css.eachDecl(declFilter, (decl) => {
@@ -35,8 +35,8 @@ const processor = postcss.plugin('modules-extract-imports', function(options) {
         selector: `:import("${path}")`,
         after: "\n",
         nodes: Object.keys(pathImports).map(importedSymbol => postcss.decl({
-          prop: importedSymbol,
-          value: pathImports[importedSymbol],
+          value: importedSymbol,
+          prop: pathImports[importedSymbol],
           before: "\n  "
         }))
       }));

test/custom-import-name.js

@@ -9,8 +9,8 @@ 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 input = ":local(.name) { composes: abc from \"def\"; }";
+    var expected = ":import(\"def\") {\n  abc-from-def: abc;\n}\n:local(.name) { composes: abc-from-def; }";
     var pipeline = postcss([processor({
       createImportedName: function(importName, path) { return importName + "-from-" + path; }
     })]);

test/test-cases.js

@@ -11,7 +11,7 @@ var processor = require("../");
 var pipeline = postcss([processor]);
 
 function normalize(str) {
-  return str.replace(/\r\n?/g, "\n");
+  return str.replace(/\r\n?/g, "\n").replace(/\n$/,'');
 }
 
 describe("test-cases", function() {

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

@@ -1,6 +1,6 @@
 /*
 :local(.exportName) {
-  extends: importName from "path/library.css";
+  composes: importName from "path/library.css";
   other: rule;
 }
 */

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

@@ -1,6 +1,6 @@
 /*
 :local(.exportName) {
-  extends: importName from "path/library.css";
+  composes: importName from "path/library.css";
   other: rule;
 }
 */

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

@@ -1,16 +1,16 @@
 :import("path/library.css") {
-  importName: __imported_importName_0;
-  secondImport: __imported_secondImport_1;
-  thirdImport: __imported_thirdImport_2;
+  i__imported_importName_0: importName;
+  i__imported_secondImport_1: secondImport;
+  i__imported_thirdImport_2: thirdImport;
 }
 :import("path/other-lib.css") {
-  otherLibImport: __imported_otherLibImport_3;
+  i__imported_otherLibImport_3: otherLibImport;
 }
 :local(.exportName) {
-  extends: __imported_importName_0 __imported_secondImport_1;
+  composes: i__imported_importName_0 i__imported_secondImport_1;
   other: rule;
 }
 :local(.otherExport) {
-  extends: __imported_thirdImport_2;
-  extends: __imported_otherLibImport_3;
+  composes: i__imported_thirdImport_2;
+  composes: i__imported_otherLibImport_3;
 }

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

@@ -1,9 +1,9 @@
 
 :local(.exportName) {
-  extends: importName secondImport from 'path/library.css';
+  composes: importName secondImport from 'path/library.css';
   other: rule;
 }
 :local(.otherExport) {
-  extends: thirdImport from 'path/library.css';
-  extends: otherLibImport from 'path/other-lib.css';
+  composes: thirdImport from 'path/library.css';
+  composes: otherLibImport from 'path/other-lib.css';
 }

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

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

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

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

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

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