Skip to content

Conversation

jangnathan
Copy link
Contributor

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

Closes #8432

Is there anything in the PR that needs further explanation?

No, it's self-explanatory.

Copy link

changeset-bot bot commented Mar 30, 2025

🦋 Changeset detected

Latest commit: 88d7698

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

Copy link
Member

@jeddy3 jeddy3 left a 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.

Copy link
Contributor

github-actions bot commented Apr 2, 2025

PR packaged and instant preview available.

View demo website

Install locally:

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

(View Commit)

Copy link
Member

@jeddy3 jeddy3 left a 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.

jangnathan and others added 5 commits April 3, 2025 17:44
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>
@jangnathan
Copy link
Contributor Author

jangnathan commented Apr 4, 2025

Hi. Thanks for reviewing. I have made changes. I removed the error messages and instead ignored global keywords with a return statement.

Copy link
Member

@jeddy3 jeddy3 left a 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.

@jangnathan
Copy link
Contributor Author

Hi. Thanks for reviewing. I have made required changes.

Copy link
Member

@jeddy3 jeddy3 left a 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.

jangnathan and others added 6 commits April 4, 2025 16:25
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
Copy link
Member

@jeddy3 jeddy3 left a 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.)

@ybiquitous
Copy link
Member

@jeddy3 The update of jest-preset-stylelint fails CI. See #8510 👀
(I manually triggered Dependabot)

@ybiquitous
Copy link
Member

#8510 updated jest-preset-stylelint, fixed the failed test, and was merged.
I've merged the main branch into this one. Let's see the CI results!

Copy link
Member

@ybiquitous ybiquitous left a 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 ✅

@jeddy3 jeddy3 merged commit e1d158d into stylelint:main Apr 4, 2025
18 of 19 checks passed
renovate bot added a commit to andrei-picus-tink/auto-renovate that referenced this pull request Apr 9, 2025
| 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)).
renovate bot added a commit to andrei-picus-tink/auto-renovate that referenced this pull request Apr 9, 2025
| 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)).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

Add container-name-pattern
4 participants