How to set strict mode?

[ivanbanov]

I saw that you guys merged this PR https://github.com/modulz/stitches/pull/206 which does exactly what I was looking for. Despite the PR I can not find it in the docs, was it removed? What is the right way to set it up?

[peduarte]

It has been removed, yes. You can still have a strict-er way to use tokens via the theme object though

https://stitches.dev/docs/typescript#stricter-experience

[kylemh]

Is there any chance of this returning? What about returning another function similar to styled like strictStyled?

[peduarte]

There's a chance, yes. This API is what I had drafted too :D

[willdspd]

@peduarte any updates on this? This is the only thing that is really lacking in stitches at the moment IMO!

[vincerubinetti]

Not sure if related, but it seems like no typing at all is working:

const dialogStyle = css({
  displays: "flex ",
  flexDirection: "diagonal",
  background: 1,
  // any other nonsensical key/value i can think of also does not throw any error
});

Basically no type errors (for valid CSS properties and values) seem to get caught. I'm trying to switch from emotion, which catches these errors.

The recommended way to share styles across components is to create them via the css or the styled functions. This way you'll get typing for free.

Not sure if you can consider this "getting typing". Checking for CSS property/value errors is one of the main points (imo) for doing CSS-in-JS.

[excursus]

I've been using something like:

import { css as css_ } from '@stitches/core'
import { SimplePseudos, StandardProperties } from '@stitches/core/types/css'

type CSS = Partial<StandardProperties> & Partial<Record<SimplePseudos, Partial<StandardProperties>>>
const css: (x: CSS) => ReturnType<typeof css_> = css_

const tagStyle = css({
    borderRadius: 5,
    foobar      : 'error!'
})