π CSS parsing and Unicode point ranges
blalasaadri opened this issue Β· comments
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
- Create or have a project which includes at least one CSS file to be formatted.
- In this CSS file, add
@font-face
entries which use theunicode-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;
}
- Enable CSS formatting and / or linting in the biome.json file:
"css": {
"formatter": {
"enabled": true
},
"linter": {
"enabled": true
}
}
- 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