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

Change dark selector so @apply works correctly with pseudo elements #13379

Merged
merged 3 commits into from
Mar 27, 2024

Conversation

thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented Mar 27, 2024

When using the class strategy the dark mode selector is :is(.dark &). However, our code that handles hoisting pseudo elements outside of :is(…) doesn't handle this properly when using @apply.

Given the following code:

::-webkit-scrollbar-track {
  @apply dark:bg-black;
}

You would end up with something like this:

:is(.dark )::-webkit-scrollbar-track {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

The selector above is is equivalent to .dark::-webkit-scrollbar-track which is incorrect. We want a selector that is equivalent to .dark ::-webkit-scrollbar-track.

This PR changes the selector we define for dark mode to &:is(.dark *). This is functionally equivalent to the previous selector and means we don't have to make any fixes inside @apply's selector handling. As a result you'll end up with this CSS:

:is(.dark *)::-webkit-scrollbar-track {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

Which is equivalent to .dark ::-webkit-scrollbar-track and thus works as expected.

Fixes #13037

Copy link
Member

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

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

Such a small change, love it!

@thecrypticace thecrypticace merged commit 8b4a2a6 into master Mar 27, 2024
13 checks passed
@thecrypticace thecrypticace deleted the fix/dark-mode-class-hoisting branch March 27, 2024 15:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants