Dynamic

A tiny (< 1kB compressed) runtime for performing dynamic updates to scoped theme variables.

bash

npm install @vanilla-extract/dynamic

assignInlineVars

Allows variables to be assigned dynamically that have been created using vanilla-extract APIs, e.g. createVar, createTheme, etc.

As these APIs produce variable references that contain the CSS var function, e.g. var(--brandColor__8uideo0), it is necessary to remove the wrapping function when setting its value.

Variables with a value of null or undefined will be omitted from the resulting inline style.

🧠 null and undefined values can only be passed to assignInlineVars if a theme contract is not provided

tsx

// app.tsx
import { assignInlineVars } from '@vanilla-extract/dynamic';
import {
  container,
  brandColor,
  textColor
} from './styles.css.ts';

// If `tone` is `undefined`, the following inline style becomes:
// { '--brandColor__8uideo0': 'pink' }

const MyComponent = ({ tone }: { tone?: critical }) => (
  <section
    className={container}
    style={assignInlineVars({
      [brandColor]: 'pink',
      [textColor]: tone === 'critical' ? 'red' : null
    })}
  >
    ...
  </section>
);

// styles.css.ts
import { createVar, style } from '@vanilla-extract/css';

export const brandColor = createVar();
export const textColor = createVar();

export const container = style({
  background: brandColor,
  color: textColor
});

Even though this function returns an object of inline styles, it implements the toString method, returning a valid style attribute value so that it can be used in string templates.

// app.ts

import { assignInlineVars } from '@vanilla-extract/dynamic';
import { container, brandColor } from './styles.css.ts';

// The following inline style becomes:
// "--brandColor__8uideo0: pink;"

document.write(`
  <section
    class="${container}"
    style="${assignInlineVars({ [brandColor]: 'pink' })}"
  >
    ...
  </section>
`);

Assigning theme contracts dynamically

Theme contracts can also be assigned dynamically by passing one as the first argument. All variables must be assigned or it’s a type error.

This API makes the concept of dynamic theming much simpler.

tsx

// app.tsx
import { assignInlineVars } from '@vanilla-extract/dynamic';
import { container, themeVars } from './theme.css.ts';

interface ContainerProps {
  brandColor: string;
  fontFamily: string;
}
const Container = ({
  brandColor,
  fontFamily
}: ContainerProps) => (
  <section
    className={container}
    style={assignInlineVars(themeVars, {
      color: { brand: brandColor },
      font: { body: fontFamily }
    })}
  >
    ...
  </section>
);

const App = () => (
  <Container brandColor="pink" fontFamily="Arial">
    ...
  </Container>
);

// theme.css.ts
import {
  createThemeContract,
  style
} from '@vanilla-extract/css';

export const themeVars = createThemeContract({
  color: {
    brand: null
  },
  font: {
    body: null
  }
});

export const container = style({
  background: themeVars.color.brand,
  fontFamily: themeVars.font.body
});

setElementVars

An imperative API, allowing variables created using vanilla-extract APIs, e.g. createVar, createTheme, etc, to be assigned dynamically on a DOM element.

Variables with a value of null or undefined will not be assigned a value.

🧠 null and undefined values can only be passed to setElementVars if a theme contract is not provided

// app.ts

import { setElementVars } from '@vanilla-extract/dynamic';
import { brandColor, textColor } from './styles.css.ts';

const el = document.getElementById('myElement');

setElementVars(el, {
  [brandColor]: 'pink',
  [textColor]: null
});

// styles.css.ts
import { createVar, style } from '@vanilla-extract/css';

export const brandColor = createVar();
export const textColor = createVar();

Setting theme contracts dynamically

Theme contracts can also be set dynamically by passing one as the second argument. All variables must be assigned or it’s a type error.

// app.ts

import { setElementVars } from '@vanilla-extract/dynamic';
import { themeVars } from './theme.css.ts';

const el = document.getElementById('myElement');

setElementVars(el, themeVars, {
  color: { brand: 'pink' },
  font: { body: 'Arial' }
});

// theme.css.ts
import { createThemeContract } from '@vanilla-extract/css';

export const themeVars = createThemeContract({
  color: {
    brand: null
  },
  font: {
    body: null
  }
});