feat(qwik-core): `useStylesWithScope` that introduces `:scope` pseudo class to scope styles to the component manually.

[genki]

Overview

What is it?

• [x] Feature / enhancement
• [ ] Bug
• [ ] Docs / tests / types / typos

Description

The useStyles$ can style entire page but it couldn't scope to components. The useStylesScoped$ can style scoped to the component but it couldn't style its child components. So I added one more thing, the useStyleWithScope$ that introduces the :scope pseudo class to scope styles manually.

By using this function, you can use :scope pseudo class to be replaced with .${scopeId}.

:scope {
  background: red
}

The above css is to be like this:

.⭐️5yhoz-0 {
  background: red
}

Use cases and why

While the useStylesScoped$ put the scopeId to every rules in the CSS, this function can select rules to put it. So you can scope styles to the component and its children such as <Link> too.

Checklist:

• [x] My code follows the developer guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have made corresponding changes to the documentation
• [ ] Added new tests to cover the fix / functionality

[netlify[bot]]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	25b2ad560eb9d5c9d81b6716f2a9462aa23ad576

[genki]

Ah something went wrong in my git work. I will retry.