CSS Grid template formatting is broken when adding track size after line names

[PeterShershov]

Description

grid-template gets formatted as one line when adding track sizes after line names

Input

The code looked like this before beautification:

.grid {
    grid-template:
        "top-bar top-bar" 100px
        "left-bar center" 100px 
}

Expected Output

The code should have looked like this after beautification:

.grid {
    grid-template:
        "top-bar top-bar" 100px
        "left-bar center" 100px 
}

Actual Output

The code actually looked like this after beautification:

.grid {
    grid-template:
        "top-bar top-bar"100px "left-bar center"100px
}

Steps to Reproduce

1. create a selector with a grid-template declaration in it
2. add a value that contains line names and track sizes (as stated in the example above)
3. format the document.

Also try it with a longer input:

grid-template:
        "top-bar center center center center center top-bar" 100px 
      	"left-bar center center center center center" 100px 
        / 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px;

The result looks like this:

    grid-template:
        "top-bar center center center center center top-bar"100px "left-bar center center center center center"100px / 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px;

Environment

OS: Windows

Settings

{
  "indent_size": "4",
  "indent_char": " ",
  "max_preserve_newlines": "5",
  "preserve_newlines": true,
  "keep_array_indentation": false,
  "break_chained_methods": false,
  "indent_scripts": "normal",
  "brace_style": "collapse",
  "space_before_conditional": true,
  "unescape_strings": false,
  "jslint_happy": false,
  "end_with_newline": false,
  "wrap_line_length": "40",
  "indent_inner_html": false,
  "comma_first": false,
  "e4x": false,
  "indent_empty_lines": false
}

[bitwiseman]

@PeterShershov
As I understand it, there are two problems here:

1. (Breaking) the space between "top-bar top-bar" 100px is getting remove. This needs to be fixed asap.
2. (Non-breaking) the multi-line formatting inside grid-template: is being changed to one line. This format will still work, but is not desirable. The should be fixed as well, but possibly later.

As a short term work around, perhaps we could disable newline reformatting inside grid-template:... but that might be just as hard as fixing.

[VladyslavG]

vote for the issue and subscribe to updates

[zakharenkov]

Same problem

[bitwiseman]

@zakharenkov @VladyslavG
PRs welcome.

[mhnaeem]

Added PR for this issue 🙃