CODEWITHSUNDEEP
reactjsnext.jscss-in-jsvanilla-extract
Anton Dozortsev
Anton Dozortsev

Reputation: 4902

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

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 (e.g 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.

Upvotes: 0

Views: 4066

Answers (1)

ben
ben

Reputation: 361

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 with sprinkles.

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.

Upvotes: 2

Related Questions