# cssdom

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

Latest version **1.0.23** (published 2019-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install cssdom
pnpm add cssdom
yarn add cssdom
bun add cssdom
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.23 |
| Published | 2019-11-08 |
| First published | 2015-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 27.5 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 14 |
| Author | douzi |
| Maintainers | douzi |
| Keywords | css, dom, css handle, syntax, validate, uglify, beautify |

## Links

- npm: https://www.npmjs.com/package/cssdom
- Repository: https://github.com/douzi8/cssdom
- Issues: https://github.com/douzi8/cssdom/issues
- npm.io page: https://npm.io/package/cssdom

## Dependencies (1)

- [utils-extend](https://npm.io/package/utils-extend.md) ^1.0.7

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.23 (latest) — 2019-11-08
- 1.0.22 — 2018-07-23
- 1.0.21 — 2017-12-07
- 1.0.20 — 2015-05-14
- 1.0.19 — 2015-05-12
- 1.0.17 — 2015-04-25
- 1.0.16 — 2015-04-25
- 1.0.15 — 2015-04-20
- 1.0.14 — 2015-04-18
- 1.0.13 — 2015-04-16
- 1.0.12 — 2015-04-16
- 1.0.11 — 2015-04-16
- 1.0.10 — 2015-04-15
- 1.0.8 — 2015-04-14
- 1.0.7 — 2015-04-14
- … 7 more at https://npm.io/package/cssdom/versions

## README

# cssdom — Simplified css syntax check or css dom handle
[![NPM](https://nodei.co/npm/cssdom.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/cssdom/)
```js
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/](http://douzi8.github.io/cssdom/)

## API
### CssDom(str)
* {string} ``str`` required
```js
var css = new CssDom('a{}');
```

### css.dom
The structure of css dom, it's an array with object item, list item type
* ``charset``
```js
// @charset 'utf8';

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

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

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

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

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

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

{
  type: 'comment',
  value: '1'
}
```
### css.css(dom, css)
Change css declarations
* {object} ``dom`` required
* {object} ``css`` required
```js
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``
```js
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
```js
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
```js
css.unshift({
  type: 'comment',
  value: 'banner'
});
```

### css.push(dom)
* {object} ``dom`` required  
Push a new css dom
```js
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 ``/*!``
```css
/*!
 * keep this comment
 */
```
```js
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

---
_Source: https://npm.io/package/cssdom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._