feat(css): tree shake scoped styles

[sapphi-red]

Description

Since the scoped styles in Vue generates styles scoped to that component, it can be tree shaken if that component is not used. (normal styles cannot be tree shaken as it can be used from other components).

This PR requires #526 and it uses a recently introduced feature in Vite (vitejs/vite#19418).

I tested this feature with https://vitepress.new/ and I got 8kB CSS file reduction.

Technically you can have a scoped style like below

:global(.foo) {
  color: red;
}

and this would be treeshaken where you might not expect to. If we should handle this case, we can add an additional condition of !code.includes(':global').

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/@vitejs/plugin-vue@533

npm i https://pkg.pr.new/@vitejs/plugin-vue-jsx@533

commit: e4f981e