@shopify/css-utilities

A set of CSS styling-related utilities.

Installation

yarn add @shopify/css-utilities

Both classNames and variationName are helper functions that are use to generate class names.

classNames

Is a straight export of classnames. It returns a classNames string that are conditionally joined together.

variationName

Is a utility that returns a camelCase string combining the name and value passed in.

Usage

Given this CSS file for a Square React component:

.Square {
  color: transparent;
}

.sizeSmall {
  height: 20px
  width: 20px
}

.sizeLarge {
  height: 44px
  width: 44px
}

.colorWhite {
  background-color: white;
}

.colorBlack {
  background-color: black;
}

The following can be use to generate different class names for the component based on its props:

type Size = 'small' | 'large';
type Color = 'white' | 'black';

interface Props {
  size: Size;
  color: Color;
}

function Square({size, color}: Props) {
  const className = classNames(
    styles.Square,
    styles[variationName<Color>('color', color)],
    styles[variationName<Size>('size', size)],
  );

  return <div className={className} />;
}