web 3d图形渲染器
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.

110 lines
4.2 KiB

  1. # postcss-values-parser [![Build Status](https://travis-ci.org/shellscape/postcss-values-parser.svg?branch=master)](https://travis-ci.org/shellscape/postcss-values-parser)
  2. <img align="right" width="95" height="95"
  3. title="Philosopher’s stone, logo of PostCSS"
  4. src="http://postcss.github.io/postcss/logo.svg">
  5. A CSS property value parser for use with [PostCSS](https://github.com/postcss/postcss),
  6. following the same node, container, and traversal patterns as PostCSS.
  7. ## &nbsp;
  8. <p align="center">
  9. <b>:rocket: &nbsp; Are you ready to tackle ES6 and hone your JavaScript Skills?</b> &nbsp; :rocket:<br/>
  10. Check out these outstanding <a href="https://es6.io/">ES6 courses</a> by <a href="https://github.com/wesbos">@wesbos</a>
  11. </p>
  12. ---
  13. As with PostCSS and postcss-selector-parser, this parser generates an
  14. [Abstract Syntax Tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree),
  15. (aka "AST") which allows for ease of traversal and granular inspection of each
  16. part of a property's value.
  17. ## postcss-values-parser vs. postcss-value-parser
  18. Yeah, it's a tad confusing. The [Lesshint](https://github.com/lesshint/lesshint)
  19. project needed a parser that would allow detailed inspection of property values
  20. to the same degree that PostCSS and [postcss-selector-parser](https://github.com/postcss/postcss-selector-parser)
  21. provided. This was especailly important for the Lesshint project, as it provides
  22. for very granular rules for linting LESS.
  23. [postcss-value-parser](https://github.com/TrySound/postcss-value-parser)
  24. makes a lot of assumption about how values should be parsed and how the resulting
  25. AST should be organized. It was also fairly out of sync with the tokenzing and
  26. traversal patterns and convenience methods found in PostCSS and
  27. postcss-selector-parser.
  28. So we needed an alternative, and drew upon all three projects to put together a
  29. value parser that met and exceeded our needs. The improvements include:
  30. - Written using ES6
  31. - Uses the same Gulp toolchain as PostCSS
  32. - Doesn't strip characters; eg. parenthesis
  33. - Full AST traversal
  34. - AST traversal based on node type
  35. - Simple methods to derive strings from the parsed result
  36. - Follows PostCSS patterns for whitespace between Nodes
  37. - Provides convenience properties for number units, colors, etc.
  38. ## Usage
  39. Please see the [API Documentation](API.md) for full usage information.
  40. As with any NPM module, start with the install:
  41. ```
  42. npm install postcss-values-parser
  43. ```
  44. Using this parser is straightforward and doesn't require callbacks:
  45. ```js
  46. const parser = require('postcss-values-parser');
  47. const ast = parser('#fff').parse();
  48. let color = ast // the Root node
  49. .first // the Value node
  50. .first; // a Word node, containing the color value.
  51. ```
  52. ## Loose Mode
  53. Loose mode was introduced to support adherence to the W3C CSS Specification as
  54. well as the ability to parse noncompliant CSS for variants like LESS, SCSS, and
  55. CSSNext. If you're working with a noncompliant or CSS-like variant, then loose
  56. mode is for you.
  57. For example, the parser
  58. will throw an error by default if `calc` parameters [don't adhere to the spec](https://www.w3.org/TR/css-values/#calc-syntax).
  59. However, with loose mode enabled, the parse will ignore spec rules and succeed.
  60. In-draft features, or CSS features in modules not yet finalized, often cause parser
  61. errors. eg. `url(var(--somevar))`. Loose mode supports parsing of these features.
  62. Loose Mode is enabled by passing an option of `loose: true` to the `parser` method.
  63. ```js
  64. const less = 'calc(2+2)'; // not valid per spec, but valid in LESS
  65. const cssnext = 'url(var(--somevar))'; // not valid per spec, but in spec draft
  66. const parser = require('postcss-values-parser');
  67. const ast = parser(less, { loose: true }).parse();
  68. // parse will succeed
  69. ```
  70. ## Acknowledgements
  71. This project was heavily influenced by [postcss-selector-parser](https://github.com/postcss/postcss-selector-parser)
  72. and utilized many patterns and logical constructs from the project.
  73. Tests and some tokenizing techniques found in [postcss-value-parser](https://github.com/TrySound/postcss-value-parser)
  74. were used.
  75. ## Contributing
  76. - `git fork/clone`
  77. - `npm i`
  78. - Before PR'ing, make sure `npm test` still pass. Add test if you're adding features.
  79. When you tweak [API.md](API.md), please run `npm run toc` before PR'ing.