3 ms·
Hm. I see the same CSS-in-JS with a sprinkle of string interpolation for some variables :) I may run into the same issues as the other CSS-in-JS solutions (I o
by dmitriid 4y ago
Hm. I see the same CSS-in-JS with a sprinkle of string interpolation for some variables :)
I may run into the same issues as the other CSS-in-JS solutions (I only encountered stitch once, and not for a long period of time)
- satvikpendem 4y agoUnlike other CSS-in-JS though, the way it's made, via object properties, enforces compliance to the design system. In things like styled-components, it doesn't. Doubly so when using TypeScript, as with Vanilla-Extract: https://vanilla-extract.style https://vanilla-extract.style
- dmitriid 4y ago> the way it's made, via object properties, enforces compliance to the design system. The link literally has this: ``` export const className = style({ display: 'flex', flexDirection: 'column', selectors: { '&:nth-child(2n)': { background: 'aliceblue' } }, '@media': { 'screen and (min-width: 768px)': { flexDirection: 'row' } } }); ``` Which is indistinguishable from any other CSS-in-JS which has hundreds of these one-off things scattered everywhere. With a theme somewhere exposing another hundred or so variables of varing quality. And all these solutions basically converge on Tailwind (or other utility-first CSS approaches): ``` export const hero = style({ backgroundColor: vars.color.brandd, color: vars.color.white, padding: vars.space.large }); ``` is nothing more than `bg-brand color-white p-4` But TypeScript support is definitely nice.
- satvikpendem 4y agoSorry, could you reformat your code? I can't read this well.
- dmitriid 4y agoSorry, I keep forgetting that HN is weird with line breaks Re-typing/re-quoting: -------- The link literally has this: export const className = style({ display: 'flex', flexDirection: 'column', selectors: { '&:nth-child(2n)': { background: 'aliceblue' } }, '@media': { 'screen and (min-width: 768px)': { flexDirection: 'row' } } }); Which is indistinguishable from any other CSS-in-JS which has hundreds of these one-off things scattered everywhere. With a theme somewhere exposing another hundred or so variables of varing quality. And all these solutions basically converge on Tailwind (or other utility-first CSS approaches): export const hero = style({ backgroundColor: vars.color.brandd, color: vars.color.white, padding: vars.space.large }); is nothing more than `bg-brand color-white p-4` But TypeScript support is definitely nice. ----
- satvikpendem 4y agoThis video from Stitches shows their API well, which VE copied with their Recipes plugin, code example below (timestamped to 31:07 in case the link doesn't work) [0]. /// Define variants for a specific component, such as a button export const button = recipe({ base: { borderRadius: 6 }, variants: { color: { neutral: { background: 'whitesmoke' }, brand: { background: 'blueviolet' }, accent: { background: 'slateblue' } }, size: { small: { padding: 12 }, medium: { padding: 16 }, large: { padding: 24 } }, rounded: { true: { borderRadius: 999 } } }, // Applied when multiple variants are set at once compoundVariants: [ { variants: { color: 'neutral', size: 'large' }, style: { background: 'ghostwhite' } } ], defaultVariants: { color: 'accent', size: 'medium' } }); /// Use in code <button className={ button({ color: 'accent', size: 'large', rounded: true }) }> Hello world </button> Basically, unlike other CSS-in-JS libraries, you can encode your design system into something called variants, then you use them by calling the function `button()` to generate a class name. Notice how `button()` takes in certain properties and only those properties with their corresponding values (enforced by TypeScript). If you try to put in `button({ color2: 'testColor', ...})`, TS won't compile. In this way, you can take the design team's ButtonSmall, ButtonLarge, NeutralButtonLarge etc and codify them into TypeScript such that you literally can't make a mistake. You simply can't do that in Tailwind, unless you use some outside plugin I assume. (Note that VE also has a Tailwind-like atomic CSS API called Sprinkles, but since I don't like Tailwind I don't use this either). [0] https://youtu.be/Gw28VgyKGkw?t=1867 https://youtu.be/Gw28VgyKGkw?t=1867