How can I wrap all the emotion styling with one @layer? #3134
Comments
|
Here's my solution: import createCache, { type StylisPlugin } from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
import { type FC } from 'react';
const wrapInLayer: (layerName: string) => StylisPlugin = (layerName) => (node) => {
// if we're not at the root of a <style> tag, leave the tree intact
if (node.parent) return;
// if we're at the root, replace node with `@layer layerName { node }`
const child = { ...node, parent: node, root: node };
Object.assign(node, {
children: [child],
length: 6,
parent: null,
props: [layerName],
return: '',
root: null,
type: '@layer',
value: `@layer ${layerName}`,
});
};
const emotionCache = createCache({
key: 'emotion-css-cache',
prepend: true,
stylisPlugins: [wrapInLayer('chakra')],
});
/**
* A wrapper for the out-of-the-box ChakraProvider that puts all the Emotion
* CSS at the top of `<head>` and wrapped in a `@layer chakra` so our own CSS
* can override Chakra.
*/
const ChakraProviderWithLayer: FC<ChakraProviderProps> = ({ children, ...rest }) => {
return (
<CacheProvider value={emotionCache}>
<ChakraProvider {...rest}>
{children}
</ChakraProvider>
</CacheProvider>
);
};
export { ChakraProviderWithLayer as ChakraProvider };You can use it just like you'd use the out-of-the-box Caveat: this doesn't work for things wrapped in a Fix The problem was input CSS like this: h1 {
color: red;
@media screen and (min-width: 30em) { color: blue; }
}which Stylis transforms into h1 { color: red; }
@media screen and (min-width: 30em) { h1 { color: blue; } }The solution is to check for Thus, the solution is // if we're not at the root of a <style> tag, leave the tree intact
if (node.root) return;
// rest of code as-is |
|
thank you very much, ill try and implement it to see if it works 🙏 |
|
Thanks @jamesarosen, this works really well. I think there's a typo: |
Hi, I'm working with the latest version of MUI and implemented it alongside vanilla CSS organized with
@layers.I would love to wrap all the generated emotion CSS with
@layer framework { styles}and don't know how.I tried having an observer on the HTML's head node and manually adding the strings but it only works in my local environment.
I tried to look around and saw some mention of supporting
@layerbut I didn't understand how and to what extent.I would love some help if you can 🙏
thanks
The text was updated successfully, but these errors were encountered: