# css

> CSS parser / stringifier

Latest version **3.0.0** (published 2020-07-02) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2020-07-02 |
| First published | 2012-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/css) |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 34.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1649 |
| Author | TJ Holowaychuk |
| Maintainers | anthonyshort, clintwood, conradz, ianstormtaylor, jonathanong, jongleberry, lydell, moox, necolas, slexaxton, tjholowaychuk |
| Keywords | css, parser, stringifier, stylesheet |

## Links

- npm: https://www.npmjs.com/package/css
- Repository: https://github.com/reworkcss/css
- Homepage: https://github.com/reworkcss/css#readme
- Issues: https://github.com/reworkcss/css/issues
- npm.io page: https://npm.io/package/css

## Dependencies (3)

- [inherits](https://npm.io/package/inherits.md) ^2.0.4
- [source-map](https://npm.io/package/source-map.md) ^0.6.1
- [source-map-resolve](https://npm.io/package/source-map-resolve.md) ^0.6.0

## 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

- 3.0.0 (latest) — 2020-07-02
- 2.2.4 — 2018-09-04
- 2.2.3 — 2018-05-02
- 2.2.2 — 2018-05-02
- 2.2.1 — 2015-06-17
- 2.2.0 — 2015-02-18
- 2.1.0 — 2014-08-05
- 2.0.0 — 2014-06-18
- 1.6.0 — 2013-12-23
- 1.4.4 — 2013-10-18
- 1.4.3 — 2013-10-16
- 1.4.2 — 2013-09-10
- 1.4.1 — 2013-07-28
- 1.4.0 — 2013-06-19
- 1.3.1 — 2013-06-02
- … 12 more at https://npm.io/package/css/versions

## README

# css

[![npm package version](https://img.shields.io/npm/v/css) ![npm downloads](https://img.shields.io/npm/dm/css)](https://www.npmjs.com/package/css)
[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/reworkcss/css/test.yml)](https://github.com/reworkcss/css/actions)
[![License](https://img.shields.io/github/license/reworkcss/css)](https://github.com/reworkcss/css)  

> [!NOTE]  
> There have not been material changes to this package in 10 years. New changes and bug fixes are not planned. In the event of concrete security issues, changes may still occur. We recommend moving to something else more modern.

> [!TIP]
> Use [@adobe/css-tools](https://github.com/adobe/css-tools) instead

CSS parser / stringifier.

## Installation

    $ npm install css

## Usage

```js
var css = require('css');
var obj = css.parse('body { font-size: 12px; }', options);
css.stringify(obj, options);
```

## API

### css.parse(code, [options])

Accepts a CSS string and returns an AST `object`.

`options`:

- silent: silently fail on parse errors.
- source: the path to the file containing `css`. Makes errors and source
  maps more helpful, by letting them know where code comes from.

### css.stringify(object, [options])

Accepts an AST `object` (as `css.parse` produces) and returns a CSS string.

`options`:

- indent: the string used to indent the output. Defaults to two spaces.
- compress: omit comments and extraneous whitespace.
- sourcemap: return a sourcemap along with the CSS output. Using the `source`
  option of `css.parse` is strongly recommended when creating a source map.
  Specify `sourcemap: 'generator'` to return the SourceMapGenerator object
  instead of serializing the source map.
- inputSourcemaps: (enabled by default, specify `false` to disable) reads any
  source maps referenced by the input files when generating the output source
  map. When enabled, file system access may be required for reading the
  referenced source maps.

### Example

```js
var ast = css.parse('body { font-size: 12px; }', { source: 'source.css' });

var css = css.stringify(ast);

var result = css.stringify(ast, { sourcemap: true });
result.code // string with CSS
result.map // source map object
```

### Errors

Errors thrown during parsing have the following properties:

- message: `String`. The full error message with the source position.
- reason: `String`. The error message without position.
- filename: `String` or `undefined`. The value of `options.source` if
  passed to `css.parse`. Otherwise `undefined`.
- line: `Integer`.
- column: `Integer`.
- source: `String`. The portion of code that couldn't be parsed.

When parsing with the `silent` option, errors are listed in the
`parsingErrors` property of the [`stylesheet`](#stylesheet) node instead
of being thrown.

If you create any errors in plugins such as in
[rework](https://github.com/reworkcss/rework), you __must__ set the same
properties for consistency.

## AST

Interactively explore the AST with <http://iamdustan.com/reworkcss_ast_explorer/>.

### Common properties

All nodes have the following properties.

#### position

Information about the position in the source string that corresponds to
the node.

`Object`:

- start: `Object`:
  - line: `Number`.
  - column: `Number`.
- end: `Object`:
  - line: `Number`.
  - column: `Number`.
- source: `String` or `undefined`. The value of `options.source` if passed to
  `css.parse`. Otherwise `undefined`.
- content: `String`. The full source string passed to `css.parse`.

The line and column numbers are 1-based: The first line is 1 and the first
column of a line is 1 (not 0).

The `position` property lets you know from which source file the node comes
from (if available), what that file contains, and what part of that file was
parsed into the node.

#### type

`String`. The possible values are the ones listed in the Types section below.

#### parent

A reference to the parent node, or `null` if the node has no parent.

### Types

The available values of `node.type` are listed below, as well as the available
properties of each node (other than the common properties listed above.)

#### stylesheet

The root node returned by `css.parse`.

- stylesheet: `Object`:
  - rules: `Array` of nodes with the types `rule`, `comment` and any of the
    at-rule types.
  - parsingErrors: `Array` of `Error`s. Errors collected during parsing when
    option `silent` is true.

#### rule

- selectors: `Array` of `String`s. The list of selectors of the rule, split
  on commas. Each selector is trimmed from whitespace and comments.
- declarations: `Array` of nodes with the types `declaration` and `comment`.

#### declaration

- property: `String`. The property name, trimmed from whitespace and
  comments. May not be empty.
- value: `String`. The value of the property, trimmed from whitespace and
  comments. Empty values are allowed.

#### comment

A rule-level or declaration-level comment. Comments inside selectors,
properties and values etc. are lost.

- comment: `String`. The part between the starting `/*` and the ending `*/`
  of the comment, including whitespace.

#### charset

The `@charset` at-rule.

- charset: `String`. The part following `@charset `.

#### custom-media

The `@custom-media` at-rule.

- name: `String`. The `--`-prefixed name.
- media: `String`. The part following the name.

#### document

The `@document` at-rule.

- document: `String`. The part following `@document `.
- vendor: `String` or `undefined`. The vendor prefix in `@document`, or
  `undefined` if there is none.
- rules: `Array` of nodes with the types `rule`, `comment` and any of the
  at-rule types.

#### font-face

The `@font-face` at-rule.

- declarations: `Array` of nodes with the types `declaration` and `comment`.

#### host

The `@host` at-rule.

- rules: `Array` of nodes with the types `rule`, `comment` and any of the
  at-rule types.

#### import

The `@import` at-rule.

- import: `String`. The part following `@import `.

#### keyframes

The `@keyframes` at-rule.

- name: `String`. The name of the keyframes rule.
- vendor: `String` or `undefined`. The vendor prefix in `@keyframes`, or
  `undefined` if there is none.
- keyframes: `Array` of nodes with the types `keyframe` and `comment`.

#### keyframe

- values: `Array` of `String`s. The list of “selectors” of the keyframe rule,
  split on commas. Each “selector” is trimmed from whitespace.
- declarations: `Array` of nodes with the types `declaration` and `comment`.

#### media

The `@media` at-rule.

- media: `String`. The part following `@media `.
- rules: `Array` of nodes with the types `rule`, `comment` and any of the
  at-rule types.

#### namespace

The `@namespace` at-rule.

- namespace: `String`. The part following `@namespace `.

#### page

The `@page` at-rule.

- selectors: `Array` of `String`s. The list of selectors of the rule, split
  on commas. Each selector is trimmed from whitespace and comments.
- declarations: `Array` of nodes with the types `declaration` and `comment`.

#### supports

The `@supports` at-rule.

- supports: `String`. The part following `@supports `.
- rules: `Array` of nodes with the types `rule`, `comment` and any of the
  at-rule types.

### Example

CSS:

```css
body {
  background: #eee;
  color: #888;
}
```

Parse tree:

```json
{
  "type": "stylesheet",
  "stylesheet": {
    "rules": [
      {
        "type": "rule",
        "selectors": [
          "body"
        ],
        "declarations": [
          {
            "type": "declaration",
            "property": "background",
            "value": "#eee",
            "position": {
              "start": {
                "line": 2,
                "column": 3
              },
              "end": {
                "line": 2,
                "column": 19
              }
            }
          },
          {
            "type": "declaration",
            "property": "color",
            "value": "#888",
            "position": {
              "start": {
                "line": 3,
                "column": 3
              },
              "end": {
                "line": 3,
                "column": 14
              }
            }
          }
        ],
        "position": {
          "start": {
            "line": 1,
            "column": 1
          },
          "end": {
            "line": 4,
            "column": 2
          }
        }
      }
    ]
  }
}
```

## License

MIT

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