-
-
Notifications
You must be signed in to change notification settings - Fork 976
Add container-name-pattern
#8498
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
🦋 Changeset detectedLatest commit: 88d7698 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@nate10j Thank you for contributing and starting on this. It's looking good so far.
The rule will need to:
- check container names within declaration values
- account for the full container condition syntax
Container names can appear in the container-name
property and the container
shorthand property. You can use the value parser to find the container name within the value of these properties.
Container conditions have a broad syntax.
@container <container-condition># {
<block-contents>
}
And container names can appear zero or multiple times within a @container
prelude, e.g. foo
and bar
in:
@container foo (inline-size > 30em), bar style(--large: true) {}
I think we can use the value parser and keep the logic naive by assuming that any top-level word
node that isn't none
, or
, and
, or not
is a container name.
You can use custom-property-pattern
as a reference for:
- checking both declarations and at-rules
- using the value parser
I've also added some commitable suggestions as part of the first review to get the ball rolling.
Thanks again for contributing! It's a rule that many people will benefit from as we'll turn it on in our standard config.
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
…tainer-name-pattern
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
PR packaged and instant preview available. Install locally:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@nate10j Thanks for working on the support for checking declaration values, too. It's looking good.
I've requested some refactoring changes.
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Hi. Thanks for reviewing. I have made changes. I removed the error messages and instead ignored global keywords with a return statement. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for making the changes. I've suggested changes for another edge case that we'll need to consider.
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
…tainer-name-pattern
Hi. Thanks for reviewing. I have made required changes. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's looking great, thank you.
One last thing, we'll need to account for languageOptions
because we're now ignoring global keywords.
I've suggested some changes and additional tests for this.
We'll need to run:
npm i -D jest-preset-stylelint@latest
As part of this PR because we only recently added support for testing languageOptions
to our jest preset.
As an aside, thank you for your patience dealing with these changes. It's typical that there are a few rounds of changes when implementing a new rule, as we uncover and address edge cases.
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thank you.
(We can patch up the unrelated failing tests in another PR.)
#8510 updated |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CI is now recovered ✅
| datasource | package | from | to | | ---------- | --------- | ------- | ------- | | npm | stylelint | 16.17.0 | 16.18.0 | ## [v16.18.0](https://github.com/stylelint/stylelint/blob/HEAD/CHANGELOG.md#16180---2025-04-06) It adds 2 new rules and fixes 2 bugs. We've turned on these rules, and the `syntax-string-no-invalid` and `layer-name-pattern` ones from recent releases, in our [standard config](https://www.npmjs.com/package/stylelint-config-standard). - Added: `color-function-alias-notation` rule ([#8499](stylelint/stylelint#8499)) ([@EduardAkhmetshin](https://github.com/EduardAkhmetshin)). - Added: `container-name-pattern` rule ([#8498](stylelint/stylelint#8498)) ([@nate10j](https://github.com/nate10j)). - Fixed: `declaration-property-value-no-unknown` false positives for `math` of `font-size` ([#8495](stylelint/stylelint#8495)) ([@otomad](https://github.com/otomad)). - Fixed: `font-family-no-missing-generic-family-keyword` false positives for `math` ([#8489](stylelint/stylelint#8489)) ([@otomad](https://github.com/otomad)).
| datasource | package | from | to | | ---------- | --------- | ------- | ------- | | npm | stylelint | 16.17.0 | 16.18.0 | ## [v16.18.0](https://github.com/stylelint/stylelint/blob/HEAD/CHANGELOG.md#16180---2025-04-06) It adds 2 new rules and fixes 2 bugs. We've turned on these rules, and the `syntax-string-no-invalid` and `layer-name-pattern` ones from recent releases, in our [standard config](https://www.npmjs.com/package/stylelint-config-standard). - Added: `color-function-alias-notation` rule ([#8499](stylelint/stylelint#8499)) ([@EduardAkhmetshin](https://github.com/EduardAkhmetshin)). - Added: `container-name-pattern` rule ([#8498](stylelint/stylelint#8498)) ([@nate10j](https://github.com/nate10j)). - Fixed: `declaration-property-value-no-unknown` false positives for `math` of `font-size` ([#8495](stylelint/stylelint#8495)) ([@otomad](https://github.com/otomad)). - Fixed: `font-family-no-missing-generic-family-keyword` false positives for `math` ([#8489](stylelint/stylelint#8489)) ([@otomad](https://github.com/otomad)).
Closes #8432
No, it's self-explanatory.