🐛 emoji not supported in CSS parser

[mayank99]

Environment information

biome rage

CLI:
  Version:                      1.9.3
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v20.16.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "pnpm/9.6.0"

Biome Configuration:
  Status:                       unset

What happened?

When a custom property name contains an emoji, Biome fails to parse it.

p {
  --✨-color: red;
  color: var(--✨-color);
}

I get errors in my IDE from biome(parse) in the form of "Expected a declaration, or an at rule but instead found '--✨'." and "Expected a declaration item but instead found '--✨'."

See playground.

See updated playground and related comment.

Expected result

Emojis are allowed in custom property names, so Biome should be able to parse them.

It's worth noting that since Biome doesn't support formatting/linting CSS, it should not even be parsing my CSS files.

Code of Conduct

• I agree to follow Biome's Code of Conduct

[ematipico]

It's worth noting that since Biome doesn't support formatting/linting CSS, it should not even be parsing my CSS files.

That's intended by design, as Biome aims to function as a language server, so it needs to provide parsing diagnostics regardless.

[Tom-Aive]

This issue also applies to property names starting with a number.
--500-grey throws Expected a declaration, or an at rule but instead found while --grey-500 doesn't.
Even though both are valid css ident-token.

I've looked at the PR and this specific issue doesn't seem to be fixed.

Do you want me to open another Github issue or do you prefer to reopen this one ?

[Conaclos]

I've looked at the PR and this specific issue doesn't seem to be fixed.

The PR fixed also this issue. You can test it on the Playground.

[Tom-Aive]

Perfect, thanks for the great work. 🙏

[mayank99]

It looks like this wasn't completely fixed. It still breaks with certain emojis. Please see playground. Should this issue be reopened?

[Conaclos]

@mayank99 Actually they are emoji that are not allowed as identifiers according to the specification (See the identifier diagram and the specification of non-ascii codepoint). Even the current draft specification doesn't include its emoji.

• ☂ is U+2602
  This emoji is part of the Miscellaneous Symbols Unicode block
• ✨ is U+2728
  This emoji is part of the Dingbats Unicode block

[mayank99]

Yeah, that's interesting because it works in all three browsers.

Since browsers already work this way, I wonder if the spec needs to be updated. This could be a good issue to raise with the CSSWG.

[Conaclos]

We should take a look at some browser implementations and indeed raise the issue. The intention is certainly to support all emoji.

[Conaclos]

I raised the issue on to the folks in charge of CSS specification. See w3c/csswg-drafts#11005

In the meantime, I think we can accept these emojis because they are already allowed by browsers.

[mayank99]

@Conaclos Thanks so much for raising the issue with CSSWG and for accepting the additional emoji in Biome as a stopgap. I tried out 1.9.4 just now, and it works great! ✨