-
-
Notifications
You must be signed in to change notification settings - Fork 7.9k
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
Vue doesn't work correctly with dark classes in Tailwind 3.3 #8915
Labels
🔨 p3-minor-bug
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
has PR
A pull request has already been submitted to solve the issue
scope: compiler
Comments
@Shyam-Chen AFIK UnoCSS doesn't have this issue - only TailwindCSS on it's own (it was mentioned somewhere as I was reading through, will find the source) |
Hey in this reply tailwindlabs/tailwindcss#11024 (comment) there's a link to repro that doesn't use tailwindcss at all. <template>
<div>
<div class="wrapper">
<div class="child-text">test</div>
</div>
<div class="dark">
<div class="wrapper">
<div class="child-text">test</div>
</div>
<div class="wrapper-without-is">
<div class="child-text">test</div>
</div>
</div>
</div>
</template>
<style scoped>
.wrapper :deep(.child-text) {
color: red;
}
:is(.dark .wrapper :deep(.child-text)) {
color: blue;
}
.dark .wrapper-without-is :deep(.child-text) {
color: blue;
}
</style> results in |
edison1105
added
the
has PR
A pull request has already been submitted to solve the issue
label
Aug 8, 2023
sodatea
added
the
🔨 p3-minor-bug
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
label
Aug 28, 2023
closed via #8929 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Labels
🔨 p3-minor-bug
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
has PR
A pull request has already been submitted to solve the issue
scope: compiler
Vue version
3.2.41
Link to minimal reproduction
https://github.com/remiconnesson/tailwind-vue-deep-apply-dark-bug
Steps to reproduce
Reproduction already exists in tailwindlabs/tailwindcss#11024
What is expected?
Vue correctly converts deep selectors inside scoped CSS
What is actually happening?
For example it gets converted like this
instead of this:
System Info
No response
Any additional comments?
I am reposting this from the issue opened in TailwindCSS - tailwindlabs/tailwindcss#11024. Their team has said it's a Vue issue and they were planning on opening a bug report, but they never did. This issue has persisted for awhile and makes it impossible to upgrade, hence why I am opening it now
The text was updated successfully, but these errors were encountered: