🐛 CSS parsing and Unicode point ranges

[blalasaadri]

Environment information

CLI:
  Version:                      1.8.1
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v18.20.2"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         unset

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

Workspace:
  Open Documents:               0

What happened?

The unicode-range CSS descriptor accepts the following types of values:

• single code points (e.g. unicode-range: U+26;)
• code point ranges (e.g. unicode-range: U+0025-00FF;)
• wildcard ranges (e.g. unicode-range: U+4??;)
• comma separated lists of the above (e.g. unicode-range: U+0025-00FF, U+4??;)
  However, Biome does not seem to understand these data types.

Steps to reproduce the error

1. Create or have a project which includes at least one CSS file to be formatted.
2. In this CSS file, add @font-face entries which use the unicode-range CSS descriptor. For example here I'm including the OpenSans font, and specifically the extended glyphs for the cyrillic and latin glyphs:

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('./open_sans/openSans_cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

/* ... */

/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('./open_sans/openSans_latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

3. Enable CSS formatting and / or linting in the biome.json file:

"css": {
  "formatter": {
    "enabled": true
  },
  "linter": {
    "enabled": true
  }
}

4. Try to check / format / lint the CSS file, e.g.: biome check ./

The output in my case (line numbers ) is:

./src/assets/openSans.css:7:53 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected value or character.
  
    5 │   font-weight: 400;
    6 │   src: local('Open Sans'), local('OpenSans'), url('./open_sans/openSans_cyrillic-ext.woff2') format('woff2');
  > 7 │   unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
      │                                                     ^^^^^^^^^^
    8 │ }
    9 │ 
  
  ℹ Expected one of:
  
  - identifier
  - string
  - number
  - dimension
  - ratio
  - custom property
  - function
  

./src/assets/openSans.css:52:84 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected value or character.
  
    50 │   font-weight: 400;
    51 │   src: local('Open Sans'), local('OpenSans'), url('./open_sans/openSans_latin-ext.woff2') format('woff2');
  > 52 │   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
       │                                                                                    ^^^^^^^^^^
    53 │ }
    54 │ 
  
  ℹ Expected one of:
  
  - identifier
  - string
  - number
  - dimension
  - ratio
  - custom property
  - function

Line 7 in the output matches line 7 in the example, line 52 in the output matches line 18 in the example.

Further information for analysing the error

More specifically, Biome seems to interpret these entries as something else; if I remove the above unicode-range entries but have something like the following:

/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('./open_sans/openSans_cyrillic.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ... */

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('./open_sans/openSans_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

and then run biome check --fix ./, the result is:

/* cyrillic */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	src: local("Open Sans"), local("OpenSans"),
		url("./open_sans/openSans_cyrillic.woff2") format("woff2");
	unicode-range: u +0400 -045f, u +0490 -0491, u +04b0-04b1, u +2116;
}

/* ... */

/* latin */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	src: local("Open Sans"), local("OpenSans"),
		url("./open_sans/openSans_latin.woff2") format("woff2");
	unicode-range: u +0000 -00ff, u +0131, u +0152 -0153, u +02c6, u +02da, u
		+02dc, u +2000 -206f, u +2074, u +20ac, u +2212, u +2215;
}

Expected result

Unicode code points, code point ranges, wildcard ranges, and lists thereof should be recognised correctly and be formatted as such. For example, the original CSS should probably be formatted to something like:

/* cyrillic-ext */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	src: local("Open Sans"), local("OpenSans"),
		url("./open_sans/openSans_cyrillic-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF,
                U+A640-A69F;
}

/* ... */

/* latin-ext */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	src: local("Open Sans"), local("OpenSans"),
		url("./open_sans/openSans_latin-ext.woff2") format("woff2");
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB,
                U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

Code of Conduct

• I agree to follow Biome's Code of Conduct