Open lazybean opened 1 year ago
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.
getCssText
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;
padding-top: ; padding-right: ; padding-left: ; padding-bottom: 0px;
Steps to reproduce the behavior, please provide code snippets or a repository:
https://codesandbox.io/s/late-fast-wu5li9?file=/src/App.js
We should get valid css. This is important when using SSR and we need to rehydrate.
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.
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.
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.getCssText
will return: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
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.