core: allow to control style tag insertion location

[spmonahan]

Internally Griffel ensures its style tags are inserted in the correct order to provide deterministic results. However, when used in an application that lazy loads code and styles, Griffel's style tags may become interleaved with the application's style tags, resulting in non-deterministic results.

This manifests in real-world applications that use lazy loading of React components (and CSS modules for application styles in this case but I don't think that's necessarily relevant) and Fluent UI React v9 for controls. In this case application authors want to override default Fluent styles with their own CSS but because their components are lazily loaded and they cannot control where Griffel styles are loaded in the document they cannot be guaranteed their styles will have greater specificity than Fluent's built in Griffel styles.

I've created a rough demo of this on Codesandbox: Griffel Lazy Load

With the default example, by inspecting the source, you can see how some application CSS is loaded in the document first, then Griffel styles, then more app CSS.

I'd like an API for Griffel that allows me to control where Griffel's style tags are inserted so I can ensure they are in the correct place relative to my application's styles.

[layershifter]

FYI: You can control insertion of lazy loaded non-Griffel CSS by both style-loader and mini-css-extract-plugin:

• https://www.npmjs.com/package/style-loader#insert
• https://webpack.js.org/plugins/mini-css-extract-plugin/#insert

I checked closest competitors and see following.

Emotion

Has undocumented (emotion-js/emotion#2774) insertionPoint option:

https://github.com/emotion-js/emotion/blob/0283f88aa05fe591f0e9cf18bfe7d8a1e6830f1c/packages/sheet/src/index.js#L95-L100

styled-components

Has target option:

https://github.com/styled-components/styled-components/blob/447342685c0a9d7b09a658bb75cd1a2195a7e61f/packages/styled-components/src/sheet/dom.ts#L23-L25

Fela

Doesn't have anything:

https://github.com/robinweser/fela/blob/3665a44e015e5b8ab0f2f1c6df2bec4173507220/packages/fela-dom/src/dom/connection/createNode.js#L44-L48

merge-styles

Has a support for "placeholder" tag (microsoft/fluentui#9786):

https://github.com/microsoft/fluentui/blob/9231f2bdb426a3f8223335cccac171a68ecbb485/packages/merge-styles/src/Stylesheet.ts#L377-L391

[layershifter]

We need to keep all style elements created by a Griffel in a group. To ensure that it's true we need to keep the existing approach with style buckets and being them siblings.

The more reasonable option for me is insertionPoint, going to create a PR with.