You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

116 lines
5.1 KiB

4 years ago
  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. # CSSTree
  5. [![NPM version](https://img.shields.io/npm/v/css-tree.svg)](https://www.npmjs.com/package/css-tree)
  6. [![Build Status](https://travis-ci.org/csstree/csstree.svg?branch=master)](https://travis-ci.org/csstree/csstree)
  7. [![Coverage Status](https://coveralls.io/repos/github/csstree/csstree/badge.svg?branch=master)](https://coveralls.io/github/csstree/csstree?branch=master)
  8. [![NPM Downloads](https://img.shields.io/npm/dm/css-tree.svg)](https://www.npmjs.com/package/css-tree)
  9. [![Twitter](https://img.shields.io/badge/Twitter-@csstree-blue.svg)](https://twitter.com/csstree)
  10. CSSTree is a tool set to work with CSS, including [fast](https://github.com/postcss/benchmark) detailed parser (string->AST), walker (AST traversal), generator (AST->string) and lexer (validation and matching) based on knowledge of spec and browser implementations. The main goal is to be efficient and W3C spec compliant, with focus on CSS analyzing and source-to-source transforming tasks.
  11. > NOTE: The project is in alpha stage since some parts need further improvements, AST format and API are subjects to change. However it's stable enough and used by packages like [CSSO](https://github.com/css/csso) (CSS minifier) and [SVGO](https://github.com/svg/svgo) (SVG optimizer) in production.
  12. ## Features
  13. - **Detailed parsing with an adjustable level of detail**
  14. 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.
  15. - **Tolerant to errors by design**
  16. 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.
  17. - **Fast and efficient**
  18. 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.
  19. - **Syntax validation**
  20. 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.
  21. ## Docs
  22. - [AST format](docs/ast.md)
  23. - [Parsing CSS into AST](docs/parsing.md)
  24. - [Generate CSS from AST](docs/generate.md)
  25. - [AST traversal](docs/traversal.md)
  26. - [Utils for AST](docs/utils.md)
  27. - [Working with definition syntax](docs/definition-syntax.md)
  28. ## Tools
  29. * [AST Explorer](https://astexplorer.net/#/gist/244e2fb4da940df52bf0f4b94277db44/e79aff44611020b22cfd9708f3a99ce09b7d67a8) – explore CSSTree AST format with zero setup
  30. * [CSS syntax reference](https://csstree.github.io/docs/syntax.html)
  31. * [CSS syntax validator](https://csstree.github.io/docs/validator.html)
  32. ## Related projects
  33. * [csstree-validator](https://github.com/csstree/validator) – NPM package to validate CSS
  34. * [stylelint-csstree-validator](https://github.com/csstree/stylelint-validator) – plugin for stylelint to validate CSS
  35. * [Grunt plugin](https://github.com/sergejmueller/grunt-csstree-validator)
  36. * [Gulp plugin](https://github.com/csstree/gulp-csstree)
  37. * [Sublime plugin](https://github.com/csstree/SublimeLinter-contrib-csstree)
  38. * [VS Code plugin](https://github.com/csstree/vscode-plugin)
  39. * [Atom plugin](https://github.com/csstree/atom-plugin)
  40. ## Usage
  41. Install with npm:
  42. ```
  43. > npm install css-tree
  44. ```
  45. Basic usage:
  46. ```js
  47. var csstree = require('css-tree');
  48. // parse CSS to AST
  49. var ast = csstree.parse('.example { world: "!" }');
  50. // traverse AST and modify it
  51. csstree.walk(ast, function(node) {
  52. if (node.type === 'ClassSelector' && node.name === 'example') {
  53. node.name = 'hello';
  54. }
  55. });
  56. // generate CSS from AST
  57. console.log(csstree.generate(ast));
  58. // .hello{world:"!"}
  59. ```
  60. Syntax matching:
  61. ```js
  62. // parse CSS to AST as a declaration value
  63. var ast = csstree.parse('red 1px solid', { context: 'value' });
  64. // march to syntax of `border` property
  65. var matchResult = csstree.lexer.matchProperty('border', ast);
  66. // check first value node is a <color>
  67. console.log(matchResult.isType(ast.children.first(), 'color'));
  68. // true
  69. // get a type list matched to a node
  70. console.log(matchResult.getTrace(ast.children.first()));
  71. // [ { type: 'Property', name: 'border' },
  72. // { type: 'Type', name: 'color' },
  73. // { type: 'Type', name: 'named-color' },
  74. // { type: 'Keyword', name: 'red' } ]
  75. ```
  76. ## Top level API
  77. ![API map](https://cdn.rawgit.com/csstree/csstree/master/docs/api-map.svg)
  78. ## License
  79. MIT