Brainstorm how to abstract utils

[peduarte]

With types

Related: #129

[jonathantneal]

We have a proposal in #659 that adds ScaleValue and PropertyValue utilities.

The ScaleValue utility types a value to accept any token value from a given scale.

The PropertyValue utility types a value to accept any token or css value from a given property.

import * as Stitches from '@stitches/react'

export const c = (value: Stitches.ScaleValue<'colors'>) => ({
	color: value,
})

export const mx = (value: Stitches.PropertyValue<'marginLeft'> | Stitches.PropertyValue<'marginLeft'>[]) => Array.isArray(value) ? {
	marginLeft: value[0],
	marginRight: value[1] || value[0]
} : {
	marginLeft: value,
	marginRight: value
}

import { createCss } from '@stitches/react'
import * as utils from './utils'

const { styled } = createCss({
	theme: {
		colors: {
			red: '#ff0000',
		},
	},
	utils,
})

const Button1 = styled('button', {
	c: '$red',
	mx: 'auto'
})

const Button2 = styled('button', {
	c: '$red',
	mx: ['auto', 0]
})

[peduarte]

Fixed in V1. Please refer to migration guide and changelog