Add multi-line imports

Author: jerrysu

lib/index.js

@@ -16,7 +16,7 @@ var _icssReplaceSymbols = require('icss-replace-symbols');
 
 var _icssReplaceSymbols2 = _interopRequireDefault(_icssReplaceSymbols);
 
-var matchImports = /^(.+?)\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/;
+var matchImports = /^(.+?|\([\s\S]+?\))\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/;
 var matchValueDefinition = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|\w+\([^\)]+\)|[^,]+)\s?/g;
 var matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/;
 var options = {};
@@ -55,7 +55,7 @@ exports['default'] = function (css) {
 
       // We can use constants for path names
       if (definitions[path]) path = definitions[path];
-      var imports = aliases.split(/\s*,\s*/).map(function (alias) {
+      var imports = aliases.replace(/^\(\s*([\s\S]+)\s*\)$/, '$1').split(/\s*,\s*/).map(function (alias) {
         var tokens = matchImport.exec(alias);
         if (tokens) {
           var _tokens = _slicedToArray(tokens, 3);

src/index.js

@@ -1,7 +1,7 @@
 import postcss from 'postcss'
 import replaceSymbols, { replaceAll } from 'icss-replace-symbols'
 
-const matchImports = /^(.+?)\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/
+const matchImports = /^(.+?|\([\s\S]+?\))\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/
 const matchValueDefinition = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|\w+\([^\)]+\)|[^,]+)\s?/g
 const matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/
 let options = {}
@@ -28,7 +28,7 @@ export default css => {
       let [/*match*/, aliases, path] = matches
       // We can use constants for path names
       if (definitions[path]) path = definitions[path]
-      let imports = aliases.split(/\s*,\s*/).map(alias => {
+      let imports = aliases.replace(/^\(\s*([\s\S]+)\s*\)$/, '$1').split(/\s*,\s*/).map(alias => {
         let tokens = matchImport.exec(alias)
         if (tokens) {
           let [/*match*/, theirName, myName = theirName] = tokens

test/index.js

@@ -110,4 +110,24 @@ 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 import multiple from a single file on multiple lines', () => {
+    test(
+      `@value (
+  blue,
+  red
+) from "./colors.css";
+.foo { color: red; }
+.bar { color: blue }`,
+      `:import("./colors.css") {
+  i__const_blue_10: blue;
+  i__const_red_11: red;
+}
+:export {
+  blue: i__const_blue_10;
+  red: i__const_red_11;
+}
+.foo { color: i__const_red_11; }
+.bar { color: i__const_blue_10 }`)
+  })
 })