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.

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;

2. Array notation for properties like margin, padding and others.

   padding: [20, 10],
   borderRadius: ['50%', '10%']

3. Expanded arrays for multi value properties.

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

   will be converted to

   transition: opacity 200ms, width 300ms;

4. 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

5.3.0 / 2018-05-05

• Produce array based syntax cssinjs/jss#606
• Added CSS Grid support

5.2.0 / 2018-05-05

• Support array syntax for border width, style and color

5.1.0 / 2017-12-16

• Remove isObservable checks, no need any more.

5.0.1 / 2017-11-02

• Support border-image cssinjs/jss#621

5.0.0 / 2017-09-30

• Support JSS 9

4.0.1 / 2017-08-17

• Support box-shadow spread property without blur one cssinjs/jss#563

4.0.0 / 2017-06-20

• Support jss 8

3.0.1 / 2017-04-18

• Add webpack to the devDeps

3.0.0 / 2017-04-10

• Support jss 7.0

2.1.0 / 2017-02-26

• Added support of all flexbox and align related properties.

2.0.3 / 2016-12-31

• Support empty arrays cssinjs/jss#398

2.0.2 / 2016-12-21

• Support custom props inside fallbacks.
• Always generate background-image from background: {image}.

2.0.1 / 2016-12-09

• update to jss 6.0
• docs

1.6.1 / 2016-11-24

• Add more supported space separated properties

1.6.0 / 2016-11-12

• Fix benchmark test
• Add possibility to write custom properties

1.5.2 / 2016-10-11

• fix build name

1.5.1 / 2016-09-30

• refactoring
• tests integration into jss repo

1.5.0 / 2016-09-06

• Migrate from jQunit to mocha

1.4.2 / 2016-08-07

• Integration with jss-camel-case

1.4.1 / 2016-08-07

• Minor code updates

1.4.0 / 2016-08-06

• Performance optimizations

1.3.0 / 2016-07-31

• Add benchmarks

1.2.0 / 2016-07-11

• Update dependencies
• Updated code to match JSS 5.0.0 release (add handling of new fallback feature)
• Add tests

1.1.0 / 2016-07-07

• Renamed plugin
• Write additional tests
• Add new fallbacks handling

1.0.0 / 2016-06-15

• Stable version