Bug: no-invalid-named-grid-areas does not recognize tabs as whitespace between cell tokens

[KumJungMin]

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

• I am willing to submit a pull request for this issue.

AI acknowledgment

• I did not use AI to generate this issue report.
• (If the above is not checked) I have reviewed the AI-generated content before submitting.

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);

[yumevex]

Please stop spamming issues.