theme styles generate duplication css output

[zhaohuanyuu]

Describe the bug When I want to use the styles attribute to customize the native html tag style, for example: blockquote, but the style that ends up being generated to the page is repeated twice

To Reproduce

1. clone my reproduction project blog production
2. yarn install & yarn start
3. Click the Blog header
4. Route to the named reproduction article
5. Inspect text content is "this is theme-ui style custom style" element

Expected behavior

I don't know why generate duplication css output,that should generate css only once

Screenshots

Additional context As long as the styles defined from the styles object of theme-ui config have the problem of generating duplicate css

[lachlanjc]

Yep, I'm having this issue too on sites like https://lachlanjc.com/ — not sure what's going on

[hasparus]

I don't see this problem in a commercial project nor in CodeSandbox.

Also, not all classes in @lachlanjc's websites have duplicate styles.

Do you guys think we can narrow this? When does it happen? When does it not happen?

[mbektimirov]

I can confirm that duplication takes place in some undisclosed cases. It's not clear at the moment what causes this behavior.

[simeng-li]

@hasparus wondering if there are any updates for this issue. I am still able to see this duplicate style issue on my new Gatsby project. Using the gatsby-plugin-theme-ui plugin.

[techfg]

I don't see this problem in a commercial project nor in CodeSandbox.

Also, not all classes in @lachlanjc's websites have duplicate styles.

Do you guys think we can narrow this? When does it happen? When does it not happen?

@hasparus The problem appears to be specific to Gatsby and changes introduced in the Head API in Gastby 5.6. See Gatsby #38249 for more details and repros at:

1. https://github.com/techfg/gatsby-duplicate-styles-when-using-head-api.git
2. https://codesandbox.io/p/sandbox/duplicate-style-element-in-head-when-using-head-api-and-theme-ui-h8zqtk