Token from theme object not assignable to util

[tomas-hartman]

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
})

// 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

• Version of Stitches: ^1.2.8
• Version of Node.js: 16.17.0
• ts: 4.7.4

[Code-Victor]

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]

@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]

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]

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

[Code-Victor]

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
})