@shopify/css-utilities
TypeScript icon, indicating that this package has built-in type declarations

3.2.0 • Public • Published

@shopify/css-utilities

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

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} />;
}

Readme

Keywords

none

Package Sidebar

Install

npm i @shopify/css-utilities

Weekly Downloads

24,219

Version

3.2.0

License

MIT

Unpacked Size

5.46 kB

Total Files

15

Last publish

Collaborators

  • jaimie.rockburn
  • blittle
  • shopify-admin
  • maryharte
  • crisfmb
  • pmoloney89
  • netlohan
  • st999999
  • justin-irl
  • megswim
  • wcandillon
  • nathanpjf
  • shopify-dep
  • goodforonefare
  • lemonmade
  • vsumner
  • wizardlyhel
  • antoine.grant
  • tsov
  • andyw8-shopify
  • henrytao
  • hannachen
  • vividviolet
  • bpscott