Environment
ESLint version: 10.8.0
@eslint/css version: 1.4.0
Node version: 22.18.0
npm version: 10.9.3
Operating System:
Which language are you using?
stylesheet
What did you do?
Configuration
import { defineConfig } from "eslint/config";
import css from "@eslint/css";
export default defineConfig([
{
files: ["**/*.css"],
language: "css/css",
plugins: { css },
rules: {
"css/no-invalid-named-grid-areas": "error",
},
},
]);
.grid {
grid-template-areas:
"a b"
"a b";
}The first row contains a tab character between a and b, while the second row contains a space.
What did you expect to happen?
No lint error.
According to the CSS Grid specification, a sequence of whitespace separates cell tokens in a grid-template-areas string. Since a tab is a CSS whitespace character, both rows should contain two cell tokens:
"a<TAB>b" → ["a", "b"]
"a b" → ["a", "b"]
Therefore, both rows define the same number of grid cells.
What actually happened?
no-invalid-named-grid-areas reports that the second row has a different number of cell tokens:
4:5 error Grid area strings must have the same number of cell tokens css/no-invalid-named-grid-areas
The rule currently splits each grid row using a literal space:
const row = trimmedValue.split(" ").filter(Boolean);As a result, a tab is not treated as a separator:
"a<TAB>b" → ["a<TAB>b"]
"a b" → ["a", "b"]
Link to Minimal Reproducible Example
https://stackblitz.com/edit/vitejs-vite-zfq5zwpy?file=test.css
Participation
AI acknowledgment
Additional comments
Disclosure: I'm a participant in the OSSCA open source contribution program
According to the CSS Grid specification, strings in grid-template-areas are tokenized using longest-match semantics, and a sequence of whitespace does not produce a token:
https://www.w3.org/TR/css-grid/#grid-template-areas-property
The CSS specification includes U+0009 CHARACTER TABULATION (tab) as whitespace:
https://www.w3.org/TR/css-syntax-3/#whitespace
Therefore, both "a b" and "a<TAB>b" should be parsed as two cell tokens, a and b.
The rule currently splits each row using a literal U+0020 SPACE:
const row = trimmedValue.split(" ").filter(Boolean);
Environment
ESLint version: 10.8.0
@eslint/css version: 1.4.0
Node version: 22.18.0
npm version: 10.9.3
Operating System:
Which language are you using?
stylesheet
What did you do?
Configuration
The first row contains a tab character between a and b, while the second row contains a space.
What did you expect to happen?
No lint error.
According to the CSS Grid specification, a sequence of whitespace separates cell tokens in a grid-template-areas string. Since a tab is a CSS whitespace character, both rows should contain two cell tokens:
Therefore, both rows define the same number of grid cells.
What actually happened?
no-invalid-named-grid-areas reports that the second row has a different number of cell tokens:
The rule currently splits each grid row using a literal space:
As a result, a tab is not treated as a separator:
Link to Minimal Reproducible Example
https://stackblitz.com/edit/vitejs-vite-zfq5zwpy?file=test.css
Participation
AI acknowledgment
Additional comments
According to the CSS Grid specification, strings in
grid-template-areasare tokenized using longest-match semantics, and a sequence of whitespace does not produce a token:https://www.w3.org/TR/css-grid/#grid-template-areas-property
The CSS specification includes U+0009 CHARACTER TABULATION (tab) as whitespace:
https://www.w3.org/TR/css-syntax-3/#whitespace
Therefore, both
"a b"and"a<TAB>b"should be parsed as two cell tokens,aandb.The rule currently splits each row using a literal U+0020 SPACE: