getCssText returns invalid css on the client

[ludo]

Bug report

Describe the bug

When using token (for space) and shorthand property for padding followed by overriding one padding, the resulting css from getCssText on the client is completely wrong.

const { styled, getCssText } = stitches.createStitches({
  theme: {
    space: { "1": "12px" }
  }
});
const BrokenPadding = styled("div", {
  padding: "$1",
  paddingBottom: "0"
});
const Container = styled("div", {
  border: "1px dashed red"
});

getCssText will return:

--sxs{--sxs:0 t-chixWl}@media { :root, .t-chixWl { --space-1:12px; } }--sxs{--sxs:2 c-bcnXkT}@media { .c-bcnXkT { padding-top: ; padding-right: ; padding-left: ; padding-bottom: 0px; } }

See that padding part: padding-top: ; padding-right: ; padding-left: ; padding-bottom: 0px;

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

https://codesandbox.io/s/late-fast-wu5li9?file=/src/App.js

Expected behavior

We should get valid css.
This is important when using SSR and we need to rehydrate.

Screenshots

System information

• OS: mac os
• Browser (if applies) firefox, and chrome
• Version of Stitches: [1.2.8]

Additional context

I noticed that bug when trying to use remix with stitches.
The style from the server is fine, but the one from the client is wrong.

[ludo]

Same issue with margin: https://codesandbox.io/s/margin-as-well-iw2nju
And background: https://codesandbox.io/s/broken-stitches-getcsstext-quintm?file=/

And many other shorthand properties.