CSS Utils

An optional package providing utility functions that make it easier to work with CSS in TypeScript.

bash

npm install @vanilla-extract/css-utils

This package is not limited to vanilla-extract—it can be used with any CSS-in-JS library.

calc

Streamlines the creation of CSS calc expressions.

Simple expressions

tsx

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

const styles = {
  height: calc.multiply('var(--grid-unit)', 2)
};

The following functions are available.

calc.add
calc.subtract
calc.multiply
calc.divide
calc.negate

Chainable expressions

The calc export is also a function, providing a chainable API for complex calc expressions.

When using expression chains it is necessary to call toString() to return the constructed expression as the final value.

tsx

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

const styles = {
  marginTop: calc('var(--space-large)')
    .divide(2)
    .negate()
    .toString()
};