API for creating my own properties / values

[LukasBombach]

I understand that with Sprinkles I can select which CSS props and values I allow to use

import { defineProperties } from '@vanilla-extract/sprinkles';

const responsiveProperties = defineProperties({
  properties: {
    display: ['none', 'block', 'flex'],
    flexDirection: ['row', 'column'],
    // ...
  }
});

what I really want to do though is to define my own properties (do not mistake this for custom css properties) and my own values for them, so

import { defineProperties } from '@vanilla-extract/sprinkles';

const responsiveProperties = defineProperties({
  properties: {
    layout: {
      stack: {
        display: "grid"
      },
      columns: {
        display: "grid",
        gridAutoFlow: "column",
      }
    }
  }
});

So I could later do

/**
 * will set
 * 
 * display: grid;
 * grid-auto-flow: column;
 * 
 */
const myStyle = responsiveProperties.layout.columns;

The idea is to have an abstraction of our own design language

Is that in any way possible with the existing APIs?

[rtkaaho]

Hi!

So this is possible, but there is a funky typing issue with this. Ironically, so long as your properties object contains at least one valid css property from the CSSType lib it will work. For example, adding padding will remove the type error:

const responsiveProperties = defineProperties({
  properties: {
    paddingLeft: [10, 20, 30, 40],
    layout: {
      stack: {
        display: "grid"
      },
      columns: {
        display: "grid",
        gridAutoFlow: "column",
      }
    }
  }
});

// create the atoms
export const atoms = createSprinkles(responsiveProperties);

// export the atoms type
export type Atoms = Parameters<typeof atoms>[0];

// consuming the atoms
const myLayoutClassName = atoms({
  layout: "columns"
});

const MyComponent = () => {
  return (
    <main className={myLayoutClassName}>...</main>
  )
}

[LukasBombach]

Oh wow, thanks!

Looking and the function's type annotations, I am not sure if this is supposed to work or not.

Can someone of the maintainers clarify? Who do I @ here? @markdalgleish ?

[LukasBombach]

If this is supposed to work I'd like to submit a fix

[markdalgleish]

The behaviour @rtkaaho described is a bug. In his example, you shouldn't have to define paddingLeft for layout to work.