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
feat(compiler-sfc): support use global style in nested css #10436
base: main
Are you sure you want to change the base?
Conversation
Size ReportBundles
Usages
|
In my opinion, the Case 1: :global(.foo) {
.bar {}
} With scss this will be translated to Case 2: :global(.foo) {
:global(.bar) {}
} With scss this will be translated to Here are a couple of SFC Playground examples based on these two cases. They are using native browser CSS nesting, not scss, but they are working the way I'd expect: I think the target should be for scss to work the same way. |
I don't think so. In Vue, :deep() will have an effect on the sub selector. So :global() should also maintain consistency.
…---- Replied Message ----
| From | ***@***.***> |
| Date | 04/20/2024 08:18 |
| To | ***@***.***> |
| Cc | ***@***.***>***@***.***> |
| Subject | Re: [vuejs/core] feat(compiler-sfc): support use global style in nested css (PR #10436) |
In my opinion, the :global should not carry over to the child selectors.
Case 1:
:global(.foo) {
.bar {}
}
With scss this will be translated to :global(.foo) .bar, which I think Vue should compile down to .foo .bar[data-v-123].
Case 2:
:global(.foo) {
:global(.bar) {}
}
With scss this will be translated to :global(.foo) :global(.bar), which I think Vue should compile down to .foo .bar.
Here are a couple of SFC Playground examples based on these two cases. They are using native browser CSS nesting, not scss, but they are working the way I'd expect:
Case 1
Case 2
I think the target should be for scss to work the same way.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
But the proposal looks sick. Would love to have like :root selector (with line in |
I don't think it's necessary. If we want to add scoped to child selectors, why do the parent selectors still use |
It's not my case. For example, we have global class on html and want to rely on it in children component without losing scoped. |
close #10403
The above scss code will be compiled to:
So we should support transforming
:global(.foo) .bar
to.foo .bar