@shopify/css-utilities
A set of css styling related utilities.
Last updated 15 days ago by shopify-dep .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @shopify/css-utilities 
SYNC missed versions from official npm registry.

@shopify/css-utilities

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:

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

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

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

Current Tags

  • 1.0.4                                ...           latest (15 days ago)

5 Versions

  • 1.0.4                                ...           15 days ago
  • 1.0.3                                ...           2 months ago
  • 1.0.2                                ...           2 months ago
  • 1.0.1                                ...           4 months ago
  • 1.0.0                                ...           8 months ago
Downloads
Today 0
This Week 6
This Month 32
Last Day 0
Last Week 3
Last Month 11
Dependencies (2)
Dev Dependencies (0)
None

Copyright 2014 - 2016 © taobao.org |