Skip to content
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

Avoid invalid ::part selector #113

Merged
merged 3 commits into from
Apr 9, 2024

Conversation

m-akinc
Copy link
Contributor

@m-akinc m-akinc commented Apr 5, 2024

It is not valid CSS to add a class selector to the ::part() pseudo-element, so rewriting a selector like ::part(foo):hover to ::part(foo).pseudo-hover is a problem.

::-webkit-scrollbar-thumb and ::-webkit-slider-thumb have the same limitation, and there was already logic to avoid generating modified selectors that included those. However, that logic was overly restrictive, preventing valid rewrites like div:hover::-webkit-scrollbar-thumb -> div.pseudo-hover::webkit-scrollbar-thumb.

This change includes:

  • prevents generating invalid CSS with ::part() followed by a class selector
  • support for selectors like elt:hover::part(foo) and elt:hover::-webkit-scrollbar-thumb
  • make sure pseudo-*-all classes get added to shadow hosts, even if their shadow DOM didn't have stylesheets that got rewritten. This is necessary to support ::part()-based styling, since those styles are (usually) in the light DOM.
  • make sure stale pseudo-*-all classes get cleared from shadow hosts when switching Storybook stories
  • new Storybook story for ::part() support

@m-akinc
Copy link
Contributor Author

m-akinc commented Apr 5, 2024

@ghengeveld Assuming this gets merged, I have at least one other change to submit afterwards.

Copy link
Member

@ghengeveld ghengeveld left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work!

src/preview/withPseudoState.ts Show resolved Hide resolved
src/preview/withPseudoState.ts Outdated Show resolved Hide resolved
@ghengeveld ghengeveld added the patch Increment the patch version when merged label Apr 8, 2024
@ghengeveld
Copy link
Member

ghengeveld commented Apr 8, 2024

@ghengeveld Assuming this gets merged, I have at least one other change to submit afterwards.

Do you want to release that other change along with this one? In that case this PR should be labeled with skip-release.

@m-akinc
Copy link
Contributor Author

m-akinc commented Apr 8, 2024

Do you want to release that other change along with this one? In that case this PR should be labeled with skip-release.

I assumed it would be easier to just release once, which is why I gave that heads-up. I don't have permissions to modify the labels on the PR, so I guess you will need to add the label (unless you want to give contributors that permission).

@ghengeveld ghengeveld added the skip-release Preserve the current version when merged label Apr 9, 2024
@ghengeveld ghengeveld merged commit e3202ee into chromaui:main Apr 9, 2024
1 of 2 checks passed
Copy link

github-actions bot commented May 6, 2024

🚀 PR was released in v3.1.0 🚀

@github-actions github-actions bot added the released This issue/pull request has been released. label May 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
patch Increment the patch version when merged released This issue/pull request has been released. skip-release Preserve the current version when merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants