In sprinkles how can I declare "any" value for a property

[Filippinifra]

I love this feature of sprinkle:

export const wrapperClass = sprinkles({
  gridTemplateColumns: {
    mobile: "1fr",
    tablet: "1fr",
    notebook: "1fr 3fr",
    desktop: "1fr 3fr",
  },
});

But this mean that I have to declare in my sprinkles.css.ts inside defineProperties method this:

gridTemplateColumns: [
      "1fr 3fr",
      "1fr",
    ],

I have so many different "grid template" values in my project, how is possible to use any value and continue to use sprinkles functionalities?
is there a way to declare something like that?

gridTemplateColumns:"any",

[askoufis]

Sprinkles cannot do this, but rainbow-sprinkles might have the functionality you're after.

[airtonix]

Rainbow sprinkles has other gotchas:

👎🏻 can't create custom property names

only allowed to use CSSProperties. plain sprinkles allows me to create my own keys without resorting to shorthand

👎🏻 confusing stratification of syntax

If you define a property in both dynamic and static sections, then using those properties requires you to provide a $ prefix:

<Box maxWidth='$Large' gap="Large" />

(Both maxWidth and gap here use my Tokens.spacing.Large )

This wouldn't be so bad if the types for the property indicated something like:

maxWidth: any | '$Large'

Dynamic properties didn't even work T_T

I also couldn't get the value proposition of rainbow sprinkles to work: <Box maxWith="320px" /> or <Box maxWith={320} />

[chrispcode]

Wait, why is this not possible in the base sprinkles library? I mean, without this feature sprinkles seems useless. Renaming properties is fun, but not very useful when working in a team. Otherwise any property definition you do on-top of a base vanilla-extract property adds extra maintenance pain. Complex properties can be achieved by exporting a couple extra classes.

So what's the point of sprinkles then?

P.S. I used the library and have to say I enjoy it a lot. I am genuinely asking a question and trying to understand it better. I am also roughly comparing it to pandacss, where they have shorthand properties already baked in and allowing for further customization.

[chrispcode]

One final thing is media queries. In sprinkles you can declare conditions, super useful for media queries. But as soon as I step out of sprinkles, I lose the ability to apply props based on conditions. Having sprinkles totally decoupled from the base library seems rather weird from my point of view. Again no hate, just asking.

[airtonix]

I think is the proper approach might involve

1. creating a global theme contract
2. creating n+1 themes based on that contract where your desired "dynamic" properties use re-assignable variables

So for an opinionated Box component:

import type { PropsWithChildren } from 'react';
import { Children, isValidElement, cloneElement } from 'react';
import classnames from 'classnames'
import { assignInlineVars } from '@vanilla-extract/dynamic';

import { extractProps } from '@zenobius/core-extract-props';
import { Tokens } from '@zenobius/ui-web-uikit';

import type { BoxSprinkleProps } from './sprinkles/box.css';
import { BoxProperties, BoxSprinkles } from './sprinkles/box.css';
import type { FullscreenSprinkleProps } from './sprinkles/fullscreen.css';
import { FullscreenSprinkles } from './sprinkles/fullscreen.css';
import { withDividers } from './sprinkles/dividers.css';


type AsChildProps<DefaultElementProps> = PropsWithChildren<
  { asChild?: boolean } & DefaultElementProps
>

export type BoxProps = AsChildProps<{
  dividers?: boolean;
  asChild?: boolean;
  className?: string;
  style?: object;
} & React.HTMLAttributes<HTMLElement>
  & BoxSprinkleProps & FullscreenSprinkleProps>

function Slot({
  children,
  style,
  className,
  ...props
}: React.HTMLAttributes<HTMLElement> & {
  children?: React.ReactNode
}) {
  if (isValidElement(children)) {
    return cloneElement(children, {
      ...props,
      ...children.props,
      style: {
        ...style,
        ...children.props.style,
      },
      className: classnames(
        className,
        children.props.className
      )
    })
  }
  if (Children.count(children) > 1) {
    Children.only(null)
  }
  return null
}

export const Box = ({ asChild, className, dividers, children, fullscreen, ...props }: BoxProps) => {
  const Component = asChild ? Slot : 'div'

  const boxProps = extractProps(props, BoxProperties.styles)

  const box = BoxSprinkles({ display: 'flex', ...boxProps.extracted })

  return (
    <Component
      className={classnames(
        'box',
        className,
        dividers && withDividers,
        FullscreenSprinkles({ fullscreen }),
        box
      )}
      {...boxProps.excluded}
    >
      {children}
    </Component>
  )
}

you can assign dynamic variables like this:

  <Box 
    justify="space-between"
    width="Big"
    style={
      assignInlineVars({
        [Tokens.spacing.Big]: '100%'
      })
    }>
    <LinkList direction="row" gap="Large" align="center">
      <a href="/me">More</a>
      <a href="/b">Blog</a>
    </LinkList>
    <LinkList direction="row" gap="Large" align="center">
      <GithubLink />
      <LinkedinLink />
    </LinkList>
  </Box>

This was just a quick example, and I think i'd probably improve in these ways:

• create a token noun whose purpose is obviously for this approach... something like "DynamicWidth" so it doesn't cause issues for gap 🤷🏻 .
• make use of the extractProps function i have to abstract away the implementation details of assignInlineVars part into the Box component. 🤔