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

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; }, {}), }, });