Bug: `use-layers` rule's `layerNamePattern` does not support period-separated layer names

[ryo-manba]

Environment

ESLint version: v9.22.0
@eslint/css version: v0.5.0
Node version: v22.9.0
npm version: 10.5.0
Operating System: macOS 14.7

Which language are you using?

stylesheet

What did you do?

Tested css/use-layers rule with layerNamePattern option.

Configuration

import css from "@eslint/css";

const eslintConfig = [
  {
    files: ["**/*.css"],
    language: "css/css",
    ...css.configs.recommended,
    rules: {
      "css/use-layers": ["error", { layerNamePattern: "^(reset|theme|base)$" }]
    },
  },
];

export default eslintConfig;

@layer reset, base, theme;

@import url("reset.css") layer(base.theme);
@layer base.theme {
  a { color: red; }
}

What did you expect to happen?

Period-separated layer names should be treated separately. In this case, base and theme should be handled as individual layers, and since both match the pattern, no warning should appear.

What actually happened?

An error message appears:

Expected layer name 'theme.base' to match pattern '^(reset|theme|base)$'

Link to Minimal Reproducible Example

https://stackblitz.com/edit/vitejs-vite-qjgplxrs?file=src%2Findex.css

Participation

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

Additional comments

Reference to the spec: CSS Cascade and Inheritance Level 5 - Layer Names

When multiple identifiers are concatenated with a period, this is a shorthand representing those layers nested in order.

[Tanujkanti4441]

Hi @ryo-manba, thanks for the issue, can you clarify What did you expect to happen? section? Its a bit confusing as rule is reporting issue with same message.

[ryo-manba]

@Tanujkanti4441
Sorry, I've updated it!

[nzakas]

Confirmed. I didn't know that dots in layer names were separators, thanks for the additional info.

Please feel free to send a PR.

[sethamus]

I'll work on this.

[nzakas]

@sethamus note that @ryo-manba already said in the OP that they'd like to submit a PR, so let's wait for them.

[ryo-manba]

Thank you for respecting my wishes.
I will send out a PR soon.