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

[Hamzat Victor Oluwabori]

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.

[Hamzat Victor Oluwabori]

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.

[Hamzat Victor Oluwabori]

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