It is currently difficult to share input/output examples in command-K palette, since every code example jumps to the top as a code snippet and gets detached from the rest of the content. Would be nice if embedded code snippets would be inline in the correct location. I’d like to be able to do conversions like the one below more easily.
//
Now convert the pseudo-Stitches to CVA:
EXAMPLE INPUT:
import { styled } from “…/…/design.stitches.config”;
export const Card = styled(“div”, {
className: “p-10 p-8 p-11 p-11 rounded-3 bg-raised”,
variants: {
raised: {
true: {
className: “shadow-2”,
},
false: {
className: “shadow-1”,
}
}
},
defaultVariants: {
raised: false
}
});
EXAMPLE OUTPUT:
import { cva, cx } from ‘cva’;
import type { VariantProps } from ‘cva’;
[…]
export const card = cva( p-10 p-8 p-11 p-11 rounded-3 bg-raised
, {
variants: {
raised: {
true: “shadow-2”,
false: “shadow-1”,
}
},
defaultVariants: {
raised: false
}
})
[…]