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> components 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	44d716d556cdebc255740f5264c79b136effdadc

[pkg-pr-new[bot]]

Run & review this pull request in StackBlitz Codeflow.

commit: 44d716d

@builder.io/qwik

``` npm i https://pkg.pr.new/@builder.io/qwik@6614 ```

@builder.io/qwik-city

``` npm i https://pkg.pr.new/@builder.io/qwik-city@6614 ```

eslint-plugin-qwik

``` npm i https://pkg.pr.new/eslint-plugin-qwik@6614 ```

create-qwik

``` npm i https://pkg.pr.new/create-qwik@6614 ```

---

templates

- [default](https://pkg.pr.new/template/e81239c0-5a42-478f-ac4f-294154ec8b63)

[gioboa]

Thanks @genki we used to have a team discussion for new APIs so I marked this PR with the correct label. 😊

[genki]

@gioboa Thanks :)