[Pkg-javascript-commits] [less.js] 04/25: Fix ordering of @import and @charset rules #1954 #2013

Jonas Smedegaard dr at jones.dk
Mon Oct 26 23:22:59 UTC 2015


This is an automated email from the git hooks/post-receive script.

js pushed a commit to annotated tag v1.7.4
in repository less.js.

commit 864c63d27b8862d03b1536df4303838fb02c83d1
Author: jurcovicovam <meri at meri.org>
Date:   Tue Jul 22 14:46:58 2014 +0200

    Fix ordering of @import and @charset rules #1954 #2013
    
    The genCss method of ruleset.js splits child nodes into two groups:
    * rules,
    * rulesets.
    
    Rules are always printed first and have special handling for last rule.
    Rulesets are always printed second. Wrong ordering was caused by the
    condition that determined what is rule and what is ruleset.
    
    Issue #2013: The condition made no difference between @charset and @page,
    because both are compiled into tree.Directive nodes. I added isRulesetLike
    method to the tree.Directive to differentiate between them.
    
    Issue #1954: The condition treated all tree.Anonymous types as rules and
    caused them to float up. That is incorrect, because `@import (inline)` is
    compiled into tree.Anonymous too, but should be treated as ruleset and
    stay where it is.
---
 lib/less/tree/anonymous.js   |  8 ++++++--
 lib/less/tree/directive.js   |  3 +++
 lib/less/tree/import.js      |  2 +-
 lib/less/tree/ruleset.js     | 22 +++++++++++++++++++++-
 test/css/import-inline.css   |  5 ++++-
 test/css/import.css          |  1 +
 test/less/import-inline.less |  1 +
 test/less/import.less        |  1 +
 8 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/lib/less/tree/anonymous.js b/lib/less/tree/anonymous.js
index d6e5790..4584061 100644
--- a/lib/less/tree/anonymous.js
+++ b/lib/less/tree/anonymous.js
@@ -1,15 +1,16 @@
 (function (tree) {
 
-tree.Anonymous = function (value, index, currentFileInfo, mapLines) {
+tree.Anonymous = function (value, index, currentFileInfo, mapLines, rulesetLike) {
     this.value = value;
     this.index = index;
     this.mapLines = mapLines;
     this.currentFileInfo = currentFileInfo;
+    this.rulesetLike = (typeof rulesetLike === 'undefined')? false : rulesetLike;
 };
 tree.Anonymous.prototype = {
     type: "Anonymous",
     eval: function () { 
-        return new tree.Anonymous(this.value, this.index, this.currentFileInfo, this.mapLines);
+        return new tree.Anonymous(this.value, this.index, this.currentFileInfo, this.mapLines, this.rulesetLike);
     },
     compare: function (x) {
         if (!x.toCSS) {
@@ -25,6 +26,9 @@ tree.Anonymous.prototype = {
         
         return left < right ? -1 : 1;
     },
+    isRulesetLike: function() {
+        return this.rulesetLike;
+    },
     genCSS: function (env, output) {
         output.add(this.value, this.currentFileInfo, this.index, this.mapLines);
     },
diff --git a/lib/less/tree/directive.js b/lib/less/tree/directive.js
index b59a16b..3d598f4 100644
--- a/lib/less/tree/directive.js
+++ b/lib/less/tree/directive.js
@@ -23,6 +23,9 @@ tree.Directive.prototype = {
             value = visitor.visit(value);
         }
     },
+    isRulesetLike: function() {
+        return "@charset" !== this.name;
+    },
     genCSS: function (env, output) {
         var value = this.value, rules = this.rules;
         output.add(this.name, this.currentFileInfo, this.index);
diff --git a/lib/less/tree/import.js b/lib/less/tree/import.js
index 7042f04..0d00a64 100644
--- a/lib/less/tree/import.js
+++ b/lib/less/tree/import.js
@@ -103,7 +103,7 @@ tree.Import.prototype = {
          
         if (this.options.inline) {
             //todo needs to reference css file not import
-            var contents = new(tree.Anonymous)(this.root, 0, {filename: this.importedFilename}, true);
+            var contents = new(tree.Anonymous)(this.root, 0, {filename: this.importedFilename}, true, true);
             return this.features ? new(tree.Media)([contents], this.features.value) : [contents];
         } else if (this.css) {
             var newImport = new(tree.Import)(this.evalPath(env), features, this.options, this.index);
diff --git a/lib/less/tree/ruleset.js b/lib/less/tree/ruleset.js
index 1902300..ee543d4 100644
--- a/lib/less/tree/ruleset.js
+++ b/lib/less/tree/ruleset.js
@@ -283,9 +283,29 @@ tree.Ruleset.prototype = {
             tabSetStr = env.compress ? '' : Array(env.tabLevel).join("  "),
             sep;
 
+        function isRulesetLikeNode(rule, root) {
+             // if it has nested rules, then it should be treated like a ruleset
+             if (rule.rules)
+                 return true;
+
+             // medias and comments do not have nested rules, but should be treated like rulesets anyway
+             if ( (rule instanceof tree.Media) || (root && rule instanceof tree.Comment))
+                 return true;
+
+             // some directives and anonumoust nodes are ruleset like, others are not
+             if ((rule instanceof tree.Directive) || (rule instanceof tree.Anonymous)) {
+                 return rule.isRulesetLike();
+             }
+
+             //anything else is assumed to be a rule
+             return false;
+        }
+
         for (i = 0; i < this.rules.length; i++) {
             rule = this.rules[i];
-            if (rule.rules || (rule instanceof tree.Media) || rule instanceof tree.Directive || (this.root && rule instanceof tree.Comment)) {
+//            console.log(rule.type);
+//            if (rule.rules || (rule instanceof tree.Media) || rule instanceof tree.Directive || (this.root && rule instanceof tree.Comment)) {
+            if (isRulesetLikeNode(rule, this.root)) {
                 rulesetNodes.push(rule);
             } else {
                 ruleNodes.push(rule);
diff --git a/test/css/import-inline.css b/test/css/import-inline.css
index f198d3c..5e729d1 100644
--- a/test/css/import-inline.css
+++ b/test/css/import-inline.css
@@ -1,5 +1,8 @@
-this isn't very valid CSS.
+#import {
+  color: #ff0000;
+}
 @media (min-width: 600px) {
   #css { color: yellow; }
 
 }
+this isn't very valid CSS.
diff --git a/test/css/import.css b/test/css/import.css
index a374918..96509af 100644
--- a/test/css/import.css
+++ b/test/css/import.css
@@ -1,3 +1,4 @@
+ at charset "UTF-8";
 @import url(http://fonts.googleapis.com/css?family=Open+Sans);
 @import url(/absolute/something.css) screen and (color) and (max-width: 600px);
 @import url("//ha.com/file.css") (min-width: 100px);
diff --git a/test/less/import-inline.less b/test/less/import-inline.less
index 95a1189..213a574 100644
--- a/test/less/import-inline.less
+++ b/test/less/import-inline.less
@@ -1,2 +1,3 @@
+ at import url("import/import-test-c.less");// import inline should not float above this #1954
 @import (inline) url("import/import-test-d.css") (min-width:600px);
 @import (inline, css) url("import/invalid-css.less");
\ No newline at end of file
diff --git a/test/less/import.less b/test/less/import.less
index 0168940..b95ac00 100644
--- a/test/less/import.less
+++ b/test/less/import.less
@@ -1,3 +1,4 @@
+ at charset "UTF-8"; // stay on top #2013
 @import url(http://fonts.googleapis.com/css?family=Open+Sans);
 
 @import url(/absolute/something.css) screen and (color) and (max-width: 600px);

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/less.js.git



More information about the Pkg-javascript-commits mailing list