Chase AdamsChase Adams
AboutContentPromptsPrototypesNewsletter

Box util for Stitches CSS in JS

Essays and updates on product, engineering, and AI by Chase Adams.

1 minute read

I had a specific border I wanted to use consistently in my web design, so I made a util for Stitches (styling) that took the position the border needed to be in and did the work of styling the border for light and dark mode.

createStitches({
  utils: {
	  box: (sides: Array<"top" | "left" | "bottom" | "right">) =>
	      (sides.length ? sides : sidesOptions).reduce<{
	        [k: string]: string;
	      }>((prevVal, side) => {
	        prevVal[`border-${side}`] = "1px dashed $gray200";
	        if (!prevVal[`.${darkTheme} &`]) {
	          // @ts-ignore
	          prevVal[`.${darkTheme} &`] = {};
	        }
	        // @ts-ignore
	        prevVal[`.${darkTheme} &`][`border-${side}`] = "1px dashed $gray800";
	        return prevVal;
	      }, {}),
	},
});
First Cohort
No Coding Experience Required

Build Your Website with AI—No Code Required

Learn to create and deploy professional websites using ChatGPT and Claude. Go from complete beginner to confident website builder.

Start Building Today

Post Details

Published
Jan 24, 2023
Share
ChatGPT

Latest Posts

5 Years of Startup Learnings At Murmur Labs

5 Years of Startup Learnings At Murmur Labs

Reflections on 5 years at Murmur Labs. What we built, what worked, what didn't, and how I'd approach starting something new.

AboutAI Workflow SpecContentStacksNewsletterPromptsRSS