Oleksandr Fediashov

## References - https://cssinjs.org/jss-plugin-global/?v=v10.9.2 Does not match this case as there is no such API, https://codesandbox.io/s/zealous-sea-t5i98h?file=/src/index.js:234-286 - https://github.com/vercel/styled-jsx#one-off-global-selectors _It was close..._ https://codesandbox.io/s/solitary-bush-r38jx7?file=/pages/index.js:218-369 ```jsx {` :global(body) .small { color: orange; }...

There are two problems: - We can't change current API to avoid breaking changes - We will need something simple and straightforward From straightforward perspective the pair of `':global(body )'`...

I think that we can go with `:global(body &)` and additionally handle `:global(body&)` in the same way as `:global(body)`.

> But isn't that the breaking change ? Why? We will keep `:global(body)` as it is.

- `:global(body&)` -> `body.fd144d` - `:global(body)` -> `body .fd144d` - `:global(body &)` -> `body .fd144d` Makes sense?

After spending some time and thinking about I came to following conclusion: there is no need in this feature as it's already there. For example, you can't create `.foo.f1lw17ff`, but...

 I was surprised that project tests did not throw, but they throw 💥 It's there: https://github.com/microsoft/fluentui/blob/770c5e1841f4f0c976c2d3295667d95e930f7e3b/scripts/projects-test/packPackages.ts#L1-L4 https://github.com/microsoft/fluentui/blob/770c5e1841f4f0c976c2d3295667d95e930f7e3b/scripts/monorepo/getDependencies.js#L2-L5

@vilidou as Griffel is used for styling, you can use [`createDOMRenderer()`](https://griffel.js.org/react/api/create-dom-renderer) API to create a renderer with required attributes, for example: ```tsx import * as React from "react"; import {...

> @layershifter this could work - but are there plans to support nonce at of the box? We don't have a feature request for that in Griffel and AFAIK there...

FYI: `makeStyles` will throw if it's called inside a component in development mode: https://github.com/microsoft/griffel/blob/9228140c805f662b6c12df4c3f6e45bf9378b4ac/packages/react/src/makeStyles.ts#L32-L41 But, I agree that a ESLint rule is more ergonomic 👍