source: trip-planner-front/node_modules/css-tree/README.md@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 6.0 KB
Line 
1<img align="right" width="111" height="111"
2 alt="CSSTree logo"
3 src="https://cloud.githubusercontent.com/assets/270491/19243723/6f9136c6-8f21-11e6-82ac-eeeee4c6c452.png"/>
4
5# CSSTree
6
7[![NPM version](https://img.shields.io/npm/v/css-tree.svg)](https://www.npmjs.com/package/css-tree)
8[![Build Status](https://travis-ci.org/csstree/csstree.svg?branch=master)](https://travis-ci.org/csstree/csstree)
9[![Coverage Status](https://coveralls.io/repos/github/csstree/csstree/badge.svg?branch=master)](https://coveralls.io/github/csstree/csstree?branch=master)
10[![NPM Downloads](https://img.shields.io/npm/dm/css-tree.svg)](https://www.npmjs.com/package/css-tree)
11[![Twitter](https://img.shields.io/badge/Twitter-@csstree-blue.svg)](https://twitter.com/csstree)
12
13CSSTree is a tool set for CSS: [fast](https://github.com/postcss/benchmark) detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and matching) based on specs and browser implementations. The main goal is to be efficient and W3C specs compliant, with focus on CSS analyzing and source-to-source transforming tasks.
14
15> NOTE: The library isn't in final shape and needs further improvements (e.g. AST format and API are subjects to change in next major versions). However it's stable enough and used by projects like [CSSO](https://github.com/css/csso) (CSS minifier) and [SVGO](https://github.com/svg/svgo) (SVG optimizer) in production.
16
17## Features
18
19- **Detailed parsing with an adjustable level of detail**
20
21 By default CSSTree parses CSS as detailed as possible, i.e. each single logical part is representing with its own AST node (see [AST format](docs/ast.md) for all possible node types). The parsing detail level can be changed through [parser options](docs/parsing.md#parsesource-options), for example, you can disable parsing of selectors or declaration values for component parts.
22
23- **Tolerant to errors by design**
24
25 Parser behaves as [spec says](https://www.w3.org/TR/css-syntax-3/#error-handling): "When errors occur in CSS, the parser attempts to recover gracefully, throwing away only the minimum amount of content before returning to parsing as normal". The only thing the parser departs from the specification is that it doesn't throw away bad content, but wraps it in a special node type (`Raw`) that allows processing it later.
26
27- **Fast and efficient**
28
29 CSSTree is created with focus on performance and effective memory consumption. Therefore it's [one of the fastest CSS parsers](https://github.com/postcss/benchmark) at the moment.
30
31- **Syntax validation**
32
33 The build-in lexer can test CSS against syntaxes defined by W3C. CSSTree uses [mdn/data](https://github.com/mdn/data/) as a basis for lexer's dictionaries and extends it with vendor specific and legacy syntaxes. Lexer can only check the declaration values currently, but this feature will be extended to other parts of the CSS in the future.
34
35## Documentation
36
37- [AST format](docs/ast.md)
38- [Parsing CSS → AST](docs/parsing.md)
39 - [parse(source[, options])](docs/parsing.md#parsesource-options)
40- [Serialization AST → CSS](docs/generate.md)
41 - [generate(ast[, options])](docs/generate.md#generateast-options)
42- [AST traversal](docs/traversal.md)
43 - [walk(ast, options)](docs/traversal.md#walkast-options)
44 - [find(ast, fn)](docs/traversal.md#findast-fn)
45 - [findLast(ast, fn)](docs/traversal.md#findlastast-fn)
46 - [findAll(ast, fn)](docs/traversal.md#findallast-fn)
47- [Utils for AST](docs/utils.md)
48 - [property(name)](docs/utils.md#propertyname)
49 - [keyword(name)](docs/utils.md#keywordname)
50 - [clone(ast)](docs/utils.md#cloneast)
51 - [fromPlainObject(object)](docs/utils.md#fromplainobjectobject)
52 - [toPlainObject(ast)](docs/utils.md#toplainobjectast)
53- [Value Definition Syntax](docs/definition-syntax.md)
54 - [parse(source)](docs/definition-syntax.md#parsesource)
55 - [walk(node, options, context)](docs/definition-syntax.md#walknode-options-context)
56 - [generate(node, options)](docs/definition-syntax.md#generatenode-options)
57 - [AST format](docs/definition-syntax.md#ast-format)
58
59## Tools
60
61* [AST Explorer](https://astexplorer.net/#/gist/244e2fb4da940df52bf0f4b94277db44/e79aff44611020b22cfd9708f3a99ce09b7d67a8) – explore CSSTree AST format with zero setup
62* [CSS syntax reference](https://csstree.github.io/docs/syntax.html)
63* [CSS syntax validator](https://csstree.github.io/docs/validator.html)
64
65## Related projects
66
67* [csstree-validator](https://github.com/csstree/validator) – NPM package to validate CSS
68* [stylelint-csstree-validator](https://github.com/csstree/stylelint-validator) – plugin for stylelint to validate CSS
69* [Grunt plugin](https://github.com/sergejmueller/grunt-csstree-validator)
70* [Gulp plugin](https://github.com/csstree/gulp-csstree)
71* [Sublime plugin](https://github.com/csstree/SublimeLinter-contrib-csstree)
72* [VS Code plugin](https://github.com/csstree/vscode-plugin)
73* [Atom plugin](https://github.com/csstree/atom-plugin)
74
75## Usage
76
77Install with npm:
78
79```
80> npm install css-tree
81```
82
83Basic usage:
84
85```js
86var csstree = require('css-tree');
87
88// parse CSS to AST
89var ast = csstree.parse('.example { world: "!" }');
90
91// traverse AST and modify it
92csstree.walk(ast, function(node) {
93 if (node.type === 'ClassSelector' && node.name === 'example') {
94 node.name = 'hello';
95 }
96});
97
98// generate CSS from AST
99console.log(csstree.generate(ast));
100// .hello{world:"!"}
101```
102
103Syntax matching:
104
105```js
106// parse CSS to AST as a declaration value
107var ast = csstree.parse('red 1px solid', { context: 'value' });
108
109// match to syntax of `border` property
110var matchResult = csstree.lexer.matchProperty('border', ast);
111
112// check first value node is a <color>
113console.log(matchResult.isType(ast.children.first(), 'color'));
114// true
115
116// get a type list matched to a node
117console.log(matchResult.getTrace(ast.children.first()));
118// [ { type: 'Property', name: 'border' },
119// { type: 'Type', name: 'color' },
120// { type: 'Type', name: 'named-color' },
121// { type: 'Keyword', name: 'red' } ]
122```
123
124## Top level API
125
126![API map](https://cdn.rawgit.com/csstree/csstree/1.0/docs/api-map.svg)
127
128## License
129
130MIT
Note: See TracBrowser for help on using the repository browser.