@shopify/css-utilities
A set of CSS styling-related utilities
Last updated 5 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.7                                ...           latest (5 days ago)
  • 1.0.0-sknext-beta.2                                ...           next (3 months ago)

14 Versions

  • 1.0.7                                ...           5 days ago
  • 1.0.0-sknext-beta.2                                ...           3 months ago
  • 1.0.0-sknext-beta.1                                ...           3 months ago
  • 1.0.6-sknext-beta.9                                ...           3 months ago
  • 0.0.8-sknext-beta.8                                ...           3 months ago
  • 0.0.2-sknext-beta.2                                ...           3 months ago
  • 0.0.1-sknext-beta.1                                ...           3 months ago
  • 1.0.6                                ...           4 months ago
  • 1.0.5                                ...           9 months ago
  • 1.0.4                                ...           10 months ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago

Copyright 2014 - 2016 © taobao.org |