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

Local AI Coding Tools

Local AI Coding Tools

A comprehensive guide to AI-powered coding tools for local development.

AboutAI Workflow SpecContentStacksNewsletterPromptsRSS