gradiente 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +307 -0
- package/dist/index.d.mts +335 -0
- package/dist/index.mjs +1430 -0
- package/package.json +67 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Flowscape UI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+

|
|
2
|
+
|
|
3
|
+
# Gradiente
|
|
4
|
+
|
|
5
|
+
**Gradiente** is a lightweight gradient engine for turning CSS gradients into clean, normalized data structures.
|
|
6
|
+
|
|
7
|
+
It is built for rendering systems, visual editors, and developer tools where gradients need to be more than just strings.
|
|
8
|
+
|
|
9
|
+
> **Gradients as data, not strings.**
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Why
|
|
14
|
+
|
|
15
|
+
CSS gradients are expressive, but difficult to work with programmatically.
|
|
16
|
+
|
|
17
|
+
They are usually:
|
|
18
|
+
|
|
19
|
+
* string-based
|
|
20
|
+
* hard to normalize
|
|
21
|
+
* full of implicit behavior
|
|
22
|
+
* awkward to use in renderers and editors
|
|
23
|
+
|
|
24
|
+
Gradiente solves that by parsing gradients into a predictable internal model that is easy to inspect, transform, render, and extend.
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## Installation
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install gradiente
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## Quick Example
|
|
37
|
+
|
|
38
|
+
```ts
|
|
39
|
+
import { parse } from 'gradiente';
|
|
40
|
+
|
|
41
|
+
const gradient = parse('linear-gradient(red, blue)');
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Result:
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
{
|
|
48
|
+
kind: 'linear',
|
|
49
|
+
repeat: 'normal',
|
|
50
|
+
direction: {
|
|
51
|
+
kind: 'angle',
|
|
52
|
+
value: { kind: 'dimension', value: 0, unit: 'deg' },
|
|
53
|
+
valueRaw: { kind: 'dimension', value: 0, unit: 'rad' },
|
|
54
|
+
keywords: ['to', 'top']
|
|
55
|
+
},
|
|
56
|
+
stops: [
|
|
57
|
+
{
|
|
58
|
+
kind: 'color-stop',
|
|
59
|
+
color: 'red',
|
|
60
|
+
position: { kind: 'percentage', value: 0 }
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
kind: 'color-stop',
|
|
64
|
+
color: 'blue',
|
|
65
|
+
position: { kind: 'percentage', value: 1 }
|
|
66
|
+
}
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## Supported Gradients
|
|
74
|
+
|
|
75
|
+
Gradiente currently supports:
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
parse('linear-gradient(...)')
|
|
79
|
+
parse('repeating-linear-gradient(...)')
|
|
80
|
+
|
|
81
|
+
parse('radial-gradient(...)')
|
|
82
|
+
parse('repeating-radial-gradient(...)')
|
|
83
|
+
|
|
84
|
+
parse('conic-gradient(...)')
|
|
85
|
+
parse('repeating-conic-gradient(...)')
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## What Gradiente Does
|
|
91
|
+
|
|
92
|
+
### Parses gradients into structured objects
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
import { parse } from 'gradiente';
|
|
96
|
+
|
|
97
|
+
const gradient = parse('conic-gradient(from 45deg, red, blue)');
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Instead of getting a raw string you have to manually interpret, you get real data you can work with.
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
### Normalizes missing stop positions
|
|
105
|
+
|
|
106
|
+
```ts
|
|
107
|
+
parse('linear-gradient(red, blue)')
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
becomes:
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
red 0%
|
|
114
|
+
blue 100%
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
That means your renderer or editor does not need to guess defaults later.
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
### Expands repeating gradients into actual stops
|
|
122
|
+
|
|
123
|
+
```ts
|
|
124
|
+
parse('repeating-linear-gradient(red 10%, blue 20%)')
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
produces a stop list that continues until the gradient pattern fills `100%+`.
|
|
128
|
+
|
|
129
|
+
This makes repeating gradients much easier to render and inspect.
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
### Keeps values renderer-friendly
|
|
134
|
+
|
|
135
|
+
Angles and positions are normalized into a stable internal representation so they are easier to use in:
|
|
136
|
+
|
|
137
|
+
* Canvas
|
|
138
|
+
* WebGL
|
|
139
|
+
* Pixi
|
|
140
|
+
* Konva
|
|
141
|
+
* custom graphics engines
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
## Public API
|
|
146
|
+
|
|
147
|
+
### `parse(value: string)`
|
|
148
|
+
|
|
149
|
+
Parses any supported gradient string into a normalized gradient node.
|
|
150
|
+
|
|
151
|
+
```ts
|
|
152
|
+
import { parse } from 'gradiente';
|
|
153
|
+
|
|
154
|
+
const gradient = parse('radial-gradient(circle at center, red, blue)');
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
159
|
+
## Output Shape
|
|
160
|
+
|
|
161
|
+
All parsed gradients follow a predictable structure:
|
|
162
|
+
|
|
163
|
+
```ts
|
|
164
|
+
type GradientNode =
|
|
165
|
+
| LinearGradientNode
|
|
166
|
+
| RadialGradientNode
|
|
167
|
+
| ConicGradientNode;
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
Each gradient contains:
|
|
171
|
+
|
|
172
|
+
```ts
|
|
173
|
+
{
|
|
174
|
+
kind: 'linear' | 'radial' | 'conic',
|
|
175
|
+
repeat: 'normal' | 'repeating',
|
|
176
|
+
stops: GradientColorStopNode[]
|
|
177
|
+
}
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
## Stop Format
|
|
183
|
+
|
|
184
|
+
Gradiente resolves gradients into a clean stop model:
|
|
185
|
+
|
|
186
|
+
```ts
|
|
187
|
+
{
|
|
188
|
+
kind: 'color-stop',
|
|
189
|
+
color: string,
|
|
190
|
+
position: {
|
|
191
|
+
kind: 'percentage',
|
|
192
|
+
value: number
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
This makes the data much easier to use in custom pipelines.
|
|
198
|
+
|
|
199
|
+
---
|
|
200
|
+
|
|
201
|
+
## Examples
|
|
202
|
+
|
|
203
|
+
### Linear
|
|
204
|
+
|
|
205
|
+
```ts
|
|
206
|
+
parse('linear-gradient(to right, red, blue)')
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
### Repeating Linear
|
|
210
|
+
|
|
211
|
+
```ts
|
|
212
|
+
parse('repeating-linear-gradient(red 10%, blue 20%)')
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
### Radial
|
|
216
|
+
|
|
217
|
+
```ts
|
|
218
|
+
parse('radial-gradient(circle at center, red, blue)')
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Repeating Radial
|
|
222
|
+
|
|
223
|
+
```ts
|
|
224
|
+
parse('repeating-radial-gradient(circle at center, red 10%, blue 20%)')
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### Conic
|
|
228
|
+
|
|
229
|
+
```ts
|
|
230
|
+
parse('conic-gradient(from 45deg at center, red, blue)')
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
### Repeating Conic
|
|
234
|
+
|
|
235
|
+
```ts
|
|
236
|
+
parse('repeating-conic-gradient(from 45deg at center, red 10%, blue 20%)')
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
---
|
|
240
|
+
|
|
241
|
+
## Design Goals
|
|
242
|
+
|
|
243
|
+
Gradiente is built around a few core ideas:
|
|
244
|
+
|
|
245
|
+
* **Simple external API**
|
|
246
|
+
* **Normalized internal model**
|
|
247
|
+
* **Predictable stop data**
|
|
248
|
+
* **Useful for real rendering systems**
|
|
249
|
+
* **Easy to extend for future gradient types**
|
|
250
|
+
|
|
251
|
+
It is not trying to be a full browser CSS engine.
|
|
252
|
+
|
|
253
|
+
It is trying to be a practical gradient engine for developers.
|
|
254
|
+
|
|
255
|
+
---
|
|
256
|
+
|
|
257
|
+
## Built For
|
|
258
|
+
|
|
259
|
+
Gradiente is especially useful for:
|
|
260
|
+
|
|
261
|
+
* design tools
|
|
262
|
+
* visual editors
|
|
263
|
+
* whiteboards
|
|
264
|
+
* canvas engines
|
|
265
|
+
* procedural graphics
|
|
266
|
+
* charting and data visualization systems
|
|
267
|
+
* custom render pipelines
|
|
268
|
+
|
|
269
|
+
---
|
|
270
|
+
|
|
271
|
+
## Current Status
|
|
272
|
+
|
|
273
|
+
Implemented:
|
|
274
|
+
|
|
275
|
+
* linear gradients
|
|
276
|
+
* repeating linear gradients
|
|
277
|
+
* radial gradients
|
|
278
|
+
* repeating radial gradients
|
|
279
|
+
* conic gradients
|
|
280
|
+
* repeating conic gradients
|
|
281
|
+
* stop normalization
|
|
282
|
+
* repeating stop expansion
|
|
283
|
+
|
|
284
|
+
Planned:
|
|
285
|
+
|
|
286
|
+
* gradient serialization
|
|
287
|
+
* gradient sampling
|
|
288
|
+
* playground / live preview
|
|
289
|
+
* docs website
|
|
290
|
+
|
|
291
|
+
---
|
|
292
|
+
|
|
293
|
+
## Philosophy
|
|
294
|
+
|
|
295
|
+
Gradiente treats gradients as a structured graphics primitive.
|
|
296
|
+
|
|
297
|
+
Not a string to preserve.
|
|
298
|
+
Not a browser quirk to emulate.
|
|
299
|
+
A piece of graphics data you can actually use.
|
|
300
|
+
|
|
301
|
+
> **Build gradients like an engine, not like a stylesheet.**
|
|
302
|
+
|
|
303
|
+
---
|
|
304
|
+
|
|
305
|
+
## License
|
|
306
|
+
|
|
307
|
+
MIT
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,335 @@
|
|
|
1
|
+
//#region src/token.d.ts
|
|
2
|
+
declare const TokenKind: {
|
|
3
|
+
readonly PAREN_OPEN: 'paren-open';
|
|
4
|
+
readonly PAREN_CLOSE: 'paren-close';
|
|
5
|
+
readonly COMMA: 'comma';
|
|
6
|
+
readonly SLASH: 'slash';
|
|
7
|
+
readonly FUNCTION_LINEAR_GRADIENT: 'function-linear-gradient';
|
|
8
|
+
readonly FUNCTION_REPEATING_LINEAR_GRADIENT: 'function-repeating-linear-gradient';
|
|
9
|
+
readonly FUNCTION_RADIAL_GRADIENT: 'function-radial-gradient';
|
|
10
|
+
readonly FUNCTION_REPEATING_RADIAL_GRADIENT: 'function-repeating-radial-gradient';
|
|
11
|
+
readonly FUNCTION_CONIC_GRADIENT: 'function-conic-gradient';
|
|
12
|
+
readonly FUNCTION_REPEATING_CONIC_GRADIENT: 'function-repeating-conic-gradient';
|
|
13
|
+
readonly FUNCTION_DIAMOND_GRADIENT: 'function-diamond-gradient';
|
|
14
|
+
readonly FUNCTION_REPEATING_DIAMOND_GRADIENT: 'function-repeating-diamond-gradient';
|
|
15
|
+
readonly FUNCTION_MESH_GRADIENT: 'function-mesh-gradient';
|
|
16
|
+
readonly TO: 'to';
|
|
17
|
+
readonly TOP: 'top';
|
|
18
|
+
readonly BOTTOM: 'bottom';
|
|
19
|
+
readonly LEFT: 'left';
|
|
20
|
+
readonly RIGHT: 'right';
|
|
21
|
+
readonly AT: 'at';
|
|
22
|
+
readonly FROM: 'from';
|
|
23
|
+
readonly CENTER: 'center';
|
|
24
|
+
readonly CIRCLE: 'circle';
|
|
25
|
+
readonly ELLIPSE: 'ellipse';
|
|
26
|
+
readonly CLOSEST_SIDE: 'closest-side';
|
|
27
|
+
readonly CLOSEST_CORNER: 'closest-corner';
|
|
28
|
+
readonly FARTHEST_SIDE: 'farthest-side';
|
|
29
|
+
readonly FARTHEST_CORNER: 'farthest-corner';
|
|
30
|
+
readonly IN: 'in';
|
|
31
|
+
readonly SHORTER: 'shorter';
|
|
32
|
+
readonly LONGER: 'longer';
|
|
33
|
+
readonly INCREASING: 'increasing';
|
|
34
|
+
readonly DECREASING: 'decreasing';
|
|
35
|
+
readonly HUE: 'hue';
|
|
36
|
+
readonly IDENT: 'ident';
|
|
37
|
+
readonly NUMBER: 'number';
|
|
38
|
+
readonly PERCENTAGE: 'percentage';
|
|
39
|
+
readonly DIMENSION: 'dimension';
|
|
40
|
+
readonly FUNCTION: 'function';
|
|
41
|
+
readonly HASH: 'hash';
|
|
42
|
+
readonly STRING: 'string';
|
|
43
|
+
readonly WHITESPACE: 'whitespace';
|
|
44
|
+
readonly EOF: 'eof';
|
|
45
|
+
readonly UNKNOWN: 'unknown';
|
|
46
|
+
};
|
|
47
|
+
type TokenKind = (typeof TokenKind)[keyof typeof TokenKind];
|
|
48
|
+
interface TokenBase {
|
|
49
|
+
kind: TokenKind;
|
|
50
|
+
start: number;
|
|
51
|
+
end: number;
|
|
52
|
+
raw: string;
|
|
53
|
+
}
|
|
54
|
+
interface PunctuationToken extends TokenBase {
|
|
55
|
+
kind: typeof TokenKind.PAREN_OPEN | typeof TokenKind.PAREN_CLOSE | typeof TokenKind.COMMA | typeof TokenKind.SLASH;
|
|
56
|
+
}
|
|
57
|
+
interface KeywordToken extends TokenBase {
|
|
58
|
+
kind: typeof TokenKind.TO | typeof TokenKind.TOP | typeof TokenKind.BOTTOM | typeof TokenKind.LEFT | typeof TokenKind.RIGHT | typeof TokenKind.AT | typeof TokenKind.FROM | typeof TokenKind.CENTER | typeof TokenKind.CIRCLE | typeof TokenKind.ELLIPSE | typeof TokenKind.CLOSEST_SIDE | typeof TokenKind.CLOSEST_CORNER | typeof TokenKind.FARTHEST_SIDE | typeof TokenKind.FARTHEST_CORNER | typeof TokenKind.IN | typeof TokenKind.SHORTER | typeof TokenKind.LONGER | typeof TokenKind.INCREASING | typeof TokenKind.DECREASING | typeof TokenKind.HUE;
|
|
59
|
+
}
|
|
60
|
+
interface GradientFunctionToken extends TokenBase {
|
|
61
|
+
kind: typeof TokenKind.FUNCTION_LINEAR_GRADIENT | typeof TokenKind.FUNCTION_REPEATING_LINEAR_GRADIENT | typeof TokenKind.FUNCTION_RADIAL_GRADIENT | typeof TokenKind.FUNCTION_REPEATING_RADIAL_GRADIENT | typeof TokenKind.FUNCTION_CONIC_GRADIENT | typeof TokenKind.FUNCTION_REPEATING_CONIC_GRADIENT | typeof TokenKind.FUNCTION_DIAMOND_GRADIENT | typeof TokenKind.FUNCTION_REPEATING_DIAMOND_GRADIENT | typeof TokenKind.FUNCTION_MESH_GRADIENT;
|
|
62
|
+
name: string;
|
|
63
|
+
}
|
|
64
|
+
interface FunctionToken extends TokenBase {
|
|
65
|
+
kind: typeof TokenKind.FUNCTION;
|
|
66
|
+
name: string;
|
|
67
|
+
}
|
|
68
|
+
interface IdentToken extends TokenBase {
|
|
69
|
+
kind: typeof TokenKind.IDENT;
|
|
70
|
+
value: string;
|
|
71
|
+
}
|
|
72
|
+
interface NumberToken extends TokenBase {
|
|
73
|
+
kind: typeof TokenKind.NUMBER;
|
|
74
|
+
value: number;
|
|
75
|
+
sign: -1 | 1;
|
|
76
|
+
}
|
|
77
|
+
interface PercentageToken extends TokenBase {
|
|
78
|
+
kind: typeof TokenKind.PERCENTAGE;
|
|
79
|
+
value: number;
|
|
80
|
+
sign: -1 | 1;
|
|
81
|
+
}
|
|
82
|
+
interface DimensionToken extends TokenBase {
|
|
83
|
+
kind: typeof TokenKind.DIMENSION;
|
|
84
|
+
value: number;
|
|
85
|
+
sign: -1 | 1;
|
|
86
|
+
unit: string;
|
|
87
|
+
}
|
|
88
|
+
interface HashToken extends TokenBase {
|
|
89
|
+
kind: typeof TokenKind.HASH;
|
|
90
|
+
value: string;
|
|
91
|
+
}
|
|
92
|
+
interface StringToken extends TokenBase {
|
|
93
|
+
kind: typeof TokenKind.STRING;
|
|
94
|
+
value: string;
|
|
95
|
+
quote: '"' | "'";
|
|
96
|
+
}
|
|
97
|
+
interface WhitespaceToken extends TokenBase {
|
|
98
|
+
kind: typeof TokenKind.WHITESPACE;
|
|
99
|
+
}
|
|
100
|
+
interface EofToken extends TokenBase {
|
|
101
|
+
kind: typeof TokenKind.EOF;
|
|
102
|
+
}
|
|
103
|
+
interface UnknownToken extends TokenBase {
|
|
104
|
+
kind: typeof TokenKind.UNKNOWN;
|
|
105
|
+
}
|
|
106
|
+
type GradientLexerToken = PunctuationToken | KeywordToken | GradientFunctionToken | FunctionToken | IdentToken | NumberToken | PercentageToken | DimensionToken | HashToken | StringToken | WhitespaceToken | EofToken | UnknownToken;
|
|
107
|
+
declare const GradientFunctionNameToToken: {
|
|
108
|
+
readonly 'linear-gradient': "function-linear-gradient";
|
|
109
|
+
readonly 'repeating-linear-gradient': "function-repeating-linear-gradient";
|
|
110
|
+
readonly 'radial-gradient': "function-radial-gradient";
|
|
111
|
+
readonly 'repeating-radial-gradient': "function-repeating-radial-gradient";
|
|
112
|
+
readonly 'conic-gradient': "function-conic-gradient";
|
|
113
|
+
readonly 'repeating-conic-gradient': "function-repeating-conic-gradient";
|
|
114
|
+
readonly 'diamond-gradient': "function-diamond-gradient";
|
|
115
|
+
readonly 'repeating-diamond-gradient': "function-repeating-diamond-gradient";
|
|
116
|
+
readonly 'mesh-gradient': "function-mesh-gradient";
|
|
117
|
+
};
|
|
118
|
+
declare const KeywordNameToToken: {
|
|
119
|
+
readonly to: "to";
|
|
120
|
+
readonly top: "top";
|
|
121
|
+
readonly bottom: "bottom";
|
|
122
|
+
readonly left: "left";
|
|
123
|
+
readonly right: "right";
|
|
124
|
+
readonly at: "at";
|
|
125
|
+
readonly from: "from";
|
|
126
|
+
readonly center: "center";
|
|
127
|
+
readonly circle: "circle";
|
|
128
|
+
readonly ellipse: "ellipse";
|
|
129
|
+
readonly 'closest-side': "closest-side";
|
|
130
|
+
readonly 'closest-corner': "closest-corner";
|
|
131
|
+
readonly 'farthest-side': "farthest-side";
|
|
132
|
+
readonly 'farthest-corner': "farthest-corner";
|
|
133
|
+
readonly in: "in";
|
|
134
|
+
readonly shorter: "shorter";
|
|
135
|
+
readonly longer: "longer";
|
|
136
|
+
readonly increasing: "increasing";
|
|
137
|
+
readonly decreasing: "decreasing";
|
|
138
|
+
readonly hue: "hue";
|
|
139
|
+
};
|
|
140
|
+
//#endregion
|
|
141
|
+
//#region src/lexer/base.d.ts
|
|
142
|
+
interface LexerState {
|
|
143
|
+
source: string;
|
|
144
|
+
length: number;
|
|
145
|
+
position: number;
|
|
146
|
+
}
|
|
147
|
+
interface SourceSpan {
|
|
148
|
+
start: number;
|
|
149
|
+
end: number;
|
|
150
|
+
raw: string;
|
|
151
|
+
}
|
|
152
|
+
declare function createLexerState(source: string): LexerState;
|
|
153
|
+
declare function isEnd(state: LexerState): boolean;
|
|
154
|
+
declare function currentChar(state: LexerState): string | null;
|
|
155
|
+
declare function peekChar(state: LexerState, offset?: number): string | null;
|
|
156
|
+
declare function advance(state: LexerState, step?: number): void;
|
|
157
|
+
declare function isWhitespaceChar(char: string | null): boolean;
|
|
158
|
+
declare function isDigitChar(char: string | null): boolean;
|
|
159
|
+
declare function isSignChar(char: string | null): boolean;
|
|
160
|
+
declare function isIdentifierStartChar(char: string | null): boolean;
|
|
161
|
+
declare function isIdentifierChar(char: string | null): boolean;
|
|
162
|
+
declare function isAlphaChar(char: string | null): boolean;
|
|
163
|
+
declare function readWhile(state: LexerState, predicate: (char: string | null) => boolean): string;
|
|
164
|
+
declare function createSpan(source: string, start: number, end: number): SourceSpan;
|
|
165
|
+
//#endregion
|
|
166
|
+
//#region src/lexer/lexer.d.ts
|
|
167
|
+
declare function nextToken(state: LexerState): GradientLexerToken;
|
|
168
|
+
declare function tokenize(source: string): GradientLexerToken[];
|
|
169
|
+
//#endregion
|
|
170
|
+
//#region src/guard.d.ts
|
|
171
|
+
declare function isGradientFunctionToken(token: GradientLexerToken): boolean;
|
|
172
|
+
declare function isKeywordToken(token: GradientLexerToken): boolean;
|
|
173
|
+
declare function isNumericToken(token: GradientLexerToken): boolean;
|
|
174
|
+
//#endregion
|
|
175
|
+
//#region src/source.d.ts
|
|
176
|
+
declare function getSourceSlice(source: string, start: number, end: number): string;
|
|
177
|
+
declare function getTokenSourceSlice(source: string, startToken: GradientLexerToken, endToken: GradientLexerToken): string;
|
|
178
|
+
declare function getTokenRangeSourceSlice(source: string, tokens: readonly GradientLexerToken[], startIndex: number, endIndex: number): string;
|
|
179
|
+
declare function findBalancedFunctionEndIndex(tokens: readonly GradientLexerToken[], startIndex: number): number;
|
|
180
|
+
//#endregion
|
|
181
|
+
//#region src/utils/parser-utils.d.ts
|
|
182
|
+
declare function isTriviaToken(token: GradientLexerToken): boolean;
|
|
183
|
+
declare function getTokenAt(tokens: readonly GradientLexerToken[], index: number): GradientLexerToken | null;
|
|
184
|
+
declare function findNextNonWhitespaceIndex(tokens: readonly GradientLexerToken[], startIndex: number): number;
|
|
185
|
+
declare function getNonWhitespaceTokenAt(tokens: readonly GradientLexerToken[], startIndex: number): GradientLexerToken | null;
|
|
186
|
+
declare function skipWhitespace(tokens: readonly GradientLexerToken[], startIndex: number): number;
|
|
187
|
+
declare function consumeIf(tokens: readonly GradientLexerToken[], index: number, kind: GradientLexerToken['kind']): {
|
|
188
|
+
matched: boolean;
|
|
189
|
+
nextIndex: number;
|
|
190
|
+
token: GradientLexerToken | null;
|
|
191
|
+
};
|
|
192
|
+
declare function expectToken(tokens: readonly GradientLexerToken[], index: number, kind: GradientLexerToken['kind'], message?: string): {
|
|
193
|
+
token: GradientLexerToken;
|
|
194
|
+
nextIndex: number;
|
|
195
|
+
};
|
|
196
|
+
//#endregion
|
|
197
|
+
//#region src/utils/math/base.d.ts
|
|
198
|
+
declare function roundTo(value: number, digits: number): number;
|
|
199
|
+
declare function floorTo(value: number, digits: number): number;
|
|
200
|
+
declare function ceilTo(value: number, digits: number): number;
|
|
201
|
+
declare function truncTo(value: number, digits: number): number;
|
|
202
|
+
declare function clamp(value: number, min: number, max: number): number;
|
|
203
|
+
declare function toPercent(value: number): number;
|
|
204
|
+
declare function fromPercent(value: number): number;
|
|
205
|
+
//#endregion
|
|
206
|
+
//#region src/utils/math/angle.d.ts
|
|
207
|
+
type AngleUnit = 'deg' | 'rad' | 'turn' | 'grad';
|
|
208
|
+
declare function isAngleUnit(unit: string): unit is AngleUnit;
|
|
209
|
+
declare function degToRad(value: number): number;
|
|
210
|
+
declare function radToDeg(value: number): number;
|
|
211
|
+
declare function turnToRad(value: number): number;
|
|
212
|
+
declare function gradToRad(value: number): number;
|
|
213
|
+
declare function normalizeAngleDeg(value: number, digits?: number): number;
|
|
214
|
+
declare function normalizeAngleRad(value: number): number;
|
|
215
|
+
declare function toAngleRad(value: number, unit: AngleUnit): number;
|
|
216
|
+
declare function normalizeAngle(value: number, unit: AngleUnit, digits?: number): number;
|
|
217
|
+
declare function parseAngleFromToken(token: GradientLexerToken): number | null;
|
|
218
|
+
//#endregion
|
|
219
|
+
//#region src/parser/types.d.ts
|
|
220
|
+
interface ParseResult<T> {
|
|
221
|
+
node: T;
|
|
222
|
+
nextIndex: number;
|
|
223
|
+
}
|
|
224
|
+
//#endregion
|
|
225
|
+
//#region src/parser/conic-gradient/types.d.ts
|
|
226
|
+
interface ConicGradientFromNode {
|
|
227
|
+
kind: 'angle';
|
|
228
|
+
value: GradientDimensionNode;
|
|
229
|
+
valueRaw: GradientDimensionNode;
|
|
230
|
+
}
|
|
231
|
+
interface ConicGradientPositionNode {
|
|
232
|
+
kind: 'position';
|
|
233
|
+
x: GradientLengthPercentageNode;
|
|
234
|
+
y: GradientLengthPercentageNode;
|
|
235
|
+
keywords: readonly ('left' | 'right' | 'top' | 'bottom' | 'center')[];
|
|
236
|
+
}
|
|
237
|
+
interface ConicGradientNode extends GradientNodeBase {
|
|
238
|
+
kind: 'conic';
|
|
239
|
+
from: ConicGradientFromNode;
|
|
240
|
+
position: ConicGradientPositionNode;
|
|
241
|
+
stops: readonly GradientColorStopNode[];
|
|
242
|
+
}
|
|
243
|
+
//#endregion
|
|
244
|
+
//#region src/parser/conic-gradient/parse-conic-gradient.d.ts
|
|
245
|
+
declare function parseConicGradient(source: string, tokens: readonly GradientLexerToken[], startIndex: number): ParseResult<ConicGradientNode>;
|
|
246
|
+
//#endregion
|
|
247
|
+
//#region src/parser/linear-gradient/types.d.ts
|
|
248
|
+
interface LinearGradientDirectionNode {
|
|
249
|
+
kind: 'angle';
|
|
250
|
+
value: GradientDimensionNode;
|
|
251
|
+
valueRaw: GradientDimensionNode;
|
|
252
|
+
keywords: readonly ('to' | 'top' | 'bottom' | 'left' | 'right')[];
|
|
253
|
+
}
|
|
254
|
+
interface LinearGradientNode extends GradientNodeBase {
|
|
255
|
+
kind: 'linear';
|
|
256
|
+
direction: LinearGradientDirectionNode | null;
|
|
257
|
+
stops: readonly GradientStopItemNode[];
|
|
258
|
+
}
|
|
259
|
+
//#endregion
|
|
260
|
+
//#region src/parser/linear-gradient/parse-linear-gradient.d.ts
|
|
261
|
+
declare function parseLinearGradient(source: string, tokens: readonly GradientLexerToken[], startIndex: number): ParseResult<LinearGradientNode>;
|
|
262
|
+
//#endregion
|
|
263
|
+
//#region src/parser/radial-gradient/types.d.ts
|
|
264
|
+
type RadialGradientShape = 'circle' | 'ellipse';
|
|
265
|
+
type RadialGradientSizeKeyword = 'closest-side' | 'closest-corner' | 'farthest-side' | 'farthest-corner';
|
|
266
|
+
interface RadialGradientPositionNode {
|
|
267
|
+
kind: 'position';
|
|
268
|
+
x: GradientLengthPercentageNode;
|
|
269
|
+
y: GradientLengthPercentageNode;
|
|
270
|
+
keywords: readonly string[];
|
|
271
|
+
}
|
|
272
|
+
interface RadialGradientSizeNode {
|
|
273
|
+
kind: 'size';
|
|
274
|
+
shape: RadialGradientShape;
|
|
275
|
+
keyword: RadialGradientSizeKeyword;
|
|
276
|
+
radiusX: GradientLengthPercentageNode;
|
|
277
|
+
radiusY: GradientLengthPercentageNode;
|
|
278
|
+
}
|
|
279
|
+
interface RadialGradientNode extends GradientNodeBase {
|
|
280
|
+
kind: 'radial';
|
|
281
|
+
shape: RadialGradientShape;
|
|
282
|
+
size: RadialGradientSizeNode;
|
|
283
|
+
position: RadialGradientPositionNode;
|
|
284
|
+
stops: readonly GradientColorStopNode[];
|
|
285
|
+
}
|
|
286
|
+
//#endregion
|
|
287
|
+
//#region src/parser/radial-gradient/parse-radial-gradient.d.ts
|
|
288
|
+
declare function parseRadialGradient(source: string, tokens: readonly GradientLexerToken[], startIndex: number): ParseResult<RadialGradientNode>;
|
|
289
|
+
//#endregion
|
|
290
|
+
//#region src/parser/ast.d.ts
|
|
291
|
+
type GradientKind = 'linear' | 'radial' | 'conic' | 'diamond' | 'mesh';
|
|
292
|
+
type GradientRepeatMode = 'normal' | 'repeating';
|
|
293
|
+
interface GradientNodeBase {
|
|
294
|
+
kind: GradientKind;
|
|
295
|
+
repeat: GradientRepeatMode;
|
|
296
|
+
}
|
|
297
|
+
interface GradientColorStopNode {
|
|
298
|
+
kind: 'color-stop';
|
|
299
|
+
color: string;
|
|
300
|
+
position: GradientLengthPercentageNode;
|
|
301
|
+
}
|
|
302
|
+
type GradientStopItemNode = GradientColorStopNode;
|
|
303
|
+
interface GradientNumberNode {
|
|
304
|
+
kind: 'number';
|
|
305
|
+
value: number;
|
|
306
|
+
}
|
|
307
|
+
interface GradientPercentageNode {
|
|
308
|
+
kind: 'percentage';
|
|
309
|
+
value: number;
|
|
310
|
+
}
|
|
311
|
+
interface GradientDimensionNode {
|
|
312
|
+
kind: 'dimension';
|
|
313
|
+
value: number;
|
|
314
|
+
unit: string;
|
|
315
|
+
}
|
|
316
|
+
type GradientNumericNode = GradientNumberNode | GradientPercentageNode | GradientDimensionNode;
|
|
317
|
+
type GradientLengthPercentageNode = GradientPercentageNode | GradientDimensionNode;
|
|
318
|
+
interface GradientPositionNode {
|
|
319
|
+
x: GradientLengthPercentageNode | null;
|
|
320
|
+
y: GradientLengthPercentageNode | null;
|
|
321
|
+
keywords: readonly string[];
|
|
322
|
+
}
|
|
323
|
+
type GradientNode = LinearGradientNode | RadialGradientNode | ConicGradientNode;
|
|
324
|
+
//#endregion
|
|
325
|
+
//#region src/parser/helpers/color-helpers.d.ts
|
|
326
|
+
declare function parseColorStop(source: string, tokens: readonly GradientLexerToken[], startIndex: number): ParseResult<GradientColorStopNode>;
|
|
327
|
+
//#endregion
|
|
328
|
+
//#region src/parser/helpers/stop-helpers.d.ts
|
|
329
|
+
declare function parseGradientStopList(source: string, tokens: readonly GradientLexerToken[], startIndex: number): ParseResult<readonly GradientStopItemNode[]>;
|
|
330
|
+
declare function parseGradientStopItem(source: string, tokens: readonly GradientLexerToken[], startIndex: number): ParseResult<GradientStopItemNode>;
|
|
331
|
+
//#endregion
|
|
332
|
+
//#region src/parser/parse.d.ts
|
|
333
|
+
declare function parse(value: string): GradientNode;
|
|
334
|
+
//#endregion
|
|
335
|
+
export { AngleUnit, ConicGradientFromNode, ConicGradientNode, ConicGradientPositionNode, DimensionToken, EofToken, FunctionToken, GradientColorStopNode, GradientDimensionNode, GradientFunctionNameToToken, GradientFunctionToken, GradientKind, GradientLengthPercentageNode, GradientLexerToken, GradientNode, GradientNodeBase, GradientNumberNode, GradientNumericNode, GradientPercentageNode, GradientPositionNode, GradientRepeatMode, GradientStopItemNode, HashToken, IdentToken, KeywordNameToToken, KeywordToken, LexerState, LinearGradientDirectionNode, LinearGradientNode, NumberToken, ParseResult, PercentageToken, PunctuationToken, RadialGradientNode, RadialGradientPositionNode, RadialGradientShape, RadialGradientSizeKeyword, RadialGradientSizeNode, SourceSpan, StringToken, TokenBase, TokenKind, UnknownToken, WhitespaceToken, advance, ceilTo, clamp, consumeIf, createLexerState, createSpan, currentChar, degToRad, expectToken, findBalancedFunctionEndIndex, findNextNonWhitespaceIndex, floorTo, fromPercent, getNonWhitespaceTokenAt, getSourceSlice, getTokenAt, getTokenRangeSourceSlice, getTokenSourceSlice, gradToRad, isAlphaChar, isAngleUnit, isDigitChar, isEnd, isGradientFunctionToken, isIdentifierChar, isIdentifierStartChar, isKeywordToken, isNumericToken, isSignChar, isTriviaToken, isWhitespaceChar, nextToken, normalizeAngle, normalizeAngleDeg, normalizeAngleRad, parse, parseAngleFromToken, parseColorStop, parseConicGradient, parseGradientStopItem, parseGradientStopList, parseLinearGradient, parseRadialGradient, peekChar, radToDeg, readWhile, roundTo, skipWhitespace, toAngleRad, toPercent, tokenize, truncTo, turnToRad };
|