jss-expand

    4.0.1 • Public • Published

    JSS plugin that gives you a better syntax than CSS

    Can you remember what each of those values mean box-shadow: 2px 2px 2px 1px gold; and in which order they have to be used? Me neither. CSS values are sometimes cryptic. This plugin makes them easy to read and to remember.

    Make sure you read how to use plugins in general and read full documentation.

    Gitter

    Example

    const styles = {
      container: {
        padding: [20, 10],
        background: {
          color: 'green',
          image: 'url(image.jpg)',
          position: [0, 0],
          repeat: 'no-repeat'
        },
        boxShadow: {x: 10, y: 10, blur: 5, spread: 5, color: 'black'},
        transition: [
          {
            property: 'opacity',
            duration: '200ms'
          },
          {
            property: 'width',
            duration: '300ms'
          }
        ]
      }
    }

    Compiles to:

    .container-3kjh2 {
      padding: 20px 10px;
      background: green url(image.jpg) 0 0 no-repeat;
      box-shadow: 10px 10px 5px 5px black;
      transition: opacity 200ms, width 300ms;
    }

    Features

    1. Expanded object notation for all properties.
    border: {
      width: '1px',
      style: 'solid',
      color: 'red'
    }

    will be converted to

    border: 1px solid red;
    1. Array notation for properties like margin, padding and others.
    padding: [20, 10],
    borderRadius: ['50%', '10%']
    1. Expanded arrays for multi value properties.
    transition: [{
      property: 'opacity',
      duration: '200ms'
    }, {
      property: 'width',
      duration: '300ms'
    }]

    will be converted to

    transition: opacity 200ms, width 300ms;
    1. Default unit support.

    Now, using expanded arrays and objects syntax, you don't need to use quotes for the most numeric values! This is achieved in combination with jss-default-unit plugin.

    Issues

    File a bug against cssinjs/jss prefixed with [jss-expand].

    Run tests

    npm i
    npm run test

    Run benchmark tests

    npm i
    npm run bench

    Licence

    MIT

    Install

    npm i jss-expand@4.0.1

    Version

    4.0.1

    License

    MIT

    Last publish

    Collaborators

    • kof