| 1 | [tests]: https://img.shields.io/circleci/project/github/shellscape/postcss-values-parser.svg
|
| 2 | [tests-url]: https://circleci.com/gh/shellscape/postcss-values-parser
|
| 3 |
|
| 4 | [cover]: https://codecov.io/gh/shellscape/postcss-values-parser/branch/master/graph/badge.svg
|
| 5 | [cover-url]: https://codecov.io/gh/shellscape/postcss-values-parser
|
| 6 |
|
| 7 | [size]: https://packagephobia.now.sh/badge?p=postcss-values-parser
|
| 8 | [size-url]: https://packagephobia.now.sh/result?p=postcss-values-parser
|
| 9 |
|
| 10 | <div align="center">
|
| 11 | <img width="95" height="95" title="Philosopher’s stone, logo of PostCSS" src="http://postcss.github.io/postcss/logo.svg"><br/><br/>
|
| 12 | </div>
|
| 13 |
|
| 14 | # postcss-values-parser [![tests][tests]][tests-url] [![cover][cover]][cover-url] [![size][size]][size-url]
|
| 15 |
|
| 16 | A CSS property value parser built upon [PostCSS](https://github.com/postcss/postcss),
|
| 17 | following the same node and traversal patterns as PostCSS.
|
| 18 |
|
| 19 | ## Install
|
| 20 |
|
| 21 | Using npm:
|
| 22 |
|
| 23 | ```console
|
| 24 | npm install postcss-values-parser --save-dev
|
| 25 | ```
|
| 26 |
|
| 27 | <a href="https://www.patreon.com/shellscape">
|
| 28 | <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
|
| 29 | </a>
|
| 30 |
|
| 31 | Please consider [becoming a patron](https://www.patreon.com/shellscape) if you find this module useful.
|
| 32 |
|
| 33 | ## Requirements
|
| 34 |
|
| 35 | `postcss-values-parser` Node version v6.14.0+ and PostCSS v7.0.0+.
|
| 36 |
|
| 37 | ## Benefits
|
| 38 |
|
| 39 | - Leverages PostCSS and its tokenizer under the hood
|
| 40 | - Doesn't strip characters; eg. parenthesis
|
| 41 | - Full [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree) traversal
|
| 42 | - Ability to walk the AST for every Node type
|
| 43 | - Convenience methods to stringify Nodes
|
| 44 | - Follows PostCSS patterns for whitespace between Nodes
|
| 45 | - Provides convenience properties for number units, colors, etc.
|
| 46 |
|
| 47 | ## Usage
|
| 48 |
|
| 49 | Using the parser is straightforward and minimalistic:
|
| 50 |
|
| 51 | ```js
|
| 52 | const { parse } = require('postcss-values-parser');
|
| 53 |
|
| 54 | const root = parse('#fff');
|
| 55 | const node = root.first;
|
| 56 |
|
| 57 | // → Word {
|
| 58 | // raws: { before: '', after: '' },
|
| 59 | // value: '#fff',
|
| 60 | // type: 'word',
|
| 61 | // isHex: true,
|
| 62 | // isColor: true,
|
| 63 | // isVariable: false,
|
| 64 | // ...
|
| 65 | // }
|
| 66 | ```
|
| 67 |
|
| 68 | Please see the [Documentation](./docs/README.md) for further information on using the module.
|
| 69 |
|
| 70 | ## Meta
|
| 71 |
|
| 72 | [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
| 73 |
|
| 74 | [LICENSE (Mozilla Public License)](./LICENSE)
|