🐛 CSS parser fails to parse -ms-filter and filter

printfn commented 1 month ago

Environment information

CLI:
  Version:                      1.9.0
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           linux

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v22.8.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "npm/10.8.2"

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

Workspace:
  Open Documents:               0

What happened?

https://biomejs.dev/playground/?lintRules=all&files.style.css=LgBmAG8AbwAgAHsACgAgACAAIAAgAC0AbQBzAC0AZgBpAGwAdABlAHIAOgAgAHAAcgBvAGcAaQBkADoAIABEAFgASQBtAGEAZwBlAFQAcgBhAG4AcwBmAG8AcgBtAC4ATQBpAGMAcgBvAHMAbwBmAHQALgBBAGwAcABoAGEAKABPAHAAYQBjAGkAdAB5AD0ANAAwACkAOwAKACAAIAAgACAAZgBpAGwAdABlAHIAOgAgAGEAbABwAGgAYQAoAG8AcABhAGMAaQB0AHkAPQA0ADAAKQAKAH0A

Expected result

It should successfully parse the CSS.

Code of Conduct

[X] I agree to follow Biome's Code of Conduct

Conaclos commented 1 month ago

You wrote two properties in a single one -ms-filter: progid: value;. I don't think it is valid CSS.

dyc3 commented 1 month ago

I think it should be wrapped in quotes: https://learn.microsoft.com/en-us/previous-versions/ms530752(v=vs.85)

printfn commented 1 month ago

It doesn't look like quotes are required for IE 8 to parse the CSS. I did a quick test using browserstack:

<html>
<head>
<title>IE 8 Test</title>
<style>
div {
    border: 2px solid red;
    width: 256px;
    height: 256px;
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=128&d=identicon&r=PG', sizingMethod='scale');
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=128&d=identicon&r=PG', sizingMethod='scale');
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

Given that IE can parse this CSS correctly I don't think Biome should error either. Linting against it is fine obviously, but I feel like it shouldn't fail to parse.

xPaw commented 1 month ago

Just to add to this, prettier does not error on this either, biome does:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d000000", endColorstr="#00000000", GradientType=1);

biomejs / biome