stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
https://stitches.dev
MIT License
7.74k stars 253 forks source link

when using prefix, theme tokens in globalCSS aren't prefixed #1136

Closed flowen closed 1 year ago

flowen commented 1 year ago

Bug report

Describe the bug

Added a prefix in the stitches config, but when using a design token in the globalCSS function it won't add it

To Reproduce

const { styled, getCssText, keyframes } = createStitches({
  prefix: 'st-', // temp untill we remove styled-comp
  theme: {
    fonts: {
      helvetica: "'Helvetica Neue', sans-serif",
    },
  ...
}})

const globalStyles = globalCss({
  '*': {
    boxSizing: 'border-box',
    fontFamily: '$helvetica',
  },
  ...
});

export { styled, globalStyles }

app.js:

export default function App({ Component, pageProps }) {
  globalStyles()

  return (
    <React.StrictMode>
         ...
    </React.StrictMode>
  )
}

browser:

CleanShot 2023-01-22 at 14 30 40@2x CleanShot 2023-01-22 at 14 31 00@2x
Liombe commented 1 year ago

I think it should be working if you export globalCss function from your createStitches intead of @stitches/react, just like you did with the styled function.

flowen commented 1 year ago

@Liombe TY! that was it indeed