CSS Type with config extensions

[leo-petrucci]

In my app I've got a couple of components I use to create containers for other elements:

import { CSS } from "@stitches/react";
import { inlineCss } from "stitches.config";

interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
  css: CSS;
}

const Box = ({ css, ...rest }: BoxProps) => {
  return <div {...rest} className={inlineCss(css)} />;
};

export default Box;

This allows me to pass a css prop without having to create a new styled element.

Now this works great, but I've noticed that the CSS prop doesn't have the custom queries/variable I added to my stitches config:

createStitches({
  media: {
    sm: '(min-width: 640px)',
    md: '(min-width: 768px)',
    lg: '(min-width: 1024px)',
    xl: '(min-width: 1280px)',
    '2xl': '(min-width: 1536px)',
  },
})

These work if I pass them, but they're not autocompleted which can be annoying.

Is there any way to use the CSS type in such a way where it contains my stitches config customisation?

[rangitha]

The CSS type that ships with Stitches is generic. Use the type parameter to type it with your config:

// stitches.config.ts

import * as Stitches from "@stitches/react";

export type CSS = Stitches.CSS<typeof config>;
export const { config, ... } = Stitches.createStitches({ ... });

You could then use your own CSS type elsewhere!