Skip to content

Commit 1d367aa

Browse files
committed
docs: update docs for v7
1 parent 58c3ac0 commit 1d367aa

27 files changed

+2796
-113
lines changed

.npmrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
2+
3+
# npm options
4+
auth-type=legacy

README.md

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
A CSS property value parser built upon [PostCSS](https://github.com/postcss/postcss),
1515
following the same node and traversal patterns as PostCSS.
1616

17+
This package powers part of [Prettier](https://prettier.io/). Please consider becoming a sponsor if you find this package useful or are a Prettier user. https://github.com/sponsors/shellscape
18+
1719
## Install
1820

1921
Using npm:
@@ -22,12 +24,6 @@ Using npm:
2224
npm install postcss-values-parser --save-dev
2325
```
2426

25-
<a href="https://www.patreon.com/shellscape">
26-
<img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
27-
</a>
28-
29-
Please consider [becoming a patron](https://www.patreon.com/shellscape) if you find this module useful.
30-
3127
## Requirements
3228

3329
`postcss-values-parser` Node version v6.14.0+ and PostCSS v7.0.0+.
@@ -44,26 +40,7 @@ Please consider [becoming a patron](https://www.patreon.com/shellscape) if you f
4440

4541
## Usage
4642

47-
Using the parser is straightforward and minimalistic:
48-
49-
```js
50-
const { parse } = require('postcss-values-parser');
51-
52-
const root = parse('#fff');
53-
const node = root.first;
54-
55-
// → Word {
56-
// raws: { before: '', after: '' },
57-
// value: '#fff',
58-
// type: 'word',
59-
// isHex: true,
60-
// isColor: true,
61-
// isVariable: false,
62-
// ...
63-
// }
64-
```
65-
66-
Please see the [Documentation](./docs/README.md) for further information on using the module.
43+
Please see the [Documentation](./docs/README.md) for general use and further information on using the package.
6744

6845
## Meta
6946

dist/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ParseOptions } from './parser.js';
22
import { stringify } from './stringify.js';
3+
export { ParseError, AstError } from './errors.js';
34
export { registerWalkers } from './walker.js';
45
export { ParseOptions } from './parser.js';
56
export * from './nodes/index.js';

dist/index.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/index.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/walker.js

Lines changed: 12 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/walker.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/AtWord.md

Lines changed: 0 additions & 24 deletions
This file was deleted.

docs/Comment.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Comment Node
22

3-
The `Comment` node inherits directly from `Comment` in PostCSS. This node represents a CSS comment; either inline (`//`) or block (`/* */`).
3+
The `Comment` node inherits directly from `Node` in PostCSS. This node represents a CSS comment; either inline (`//`) or block (`/* */`).
44

55
## Properties
66

@@ -10,6 +10,12 @@ Type: `Boolean`<br>
1010

1111
If `true`, indicates that the type of comment is "inline," or a comment that begins with `//`. If `false`, indicates that the comment is a traditional block comment.
1212

13+
### `text`
14+
15+
Type: `String`<br>
16+
17+
A `String` representation of the body of the comment, with comment markers removed and trimmed.
18+
1319
### `type`
1420

1521
Type: `String`
@@ -19,7 +25,7 @@ Value: `'comment'`
1925

2026
Type: `String`<br>
2127

22-
A `String` representation of the body of the comment.
28+
A `String` representation of the original comment including comment markers.
2329

2430
## Example Values
2531

docs/Container.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# Container Node
2+
3+
The `Container` node inherits directly from `Container` in PostCSS. This node serves as a base class for nodes that can contain other nodes as children. It provides functionality for managing child nodes and traversing the AST.
4+
5+
## Properties
6+
7+
### `nodes`
8+
9+
Type: `Array`<br>
10+
11+
An array of child nodes contained within this container. These can be any type of node including other containers.
12+
13+
### `type`
14+
15+
Type: `String`<br>
16+
17+
The type of the container node. This is set by the specific container implementation.
18+
19+
### `value`
20+
21+
Type: `String`<br>
22+
23+
A `String` representation of the container's value. This is typically set during construction and provides context about the container's content.
24+
25+
## Methods
26+
27+
### `add(node)`
28+
29+
Adds a child node to this container.
30+
31+
#### Parameters
32+
33+
#### `node`
34+
35+
Type: `Node|Container`<br>
36+
_Required_
37+
38+
The node to add as a child of this container.
39+
40+
### `toString(stringifier)`
41+
42+
Converts the container and all its children to a string representation.
43+
44+
#### Parameters
45+
46+
#### `stringifier`
47+
48+
Type: `Stringifier`<br>
49+
_Optional_
50+
51+
A custom stringifier function. If not provided, uses the default stringify function.
52+
53+
## Inherited Properties
54+
55+
This class inherits all properties and methods from PostCSS's `Container` class. Please see the [PostCSS Documentation](https://github.com/postcss/postcss/tree/master/docs) for additional methods and properties.
56+
57+
## Example Usage
58+
59+
```js
60+
const { parse } = require('postcss-values-parser');
61+
62+
const root = parse('calc(100px + 20%)');
63+
const func = root.nodes[0]; // This is a Func node, which extends Container
64+
65+
// Access child nodes
66+
console.log(func.nodes); // Array of nodes representing the calc() parameters
67+
68+
// Add a new node
69+
const word = new Word({ value: 'test' });
70+
func.add(word);
71+
```
72+
73+
## Walker Methods
74+
75+
Container nodes have access to all walker methods for traversing their child nodes and descendants. These methods allow you to find and iterate over specific node types within the container:
76+
77+
- `walkFuncs(callback)` - Walk through all function nodes
78+
- `walkWords(callback)` - Walk through all word nodes
79+
- `walkNumerics(callback)` - Walk through all numeric nodes
80+
- `walkOperators(callback)` - Walk through all operator nodes
81+
- `walkQuoteds(callback)` - Walk through all quoted string nodes
82+
- `walkUnicodeRanges(callback)` - Walk through all unicode range nodes
83+
- `walkComments(callback)` - Walk through all comment nodes
84+
- `walkPunctuations(callback)` - Walk through all punctuation nodes
85+
- `walkType(type, callback)` - Walk through all nodes of a specific type
86+
87+
```js
88+
const { parse } = require('postcss-values-parser');
89+
90+
const root = parse('calc(100px + 20%) url("image.jpg")');
91+
const func = root.nodes[0]; // calc function
92+
93+
// Walk through numeric nodes within the function
94+
func.walkNumerics((node) => {
95+
console.log(`${node.value}${node.unit}`);
96+
});
97+
98+
// Walk through all words in the entire tree
99+
root.walkWords((node) => {
100+
console.log(`Word: ${node.value}`);
101+
});
102+
```
103+
104+
See the [Walker](./Walker.md) documentation for more details on walker methods.
105+
106+
## Notes
107+
108+
- Container nodes automatically handle source mapping and position tracking when nodes are added
109+
- Child nodes maintain references to their parent container
110+
- The Container class provides the foundation for complex nodes like `Func`, `Root`, and `Parentheses`
111+
- Walker methods are registered automatically when the module is loaded
112+
- Walker methods traverse all descendants, not just direct children

0 commit comments

Comments
 (0)