Sprinkles with aliases

[swernerx]

Am I missing something, or is there no support for simple aliases in Sprinkles? I would like to adopt some of the tailwind ideas that are loved in the team (e.g. https://tailwindcss.com/docs/flex):

• flex-1 => flex: 1 1 0%;
• flex-auto => flex: 1 1 auto;
• flex-initial => flex: 0 1 auto;
• flex-none => flex: none;

Is there anything how I can mimic such functionality? It's not really a shorthand... more so an alias, but without an actual value.

Thanks for any hints!

[kompot]

I guess you can do this like if you don't mind polluting auto-complete with some unused CSS props. Haven't used it myself in production though looks like it works.

But I don't see why vanilla-extract doesn't allow doing this properly.

shorthands: {
  flex: ['WebkitAnimation'],
},
properties: {
  /**
  * @deprecated do not use, it's here for shorthands only
  */
  WebkitAnimation: {
    'flex-1': {
      flex: '1 1 0%',
    } satisfies StyleRule,
    'flex-auto': {
      flex: '1 1 auto',
    } satisfies StyleRule,
  },
}

I guess I will go this route if the only downside is polluted autocomplete.

UPD

Actually looks like this just works. Or have I misunderstood your question?

properties: {
  flex: {
    'flex-1': {
      flex: '1 1 0%',
    } satisfies StyleRule,
    'flex-auto': {
      flex: '1 1 auto',
    } satisfies StyleRule,
  },
}