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.76k stars 254 forks source link

Token from theme object not assignable to util #1130

Open tomas-hartman opened 1 year ago

tomas-hartman commented 1 year ago

Bug report

When trying to use utils in combination with tokens from theme I get a ts error.

Describe the bug

import { styled, theme } from '../../../styles/stitches.config'

const Component = styled('span', {
  mv: theme.space.xs, // TypeError
})
image
// stitches.config:

export const {
  styled,
  theme,
} = createStitches({
  utils: {
    mv: (value: PropertyValue<'margin'>) => ({ marginTop: value, marginBottom: value }),
  },
})

Due to the lack of information on this topic in docs, along with inability to solve it with neither PropertyValue nor ScaleValue and missing export of appropriate type, I assume this might be a bug.

System information

Code-Victor commented 1 year ago

I'm not really sure what you want to do, but you don't need to import the theme object from the config to use your theme tokens. By prefixing them with the scale name, you can pick a token from any of your available theme scales.

import { styled} from '../../../styles/stitches.config'

const Component = styled('span', {
  mv: "$space$xs"
}) 

You can read further in the docs here

tomas-hartman commented 1 year ago

@Code-Victor I know about the other way, but I want/need to import tokens from theme for better type control. The 'string token magic' turned out to be pretty unreliable with refactorings.

Code-Victor commented 1 year ago

Then I think the best this is the best solution.

import { styled, theme } from '../../../styles/stitches.config'

const Component = styled('span', {
  mv: theme.space.xs.computedValue, // returns "var(--space-xs)"
})

It generates the serialized CSS var() representing the token(so in this case, var(--space-xs)).

tomas-hartman commented 1 year ago

Cool, thanks. It's actually a nice workaround.

Code-Victor commented 1 year ago

Also, if you're working with multiple themes or want the exact value. you can try this

import { styled, config} from '../../../styles/stitches.config'

const Component = styled('span', {
  mv: config.space.xs, // returns the exact value
})