328 lines
7.6 KiB
Markdown
328 lines
7.6 KiB
Markdown
|
# @adobe/css-tools
|
||
|
|
||
|
> This is a fork of the npm css package due to low maintenance
|
||
|
|
||
|
CSS parser / stringifier.
|
||
|
|
||
|
## Installation
|
||
|
|
||
|
$ npm install @adobe/css-tools
|
||
|
|
||
|
## Usage
|
||
|
|
||
|
```js
|
||
|
import { parse, stringify } from '@adobe/css-tools'
|
||
|
let obj = parse('body { font-size: 12px; }', options);
|
||
|
let css = stringify(obj, options);
|
||
|
```
|
||
|
|
||
|
## API
|
||
|
|
||
|
### 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.
|
||
|
|
||
|
### 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.
|
||
|
|
||
|
### Example
|
||
|
|
||
|
```js
|
||
|
var ast = parse('body { font-size: 12px; }', { source: 'source.css' });
|
||
|
|
||
|
var css = stringify(ast);
|
||
|
```
|
||
|
|
||
|
### 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.
|
||
|
|
||
|
### container
|
||
|
|
||
|
The `@container` at-rule.
|
||
|
|
||
|
- conatiner: `String`. The part following `@container `.
|
||
|
- rules: `Array` of nodes with the types `rule`, `comment` and any of the
|
||
|
at-rule types.
|
||
|
|
||
|
### layer
|
||
|
|
||
|
The `@layer` at-rule.
|
||
|
|
||
|
- layer: `String`. The part following `@layer `.
|
||
|
- rules: `Array` of nodes with the types `rule`, `comment` and any of the
|
||
|
at-rule types. This may be null, if the rule did not contain any.
|
||
|
|
||
|
### starting-style
|
||
|
|
||
|
The `@starting-style` at-rule.
|
||
|
|
||
|
- 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
|