Implement syntax in gh less#1185 for @import options. Implement multiple & less.

First step in implementing syntax for @import options, proposed in
less#1185 (comment)
(steps (1) and (2)).

I've implemented the 'multiple' and 'less' options.  One could trivially
add 'once' and 'css' options as well, if there was need.  Proposed
"silent" and "inline" options are deferred for future work.

I left the existing "@import-multiple" and "@import-once" syntax in place,
although the proposal is for this to be deprecated once the new option
syntax is in place.

Author: cscott

lib/less/import-visitor.js

@@ -41,7 +41,7 @@
                     var env = new tree.evalEnv(this.env, this.env.frames.slice(0));
                     this._importer.push(importNode.getPath(), importNode.currentFileInfo, function (e, root, imported) {
                         if (e && !e.filename) { e.index = importNode.index; e.filename = importNode.currentFileInfo.filename; }
-                        if (imported && importNode.once) { importNode.skip = imported; }
+                        if (imported && !importNode.options.multiple) { importNode.skip = imported; }
 
                         var subFinish = function() {
                             importVisitor.importCount--;

lib/less/parser.js

@@ -1207,18 +1207,47 @@ less.Parser = function Parser(env) {
 
                 var dir = $(/^@import(?:-(once|multiple))?\s+/);
 
+                var options = (dir ? $(this.importOptions) : null) || {};
+
                 if (dir && (path = $(this.entities.quoted) || $(this.entities.url))) {
                     features = $(this.mediaFeatures);
                     if ($(';')) {
                         features = features && new(tree.Value)(features);
-                        var importOnce = dir[1] !== 'multiple';
-                        return new(tree.Import)(path, features, importOnce, index, env.currentFileInfo);
+                        if (dir[1] === 'multiple') { options.multiple = true; }
+                        return new(tree.Import)(path, features, options, index, env.currentFileInfo);
                     }
                 }
 
                 restore();
             },
 
+            importOptions: function() {
+                var o, options = {};
+
+                // single option, no parens
+                if (o = $(this.importOption)) {
+                    options[o] = true;
+                    return options;
+                }
+                // list of options, surrounded by parens
+                if (! $('(')) { return null; }
+                do {
+                    if (o = $(this.importOption)) {
+                        options[o] = true;
+                        if (! $(',')) { break }
+                    }
+                } while (o);
+                expect(')');
+                return options;
+            },
+
+            importOption: function() {
+                var opt = $(/^(less|multiple)/);
+                if (opt) {
+                    return opt[1];
+                }
+            },
+
             mediaFeature: function () {
                 var e, p, nodes = [];
 

lib/less/tree/import.js

@@ -11,10 +11,10 @@
 // `import,push`, we also pass it a callback, which it'll call once
 // the file has been fetched, and parsed.
 //
-tree.Import = function (path, features, once, index, currentFileInfo) {
+tree.Import = function (path, features, options, index, currentFileInfo) {
     var that = this;
 
-    this.once = once;
+    this.options = options;
     this.index = index;
     this.path = path;
     this.features = features;
@@ -24,6 +24,7 @@ tree.Import = function (path, features, once, index, currentFileInfo) {
     if (pathValue) {
         this.css = /css([\?;].*)?$/.test(pathValue);
     }
+    if (this.options.less) { this.css = false; }
 };
 
 //
@@ -61,7 +62,7 @@ tree.Import.prototype = {
         return null;
     },
     evalForImport: function (env) {
-        return new(tree.Import)(this.path.eval(env), this.features, this.once, this.index, this.currentFileInfo);
+        return new(tree.Import)(this.path.eval(env), this.features, this.options, this.index, this.currentFileInfo);
     },
     evalPath: function (env) {
         var path = this.path.eval(env);
@@ -81,7 +82,7 @@ tree.Import.prototype = {
         if (this.skip) { return []; }
 
         if (this.css) {
-            var newImport = new(tree.Import)(this.evalPath(env), features, this.once, this.index);
+            var newImport = new(tree.Import)(this.evalPath(env), features, this.options, this.index);
             if (!newImport.css && this.error) {
                 throw this.error;
             }

test/css/import.css

@@ -21,3 +21,18 @@
   height: 10px;
   color: #ff0000;
 }
+@media screen and (max-width: 601px) {
+  #css {
+    color: yellow;
+  }
+}
+@media screen and (max-width: 602px) {
+  body {
+    width: 100%;
+  }
+}
+@media screen and (max-width: 603px) {
+  #css {
+    color: yellow;
+  }
+}

test/less/import.less

@@ -12,4 +12,10 @@
 }
 @import "import/import-test-e" screen and (max-width: 600px);
 
-@import url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3Eimport/import-test-a.less%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E);
+@import url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3Eimport/import-test-a.less%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E);
+
+@import less "import/import-test-d.css" screen and (max-width: 601px);
+
+@import multiple "import/import-test-e" screen and (max-width: 602px);
+
+@import (less, multiple) url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3Eimport/import-test-d.css%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E) screen and (max-width: 603px);