next js example needs to update the globalStyles.tsx file

[daniloab]

On the example, https://github.com/ben-rogerson/twin.examples/tree/master/next-stitches-typescript tells to create the styles/globalStyles.tsx and import global from ../stitches.config:

// styles/globalStyles.tsx
import { globalStyles } from 'twin.macro'
import { global } from '../stitches.config'

const styles = global(globalStyles)

export default styles

but, on ../stitches.config file example there is not any global to be imported:

// stitches.config.ts
import { createStitches, CSS as StitchesCSS } from '@stitches/react'
export type { CSS } from '@stitches/react/types/css-util'

export const stitches = createStitches({
  prefix: '',
  theme: {},
  utils: {},
})

export const { css, styled, globalCss, theme, keyframes, getCssText } = stitches

Suggested solution

update the example with same content of the file https://github.com/ben-rogerson/twin.examples/blob/master/next-stitches-typescript/styles/globalStyles.tsx

import { DefaultThemeMap } from '@stitches/react'

import tw, { theme, globalStyles } from 'twin.macro'
import { globalCss, CSS } from '../stitches.config'

const customStyles = {
  body: {
    WebkitTapHighlightColor: theme`colors.purple.500`,
    ...tw`antialiased`,
  },
}

const styles = () => {
  globalCss(customStyles)()
  globalCss(globalStyles as Record<any, any>)()
}

export default styles

[ben-rogerson]

Good pickup, thanks for that.

I've now updated the readme to match the example.