feat(compiler-sfc): support use global style in nested css

[zh-lx]

close #10403

// scss
:global(.foo) {
    color: red;
    .bar {
        color: blue;
    }
}

The above scss code will be compiled to:

// css
:global(.foo) {
  color: red;
}
:global(.foo) .bar {
  color: blue;
}

So we should support transforming :global(.foo) .bar to .foo .bar

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.5 kB	34.4 kB	31 kB
vue.global.prod.js	148 kB	53.7 kB	47.9 kB

Usages

Name	Size	Gzip	Brotli
createApp	50.7 kB	19.8 kB	18.1 kB
createSSRApp	54.1 kB	21.1 kB	19.3 kB
defineCustomElement	53 kB	20.6 kB	18.7 kB
overall	64.4 kB	24.8 kB	22.5 kB

[skirtles-code]

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.

[zh-lx]

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: ***@***.***>

[daniluk4000]

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 @at-root) to keep scope

[zh-lx]

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.

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 @at-root) to keep scope

I don't think it's necessary. If we want to add scoped to child selectors, why do the parent selectors still use :global()?

[daniluk4000]

I don't think it's necessary. If we want to add scoped to child selectors, why do the parent selectors still use :global()?

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.