Can I set dynamic props (which is not pre-determined) as raw value of styling?

[chloeelog]

I want to set the raw value to props because I cannot pre-determine every spacing CSS value to use.

With styled-components I can type width as a number, and handle CSS like this:

width: ${(props) => props.width};

But can I do this with vanilla-extract?
I review all the docs, but sprinkles and recipes cannot handle this situation so far.

It seems like assignInlineVars may help… but not confident with this idea…

thank you for reading this!

[gabro]

I personally use assignInlineVars for this, and it works well. I define the var with createVar in the css.ts file and then set it from a prop in the component.

FWIW I've seen this same pattern (custom property + using style to set it) used in styled components as well.

[airtonix]

@gabro can you please show us how you'd do this?

import { sprinkles } from './sprinkles.css.ts';
import { assignInlineVars } from '@vanilla-extract/dynamic';

const widthVariables = assignInlineVars({
   ???
})

export const container = sprinkles({
  display: 'flex',
  
  width: ???
});

and use it here

import { sprinkles } from './sprinkles.css.ts';

document.write(`
  <section class="${sprinkles({
    display: 'flex',
    width: 321
  })}">
    ...
  </section>
`);

document.write(`
  <section class="${sprinkles({
    display: 'flex',
    width: '93%'
  })}">
    ...
  </section>
`);

document.write(`
  <section class="${sprinkles({
    display: 'flex',
    width: '6svw'
  })}">
    ...
  </section>
`);

document.write(`
  <section class="${sprinkles({
    display: 'flex',
    width: { mobile: '100%', desktop: '50%'}
  })}">
    ...
  </section>
`);

Sorry but it's not obivious what you're indicating.

[gabro]

Sorry not at a computer right now, but assignInlineVars returns a value you should pass to the style attribute.
You should use it at runtime, not in the css.ts file.
In the .css.ts file you should create a CSS variable with createVar, use it in your style definition (not in sprinkles), and reference it in assignInlineVars to assign a dynamic value to it.

Basically, see the brandColor example from the documentation here https://vanilla-extract.style/documentation/packages/dynamic/

[airtonix]

@gabro so like this then? #1205 (comment)

[aspirisen]

width: ${(props) => props.width}; requires runtime semantics. But you can use assignInlineVars to set css variable.
Also, you can take a look on this VE library, maybe it will help you https://github.com/wayfair/rainbow-sprinkles

[airtonix]

Maybe I didn't use rainbow-sprinkles properly. but i found it had more cons than pros: #1205 (reply in thread)