jsonify-css

Installation

$ yarn add jsonify-css

Usage

// 1. Require the module
const jsonify = require('jsonify-css')
 
// 2. Pass it options
const toJSON = jsonify({
  root: './' // helps inline local url(...)'s as data-uri's
});
 
// 3. Parse some css text
const json = toJSON(`
  @charset 'UTF8'
  .foo { width: 480px; }
  .bar { width: 320px; color: red; }
  @media(max-width: 480px) {
    .foo { max-width: 100%; }
  }
  @keyframes fade-in {
    0%, 50%: { opacity: 0 }
    to: { opacity: 1 }
  }
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/open-sans.woff');
  }
`);
 
/* outputs the following:
{
  charset: [{
    '@charset': 'UTF-8'
  }],
  rules: [{
    '.foo': { width: '480px' }
  }, {
    '.bar': { width: '320px', color: 'red' }
  }],
  media: [{
    '@media(max-width: 480px)': {
      '.foo': { 'max-width': '100%' }
    }
  }],
  keyframes: [
    ['fade-in', {
      '0%,50%': { opacity: '0' },
      to: { opacity: '1' }
    }]
  ],
  fontFace: [{
    fontFamily: "'Open Sans'",
    fontStyle: 'normal',
    fontWeight: '400',
    src: "url(data:application/x-font-woff;charset=utf-8;base64,...)"
  }]
} */

License

MIT License