vass-david/jss-expand

JSS plugin that adds possibility to write styles in more expanded way

Make sure you read how to use plugins in general.

Usage example

import jss from 'jss'
import jssExpand from 'jss-expand'

jss.use(jssExpand())

let sheet = jss.createStyleSheet({
  container: {
    padding: ['20px', '10px'],
    background: {
        color: '#000',
        image: 'url(image.jpg)',
        position: [0, 0],
        repeat: 'no-repeat'
    },
    transition: [{
        property: 'opacity',
        duration: '200ms'
      }, {
        property: 'width',
        duration: '300ms'
      }
    ]
  }
})
console.log(sheet.toString())

.jss-0-0 {
  padding: 20px 10px;
  background: #000 url(image.jpg) 0 0 no-repeat;
  transition: opacity 200ms, width 300ms;
}

Features

One syntax for arrays. This plugin simplifies writing values as array of numbers for margin, padding, border-radius, background-position, transform, transition, animation, box-shadow, text-shadow:

padding: [20, 10],
border-radius: ['50%', '10%'],
transition: [['opacity', '200ms'], ['width', '300ms']]

instead of comma and space separated syntax from jss:

padding: [[20, 10]],
border-radius: [['50%', '10%']],
transition: [[['opacity', '200ms']], [['width', '300ms']]]

Writing values as object for padding, margin, background, border, border-top, border-bottom, border-left, border-right, outline, list-style, transition, animation, box-shadow, text-shadow, flex

border: {
  width: '1px',
  style: 'solid',
  color: '#f00'
}

will be converted to

border: 1px solid #f00;

Writing values as array of objects

transition: [{
    property: 'opacity',
    duration: '200ms'
  }, {
    property: 'width',
    duration: '300ms'
  }
]

will be converted to

transition: opacity 200ms, width 300ms;

More expanded documentation is available here

Order does matter

This plugin MUST BE used AFTER jss-camel-case and jss-extend and jss-default-unit and jss-nested

Known issues

This plugin doesn't support font property written in expanded way. This is because plugin must have maximum performance, and all exceptions like in font way of writing (joining of font-size and line-height joining with \ symbol) is forbidden.

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

vass-david / jss-expand