cssdom
v1.0.23
Published
Serialize css structure and stringify css dom, simplified change css code by program, and also support uglify and beautify
Downloads
135
Maintainers
Readme
cssdom — Simplified css syntax check or css dom handle
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
- {string} [options.indent = ' ']