Merge pull request #12 from css-modules/fixed-composes

fixed incorrect composes behavior

Author: sokra

package.json

@@ -34,7 +34,7 @@
   },
   "homepage": "https://github.com/geelen/postcss-modules-scope",
   "dependencies": {
-    "css-selector-tokenizer": "^0.3.1",
+    "css-selector-tokenizer": "^0.5.0",
     "postcss": "^4.1.11"
   },
   "devDependencies": {

src/index.js

@@ -1,6 +1,8 @@
 import postcss from 'postcss';
 import Tokenizer from 'css-selector-tokenizer';
 
+let hasOwnProperty = Object.prototype.hasOwnProperty;
+
 function getSingleLocalNamesForComposes(selectors) {
   return selectors.nodes.map((node) => {
     if(node.type !== 'selector' || node.nodes.length !== 1) {
@@ -75,6 +77,16 @@ const processor = postcss.plugin('postcss-modules-scope', function(options) {
       return node;
     }
 
+    // Find any :import and remember imported names
+    let importedNames = {};
+    css.eachRule(rule => {
+      if(/^:import\(.+\)$/.test(rule.selector)) {
+        rule.eachDecl(decl => {
+          importedNames[decl.prop] = true;
+        });
+      }
+    });
+
     // Find any :local classes
     css.eachRule(rule => {
       let selector = Tokenizer.parse(rule.selector);
@@ -84,9 +96,19 @@ const processor = postcss.plugin('postcss-modules-scope', function(options) {
         let localNames = getSingleLocalNamesForComposes(selector);
         let classes = decl.value.split(/\s+/);
         classes.forEach((className) => {
-          localNames.forEach((exportedName) => {
-            exports[exportedName].push(className);
-          });
+          if(hasOwnProperty.call(importedNames, className)) {
+            localNames.forEach((exportedName) => {
+              exports[exportedName].push(className);
+            });
+          } else if(hasOwnProperty.call(exports, className)) {
+            localNames.forEach((exportedName) => {
+              exports[className].forEach((item) => {
+                exports[exportedName].push(item);
+              });
+            });
+          } else {
+            throw decl.error("referenced class name \"" + className + "\" in composes not found");
+          }
         });
         decl.removeSelf();
       });
@@ -121,7 +143,7 @@ const processor = postcss.plugin('postcss-modules-scope', function(options) {
     // If we found any :locals, insert an :export rule
     let exportedNames = Object.keys(exports);
     if (exportedNames.length > 0) {
-      css.prepend(postcss.rule({
+      css.append(postcss.rule({
         selector: `:export`,
         nodes: exportedNames.map(exportedName => postcss.decl({
           prop: exportedName,

test/test-cases/error-composes-not-defined-class/expected.error.txt

@@ -0,0 +1 @@
+referenced class name "otherClassName" in composes not found

test/test-cases/error-composes-not-defined-class/source.css

@@ -0,0 +1,3 @@
+:local(.className) {
+  composes: otherClassName;
+}

test/test-cases/export-child-class/expected.css

@@ -0,0 +1,11 @@
+._input__simple {
+  color: red;
+}
+
+._input__simple h1 {
+  color: blue;
+}
+
+:export {
+  simple: _input__simple;
+}

test/test-cases/export-child-class/source.css

@@ -0,0 +1,7 @@
+:local(.simple) {
+  color: red;
+}
+
+:local(.simple) h1 {
+  color: blue;
+}

test/test-cases/export-class-path/expected.css

@@ -1,6 +1,6 @@
-:export {
-  exportName: _lib_components_button__exportName;
-}
 ._lib_components_button__exportName {
   color: green;
 }
+:export {
+  exportName: _lib_components_button__exportName;
+}

test/test-cases/export-class/expected.css

@@ -1,8 +1,3 @@
-:export {
-  exportName: _input__exportName;
-  newExport: _input__newExport;
-}
-
 ._input__exportName {
   color: green;
 }
@@ -21,3 +16,8 @@
     color: blue;
   }
 }
+
+:export {
+  exportName: _input__exportName;
+  newExport: _input__newExport;
+}

test/test-cases/export-difficult/expected.css

@@ -1,9 +1,3 @@
-:export {
-  fadeIn: _input__fadeIn;
-  fade-in: _input__fade-in;
-  fade-out: _input__fade-out;
-}
-
 @keyframes _input__fade-in {
   from {
     opacity: 0;
@@ -21,3 +15,9 @@
     _input__fade-out 1s :local(wrong);
   content: _input__fade-in, wrong, "difficult, :local(wrong)" :local(wrong);
 }
+
+:export {
+  fadeIn: _input__fadeIn;
+  fade-in: _input__fade-in;
+  fade-out: _input__fade-out;
+}

test/test-cases/export-keyframes/expected.css

@@ -1,12 +1,10 @@
-:export {
-  fadeIn: _input__fadeIn;
-  fade-in: _input__fade-in;
-}
-
 @keyframes _input__fade-in {
   from {
     opacity: 0;
   }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes fade {
@@ -18,3 +16,8 @@
 ._input__fadeIn {
   animation-name: _input__fade-in;
 }
+
+:export {
+  fadeIn: _input__fadeIn;
+  fade-in: _input__fade-in;
+}