Linter: support for @custom-media

[jmuzina]

It would be nice if Biome's correctness linter didn't flag usages of @custom-media. This at-rule hasn't been implemented by browsers yet but it has been specced. People should be able to use it with CSS tools so that they can move towards using it sooner rather than later.

I.E., consider this code:

@custom-media --small-viewport (380px > width);

@media (--small-viewport) {
  * {
    color: red;
  }
}

This generates a linting error:

  ℹ Unexpected unknown media feature name.
  ℹ You should use media feature names defined in the CSS Specifications.
src/breakpoints.css:17:8 lint/correctness/noUnknownMediaFeatureName ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Tools like LightningCSS and PostCSS can convert this code to use browser-supported media queries:

@media (max-width: 379.999px) {
  * {
    color: red;
  }
}

Currently, my only options to get Biome to not throw errors here is to ignore the noUnknownMediaFeatureName rule on every usage of custom media or to disable the rule entirely.

[ematipico]

Biome approach is a bit conservative, and its use case is different from LightningCSS and PostCSS.

We want to avoid to add syntax that might not see the light in the official spec.

However, I am not very familiar with the CSS process. I bet it is different from ECMAScript. If you're certain that @custom-media is going to be implemented, we can add it to the rule. Feel free to send a PR if you want

[bartaz]

@ematipico What's your take on CSS support then? Are there any rules or process on which features end up supported in Biome?

The @custom-media spec is still in "Working draft" stage, so it's probably too early to know if they will end up in official standard or not, and in what form. If there are implemented by any tools, it should likely be in some kind of "experimental" mode and opt-in.

[ematipico]

I expressed my view here #4389 (comment)

I don't know much about the CSS approval process, but it seems to be too early to implement this feature in Biome?

[bartaz]

Thanks. Yes, I saw your comment, I was just wondering if there are some more "general" guidelines or docs on what CSS is supported by Biome.

Based on what you said earlier, I agree that it is too early to implement in Biome then. I guess if you want to be sure about being part of the spec, you probably want to wait until the "Proposed Recommendation" or "Recommendation" stage of W3C process.

That said, "Media Queries Level 5" is listed as a source of "known CSS media features" in noUnknownMediaFeatureName rule, and custom queries are part of that spec:

biome/crates/biome_css_analyze/src/lint/correctness/no_unknown_media_feature_name.rs

Lines 21 to 25 in 8a90b89

	/// Data sources of known CSS media feature are:
	/// - MDN reference on [CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)
	/// - W3C reference on [Media Queries Level 3](https://www.w3.org/TR/mediaqueries-3/)
	/// - W3C reference on [Media Queries Level 4](https://www.w3.org/TR/mediaqueries-4/)
	/// - W3C reference on [Media Queries Level 5](https://www.w3.org/TR/mediaqueries-5/)

So it is a bit unclear, what is chosen as being "part of official spec" and what is not in current Biome implementation.

[bartaz]

On another though, it looks like the rule noUnknownMediaFeatureName is a re-implementation of the same rule from stylelint, and stylelint has no problem with @custom-media queries.

So if the goal is compatibility with how these rules are implemented elsewhere, maybe it should have the same level of support for CSS features?