index.md

JSS-EXPAND

1. Features

   1. 'space-separated' properties writing
   2. 'space-separated' properties inside arrays
   3. Writing properties in expanded way
   4. Writing properties in expanded way inside arrays
   5. Writing expanded properties inside fallbacks
   6. jss-camel-case integration

2. Properties

   1. padding
   2. margin
   3. background
   4. border
   5. border-top
   6. border-right
   7. border-bottom
   8. border-left
   9. outline
   10. list-style
   11. transition
   12. animation
   13. box-shadow
   14. text-shadow
   15. flex

Features

1. writing space-separated properties

   Simplification in writing 'space-separated' properties. Now, in jss for defining padding we must write padding: [[ 20, 30 ]] Using jss-expand you can write properties with one bracket:

   foo: {
     padding: [ 5, 10, 5 ]
   }

   and the output will be

   foo { padding: 5 10 5; }

   Properties, that can be written with short syntax:

   • margin
   • padding
   • border-radius
   • background-size
   • background-position

2. space-separated properties inside arrays

   Simplified syntax for writing more complex constructions with arrays. In pure jss, if you want to write multi-values for e.g. transition you must write:

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

   With jss-expand, syntax is simplified and you can write:

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

3. Writing properties in expanded way

   You don't need to keep in mind writing order of 'partial' properties, plugin do it for you. So, you can write:

   border: {
     color: '#f00', // You can write properties in any order
     width: '1px',
     style: 'solid'
   }

   and CSS output will be:

   border: 1px solid #f00;

   Properties that supports 'expanded' syntax:

   • padding
   • margin
   • background
   • border
   • border-top
   • border-right
   • border-bottom
   • border-left
   • outline
   • list-style
   • transition
   • animation
   • box-shadow
   • text-shadow
   • flex

   For more information see properties section

4. Writing properties in expanded way inside arrays

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

   and CSS output will be:

   transition: opacity 200ms, width 300ms;

5. Writing expanded properties inside fallbacks

   (more about jss fallback you can find here (section 'Fallbacks')):

   foo: {
     background: {
       image: 'linear-gradient(red, green)'
     },
     fallbacks: {
       background: {
         color: 'red',
         repeat: 'no-repeat',
         position: [ 0 , 0 ]
       }
     }
   }

   and CSS output will be:

   foo {
     background: red no-repeat 0 0;
     background: linear-gradient(red, green);
   }

6. jss-camel-case integration

   Plugin have compatibility with jss-camel-case plugin. So you can write camelCased partial properties inside expanded syntax:

   transition: {
     timingFunction: 'linear', // Camel cased property
     delay: '300ms',
     property: 'opacity',
     duration: '200ms'
   }

   and CSS output will be:

   transition: opacity 200ms linear 300ms;

Properties

Here are listed all CSS properties, that can be written in expanded way with all 'sub-properties'. Values of those 'sub-properties' are default values. So, if you don't set them - this value will be added in output. So if you write:

padding: {
  top: '10px' // Other default values are 0
}

The output will be:

padding: 10px 0 0 0;

If default value is NULL - no default value will be written. For better understanding what any 'sub-property' mean - all 'sub-properties' are 'property' and 'sub-property' names joined together e.g.:

padding: {
  top: 0
}
// Is 'padding' + 'top' = 'padding-top'

1. padding

   padding: {
     top: 0,
     right: 0,
     bottom: 0,
     left: 0
   }

2. margin

   margin: {
     top: 0,
     right: 0,
     bottom: 0,
     left: 0
   }

3. background

   background: {
     attachment: null,
     color: null,
     image: null,
     position: null, // Can be written without double arrays, like [0, 0]
     repeat: null
   }

4. border

   border: {
     width: null,
     style: null,
     color: null
   }

5. border-top

   'border-top': {
     width: null,
     style: null,
     color: null
   }

6. border-right

   'border-right': {
     width: null,
     style: null,
     color: null
   }

7. border-bottom

   'border-bottom': {
     width: null,
     style: null,
     color: null
   }

8. border-left

   'border-left': {
     width: null,
     style: null,
     color: null
   }

9. outline

   outline: {
     width: null,
     style: null,
     color: null
   }

10. list-style

    'list-style': {
      type: null,
      position: null,
      image: null
    }

11. transition

    transition: {
      property: null,
      duration: null,
      'timing-function': null,
      timingFunction: null, // You can write 'camelCased' property
      delay: null
    }

12. animation

    animation: {
      name: null,
      duration: null,
      'timing-function': null,
      timingFunction: null, // You can write 'camelCased' property
      delay: null,
      'iteration-count': null,
      iterationCount: null, // You can write 'camelCased' property
      direction: null,
      'fill-mode': null,
      fillMode: null, // You can write 'camelCased' property
      'play-state': null,
      playState: null // You can write 'camelCased' property
    }

13. box-shadow

    'box-shadow': {
      x: 0, // X offset for shadow
      y: 0, // Y offset for shadow
      blur: null,
      spread: null,
      color: null,
      inset: null // If you want to add inset you need to write "inset: 'inset'"
    }

14. text-shadow

    'text-shadow': {
      x: 0, // X offset for shadow
      y: 0, // Y offset for shadow
      blur: null,
      color: null
    }

15. flex

    'flex': {
      grow: null,
      shrink: null,
      basis: null
    }