Fix issue beautifier#1817 - css property values that have multiple pa…

…rts and if followed by a string lose formatting. Also add multiline support for grid-template property
mhnaeem · Apr 7, 2022 · 69789d1 · 69789d1
1 parent 7d33309
commit 69789d1
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 2 deletions.
diff --git a/js/src/css/beautifier.js b/js/src/css/beautifier.js
@@ -67,6 +67,9 @@ function Beautifier(source_text, options) {
     "@supports": true,
     "@document": true
   };
+  this.NON_SEMICOLON_NEWLINE_PROPERTY = [
+    "grid-template"
+  ];
 
 }
 
@@ -192,6 +195,7 @@ Beautifier.prototype.beautify = function() {
   var insideAtExtend = false;
   var insideAtImport = false;
   var topCharacter = this._ch;
+  var insideNonSemiColonValues = false;
   var whitespace;
   var isAfterSpace;
   var previous_ch;
@@ -347,6 +351,14 @@ Beautifier.prototype.beautify = function() {
         }
       }
     } else if (this._ch === ":") {
+
+      for (var i = 0; i < this.NON_SEMICOLON_NEWLINE_PROPERTY.length; i++) {
+        if (this._input.lookBack(this.NON_SEMICOLON_NEWLINE_PROPERTY[i])) {
+          insideNonSemiColonValues = true;
+          break;
+        }
+      }
+
       if ((insideRule || enteringConditionalGroup) && !(this._input.lookBack("&") || this.foundNestedPseudoClass()) && !this._input.lookBack("(") && !insideAtExtend && parenLevel === 0) {
         // 'property: value' delimiter
         // which could be in a conditional group query
@@ -379,6 +391,7 @@ Beautifier.prototype.beautify = function() {
       this.print_string(this._ch + this.eatString(this._ch));
       this.eatWhitespace(true);
     } else if (this._ch === ';') {
+      insideNonSemiColonValues = false;
       if (parenLevel === 0) {
         if (insidePropertyValue) {
           this.outdent();
@@ -467,8 +480,13 @@ Beautifier.prototype.beautify = function() {
       this.print_string(' ');
       this.print_string(this._ch);
     } else {
-      this.preserveSingleSpace(isAfterSpace);
+      var preserveAfterSpace = previous_ch === '"' || previous_ch === '\'';
+      this.preserveSingleSpace(preserveAfterSpace || isAfterSpace);
       this.print_string(this._ch);
+
+      if (!this._output.just_added_newline() && this._input.peek() === '\n' && insideNonSemiColonValues) {
+        this._output.add_new_line();
+      }
     }
   }
 

diff --git a/python/cssbeautifier/css/beautifier.py b/python/cssbeautifier/css/beautifier.py
@@ -119,6 +119,7 @@ def __init__(self, source_text, opts=default_options()):
             "@document",
         }
         self.CONDITIONAL_GROUP_RULE = {"@media", "@supports", "@document"}
+        self.NON_SEMICOLON_NEWLINE_PROPERTY = ["grid-template"]
 
     def eatString(self, endChars):
         result = ""
@@ -223,6 +224,7 @@ def beautify(self):
         insideAtExtend = False
         insideAtImport = False
         topCharacter = self._ch
+        insideNonSemiColonValues = False
 
         while True:
             whitespace = self._input.read(whitespacePattern)
@@ -373,6 +375,12 @@ def beautify(self):
                     if self._input.peek() != "}":
                         self._output.add_new_line(True)
             elif self._ch == ":":
+
+                for i in range(0, len(self.NON_SEMICOLON_NEWLINE_PROPERTY)):
+                    if self._input.lookBack(self.NON_SEMICOLON_NEWLINE_PROPERTY[i]):
+                        insideNonSemiColonValues = True
+                        break
+
                 if (
                     (insideRule or enteringConditionalGroup)
                     and not (self._input.lookBack("&") or self.foundNestedPseudoClass())
@@ -409,6 +417,7 @@ def beautify(self):
                 self.print_string(self._ch + self.eatString(self._ch))
                 self.eatWhitespace(True)
             elif self._ch == ";":
+                insideNonSemiColonValues = False
                 if parenLevel == 0:
                     if insidePropertyValue:
                         self.outdent()
@@ -499,9 +508,17 @@ def beautify(self):
                 self.print_string(" ")
                 self.print_string(self._ch)
             else:
-                self.preserveSingleSpace(isAfterSpace)
+                preserveAfterSpace = previous_ch == '"' or previous_ch == "'"
+                self.preserveSingleSpace(preserveAfterSpace or isAfterSpace)
                 self.print_string(self._ch)
 
+                if (
+                    not self._output.just_added_newline()
+                    and self._input.peek() == "\n"
+                    and insideNonSemiColonValues
+                ):
+                    self._output.add_new_line()
+
         sweet_code = self._output.get_code(self._options.eol)
 
         return sweet_code
diff --git a/test/data/css/tests.js b/test/data/css/tests.js
@@ -1467,6 +1467,44 @@ exports.test_data = {
           '}'
         ]
       }]
+    }, {
+      name: "Issue #1817",
+      description: "",
+      tests: [{
+        comment: "ensure that properties that are expected to have multiline values persist new lines",
+        unchanged: [
+          '.grid {',
+          '    grid-template:',
+          '        "top-bar top-bar" 100px',
+          '        "left-bar center" 100px;',
+          '}'
+        ]
+      }, {
+        comment: "property values that have string followed by other identifiers should persist spacing",
+        input: [
+          '.grid {grid-template: "top-bar" 100px;}'
+        ],
+        output: [
+          '.grid {',
+          '    grid-template: "top-bar" 100px;',
+          '}'
+        ]
+      }, {
+        input: [
+          'div {',
+          'grid-template: "a a a" 20%',
+          ' [main-top] "b b b" 1fr',
+          '                    "b b b" auto;',
+          '}'
+        ],
+        output: [
+          'div {',
+          '    grid-template: "a a a" 20%',
+          '        [main-top] "b b b" 1fr',
+          '        "b b b" auto;',
+          '}'
+        ]
+      }]
     }, {
       name: "Issue #645, #1233",
       description: "",