Wondering what’s next for npm?Check out our public roadmap! »

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

    1.1.4 • 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:

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

    Keywords

    none

    Install

    npm i @shopify/css-utilities

    DownloadsWeekly Downloads

    67,268

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    7.66 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar