Merge pull request #873 from orottier/fix-844

Fix Issue #844
beautifier · Feb 23, 2016 · 0957ba4 · 0957ba4
2 parents 852919d + 02d243c
commit 0957ba4
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 33 deletions.
diff --git a/js/lib/beautify-css.js b/js/lib/beautify-css.js
@@ -302,26 +302,32 @@
                 print.newLine();
             } else if (ch === '@') {
                 print.preserveSingleSpace();
-                output.push(ch);
 
-                // strip trailing space, if present, for hash property checks
-                var variableOrRule = peekString(": ,;{}()[]/='\"");
+                // deal with less propery mixins @{...}
+                if (peek() === '{') {
+                    output.push(eatString('}'));
+                } else {
+                    output.push(ch);
 
-                if (variableOrRule.match(/[ :]$/)) {
-                    // we have a variable or pseudo-class, add it and insert one space before continuing
-                    next();
-                    variableOrRule = eatString(": ").replace(/\s$/, '');
-                    output.push(variableOrRule);
-                    print.singleSpace();
-                }
+                    // strip trailing space, if present, for hash property checks
+                    var variableOrRule = peekString(": ,;{}()[]/='\"");
 
-                variableOrRule = variableOrRule.replace(/\s$/, '');
+                    if (variableOrRule.match(/[ :]$/)) {
+                        // we have a variable or pseudo-class, add it and insert one space before continuing
+                        next();
+                        variableOrRule = eatString(": ").replace(/\s$/, '');
+                        output.push(variableOrRule);
+                        print.singleSpace();
+                    }
 
-                // might be a nesting at-rule
-                if (variableOrRule in css_beautify.NESTED_AT_RULE) {
-                    nestedLevel += 1;
-                    if (variableOrRule in css_beautify.CONDITIONAL_GROUP_RULE) {
-                        enteringConditionalGroup = true;
+                    variableOrRule = variableOrRule.replace(/\s$/, '');
+
+                    // might be a nesting at-rule
+                    if (variableOrRule in css_beautify.NESTED_AT_RULE) {
+                        nestedLevel += 1;
+                        if (variableOrRule in css_beautify.CONDITIONAL_GROUP_RULE) {
+                            enteringConditionalGroup = true;
+                        }
                     }
                 }
             } else if (ch === '#' && peek() === '{') {

diff --git a/js/test/generated/beautify-css-tests.js b/js/test/generated/beautify-css-tests.js
@@ -222,6 +222,26 @@ function run_css_tests(test_obj, Urlencoded, js_beautify, html_beautify, css_bea
         t('.tabs{width:10px;//end of line comment\nheight:10px;//another\n}', '.tabs {\n\twidth: 10px; //end of line comment\n\theight: 10px; //another\n}');
 
 
+        reset_options();
+        //============================================================
+        // Handle LESS property name interpolation
+        t('tag {\n\t@{prop}: none;\n}');
+        t('tag{@{prop}:none;}', 'tag {\n\t@{prop}: none;\n}');
+        t('tag{ @{prop}: none;}', 'tag {\n\t@{prop}: none;\n}');
+
+        // can also be part of property name
+        t('tag {\n\tdynamic-@{prop}: none;\n}');
+        t('tag{dynamic-@{prop}:none;}', 'tag {\n\tdynamic-@{prop}: none;\n}');
+        t('tag{ dynamic-@{prop}: none;}', 'tag {\n\tdynamic-@{prop}: none;\n}');
+
+
+        reset_options();
+        //============================================================
+        // Handle LESS property name interpolation, test #631
+        t('.generate-columns(@n, @i: 1) when (@i =< @n) {\n\t.column-@{i} {\n\t\twidth: (@i * 100% / @n);\n\t}\n\t.generate-columns(@n, (@i + 1));\n}');
+        t('.generate-columns(@n,@i:1) when (@i =< @n){.column-@{i}{width:(@i * 100% / @n);}.generate-columns(@n,(@i + 1));}', '.generate-columns(@n, @i: 1) when (@i =< @n) {\n\t.column-@{i} {\n\t\twidth: (@i * 100% / @n);\n\t}\n\t.generate-columns(@n, (@i + 1));\n}');
+
+
         reset_options();
         //============================================================
         // Psuedo-classes vs Variables

diff --git a/python/cssbeautifier/__init__.py b/python/cssbeautifier/__init__.py
@@ -337,28 +337,32 @@ def beautify(self):
                 printer.newLine()
             elif self.ch == '@':
                 printer.preserveSingleSpace(isAfterSpace)
-                printer.push(self.ch)
 
-                # strip trailing space, if present, for hash property check
-                variableOrRule = self.peekString(": ,;{}()[]/='\"")
+                # deal with less propery mixins @{...}
+                if self.peek(True) == '{':
+                    printer.push(self.eatString('}'));
+                else:
+                    printer.push(self.ch)
+                    # strip trailing space, if present, for hash property check
+                    variableOrRule = self.peekString(": ,;{}()[]/='\"")
+
+                    if variableOrRule[-1] in ": ":
+                        # wwe have a variable or pseudo-class, add it and insert one space before continuing
+                        self.next()
+                        variableOrRule = self.eatString(": ")
+                        if variableOrRule[-1].isspace():
+                            variableOrRule = variableOrRule[:-1]
+                        printer.push(variableOrRule)
+                        printer.singleSpace();
 
-                if variableOrRule[-1] in ": ":
-                    # wwe have a variable or pseudo-class, add it and insert one space before continuing
-                    self.next()
-                    variableOrRule = self.eatString(": ")
                     if variableOrRule[-1].isspace():
                         variableOrRule = variableOrRule[:-1]
-                    printer.push(variableOrRule)
-                    printer.singleSpace();
-
-                if variableOrRule[-1].isspace():
-                    variableOrRule = variableOrRule[:-1]
 
-                # might be a nesting at-rule
-                if variableOrRule in self.NESTED_AT_RULE:
-                    printer.nestedLevel += 1
-                    if variableOrRule in self.CONDITIONAL_GROUP_RULE:
-                        enteringConditionalGroup = True
+                    # might be a nesting at-rule
+                    if variableOrRule in self.NESTED_AT_RULE:
+                        printer.nestedLevel += 1
+                        if variableOrRule in self.CONDITIONAL_GROUP_RULE:
+                            enteringConditionalGroup = True
             elif self.ch == '#' and self.peek() == '{':
                 printer.preserveSingleSpace(isAfterSpace)
                 printer.push(self.eatString('}'));

diff --git a/python/cssbeautifier/tests/generated/tests.py b/python/cssbeautifier/tests/generated/tests.py
@@ -185,6 +185,26 @@ def testGenerated(self):
         t('.tabs{width:10px;//end of line comment\nheight:10px;//another\n}', '.tabs {\n\twidth: 10px; //end of line comment\n\theight: 10px; //another\n}')
 
 
+        self.reset_options();
+        #============================================================
+        # Handle LESS property name interpolation
+        t('tag {\n\t@{prop}: none;\n}')
+        t('tag{@{prop}:none;}', 'tag {\n\t@{prop}: none;\n}')
+        t('tag{ @{prop}: none;}', 'tag {\n\t@{prop}: none;\n}')
+
+        # can also be part of property name
+        t('tag {\n\tdynamic-@{prop}: none;\n}')
+        t('tag{dynamic-@{prop}:none;}', 'tag {\n\tdynamic-@{prop}: none;\n}')
+        t('tag{ dynamic-@{prop}: none;}', 'tag {\n\tdynamic-@{prop}: none;\n}')
+
+
+        self.reset_options();
+        #============================================================
+        # Handle LESS property name interpolation, test #631
+        t('.generate-columns(@n, @i: 1) when (@i =< @n) {\n\t.column-@{i} {\n\t\twidth: (@i * 100% / @n);\n\t}\n\t.generate-columns(@n, (@i + 1));\n}')
+        t('.generate-columns(@n,@i:1) when (@i =< @n){.column-@{i}{width:(@i * 100% / @n);}.generate-columns(@n,(@i + 1));}', '.generate-columns(@n, @i: 1) when (@i =< @n) {\n\t.column-@{i} {\n\t\twidth: (@i * 100% / @n);\n\t}\n\t.generate-columns(@n, (@i + 1));\n}')
+
+
         self.reset_options();
         #============================================================
         # Psuedo-classes vs Variables

diff --git a/test/data/css/tests.js b/test/data/css/tests.js
@@ -152,6 +152,30 @@ exports.test_data = {
             { input: '.tabs{width:10px;//end of line comment\nheight:10px;}', output: '.tabs {\n\twidth: 10px; //end of line comment\n\theight: 10px;\n}' },
             { input: '.tabs{width:10px;//end of line comment\nheight:10px;//another\n}', output: '.tabs {\n\twidth: 10px; //end of line comment\n\theight: 10px; //another\n}' }
         ],
+    }, {
+        name: "Handle LESS property name interpolation",
+        description: "",
+        tests: [
+            { unchanged: 'tag {\n\t@{prop}: none;\n}' },
+            { input: 'tag{@{prop}:none;}', output: 'tag {\n\t@{prop}: none;\n}' },
+            { input: 'tag{ @{prop}: none;}', output: 'tag {\n\t@{prop}: none;\n}' },
+            {
+                comment: "can also be part of property name",
+                unchanged: 'tag {\n\tdynamic-@{prop}: none;\n}'
+            },
+            { input: 'tag{dynamic-@{prop}:none;}', output: 'tag {\n\tdynamic-@{prop}: none;\n}' },
+            { input: 'tag{ dynamic-@{prop}: none;}', output: 'tag {\n\tdynamic-@{prop}: none;\n}' },
+        ],
+    }, {
+        name: "Handle LESS property name interpolation, test #631",
+        description: "",
+        tests: [
+            { unchanged: '.generate-columns(@n, @i: 1) when (@i =< @n) {\n\t.column-@{i} {\n\t\twidth: (@i * 100% / @n);\n\t}\n\t.generate-columns(@n, (@i + 1));\n}' },
+            {
+                input: '.generate-columns(@n,@i:1) when (@i =< @n){.column-@{i}{width:(@i * 100% / @n);}.generate-columns(@n,(@i + 1));}',
+                output: '.generate-columns(@n, @i: 1) when (@i =< @n) {\n\t.column-@{i} {\n\t\twidth: (@i * 100% / @n);\n\t}\n\t.generate-columns(@n, (@i + 1));\n}'
+            }
+        ],
     }, {
         name: "Psuedo-classes vs Variables",
         description: "",