CSS Shorthand expander/combiner
npm install shortcssCSS Shorthand expander/combiner.
A simple way to check shorthand CSS properties, which properties they expand to, combine several properties into shorthand, etc.
Atm this one uses very handy module with CSS shorthand list css-shorthand-properties.
Available on npm as shortcss.
``
npm install shortcss
#### _boolean_ isShorthand (_string_ property)
* Checks a string to be an expandable shorthand for several CSS properties
* Parameters:
* property _(string)_ CSS property to check.
* Returns: _boolean_ whether or not the passed property is a shorthand.
#### _Array|Object_ expand (_string_ property, [_string_ value], [_boolean_ recurse])
* Takes a CSS shorthand property and returns a list of longhand properties
* Parameters:
* property _(string)_ Shorthand property to expand.value
* _(string)_ Split also a value to expanded properties. In that way the function will return an object.recurse
* _(boolean – optional, default false)_ If true, each longhand property will also be run through expand(). This is only useful for the border property.
* Returns: _Array|Object_ with a list of longhand properties that the given property expands to. If the property is not a shorthand, the array contains only the original property.
`js
var SC = require('shortcss');
// Standard usage
SC.expand('list-style');
// ['list-style-type', 'list-style-position', 'list-style-image']
// Non-shorthand properties return themselves in an array
SC.expand('color');
// ['color']
// Using 'border' in normal mode...
SC.expand('border');
/*
[
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style',
'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
]
*/
// ...the border properties are also shorthands
SC.expand('border-width');
// ['border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width']
// Using 'border' without recursion returns
SC.expand('border', false);
// ['border-width', 'border-style', 'border-color']
// Expanding border with a value
SC.expand('border', '1px solid red');
/*
{
'border-top-width': '1px',
'border-right-width': '1px',
'border-bottom-width': '1px',
'border-left-width': '1px',
'border-top-style': 'solid',
'border-right-style': 'solid',
'border-bottom-style': 'solid',
'border-left-style': 'solid',
'border-top-color': 'red',
'border-right-color': 'red',
'border-bottom-color': 'red',
'border-left-color': 'red'
}
*/
// ... and the same with recurse flag set to false
SC.expand('border', '1px solid red', false);
/*
{
'border-width': '1px',
'border-style': 'solid',
'border-color': 'red'
}
*/
``
MIT: License