Skip to content

🐛 CSS: media query range formatting #4076

@nstepien

Description

@nstepien

Environment information

CLI:
  Version:                      1.9.2
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           windows

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  NO_COLOR:                     unset
  TERM:                         unset
  JS_RUNTIME_VERSION:           "v22.9.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "npm/10.8.3"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    true
  VCS disabled:                 true

Workspace:
  Open Documents:               0

What happened?

https://biomejs.dev/playground/?lintRules=all&files.main.css=LgBjAGwAYQBzAHMAIAB7AAoACQBAAG0AZQBkAGkAYQAgACgAMQAwADIANABwAHgAIAA8AD0AIAB3AGkAZAB0AGgAIAA8AD0AIAAxADIAOAAwAHAAeAApACAAewAKAAkACQBjAG8AbABvAHIAOgAgAHIAZQBkADsACgAJAH0ACgB9AA%3D%3D

Expected result

Formatting should match prettier... is what I'd like to say, but prettier doesn't seem to format this well: if I remove any spaces in the range, prettier will not add spaces.
Biome instead adds spaces except after the last <=.
I'd expect 1024px <= width <= 1280px to not change formatting.
I'd expect 1024px<=width<=1280px to be formatted as 1024px <= width <= 1280px.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

Code of Conduct

  • I agree to follow Biome's Code of Conduct

Metadata

Metadata

Assignees

Labels

A-FormatterArea: formatterL-CSSLanguage: CSS and super languagesS-Bug-confirmedStatus: report has been confirmed as a valid bugS-Good first issueStatus: Good for newcomers

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions