css-shorthand-parser
v0.3.9
Published
Parse css shorthand properties.
Downloads
1,310
Maintainers
Readme
Introduction
Parse css shorthand property.
Installation
npm install css-shorthand-parser
Usage
// CommonJS
const shorthandParser = require('css-shorthand-parser')
// ESModule
import shorthandParser from 'css-shorthand-parser'
<!-- Script -->
<script src="../dist/css-shorthand-parser.min.js"></script>
shorthandParser('flex', '2')
// {
// 'flex-grow': 2,
// 'flex-shrink': 1,
// 'flex-basis': "0",
// }
shorthandParser('animation', '3s 2 slidein')
// {
// 'animation-duration': '3s',
// 'animation-delay': 'unset',
// 'animation-timing-function': 'unset',
// 'animation-iteration-count': '2',
// 'animation-direction': 'unset',
// 'animation-fill-mode': 'unset',
// 'animation-play-state': 'unset',
// 'animation-name': 'slidein'
// }
shorthandParser('animation', '3s ease-in 1s 2 reverse both paused slidein')
// {
// 'animation-duration': '3s',
// 'animation-delay': '1s',
// 'animation-timing-function': 'ease-in',
// 'animation-iteration-count': '2',
// 'animation-direction': 'reverse',
// 'animation-fill-mode': 'both',
// 'animation-play-state': 'paused',
// 'animation-name': 'slidein'
// }
shorthandParser('background', 'no-repeat center/80% url("../img/image.png")')
// {
// 'background-repeat': 'no-repeat',
// 'background-origin': 'unset',
// 'background-clip': 'unset',
// 'background-attachment': 'unset',
// 'background-image': 'url("../img/image.png")',
// 'background-position': 'center',
// 'background-size': '80%',
// 'background-color': 'unset'
// }
shorthandParser('background', 'scroll border-box center/50% auto no-repeat red')
// {
// 'background-repeat': 'no-repeat',
// 'background-origin': 'border-box',
// 'background-clip': 'border-box',
// 'background-attachment': 'scroll',
// 'background-image': 'unset',
// 'background-position': 'center',
// 'background-size': '50% auto',
// 'background-color': 'red'
// }
Supported properties
margin
padding
border
list-style
flex
animation
backgroud
font
transition