js-beautify icon indicating copy to clipboard operation
js-beautify copied to clipboard

Media query range context has undesirable spaces after formatting

Open romainmenke opened this issue 1 year ago • 0 comments

Description

Formatting media queries with a range context doesn't result in the expected spaces before and after range operators.

Input

The code looked like this before beautification:

@media (width >= 90rem) {
    .foo {}
}

@media (width>=90rem) {
    .foo {}
}

@media (width  >=  90rem) {
    .foo {}
}

Expected Output

The code should have looked like this after beautification:

@media (width >= 90rem) {
    .foo {}
}

@media (width >= 90rem) {
    .foo {}
}

@media (width >= 90rem) {
    .foo {}
}

Actual Output

The code actually looked like this after beautification:

@media (width >=90rem) {
    .foo {}
}

@media (width>=90rem) {
    .foo {}
}

@media (width >=90rem) {
    .foo {}
}

Steps to Reproduce

Environment

https://beautifier.io

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

romainmenke avatar Jul 06 '23 10:07 romainmenke