Add `layer-name-pattern` #8474

ryo-manba · 2025-03-15T16:47:33Z

Which issue, if any, is this issue related to?

Is there anything in the PR that needs further explanation?

~~This PR adds support for enforcing layer name patterns, including handling period-separated segments like @layer foo.bar.~~
~~See the CSS Cascade 5 specification.~~

This functionality was decided not to be supported. For more details: #8474 (comment)

changeset-bot · 2025-03-15T16:47:36Z

🦋 Changeset detected

Latest commit: 58bb335

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
stylelint	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-03-15T16:49:18Z

Try the Instant Preview in Online Demo

Stylelint Online Demo

Install the Instant Preview to Your Local

npm i -D https://pkg.pr.new/stylelint@8474

View Commit

lib/rules/layer-name-pattern/__tests__/index.mjs

jeddy3

@ryo-manba Thanks for the PR!

I've suggested a couple of changes.

lib/rules/layer-name-pattern/README.md

jeddy3 · 2025-03-16T08:28:11Z

lib/utils/regexes.mjs

@@ -9,8 +9,13 @@ export const atRuleRegexes = {
 		`^((?!${[...nestingSupportedAtKeywords.values()].join('|')}).)*$`,
 		'i',
 	),
+	layer: /^layer$/i,


Suggested change

layer: /^layer$/i,

layerName: /^layer$/i,

lib/rules/layer-name-pattern/__tests__/index.mjs

jeddy3 · 2025-03-16T08:35:29Z

lib/rules/layer-name-pattern/index.mjs

+		});
+
+		root.walkAtRules(atRuleRegexes.importName, (atRule) => {
+			const layerMatch = atRule.params.match(functionRegexes.layer);


Let's use postcss-value-parser to find the layer function and get the comma-separated names.

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

jeddy3

Thank you for making the changes. The rule code using the value parser is nice, thanks.

I've made a couple more suggestions.

.changeset/grumpy-radios-grow.md

jeddy3 · 2025-03-16T13:32:06Z

lib/rules/layer-name-pattern/README.md

+Given the string:
+
+```json
+"^[a-z][a-z0-9-]*$"


Let's update the regex to be more permissive in our example and allow segmented layer names as that's likely what we'll turn on in our standard config, e.g.

@layer foo.bar {}

i.e. lowercase with . allowed.

jeddy3 · 2025-03-16T13:36:25Z

lib/rules/layer-name-pattern/index.mjs

+		});
+
+		root.walkAtRules(atRuleRegexes.importName, (atRule) => {
+			const parsedParams = valueParser(atRule.params);


Suggested change

const parsedParams = valueParser(atRule.params);

const { params } = atRule;

if (!LAYER_FUNC_REGEX.test(params)) return

const parsedParams = valueParser(params);

// Near top of file (or in regex utilities): const LAYER_FUNC_REGEX = /layer\(/i;

When possible, we typically do a cheap check before parsing values.

Yes, good point. 👍🏼

We, especially Romain, have worked on improving rule performance. Avoiding extra parsing is worthwhile. See #6869

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

This reverts commit 4f2bebd.

ryo-manba · 2025-03-16T14:52:31Z

Thank you for the feedback and review!
I've addressed the comments.

jeddy3

Thank you, it's taking shape nicely.

I've left one refactoring suggestion and a minor docs one.

jeddy3 · 2025-03-16T15:39:55Z

lib/rules/layer-name-pattern/index.mjs

+					if (child.type !== 'word') continue;
+
+					if (pattern.test(child.value)) continue;
+
+					const index = atRuleParamIndex(atRule) + child.sourceIndex;
+					const endIndex = index + child.value.length;
+
+					report({
+						message: messages.expected(child.value, primary),
+						node: atRule,
+						index,
+						endIndex,
+						ruleName,
+						result,
+					});


Shall we pull all or some of this repetition into a check() function, like we do in other rules?

And, if appropriate, we can destructure the type, value and sourceIndex consts as it helps with readability to see what properties are going to be used.

Thanks for the detailed feedback!
I've applied the changes.

Refactor to unify check logic

jeddy3 · 2025-03-16T15:41:21Z

lib/rules/layer-name-pattern/README.md

+<!-- prettier-ignore -->
+```css
+@layer foo, bar {}
+```
+
+<!-- prettier-ignore -->
+```css
+@layer foo.bar {}
+```


Let's switch these two examples around so they match the order above.

Fixed it.
Adjust order in example

jeddy3

Thank you for making all the changes.

LGTM. @ybiquitous may have further suggestions, as he's very good with our code structure.

@ryo-manba

| datasource | package | from | to | | ---------- | --------- | ------- | ------- | | npm | stylelint | 16.16.0 | 16.17.0 | ## [v16.17.0](https://github.com/stylelint/stylelint/blob/HEAD/CHANGELOG.md#16170---2025-03-26) It adds 1 new rule, support for `languageOptions` to 2 rules, 1 option to a rule, the `--compute-edit-info` CLI flag (along with support for `EditInfo` in 3 rules), and fixes 1 bug. `EditInfo` is useful for automated fixing tools and editor integrations. - Added: `layer-name-pattern` rule ([#8474](stylelint/stylelint#8474)) ([@ryo-manba](https://github.com/ryo-manba)). - Added: `--compute-edit-info` CLI flag ([#8473](stylelint/stylelint#8473)) ([@ryo-manba](https://github.com/ryo-manba)). - Added: `ignorePreludeOfAtRules: []` to `length-zero-no-unit` ([#8472](stylelint/stylelint#8472)) ([@ryo-manba](https://github.com/ryo-manba)). - Added: `at-rule-no-unknown` support for `languageOptions` ([#8475](stylelint/stylelint#8475)) ([@ryo-manba](https://github.com/ryo-manba)). - Added: `property-no-unknown` support for `languageOptions` ([#8476](stylelint/stylelint#8476)) ([@ryo-manba](https://github.com/ryo-manba)). - Added: `declaration-block-no-redundant-longhand-properties` support for computing `EditInfo` ([#8482](stylelint/stylelint#8482)) ([@pamelalozano16](https://github.com/pamelalozano16)). - Added: `function-url-quotes` support for computing `EditInfo` ([#8483](stylelint/stylelint#8483)) ([@pamelalozano16](https://github.com/pamelalozano16)). - Added: `selector-attribute-quotes` support for computing `EditInfo` ([#8484](stylelint/stylelint#8484)) ([@pamelalozano16](https://github.com/pamelalozano16)). - Fixed: `custom-property-pattern` false negatives for `@property` preludes ([#8468](stylelint/stylelint#8468)) ([@rohitgs28](https://github.com/rohitgs28)).

@ryo-manba

| datasource | package | from | to | | ---------- | --------- | ------- | ------- | | npm | stylelint | 16.16.0 | 16.17.0 | ## [v16.17.0](https://github.com/stylelint/stylelint/blob/HEAD/CHANGELOG.md#16170---2025-03-26) It adds 1 new rule, support for `languageOptions` to 2 rules, 1 option to a rule, the `--compute-edit-info` CLI flag (along with support for `EditInfo` in 3 rules), and fixes 1 bug. `EditInfo` is useful for automated fixing tools and editor integrations. - Added: `layer-name-pattern` rule ([#8474](stylelint/stylelint#8474)) ([@ryo-manba](https://github.com/ryo-manba)). - Added: `--compute-edit-info` CLI flag ([#8473](stylelint/stylelint#8473)) ([@ryo-manba](https://github.com/ryo-manba)). - Added: `ignorePreludeOfAtRules: []` to `length-zero-no-unit` ([#8472](stylelint/stylelint#8472)) ([@ryo-manba](https://github.com/ryo-manba)). - Added: `at-rule-no-unknown` support for `languageOptions` ([#8475](stylelint/stylelint#8475)) ([@ryo-manba](https://github.com/ryo-manba)). - Added: `property-no-unknown` support for `languageOptions` ([#8476](stylelint/stylelint#8476)) ([@ryo-manba](https://github.com/ryo-manba)). - Added: `declaration-block-no-redundant-longhand-properties` support for computing `EditInfo` ([#8482](stylelint/stylelint#8482)) ([@pamelalozano16](https://github.com/pamelalozano16)). - Added: `function-url-quotes` support for computing `EditInfo` ([#8483](stylelint/stylelint#8483)) ([@pamelalozano16](https://github.com/pamelalozano16)). - Added: `selector-attribute-quotes` support for computing `EditInfo` ([#8484](stylelint/stylelint#8484)) ([@pamelalozano16](https://github.com/pamelalozano16)). - Fixed: `custom-property-pattern` false negatives for `@property` preludes ([#8468](stylelint/stylelint#8468)) ([@rohitgs28](https://github.com/rohitgs28)).

Add layer-name-pattern

080fb80

refactor: remove duplicate checks

23f39ad

ybiquitous reviewed Mar 16, 2025

View reviewed changes

lib/rules/layer-name-pattern/__tests__/index.mjs Outdated Show resolved Hide resolved

jeddy3 reviewed Mar 16, 2025

View reviewed changes

ryo-manba and others added 4 commits March 16, 2025 21:17

Update lib/rules/layer-name-pattern/README.md

c27f44c

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

Rename regex layer to layerName

c7ac60e

period-separated lists are not supported

25188aa

Remove unused regex pattern

4f2bebd

ryo-manba requested review from ybiquitous and jeddy3 March 16, 2025 13:03

jeddy3 reviewed Mar 16, 2025

View reviewed changes

jeddy3 mentioned this pull request Mar 16, 2025

Prepare 16.0.0 stylelint/stylelint-config-recommended#247

Merged

ryo-manba and others added 4 commits March 16, 2025 23:28

Update .changeset/grumpy-radios-grow.md

96a666c

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

docs: allow period-separated layer names in example

eac7789

Revert "Remove unused regex pattern"

ff9b849

This reverts commit 4f2bebd.

Add check before parsing values

48212df

ryo-manba requested a review from jeddy3 March 16, 2025 14:46

jeddy3 reviewed Mar 16, 2025

View reviewed changes

ryo-manba added 2 commits March 17, 2025 00:47

Adjust order in example

5e02e39

Refactor to unify check logic

58bb335

jeddy3 approved these changes Mar 16, 2025

View reviewed changes

jeddy3 mentioned this pull request Mar 17, 2025

Add layer-name-ident-allowed-list #8480

Closed

jeddy3 merged commit 7dabd1a into main Mar 25, 2025
19 checks passed

jeddy3 deleted the issue-8431 branch March 25, 2025 13:22

-			const parsedParams = valueParser(atRule.params);
+  const { params } = atRule;
+  if (!LAYER_FUNC_REGEX.test(params)) return
+  const parsedParams = valueParser(params);

Uh oh!

Add layer-name-pattern #8474

Add layer-name-pattern #8474

Uh oh!

Conversation

ryo-manba commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Try the Instant Preview in Online Demo

Install the Instant Preview to Your Local

Uh oh!

Uh oh!

jeddy3 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jeddy3 Mar 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jeddy3 Mar 16, 2025

Choose a reason for hiding this comment

Uh oh!

jeddy3 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jeddy3 Mar 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeddy3 Mar 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ybiquitous Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

ryo-manba commented Mar 16, 2025

Uh oh!

jeddy3 left a comment

Choose a reason for hiding this comment

Uh oh!

jeddy3 Mar 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryo-manba Mar 16, 2025

Choose a reason for hiding this comment

Uh oh!

jeddy3 Mar 16, 2025

Choose a reason for hiding this comment

Uh oh!

ryo-manba Mar 16, 2025

Choose a reason for hiding this comment

Uh oh!

jeddy3 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Add `layer-name-pattern` #8474

Add `layer-name-pattern` #8474

ryo-manba commented Mar 15, 2025 •

edited

Loading

changeset-bot bot commented Mar 15, 2025 •

edited

Loading

github-actions bot commented Mar 15, 2025 •

edited

Loading

jeddy3 Mar 16, 2025 •

edited

Loading

jeddy3 Mar 16, 2025 •

edited

Loading

jeddy3 Mar 16, 2025 •

edited

Loading