A set of CSS styling-related utilities

Usage no npm install needed!

<script type="module">
  import shopifyCssUtilities from 'https://cdn.skypack.dev/@shopify/css-utilities';



Build Status Build Status License: MIT npm version npm bundle size (minified + gzip)

A set of CSS styling-related utilities.


$ yarn add @shopify/css-utilities

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


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


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


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:

interface Props {
  size: 'small' | 'large';
  color: 'white' | 'black';

function Square({size, color}: Props) {
  const className = classNames(
    styles[variationName('color', color)],
    styles[variationName('size', size)],

  return <div className={className} />;