Description

This is an umbrella issue to track the works of the CSS parser.

The lexer of the CSS parser should be ready, so now it's time to start working on the parser itself.

We should already have a basic syntax, although it's possible that some grammar or cases are not covered, so it's highly* suggested to always make sure we have to nodes to represent a specific grammar.

Resources:

• The original spec https://drafts.csswg.org/css-syntax/#parser-entry-points, it should give us all the information to parse CSS stylesheets correctly
• Use CSS tree https://csstree.github.io/docs/syntax/, which gives visual tools for better understanding parsing rules. e.g. parsing a declaration

Let's remember that Biome parser needs to be recoverable, so we have to consider invalid cases and ensure that the parser can recover itself and resume parsing in a fancy matter.

How to contribute

Before starting, please wait for us to implement the testing infrastructure. In the meantime, you can take a look at the JS parser and JSON parser to understand how the parsing works, the internal APIs, the recovery system, etc.

In this very issue, add a comment saying you want to work on a specific task(s). We will create the issue for you and eventually assign it to:

Prior work

You can the previous Rome's (TS) implementation of the parser: https://github.com/rome/tools/blob/archived-js/internal/css-parser/parser/rules.ts

Before starting

• Create a new test infrastructure for the CSS parser
• Write instructions to run the CSS test infra

CSS parser tasks

• parse class selector https://csstree.github.io/docs/syntax/#Type:class-selector
• parse id selector https://csstree.github.io/docs/syntax/#Type:id-selector
• parse attribute selector https://csstree.github.io/docs/syntax/#Type:attribute-selector
• parse pseudo element selector
• parse pseudo classes selector
• parse simple block https://drafts.csswg.org/css-syntax/#consume-simple-block
• parse declaration https://csstree.github.io/docs/syntax/#Type:declaration
• parse declaration list https://csstree.github.io/docs/syntax/#Type:declaration-list
• parse function https://drafts.csswg.org/css-syntax/#consume-function
• CSS Parser nesting  #1664

Parsing at-rules

At-rules are very strict, and they have a determined syntax. Let us adhere to that.

• parse charset https://developer.mozilla.org/en-US/docs/Web/CSS/@charset
• parse color-profile https://developer.mozilla.org/en-US/docs/Web/CSS/@color-profile
• CSS parse: parse container at rule #995
• parse counter-style https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style
• CSS Parser: parse document at rule #1303
• CSS Parser font face at rule #1030
• CSS Parser: parse font feature values  #1282
• CSS Parser: parse font palette values at rule #1262
• CSS Parser: parse import  #1408
• CSS Parser: parse keyframes  #1268
• CSS Parser: parse layer  #1320
• CSS Parse media at rule #1049
• parse namespace https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace
• CSS Parser: parse page at rule #1310
• CSS Parser: parse property at rule #1333
• CSS Parser: parse scope at rule  #1334
• CSS Parser: parse starting-style at rule #1478
• CSS Parser: parse supports  #1330
• 📎 CSS parser parses sequence of custom idents for @font-feature-values #1743

Ideas

... more to come