Skip to content

CSS Grid shorthand newlines not preserved #2214

Open
@myned

Description

@myned

Description

The grid shorthand property does not preserve newlines when formatted.

Likely the same issue as #1817, but PR #2018 does not seem to take into account the implicit shorthand.

Input

The code looked like this before beautification:

grid:
    "header" auto
    "main" 1fr
    "footer" auto;

Expected Output

The code should have looked like this after beautification:

grid:
    "header" auto
    "main" 1fr
    "footer" auto;

Actual Output

The code actually looked like this after beautification:

grid:
    "header" auto "main" 1fr "footer" auto;

Steps to Reproduce

  1. Format the below with beautifier.io
body {
    grid:
        "test test test" 1fr
        ".    .    ." 1fr
        / 1fr 1fr;
    
    grid-template:
        "test test test" 1fr
        ".    .    ." 1fr
        / 1fr 1fr;
}
  1. Observe formatted grid and untouched grid-template
body {
    grid:
        "test test test" 1fr ".    .    ." 1fr / 1fr 1fr;
    
    grid-template:
        "test test test" 1fr
        ".    .    ." 1fr
        / 1fr 1fr;
}

Environment

OS: Arch Linux GNOME Wayland 45.1, Kernel 6.5.9
Application: Beautifier.io and Visual Studio Code

Settings

Beautifier.io defaults

{
  "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": "0",
  "indent_inner_html": false,
  "comma_first": false,
  "e4x": false,
  "indent_empty_lines": false
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions