css-shorthand-parser

0.3.9 • Public • Published

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

/css-shorthand-parser/

    Package Sidebar

    Install

    npm i css-shorthand-parser

    Weekly Downloads

    82

    Version

    0.3.9

    License

    MIT

    Unpacked Size

    63.3 kB

    Total Files

    38

    Last publish

    Collaborators

    • xnorain001