cssdom

Serialize css structure and stringify css dom, simplified change css code by program, and also support uglify and beautify

Usage no npm install needed!

<script type="module">
  import cssdom from 'https://cdn.skypack.dev/cssdom';
</script>

README

cssdom — Simplified css syntax check or css dom handle

NPM

var CssDom = require('cssdom');

install

npm install cssdom --save

test

npm test

browserify

Exports cssdom to front

browserify cssdom.js -s CssDom > cssdom.front.js

online demo

http://douzi8.github.io/cssdom/

API

CssDom(str)

  • {string} str required
var css = new CssDom('a{}');

css.dom

The structure of css dom, it's an array with object item, list item type

  • charset
// @charset 'utf8';

{
  type: 'charset',
  value: 'utf8'
}
  • import
// @import 'custom.css';

{
  type: 'import',
  value: "'custom.css'"
}
  • rule
// .a { color: #333;}

{
  type: 'rule',
  selectors: ['.a'],
  declarations: {
    color: '#333'
  }
}
  • keyframes
// @-webkit-keyframes progress-bar-stripes{}

{
  type: 'keyframes',
  vendor: '-webkit-',
  value: 'progress-bar-stripes',
  rules: [
    // It's rule type
    ...
  ]
}
  • document
{
  type: 'document',
  vendor: '-moz-',
  value: 'url-prefix()',
  rules: [
    // It's rule type
    ...
  ]
}
  • media
// @media print {body { font-size: 10pt }}

{
  type: 'media',
  value: 'print',
  rules: [
    // It's rule type
    ...
  ]
}
  • supports
// @supports (display: flex) {}

{
  type: 'supports',
  value: '(display: flex)',
  rules: [
    // It's rule type
    ...
  ]
}
  • comment
// /*1*/

{
  type: 'comment',
  value: '1'
}

css.css(dom, css)

Change css declarations

  • {object} dom required
  • {object} css required
css.css(css.dom[0], {
  'color': 'red'
});

css.selector(selector, css)

Change css by selector, if css is empty, it will return css dom

  • {string} selector required
  • {object} css
css.selector('.cls', {
  width: '200px',
  height: function(value, dom) {
    // value -> origin value
    // dom -> current css dom
    return value;
  },
  // delete color key
  color: ''
});

css.selector('.cls');

css.property(property, css)

Change css by property

  • {string} selector required
  • {object} css required
css.property('background', {
  background: function(value) {
    return value;
  }
});

var child = css.property('background');

child.forEach(function(dom) {
  css.css(dom, {
    background: function(value) {
      return value.replce(/url\(('[^']*'|"[^"]*"|[^)]*)\)/, function(src) {
        return src;
      });
    }
  });
});

css.unshift(dom)

  • {object} dom required
    Insert a new css dom to the top of css code
css.unshift({
  type: 'comment',
  value: 'banner'
});

css.push(dom)

  • {object} dom required
    Push a new css dom
css.push({
  type: 'rule',
  selectors: ['a'],
  declarations: {
    color: '#333',
    'line-height': '20px'
  }
});

css.validateDom(dom)

  • {object|array} dom required
    Validate the css dom, it's useful for handle css dom by youself
css.validateDom({});
css.validateDom([{}]);

css.stringify()

Uglify css code.
it will remove all comment, if you want to keep some comment, your comments will start with /*!

/*!
 * keep this comment
 */
css.stringify();

css.beautify(options)

Beautify css code

  • {object} [options]
    • {string} [options.indent = ' ']
      Code indent
    • {boolean} [options.separateRule = false]
      Separate rules by new lines, default is a blank line