How can we remove and or at least change the key?

[kireerik]

related documentation:

• https://emotion.sh/docs/install#vanilla

• https://emotion.sh/docs/ssr#extractcritical

• https://emotion.sh/docs/@emotion/cache#key

 
 
This is my current workaround:

• Supporting CSS-in-JS withastro/astro#4432 (comment)

[Andarist]

I think that you are looking for @emotion/css/create-instance. This allows you to customize the key.

[kireerik]

Yes, thank you!

[kireerik]

First it seemed to work, but I think only because the local development server I am using was running and I tried css as the key which is the same as the default. So now I noticed that it is not working.

extractCritical responds with empty ids and css (and only html is present on the response).

This is how I am trying it:

import createEmotion from '@emotion/css/create-instance'
const {css} = createEmotion({key: 'key'})

, tag = css`
	border: 1px solid;
`

import {extractCritical} from '@emotion/server'

console.log(extractCritical(tag))

[kireerik]

related issue:

• [Documentation] Should "advanced approach" for vanilla emotion ssr be documented (v11) #2118

[kireerik]

For extractCritical do I need to provide HTML (string)?

 
Just providing the class names separated by a space character seems to work fine (and I don't need the html result that extractCritical gives).

 

See the same example:

• Supporting CSS-in-JS withastro/astro#4432 (comment)

[Andarist]

extractCritical expects the rendered HTML as its argument. It might work with other input but that's not 100% guaranteed.

[kireerik]

closed by #2118