how to use vanilla-extract for `style` attribute?

Question

Have a following sample of code which I want migrate to vanilla-extract, my main question is how to generate styles for style attribute in this case?

// in ColorToken.tsx

function ColorToken(props: { name: string; value?: string }) {
  return (
    <div
      style={{
        backgroundColor: `var(${props.value})`,
        border: 'solid 1px var(--color-border-neutral)',
        borderRadius: '100%',
        width: '70px',
        height: '70px',
      }}
    >
      {props.name}
    </div>
  );
}

I tried two approaches:

First

// ColorToken.css.ts

import { style } from '@vanilla-extract/css';

export function colorSelector(bgColor: string) {
  return style({
    backgroundColor: bgColor,
    border: 'solid 1px var(--color-border-neutral)',
    borderRadius: '100%',
    width: '70px',
    height: '70px',
  });
}

// ColorToken.tsx

import * as selectors from './Colors.css';

function ColorToken(props: { name: string; value?: string }) {
  const color: string = // dynamically piking color based on props.
  return (
    <div className={selectors.colorSelector(color)}>

Error / issue:

error - ./pages/styles/tokens/Colors.css.ts
Error: Invalid exports.

You can only export plain objects, arrays, strings, numbers and null/undefined.
    at Array.map (<anonymous>)

---

Second

// ColorToken.css.ts

export const colorSelector = {
  border: 'solid 1px var(--color-border-neutral)',
  borderRadius: '100%',
  width: '70px',
  height: '70px',
};

// ColorToken.tsx

import { style } from '@vanilla-extract/css';

import * as selectors from './Colors.css';

function ColorToken(props: { name: string; value?: string }) {
  const color: string = // dynamically piking color based on props.
  return (
    <div className={style({ ...selectors.colorSelector, backgroundColor: color })}>

Note: here I'm using style function because I think VE might apply some extra things (eg add vendor prefixes, optimizations etc).

Error / issue:

Unhandled Runtime Error
Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/setup

---

Note: using VE via NextJS setup .

Answer 1

The key to keep in mind here is that vanilla works at build time. It outputs a plain CSS stylesheet, so trying to substitute values in at runtime isn't what it's built for.

If you have a clearly defined set of background colours that you want to use, you could use a recipe , or you could start to build up some atomic CSS withsprinkles .

If it needs to be truly dynamic, impossible to know at build time, you can take advantage of CSS variables using vanilla's dynamic package.