styled-jsx icon indicating copy to clipboard operation
styled-jsx copied to clipboard

Bug: cannot add 2 global styles together inside 1 component

Open WoodenPC opened this issue 1 year ago • 0 comments

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

Hi, i have specific case for my app. I want to add content of css files inside styled-jsx tags, eg

import style1 from './style1.css?inline';
<style jsx global>
        {style1}
</style>

for dynamic style isolation. However i cannot add 2 style tags inside component. Styles applied only from first style tag.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

https://stackblitz.com/edit/github-engjyq?file=package.json,src%2FApp.tsx,src%2Fstyle1.css,src%2Fstyle2.css,vite.config.ts,src%2Fmain.tsx&title=React%20with%20Vite

What is the expected behavior?

I can add multiple style tags inside component and correctly display style overrides.

Environment (include versions)

  • Version of styled-jsx (or next.js if it's being used): "styled-jsx": "5.1.6"
  • Browser: chrome last version
  • OS: windows 11

Did this work in previous versions?

no idea

WoodenPC avatar Nov 28 '24 12:11 WoodenPC