The eddev library provides a wrapper around stitches, which is a near-zero-runtime CSS-in-JS solution.
Stitches is similar to styled-components and similar CSS-in-JS tools, however it has the advantage of compiling CSS at initialization, rather than constantly as your users interact with your application. This has enourmous benefits in terms of performance.
Unlike styled-components, stitches uses object styles. This may seem a bit gross to newcomers, however you'll soon see that it has it's advantages.
Stitches features an excellent design token system, allowing us to marry our Figma boilerplate to our coded design system. We've extended this with responsive spacing tokens and typographic primitives.
You can read more about Stitches here.
Rather than working directly with @stitches/react, our eddev library includes a wrapper around stitches which provides responsive typography and spacing tokens.
You'll notice in the root of the starter theme that there's a file called theme.css.tsx. This initializes the stitches theme, and exports functions and data which you'll use throughout your application.
Read the next few sections for more details.