Merge pull request #20 from css-modules/compose-with

"Compose with" as well as "composes"

Author: geelen

README.md

@@ -42,7 +42,7 @@ Since we're exporting class names, there's no reason to export only one. This ca
   box-shadow: 0 0 4px -2px;
 }
 :local(.continueButton) {
-  composes: globalButtonStyle;
+  compose-with: globalButtonStyle;
   color: green;
 }
 ```
@@ -59,7 +59,7 @@ becomes:
   box-shadow: 0 0 4px -2px;
 }
 :local(.continueButton) {
-  extends: globalButtonStyle;
+  compose-with: globalButtonStyle;
   color: green;
 }
 ```
@@ -83,8 +83,7 @@ npm test
 
 ## Development
 
-- `npm watch` will watch `src` for changes and rebuild
-- `npm autotest` will watch `src` and `test` for changes and retest
+- `npm autotest` will watch `src` and `test` for changes and run the tests
 
 ## License
 

src/index.js

@@ -6,22 +6,22 @@ let hasOwnProperty = Object.prototype.hasOwnProperty;
 function getSingleLocalNamesForComposes(selectors) {
   return selectors.nodes.map((node) => {
     if(node.type !== 'selector' || node.nodes.length !== 1) {
-      throw new Error('composes is only allowed when selector is single :local class name not in "' +
+      throw new Error('composition is only allowed when selector is single :local class name not in "' +
         Tokenizer.stringify(selectors) + '"');
     }
     node = node.nodes[0];
     if(node.type !== 'nested-pseudo-class' || node.name !== 'local' || node.nodes.length !== 1) {
-      throw new Error('composes is only allowed when selector is single :local class name not in "' +
+      throw new Error('composition is only allowed when selector is single :local class name not in "' +
         Tokenizer.stringify(selectors) + '", "' + Tokenizer.stringify(node) + '" is weird');
     }
     node = node.nodes[0];
     if(node.type !== 'selector' || node.nodes.length !== 1) {
-      throw new Error('composes is only allowed when selector is single :local class name not in "' +
+      throw new Error('composition is only allowed when selector is single :local class name not in "' +
         Tokenizer.stringify(selectors) + '", "' + Tokenizer.stringify(node) + '" is weird');
     }
     node = node.nodes[0];
     if(node.type !== 'class') { // 'id' is not possible, because you can't compose ids
-      throw new Error('composes is only allowed when selector is single :local class name not in "' +
+      throw new Error('composition is only allowed when selector is single :local class name not in "' +
         Tokenizer.stringify(selectors) + '", "' + Tokenizer.stringify(node) + '" is weird');
     }
     return node.name;
@@ -92,7 +92,7 @@ const processor = postcss.plugin('postcss-modules-scope', function(options) {
       let selector = Tokenizer.parse(rule.selector);
       let newSelector = traverseNode(selector);
       rule.selector = Tokenizer.stringify(newSelector);
-      rule.walkDecls('composes', decl => {
+      rule.walkDecls(/composes|compose-with/, decl => {
         let localNames = getSingleLocalNamesForComposes(selector);
         let classes = decl.value.split(/\s+/);
         classes.forEach((className) => {
@@ -107,11 +107,12 @@ const processor = postcss.plugin('postcss-modules-scope', function(options) {
               });
             });
           } else {
-            throw decl.error('referenced class name "' + className + '" in composes not found');
+            throw decl.error(`referenced class name "${className}" in ${decl.prop} not found`);
           }
         });
         decl.remove();
       });
+      
       rule.walkDecls(decl => {
         var tokens = decl.value.split(/(,|'[^']*'|"[^"]*")/);
         tokens = tokens.map((token, idx) => {

test/test-cases/error-composes-not-allowed-in-local-id/expected.error.txt

@@ -1 +1 @@
-composes is only allowed when selector is single :local class name not in ":local\(#idName\)", "#idName" is weird
+composition is only allowed when selector is single :local class name not in ":local\(#idName\)", "#idName" is weird

test/test-cases/error-composes-not-allowed-in-multiple/expected.error.txt

@@ -1 +1 @@
-composes is only allowed when selector is single :local class name not in ":local\(\.a\) :local\(\.b\)"
+composition is only allowed when selector is single :local class name not in ":local\(\.a\) :local\(\.b\)"

test/test-cases/error-composes-not-allowed-in-simple/expected.error.txt

@@ -1 +1 @@
-composes is only allowed when selector is single :local class name not in "body", "body" is weird
+composition is only allowed when selector is single :local class name not in "body", "body" is weird

test/test-cases/error-composes-not-allowed-in-wrong-local/expected.error.txt

@@ -1 +1 @@
-composes is only allowed when selector is single :local class name not in ":local\(\.a\.b\)", "\.a\.b" is weird
+composition is only allowed when selector is single :local class name not in ":local\(\.a\.b\)", "\.a\.b" is weird

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

@@ -1 +1 @@
-referenced class name "otherClassName" in composes not found
+referenced class name "otherClassName" in compose-with not found

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

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

test/test-cases/export-with-composes/source.css

@@ -1 +1 @@
-:local(.otherClass) { background: red; } :local(.exportName) { composes: otherClass; color: green; }
+:local(.otherClass) { background: red; } :local(.exportName) { compose-with: otherClass; color: green; }

test/test-cases/export-with-multiple-composes/source.css

@@ -1,4 +1,4 @@
 :local(.otherClass) { background: red; }
 :local(.andAgain) { font-size: 2em; }
 :local(.aThirdClass) { color: red; }
-:local(.exportName) { composes: otherClass andAgain; composes: aThirdClass; color: green; }
+:local(.exportName) { compose-with: otherClass andAgain; compose-with: aThirdClass; color: green; }