no more multiple definitions on one line

Author: geelen

lib/index.js

@@ -17,7 +17,7 @@ var _icssReplaceSymbols = require('icss-replace-symbols');
 var _icssReplaceSymbols2 = _interopRequireDefault(_icssReplaceSymbols);
 
 var matchImports = /^(.+?)\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/;
-var matchValueDefinition = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|\w+\([^\)]+\)|[^,]+)\s?/g;
+var matchValueDefinition = /^([\w-]+):?\s+(.*)\s*$/;
 var matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/;
 
 var processor = _postcss2['default'].plugin('postcss-modules-values', function () {
@@ -34,14 +34,12 @@ var processor = _postcss2['default'].plugin('postcss-modules-values', function (
     var definitions = {};
 
     var addDefinition = function addDefinition(atRule) {
-      var matches = undefined;
-      while (matches = matchValueDefinition.exec(atRule.params)) {
-        var _matches = matches;
-
-        var _matches2 = _slicedToArray(_matches, 3);
+      var matches = matchValueDefinition.exec(atRule.params);
+      if (matches) {
+        var _matches = _slicedToArray(matches, 3);
 
-        var /*match*/key = _matches2[1];
-        var value = _matches2[2];
+        var /*match*/key = _matches[1];
+        var value = _matches[2];
 
         // Add to the definitions, knowing that values can refer to each other
         definitions[key] = (0, _icssReplaceSymbols.replaceAll)(definitions, value);
@@ -52,10 +50,10 @@ var processor = _postcss2['default'].plugin('postcss-modules-values', function (
     var addImport = function addImport(atRule) {
       var matches = matchImports.exec(atRule.params);
       if (matches) {
-        var _matches3 = _slicedToArray(matches, 3);
+        var _matches2 = _slicedToArray(matches, 3);
 
-        var /*match*/aliases = _matches3[1];
-        var path = _matches3[2];
+        var /*match*/aliases = _matches2[1];
+        var path = _matches2[2];
 
         // We can use constants for path names
         if (definitions[path]) path = definitions[path];

src/index.js

@@ -2,7 +2,7 @@ import postcss from 'postcss'
 import replaceSymbols, { replaceAll } from 'icss-replace-symbols'
 
 const matchImports = /^(.+?)\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/
-const matchValueDefinition = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|\w+\([^\)]+\)|[^,]+)\s?/g
+const matchValueDefinition = /^([\w-]+):?\s+(.*)\s*$/
 const matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/
 
 const processor = postcss.plugin('postcss-modules-values', function (opts = {}) {
@@ -16,8 +16,8 @@ const processor = postcss.plugin('postcss-modules-values', function (opts = {})
     let definitions = {}
 
     const addDefinition = atRule => {
-      let matches
-      while (matches = matchValueDefinition.exec(atRule.params)) {
+      let matches = matchValueDefinition.exec(atRule.params)
+      if (matches) {
         let [/*match*/, key, value] = matches
         // Add to the definitions, knowing that values can refer to each other
         definitions[key] = replaceAll(definitions, value)

test/index.js

@@ -41,19 +41,23 @@ describe('constants', () => {
 
   it('should import multiple from a single file', () => {
     test(
-      `@value blue, red from "./colors.css";
+      `@value blue, red, green as three from "./colors.css";
 .foo { color: red; }
-.bar { color: blue }`,
+.bar { color: blue; }
+.baz { color: three; }`,
       `:import("./colors.css") {
   i__const_blue_0: blue;
   i__const_red_1: red;
+  i__const_three_2: green;
 }
 :export {
   blue: i__const_blue_0;
   red: i__const_red_1;
+  three: i__const_three_2;
 }
 .foo { color: i__const_red_1; }
-.bar { color: i__const_blue_0 }`)
+.bar { color: i__const_blue_0; }
+.baz { color: i__const_three_2; }`)
   })
 
   it('should import from a definition', () => {
@@ -64,6 +68,13 @@ describe('constants', () => {
     )
   })
 
+  it('should compose from a definition', () => {
+    test(
+      '@value colors: "./colors.css"; .foo { composes: red from colors; }',
+      ':export {\n  colors: "./colors.css";\n}\n.foo { composes: red from "./colors.css"; }'
+    )
+  })
+
   it('should only allow values for paths if defined in the right order', () => {
     test(
       '@value red from colors; @value colors: "./colors.css";',
@@ -110,4 +121,21 @@ describe('constants', () => {
       ':export {\n  named: red;\n  3char: #0f0;\n  6char: #00ff00;\n  rgba: rgba(34, 12, 64, 0.3);\n  hsla: hsla(220, 13.0%, 18.0%, 1);\n}\n' +
       '.foo { color: red; background-color: #0f0; border-top-color: #00ff00; border-bottom-color: rgba(34, 12, 64, 0.3); outline-color: hsla(220, 13.0%, 18.0%, 1); }')
   })
+
+  it('should allow box shadow definitions with rgba', () => {
+    test(
+      '@value okShadow: 0 11px 15px -7px rgba(0,0,0,.2);\n' +
+      '.foo { box-shadow: okShadow; }',
+      ':export {\n  okShadow: 0 11px 15px -7px rgba(0,0,0,.2);\n}\n' +
+      '.foo { box-shadow: 0 11px 15px -7px rgba(0,0,0,.2); }'
+    )
+  })
+
+  it('should allow definitions with commas in them if quoted', () => {
+    test(
+      '@value coolShadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14);\n' +
+      '.foo { box-shadow: coolShadow; }',
+      ':export {\n  coolShadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14);\n}\n' +
+      '.foo { box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14); }')
+  })
 })