@telegraph/style-engine 0.1.15 → 0.1.16
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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @telegraph/style-engine
|
|
2
2
|
|
|
3
|
+
## 0.1.16
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`0474256`](https://github.com/knocklabs/telegraph/commit/047425631c37101998e39896a34812da5bd4dcbb)]:
|
|
8
|
+
- @telegraph/tokens@0.1.2
|
|
9
|
+
|
|
3
10
|
## 0.1.15
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -1,17 +1,660 @@
|
|
|
1
|
+
# ⚙️ Style Engine
|
|
2
|
+
|
|
3
|
+
> CSS-in-JS styling infrastructure that powers Telegraph's design system with type-safe prop-to-CSS-variable mapping and automated CSS bundling.
|
|
4
|
+
|
|
1
5
|
|
|
2
6
|
|
|
3
|
-
[](https://www.npmjs.com/package/@telegraph/style-engine)
|
|
8
|
+
[](https://bundlephobia.com/result?p=@telegraph/style-engine)
|
|
9
|
+
[](https://github.com/knocklabs/telegraph/blob/main/LICENSE)
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
4
12
|
|
|
5
|
-
|
|
6
|
-
|
|
13
|
+
```bash
|
|
14
|
+
npm install @telegraph/style-engine
|
|
15
|
+
```
|
|
7
16
|
|
|
8
|
-
##
|
|
17
|
+
## Quick Start
|
|
9
18
|
|
|
19
|
+
### PostCSS Plugin Usage
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
// postcss.config.js
|
|
23
|
+
module.exports = {
|
|
24
|
+
plugins: [
|
|
25
|
+
require("@telegraph/style-engine/postcss"),
|
|
26
|
+
// other plugins...
|
|
27
|
+
],
|
|
28
|
+
};
|
|
10
29
|
```
|
|
11
|
-
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
/* styles.css */
|
|
33
|
+
@telegraph tokens;
|
|
34
|
+
@telegraph components;
|
|
35
|
+
|
|
36
|
+
/* Your custom styles here */
|
|
37
|
+
.custom-component {
|
|
38
|
+
color: var(--tgph-blue-9);
|
|
39
|
+
}
|
|
12
40
|
```
|
|
13
41
|
|
|
14
|
-
###
|
|
42
|
+
### Component Development
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import { getStyleProp, useStyleEngine } from "@telegraph/style-engine";
|
|
46
|
+
|
|
47
|
+
// Define CSS variable mappings
|
|
48
|
+
const cssVars = {
|
|
49
|
+
p: {
|
|
50
|
+
cssVar: "--tgph-padding",
|
|
51
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
52
|
+
direction: "all",
|
|
53
|
+
},
|
|
54
|
+
bg: {
|
|
55
|
+
cssVar: "--tgph-background",
|
|
56
|
+
value: "var(--tgph-color-VARIABLE)",
|
|
57
|
+
},
|
|
58
|
+
} as const;
|
|
59
|
+
|
|
60
|
+
export const StyledBox = ({ children, ...props }) => {
|
|
61
|
+
const { styleProp, otherProps } = useStyleEngine({ props, cssVars });
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<div style={styleProp} {...otherProps}>
|
|
65
|
+
{children}
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// Usage
|
|
71
|
+
<StyledBox p="4" bg="blue-3">
|
|
72
|
+
Styled content
|
|
73
|
+
</StyledBox>;
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## What is the Style Engine?
|
|
77
|
+
|
|
78
|
+
The Style Engine is the foundational CSS-in-JS system that enables Telegraph's design system. It provides:
|
|
79
|
+
|
|
80
|
+
- **Prop-to-CSS Mapping**: Converts React props to CSS custom properties
|
|
81
|
+
- **Type Safety**: Full TypeScript support for style props
|
|
82
|
+
- **Design Token Integration**: Seamless integration with Telegraph tokens
|
|
83
|
+
- **Build-time Optimization**: PostCSS plugin for automatic CSS bundling
|
|
84
|
+
- **Responsive Support**: Built-in responsive breakpoint system
|
|
85
|
+
- **Directional Styles**: Support for shorthand directional properties
|
|
86
|
+
|
|
87
|
+
## API Reference
|
|
88
|
+
|
|
89
|
+
### `getStyleProp(params)`
|
|
90
|
+
|
|
91
|
+
Core function that processes style props and returns CSS variables.
|
|
92
|
+
|
|
93
|
+
**Parameters:**
|
|
94
|
+
|
|
95
|
+
- `params.props` - React props object including style props
|
|
96
|
+
- `params.cssVars` - CSS variable mappings configuration
|
|
97
|
+
|
|
98
|
+
**Returns:**
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
{
|
|
102
|
+
styleProp: Record<string, string>; // CSS custom properties
|
|
103
|
+
otherProps: Record<string, unknown>; // Non-style props
|
|
104
|
+
interactive: boolean; // Whether component has interactive styles
|
|
105
|
+
}
|
|
15
106
|
```
|
|
16
|
-
|
|
107
|
+
|
|
108
|
+
### `useStyleEngine(params)`
|
|
109
|
+
|
|
110
|
+
React hook wrapper around `getStyleProp` with memoization.
|
|
111
|
+
|
|
112
|
+
**Parameters:**
|
|
113
|
+
Same as `getStyleProp`
|
|
114
|
+
|
|
115
|
+
**Returns:**
|
|
116
|
+
Same as `getStyleProp`
|
|
117
|
+
|
|
118
|
+
### `tokens`
|
|
119
|
+
|
|
120
|
+
CSS variables map exported from `@telegraph/tokens`.
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
import { tokens } from "@telegraph/style-engine";
|
|
124
|
+
|
|
125
|
+
// Access token values
|
|
126
|
+
const blueColor = tokens["--tgph-blue-9"];
|
|
17
127
|
```
|
|
128
|
+
|
|
129
|
+
### CSS Variable Configuration
|
|
130
|
+
|
|
131
|
+
Define how props map to CSS variables:
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
type CssVarProp = {
|
|
135
|
+
cssVar: string; // CSS custom property name
|
|
136
|
+
value: string; // Value template (use VARIABLE for prop value)
|
|
137
|
+
direction?: Direction; // For directional properties
|
|
138
|
+
interactive?: boolean; // Mark as interactive style
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
type Direction =
|
|
142
|
+
| "x"
|
|
143
|
+
| "y" // Horizontal/vertical
|
|
144
|
+
| "top"
|
|
145
|
+
| "bottom"
|
|
146
|
+
| "left"
|
|
147
|
+
| "right" // Individual sides
|
|
148
|
+
| "all" // All sides
|
|
149
|
+
| "side-top"
|
|
150
|
+
| "side-bottom"
|
|
151
|
+
| "side-left"
|
|
152
|
+
| "side-right"; // Corner sides
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
## PostCSS Plugin
|
|
156
|
+
|
|
157
|
+
The PostCSS plugin automatically includes CSS from Telegraph packages.
|
|
158
|
+
|
|
159
|
+
### At-Rules
|
|
160
|
+
|
|
161
|
+
| Rule | Description |
|
|
162
|
+
| ------------------------- | --------------------------------- |
|
|
163
|
+
| `@telegraph tokens` | Include default design tokens CSS |
|
|
164
|
+
| `@telegraph tokens-light` | Include light theme tokens |
|
|
165
|
+
| `@telegraph tokens-dark` | Include dark theme tokens |
|
|
166
|
+
| `@telegraph components` | Include all component stylesheets |
|
|
167
|
+
|
|
168
|
+
### Configuration
|
|
169
|
+
|
|
170
|
+
```js
|
|
171
|
+
// postcss.config.js
|
|
172
|
+
const telegraphPlugin = require("@telegraph/style-engine/postcss");
|
|
173
|
+
|
|
174
|
+
module.exports = {
|
|
175
|
+
plugins: [
|
|
176
|
+
telegraphPlugin(),
|
|
177
|
+
require("autoprefixer"),
|
|
178
|
+
// other plugins...
|
|
179
|
+
],
|
|
180
|
+
};
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Usage in CSS
|
|
184
|
+
|
|
185
|
+
```css
|
|
186
|
+
/* Base tokens (always include first) */
|
|
187
|
+
@telegraph tokens;
|
|
188
|
+
|
|
189
|
+
/* Theme-specific tokens */
|
|
190
|
+
@telegraph tokens-light;
|
|
191
|
+
@telegraph tokens-dark;
|
|
192
|
+
|
|
193
|
+
/* All component styles */
|
|
194
|
+
@telegraph components;
|
|
195
|
+
|
|
196
|
+
/* Your custom styles */
|
|
197
|
+
.my-component {
|
|
198
|
+
background: var(--tgph-gray-2);
|
|
199
|
+
padding: var(--tgph-space-3);
|
|
200
|
+
border-radius: var(--tgph-radius-2);
|
|
201
|
+
}
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
## Advanced Usage
|
|
205
|
+
|
|
206
|
+
### Building Custom Components
|
|
207
|
+
|
|
208
|
+
```tsx
|
|
209
|
+
import { type CssVarProp, useStyleEngine } from "@telegraph/style-engine";
|
|
210
|
+
|
|
211
|
+
// Define comprehensive CSS variable mappings
|
|
212
|
+
const cssVars = {
|
|
213
|
+
// Spacing
|
|
214
|
+
p: {
|
|
215
|
+
cssVar: "--tgph-padding",
|
|
216
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
217
|
+
direction: "all",
|
|
218
|
+
},
|
|
219
|
+
pt: {
|
|
220
|
+
cssVar: "--tgph-padding",
|
|
221
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
222
|
+
direction: "top",
|
|
223
|
+
},
|
|
224
|
+
pr: {
|
|
225
|
+
cssVar: "--tgph-padding",
|
|
226
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
227
|
+
direction: "right",
|
|
228
|
+
},
|
|
229
|
+
pb: {
|
|
230
|
+
cssVar: "--tgph-padding",
|
|
231
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
232
|
+
direction: "bottom",
|
|
233
|
+
},
|
|
234
|
+
pl: {
|
|
235
|
+
cssVar: "--tgph-padding",
|
|
236
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
237
|
+
direction: "left",
|
|
238
|
+
},
|
|
239
|
+
px: {
|
|
240
|
+
cssVar: "--tgph-padding",
|
|
241
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
242
|
+
direction: "x",
|
|
243
|
+
},
|
|
244
|
+
py: {
|
|
245
|
+
cssVar: "--tgph-padding",
|
|
246
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
247
|
+
direction: "y",
|
|
248
|
+
},
|
|
249
|
+
|
|
250
|
+
// Margin
|
|
251
|
+
m: {
|
|
252
|
+
cssVar: "--tgph-margin",
|
|
253
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
254
|
+
direction: "all",
|
|
255
|
+
},
|
|
256
|
+
mt: {
|
|
257
|
+
cssVar: "--tgph-margin",
|
|
258
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
259
|
+
direction: "top",
|
|
260
|
+
},
|
|
261
|
+
// ... more margin variants
|
|
262
|
+
|
|
263
|
+
// Colors
|
|
264
|
+
bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
|
|
265
|
+
color: { cssVar: "--tgph-color", value: "var(--tgph-color-VARIABLE)" },
|
|
266
|
+
|
|
267
|
+
// Layout
|
|
268
|
+
w: { cssVar: "--tgph-width", value: "VARIABLE" },
|
|
269
|
+
h: { cssVar: "--tgph-height", value: "VARIABLE" },
|
|
270
|
+
|
|
271
|
+
// Interactive states
|
|
272
|
+
hoverBg: {
|
|
273
|
+
cssVar: "--tgph-hover-background",
|
|
274
|
+
value: "var(--tgph-color-VARIABLE)",
|
|
275
|
+
interactive: true,
|
|
276
|
+
},
|
|
277
|
+
} as const;
|
|
278
|
+
|
|
279
|
+
type StyledBoxProps = {
|
|
280
|
+
p?: string;
|
|
281
|
+
pt?: string;
|
|
282
|
+
pr?: string;
|
|
283
|
+
pb?: string;
|
|
284
|
+
pl?: string;
|
|
285
|
+
px?: string;
|
|
286
|
+
py?: string;
|
|
287
|
+
m?: string;
|
|
288
|
+
mt?: string;
|
|
289
|
+
bg?: string;
|
|
290
|
+
color?: string;
|
|
291
|
+
w?: string;
|
|
292
|
+
h?: string;
|
|
293
|
+
hoverBg?: string;
|
|
294
|
+
children?: React.ReactNode;
|
|
295
|
+
} & React.HTMLAttributes<HTMLDivElement>;
|
|
296
|
+
|
|
297
|
+
export const StyledBox = ({ children, ...props }: StyledBoxProps) => {
|
|
298
|
+
const { styleProp, otherProps, interactive } = useStyleEngine({
|
|
299
|
+
props,
|
|
300
|
+
cssVars,
|
|
301
|
+
});
|
|
302
|
+
|
|
303
|
+
return (
|
|
304
|
+
<div
|
|
305
|
+
className={interactive ? "tgph-interactive" : undefined}
|
|
306
|
+
style={styleProp}
|
|
307
|
+
{...otherProps}
|
|
308
|
+
>
|
|
309
|
+
{children}
|
|
310
|
+
</div>
|
|
311
|
+
);
|
|
312
|
+
};
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
### Responsive Styles
|
|
316
|
+
|
|
317
|
+
```tsx
|
|
318
|
+
import { RESPONSIVE_STYLE_PROPS } from "@telegraph/style-engine";
|
|
319
|
+
|
|
320
|
+
// Define responsive CSS variables
|
|
321
|
+
const responsiveCssVars = {
|
|
322
|
+
p: {
|
|
323
|
+
cssVar: "--tgph-padding",
|
|
324
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
325
|
+
direction: "all",
|
|
326
|
+
},
|
|
327
|
+
} as const;
|
|
328
|
+
|
|
329
|
+
// Responsive component
|
|
330
|
+
export const ResponsiveBox = ({ children, ...props }) => {
|
|
331
|
+
const { styleProp, otherProps } = useStyleEngine({
|
|
332
|
+
props,
|
|
333
|
+
cssVars: responsiveCssVars,
|
|
334
|
+
});
|
|
335
|
+
|
|
336
|
+
return (
|
|
337
|
+
<div
|
|
338
|
+
style={{
|
|
339
|
+
...styleProp,
|
|
340
|
+
// Add responsive overrides
|
|
341
|
+
[`@media ${RESPONSIVE_STYLE_PROPS.conditions.md["@media"]}`]: {
|
|
342
|
+
"--tgph-padding": "var(--tgph-space-6)",
|
|
343
|
+
},
|
|
344
|
+
}}
|
|
345
|
+
{...otherProps}
|
|
346
|
+
>
|
|
347
|
+
{children}
|
|
348
|
+
</div>
|
|
349
|
+
);
|
|
350
|
+
};
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
### Performance Optimization
|
|
354
|
+
|
|
355
|
+
```tsx
|
|
356
|
+
// Memoize CSS variable definitions
|
|
357
|
+
const cssVars = useMemo(
|
|
358
|
+
() => ({
|
|
359
|
+
p: { cssVar: "--tgph-padding", value: "var(--tgph-space-VARIABLE)" },
|
|
360
|
+
bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
|
|
361
|
+
}),
|
|
362
|
+
[],
|
|
363
|
+
);
|
|
364
|
+
|
|
365
|
+
// Use callback for complex prop processing
|
|
366
|
+
const processedProps = useCallback(
|
|
367
|
+
(props) => {
|
|
368
|
+
return getStyleProp({ props, cssVars });
|
|
369
|
+
},
|
|
370
|
+
[cssVars],
|
|
371
|
+
);
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
### Custom Directional Logic
|
|
375
|
+
|
|
376
|
+
```tsx
|
|
377
|
+
// Custom direction handling
|
|
378
|
+
const customCssVars = {
|
|
379
|
+
borderRadius: {
|
|
380
|
+
cssVar: "--tgph-border-radius",
|
|
381
|
+
value: "var(--tgph-radius-VARIABLE)",
|
|
382
|
+
direction: "side-top", // Affects top-left and top-right corners
|
|
383
|
+
},
|
|
384
|
+
shadowDirection: {
|
|
385
|
+
cssVar: "--tgph-box-shadow",
|
|
386
|
+
value: "VARIABLE 4px 8px rgba(0,0,0,0.1)", // Custom shadow template
|
|
387
|
+
direction: "x", // Horizontal shadow direction
|
|
388
|
+
},
|
|
389
|
+
} as const;
|
|
390
|
+
```
|
|
391
|
+
|
|
392
|
+
## Design Tokens & Styling
|
|
393
|
+
|
|
394
|
+
The Style Engine integrates deeply with Telegraph design tokens:
|
|
395
|
+
|
|
396
|
+
- **Color System**: `var(--tgph-blue-9)`, `var(--tgph-gray-3)`, etc.
|
|
397
|
+
- **Spacing Scale**: `var(--tgph-space-1)` through `var(--tgph-space-12)`
|
|
398
|
+
- **Typography**: Font sizes, weights, and line heights
|
|
399
|
+
- **Radius Scale**: Border radius values
|
|
400
|
+
- **Shadows**: Box shadow definitions
|
|
401
|
+
- **Breakpoints**: Responsive media query breakpoints
|
|
402
|
+
|
|
403
|
+
### Token Usage
|
|
404
|
+
|
|
405
|
+
```css
|
|
406
|
+
.custom-component {
|
|
407
|
+
/* Spacing tokens */
|
|
408
|
+
padding: var(--tgph-space-4);
|
|
409
|
+
margin: var(--tgph-space-2) var(--tgph-space-3);
|
|
410
|
+
|
|
411
|
+
/* Color tokens */
|
|
412
|
+
background: var(--tgph-blue-3);
|
|
413
|
+
color: var(--tgph-blue-11);
|
|
414
|
+
border: 1px solid var(--tgph-blue-6);
|
|
415
|
+
|
|
416
|
+
/* Typography tokens */
|
|
417
|
+
font-size: var(--tgph-font-size-2);
|
|
418
|
+
line-height: var(--tgph-line-height-2);
|
|
419
|
+
|
|
420
|
+
/* Layout tokens */
|
|
421
|
+
border-radius: var(--tgph-radius-2);
|
|
422
|
+
box-shadow: var(--tgph-shadow-2);
|
|
423
|
+
}
|
|
424
|
+
```
|
|
425
|
+
|
|
426
|
+
## Build Process
|
|
427
|
+
|
|
428
|
+
The Style Engine PostCSS plugin performs the following optimizations:
|
|
429
|
+
|
|
430
|
+
1. **Dependency Detection**: Scans package.json for Telegraph dependencies
|
|
431
|
+
2. **CSS Extraction**: Extracts CSS from each Telegraph package's dist/css directory
|
|
432
|
+
3. **Bundle Creation**: Combines all CSS into a single optimized bundle
|
|
433
|
+
4. **Token Resolution**: Resolves design token references
|
|
434
|
+
5. **Duplicate Removal**: Eliminates duplicate CSS rules
|
|
435
|
+
6. **Minification**: Optimizes final CSS output
|
|
436
|
+
|
|
437
|
+
## Troubleshooting
|
|
438
|
+
|
|
439
|
+
### Common Issues
|
|
440
|
+
|
|
441
|
+
**CSS Variables Not Working**
|
|
442
|
+
|
|
443
|
+
```tsx
|
|
444
|
+
// Ensure tgph class is on root element
|
|
445
|
+
<div className="tgph">
|
|
446
|
+
<YourComponent />
|
|
447
|
+
</div>
|
|
448
|
+
```
|
|
449
|
+
|
|
450
|
+
**PostCSS Plugin Errors**
|
|
451
|
+
|
|
452
|
+
```js
|
|
453
|
+
// Check Telegraph packages are installed
|
|
454
|
+
npm ls @telegraph/tokens @telegraph/button
|
|
455
|
+
```
|
|
456
|
+
|
|
457
|
+
**Type Errors with CSS Variables**
|
|
458
|
+
|
|
459
|
+
```tsx
|
|
460
|
+
// Ensure cssVars object uses 'as const'
|
|
461
|
+
const cssVars = {
|
|
462
|
+
p: { cssVar: "--tgph-padding", value: "var(--tgph-space-VARIABLE)" },
|
|
463
|
+
} as const; // <- Important!
|
|
464
|
+
```
|
|
465
|
+
|
|
466
|
+
## Examples
|
|
467
|
+
|
|
468
|
+
### Basic Example
|
|
469
|
+
|
|
470
|
+
```tsx
|
|
471
|
+
import { useStyleEngine } from "@telegraph/style-engine";
|
|
472
|
+
|
|
473
|
+
const cssVars = {
|
|
474
|
+
p: { cssVar: "--tgph-padding", value: "var(--tgph-space-VARIABLE)" },
|
|
475
|
+
bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
|
|
476
|
+
} as const;
|
|
477
|
+
|
|
478
|
+
export const SimpleBox = (props) => {
|
|
479
|
+
const { styleProp, otherProps } = useStyleEngine({ props, cssVars });
|
|
480
|
+
|
|
481
|
+
return <div style={styleProp} {...otherProps} />;
|
|
482
|
+
};
|
|
483
|
+
|
|
484
|
+
// Usage
|
|
485
|
+
<SimpleBox p="4" bg="blue-3">
|
|
486
|
+
Content
|
|
487
|
+
</SimpleBox>;
|
|
488
|
+
```
|
|
489
|
+
|
|
490
|
+
### Advanced Example
|
|
491
|
+
|
|
492
|
+
```tsx
|
|
493
|
+
import {
|
|
494
|
+
RESPONSIVE_STYLE_PROPS,
|
|
495
|
+
useStyleEngine,
|
|
496
|
+
} from "@telegraph/style-engine";
|
|
497
|
+
|
|
498
|
+
const advancedCssVars = {
|
|
499
|
+
// Spacing
|
|
500
|
+
p: {
|
|
501
|
+
cssVar: "--tgph-padding",
|
|
502
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
503
|
+
direction: "all",
|
|
504
|
+
},
|
|
505
|
+
pt: {
|
|
506
|
+
cssVar: "--tgph-padding",
|
|
507
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
508
|
+
direction: "top",
|
|
509
|
+
},
|
|
510
|
+
pr: {
|
|
511
|
+
cssVar: "--tgph-padding",
|
|
512
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
513
|
+
direction: "right",
|
|
514
|
+
},
|
|
515
|
+
pb: {
|
|
516
|
+
cssVar: "--tgph-padding",
|
|
517
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
518
|
+
direction: "bottom",
|
|
519
|
+
},
|
|
520
|
+
pl: {
|
|
521
|
+
cssVar: "--tgph-padding",
|
|
522
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
523
|
+
direction: "left",
|
|
524
|
+
},
|
|
525
|
+
px: {
|
|
526
|
+
cssVar: "--tgph-padding",
|
|
527
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
528
|
+
direction: "x",
|
|
529
|
+
},
|
|
530
|
+
py: {
|
|
531
|
+
cssVar: "--tgph-padding",
|
|
532
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
533
|
+
direction: "y",
|
|
534
|
+
},
|
|
535
|
+
|
|
536
|
+
// Colors & States
|
|
537
|
+
bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
|
|
538
|
+
hoverBg: {
|
|
539
|
+
cssVar: "--tgph-hover-bg",
|
|
540
|
+
value: "var(--tgph-color-VARIABLE)",
|
|
541
|
+
interactive: true,
|
|
542
|
+
},
|
|
543
|
+
|
|
544
|
+
// Layout
|
|
545
|
+
w: { cssVar: "--tgph-width", value: "VARIABLE" },
|
|
546
|
+
h: { cssVar: "--tgph-height", value: "VARIABLE" },
|
|
547
|
+
rounded: {
|
|
548
|
+
cssVar: "--tgph-border-radius",
|
|
549
|
+
value: "var(--tgph-radius-VARIABLE)",
|
|
550
|
+
},
|
|
551
|
+
} as const;
|
|
552
|
+
|
|
553
|
+
export const AdvancedBox = ({ children, ...props }) => {
|
|
554
|
+
const { styleProp, otherProps, interactive } = useStyleEngine({
|
|
555
|
+
props,
|
|
556
|
+
cssVars: advancedCssVars,
|
|
557
|
+
});
|
|
558
|
+
|
|
559
|
+
return (
|
|
560
|
+
<div
|
|
561
|
+
className={interactive ? "tgph-interactive" : undefined}
|
|
562
|
+
style={{
|
|
563
|
+
...styleProp,
|
|
564
|
+
transition: interactive ? "all 0.2s ease" : undefined,
|
|
565
|
+
}}
|
|
566
|
+
{...otherProps}
|
|
567
|
+
>
|
|
568
|
+
{children}
|
|
569
|
+
</div>
|
|
570
|
+
);
|
|
571
|
+
};
|
|
572
|
+
|
|
573
|
+
// Usage
|
|
574
|
+
<AdvancedBox p="4" px="6" bg="blue-3" hoverBg="blue-4" rounded="2" w="200px">
|
|
575
|
+
Interactive Content
|
|
576
|
+
</AdvancedBox>;
|
|
577
|
+
```
|
|
578
|
+
|
|
579
|
+
### Real-world Example
|
|
580
|
+
|
|
581
|
+
```tsx
|
|
582
|
+
// CustomButton.tsx
|
|
583
|
+
import { useStyleEngine } from "@telegraph/style-engine";
|
|
584
|
+
import { forwardRef } from "react";
|
|
585
|
+
|
|
586
|
+
const buttonCssVars = {
|
|
587
|
+
size: {
|
|
588
|
+
cssVar: "--tgph-button-size",
|
|
589
|
+
value: "var(--tgph-button-size-VARIABLE)"
|
|
590
|
+
},
|
|
591
|
+
variant: {
|
|
592
|
+
cssVar: "--tgph-button-variant",
|
|
593
|
+
value: "var(--tgph-button-variant-VARIABLE)"
|
|
594
|
+
},
|
|
595
|
+
p: {
|
|
596
|
+
cssVar: "--tgph-padding",
|
|
597
|
+
value: "var(--tgph-space-VARIABLE)",
|
|
598
|
+
direction: "all"
|
|
599
|
+
}
|
|
600
|
+
} as const;
|
|
601
|
+
|
|
602
|
+
type CustomButtonProps = {
|
|
603
|
+
size?: "sm" | "md" | "lg";
|
|
604
|
+
variant?: "solid" | "outline" | "ghost";
|
|
605
|
+
p?: string;
|
|
606
|
+
children: React.ReactNode;
|
|
607
|
+
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
608
|
+
|
|
609
|
+
export const CustomButton = forwardRef<HTMLButtonElement, CustomButtonProps>(
|
|
610
|
+
({ children, ...props }, ref) => {
|
|
611
|
+
const { styleProp, otherProps, interactive } = useStyleEngine({
|
|
612
|
+
props,
|
|
613
|
+
cssVars: buttonCssVars
|
|
614
|
+
});
|
|
615
|
+
|
|
616
|
+
return (
|
|
617
|
+
<button
|
|
618
|
+
ref={ref}
|
|
619
|
+
className={`custom-button ${interactive ? "interactive" : ""}`}
|
|
620
|
+
style={styleProp}
|
|
621
|
+
{...otherProps}
|
|
622
|
+
>
|
|
623
|
+
{children}
|
|
624
|
+
</button>
|
|
625
|
+
);
|
|
626
|
+
}
|
|
627
|
+
);
|
|
628
|
+
|
|
629
|
+
// Corresponding CSS
|
|
630
|
+
/* button.css */
|
|
631
|
+
@telegraph tokens;
|
|
632
|
+
|
|
633
|
+
.custom-button {
|
|
634
|
+
background: var(--tgph-button-variant, var(--tgph-blue-9));
|
|
635
|
+
padding: var(--tgph-padding, var(--tgph-space-2) var(--tgph-space-3));
|
|
636
|
+
font-size: var(--tgph-button-size, var(--tgph-font-size-1));
|
|
637
|
+
border-radius: var(--tgph-radius-2);
|
|
638
|
+
border: none;
|
|
639
|
+
cursor: pointer;
|
|
640
|
+
transition: all 0.2s ease;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
.custom-button.interactive:hover {
|
|
644
|
+
background: var(--tgph-blue-10);
|
|
645
|
+
}
|
|
646
|
+
```
|
|
647
|
+
|
|
648
|
+
## References
|
|
649
|
+
|
|
650
|
+
- [Telegraph Tokens](../tokens/README.md) - Design token system
|
|
651
|
+
- [PostCSS Documentation](https://postcss.org/) - PostCSS ecosystem
|
|
652
|
+
- [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) - CSS variables
|
|
653
|
+
|
|
654
|
+
## Contributing
|
|
655
|
+
|
|
656
|
+
See our [Contributing Guide](../../CONTRIBUTING.md) for more details.
|
|
657
|
+
|
|
658
|
+
## License
|
|
659
|
+
|
|
660
|
+
MIT License - see [LICENSE](../../LICENSE) for details.
|
package/dist/cjs/postcss.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"postcss.js","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n dependencies?: Record<string, string>;\n devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n string,\n {\n name: string;\n version: string;\n path: string;\n }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n let current = start;\n let run = true;\n\n while (run) {\n const pkgJsonPath = nodePath.join(current, \"package.json\");\n if (nodeFs.existsSync(pkgJsonPath)) {\n try {\n const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n if (pkg.workspaces) {\n return current;\n }\n } catch {\n // malformed package.json, skip\n }\n }\n\n const parent = nodePath.dirname(current);\n if (parent === current) run = false;\n current = parent;\n }\n\n return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n pkg: PkgJson,\n pkgPath: string,\n): DepObject | undefined => {\n if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n if (dep.startsWith(\"@telegraph/\")) {\n acc[dep] = {\n name: dep,\n version,\n path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n };\n }\n return acc;\n }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n const monorepoRoot = findMonorepoRoot();\n\n const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n if (!deps || Object.keys(deps).length === 0) {\n return deps;\n }\n\n const allDeps = { ...deps };\n\n for (const dep of Object.values(deps)) {\n let pkgJsonPath: string;\n let searchPath: string;\n\n if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n pkgJsonPath = nodePath.resolve(\n monorepoRoot,\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = monorepoRoot;\n } else {\n pkgJsonPath = nodePath.resolve(\n process.cwd(),\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = process.cwd();\n }\n\n try {\n const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n // Merge new dependencies into allDeps\n Object.assign(allDeps, deps);\n\n if (deps) {\n // Recursively get dependencies of dependencies\n const nestedDeps = recursivelyGetTelegraphDeps(deps);\n Object.assign(allDeps, nestedDeps);\n }\n } catch (err) {\n // Skip if package.json cannot be read\n continue;\n }\n }\n\n return allDeps;\n };\n\n if (topLevelDeps) {\n return recursivelyGetTelegraphDeps(topLevelDeps);\n }\n\n return {};\n}\n\ntype GetCssStylesParams = {\n fileName?: string;\n path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n fileName = \"default.css\",\n path,\n}: GetCssStylesParams): string | null {\n try {\n const cssPath = `${path}/dist/css/${fileName}`;\n const pkgPath = nodePath.resolve(cssPath);\n\n if (nodeFs.existsSync(pkgPath)) {\n return nodeFs.readFileSync(pkgPath, \"utf8\");\n }\n\n return null;\n } catch {\n return null;\n }\n}\n\ntype BuildTelegraphCssParams = {\n root: Root;\n config: {\n tokens: Array<\"light\" | \"dark\" | \"default\">;\n components: boolean;\n };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n const deps = getTelegraphDeps();\n\n const depsWithoutTokens =\n config.components === true\n ? Object.values(deps).filter(\n (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const tokensDeps =\n config.tokens.length > 0\n ? Object.values(deps).filter((dep) =>\n dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const cssFiles = depsWithoutTokens\n .map((dep) => getCssStyles({ path: dep.path }))\n .filter(Boolean) as Array<string>;\n\n const tokensCssFiles = config.tokens\n .map((token) => {\n const cssFile = tokensDeps.map((dep) =>\n getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n );\n\n return cssFile.filter(Boolean) as Array<string>;\n })\n .filter(Boolean);\n\n const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n for (const content of allCssFiles) {\n const parsed = postcss.parse(content);\n root.append(parsed);\n }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n return {\n postcssPlugin: \"@telegraph/style-engine\",\n plugins: [\n {\n postcssPlugin: \"telegraph\",\n AtRule: {\n telegraph() {},\n },\n async Once(root) {\n const run = {\n tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n components: false,\n };\n root.walkAtRules(\"telegraph\", (atRule) => {\n if (atRule.params === \"components\") {\n run.components = true;\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-light\") {\n run.tokens.push(\"light\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-dark\") {\n run.tokens.push(\"dark\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens\") {\n run.tokens.push(\"default\");\n atRule.remove();\n }\n });\n\n await buildTelegraphCss({\n root,\n config: {\n tokens: run.tokens,\n components: run.components,\n },\n });\n },\n },\n ],\n };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"postcss.js","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n dependencies?: Record<string, string>;\n devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n string,\n {\n name: string;\n version: string;\n path: string;\n }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n let current = start;\n let run = true;\n\n while (run) {\n const pkgJsonPath = nodePath.join(current, \"package.json\");\n if (nodeFs.existsSync(pkgJsonPath)) {\n try {\n const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n if (pkg.workspaces) {\n return current;\n }\n } catch {\n // malformed package.json, skip\n }\n }\n\n const parent = nodePath.dirname(current);\n if (parent === current) run = false;\n current = parent;\n }\n\n return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n pkg: PkgJson,\n pkgPath: string,\n): DepObject | undefined => {\n if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n if (dep.startsWith(\"@telegraph/\")) {\n acc[dep] = {\n name: dep,\n version,\n path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n };\n }\n return acc;\n }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n const monorepoRoot = findMonorepoRoot();\n\n const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n if (!deps || Object.keys(deps).length === 0) {\n return deps;\n }\n\n const allDeps = { ...deps };\n\n for (const dep of Object.values(deps)) {\n let pkgJsonPath: string;\n let searchPath: string;\n\n if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n pkgJsonPath = nodePath.resolve(\n monorepoRoot,\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = monorepoRoot;\n } else {\n pkgJsonPath = nodePath.resolve(\n process.cwd(),\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = process.cwd();\n }\n\n try {\n const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n // Merge new dependencies into allDeps\n Object.assign(allDeps, deps);\n\n if (deps) {\n // Recursively get dependencies of dependencies\n const nestedDeps = recursivelyGetTelegraphDeps(deps);\n Object.assign(allDeps, nestedDeps);\n }\n } catch (_err) {\n // Skip if package.json cannot be read\n continue;\n }\n }\n\n return allDeps;\n };\n\n if (topLevelDeps) {\n return recursivelyGetTelegraphDeps(topLevelDeps);\n }\n\n return {};\n}\n\ntype GetCssStylesParams = {\n fileName?: string;\n path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n fileName = \"default.css\",\n path,\n}: GetCssStylesParams): string | null {\n try {\n const cssPath = `${path}/dist/css/${fileName}`;\n const pkgPath = nodePath.resolve(cssPath);\n\n if (nodeFs.existsSync(pkgPath)) {\n return nodeFs.readFileSync(pkgPath, \"utf8\");\n }\n\n return null;\n } catch {\n return null;\n }\n}\n\ntype BuildTelegraphCssParams = {\n root: Root;\n config: {\n tokens: Array<\"light\" | \"dark\" | \"default\">;\n components: boolean;\n };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n const deps = getTelegraphDeps();\n\n const depsWithoutTokens =\n config.components === true\n ? Object.values(deps).filter(\n (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const tokensDeps =\n config.tokens.length > 0\n ? Object.values(deps).filter((dep) =>\n dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const cssFiles = depsWithoutTokens\n .map((dep) => getCssStyles({ path: dep.path }))\n .filter(Boolean) as Array<string>;\n\n const tokensCssFiles = config.tokens\n .map((token) => {\n const cssFile = tokensDeps.map((dep) =>\n getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n );\n\n return cssFile.filter(Boolean) as Array<string>;\n })\n .filter(Boolean);\n\n const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n for (const content of allCssFiles) {\n const parsed = postcss.parse(content);\n root.append(parsed);\n }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n return {\n postcssPlugin: \"@telegraph/style-engine\",\n plugins: [\n {\n postcssPlugin: \"telegraph\",\n AtRule: {\n telegraph() {},\n },\n async Once(root) {\n const run = {\n tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n components: false,\n };\n root.walkAtRules(\"telegraph\", (atRule) => {\n if (atRule.params === \"components\") {\n run.components = true;\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-light\") {\n run.tokens.push(\"light\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-dark\") {\n run.tokens.push(\"dark\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens\") {\n run.tokens.push(\"default\");\n atRule.remove();\n }\n });\n\n await buildTelegraphCss({\n root,\n config: {\n tokens: run.tokens,\n components: run.components,\n },\n });\n },\n },\n ],\n };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}
|
package/dist/esm/postcss.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"postcss.mjs","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n dependencies?: Record<string, string>;\n devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n string,\n {\n name: string;\n version: string;\n path: string;\n }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n let current = start;\n let run = true;\n\n while (run) {\n const pkgJsonPath = nodePath.join(current, \"package.json\");\n if (nodeFs.existsSync(pkgJsonPath)) {\n try {\n const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n if (pkg.workspaces) {\n return current;\n }\n } catch {\n // malformed package.json, skip\n }\n }\n\n const parent = nodePath.dirname(current);\n if (parent === current) run = false;\n current = parent;\n }\n\n return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n pkg: PkgJson,\n pkgPath: string,\n): DepObject | undefined => {\n if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n if (dep.startsWith(\"@telegraph/\")) {\n acc[dep] = {\n name: dep,\n version,\n path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n };\n }\n return acc;\n }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n const monorepoRoot = findMonorepoRoot();\n\n const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n if (!deps || Object.keys(deps).length === 0) {\n return deps;\n }\n\n const allDeps = { ...deps };\n\n for (const dep of Object.values(deps)) {\n let pkgJsonPath: string;\n let searchPath: string;\n\n if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n pkgJsonPath = nodePath.resolve(\n monorepoRoot,\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = monorepoRoot;\n } else {\n pkgJsonPath = nodePath.resolve(\n process.cwd(),\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = process.cwd();\n }\n\n try {\n const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n // Merge new dependencies into allDeps\n Object.assign(allDeps, deps);\n\n if (deps) {\n // Recursively get dependencies of dependencies\n const nestedDeps = recursivelyGetTelegraphDeps(deps);\n Object.assign(allDeps, nestedDeps);\n }\n } catch (err) {\n // Skip if package.json cannot be read\n continue;\n }\n }\n\n return allDeps;\n };\n\n if (topLevelDeps) {\n return recursivelyGetTelegraphDeps(topLevelDeps);\n }\n\n return {};\n}\n\ntype GetCssStylesParams = {\n fileName?: string;\n path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n fileName = \"default.css\",\n path,\n}: GetCssStylesParams): string | null {\n try {\n const cssPath = `${path}/dist/css/${fileName}`;\n const pkgPath = nodePath.resolve(cssPath);\n\n if (nodeFs.existsSync(pkgPath)) {\n return nodeFs.readFileSync(pkgPath, \"utf8\");\n }\n\n return null;\n } catch {\n return null;\n }\n}\n\ntype BuildTelegraphCssParams = {\n root: Root;\n config: {\n tokens: Array<\"light\" | \"dark\" | \"default\">;\n components: boolean;\n };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n const deps = getTelegraphDeps();\n\n const depsWithoutTokens =\n config.components === true\n ? Object.values(deps).filter(\n (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const tokensDeps =\n config.tokens.length > 0\n ? Object.values(deps).filter((dep) =>\n dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const cssFiles = depsWithoutTokens\n .map((dep) => getCssStyles({ path: dep.path }))\n .filter(Boolean) as Array<string>;\n\n const tokensCssFiles = config.tokens\n .map((token) => {\n const cssFile = tokensDeps.map((dep) =>\n getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n );\n\n return cssFile.filter(Boolean) as Array<string>;\n })\n .filter(Boolean);\n\n const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n for (const content of allCssFiles) {\n const parsed = postcss.parse(content);\n root.append(parsed);\n }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n return {\n postcssPlugin: \"@telegraph/style-engine\",\n plugins: [\n {\n postcssPlugin: \"telegraph\",\n AtRule: {\n telegraph() {},\n },\n async Once(root) {\n const run = {\n tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n components: false,\n };\n root.walkAtRules(\"telegraph\", (atRule) => {\n if (atRule.params === \"components\") {\n run.components = true;\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-light\") {\n run.tokens.push(\"light\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-dark\") {\n run.tokens.push(\"dark\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens\") {\n run.tokens.push(\"default\");\n atRule.remove();\n }\n });\n\n await buildTelegraphCss({\n root,\n config: {\n tokens: run.tokens,\n components: run.components,\n },\n });\n },\n },\n ],\n };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"postcss.mjs","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n dependencies?: Record<string, string>;\n devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n string,\n {\n name: string;\n version: string;\n path: string;\n }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n let current = start;\n let run = true;\n\n while (run) {\n const pkgJsonPath = nodePath.join(current, \"package.json\");\n if (nodeFs.existsSync(pkgJsonPath)) {\n try {\n const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n if (pkg.workspaces) {\n return current;\n }\n } catch {\n // malformed package.json, skip\n }\n }\n\n const parent = nodePath.dirname(current);\n if (parent === current) run = false;\n current = parent;\n }\n\n return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n pkg: PkgJson,\n pkgPath: string,\n): DepObject | undefined => {\n if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n if (dep.startsWith(\"@telegraph/\")) {\n acc[dep] = {\n name: dep,\n version,\n path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n };\n }\n return acc;\n }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n const monorepoRoot = findMonorepoRoot();\n\n const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n if (!deps || Object.keys(deps).length === 0) {\n return deps;\n }\n\n const allDeps = { ...deps };\n\n for (const dep of Object.values(deps)) {\n let pkgJsonPath: string;\n let searchPath: string;\n\n if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n pkgJsonPath = nodePath.resolve(\n monorepoRoot,\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = monorepoRoot;\n } else {\n pkgJsonPath = nodePath.resolve(\n process.cwd(),\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = process.cwd();\n }\n\n try {\n const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n // Merge new dependencies into allDeps\n Object.assign(allDeps, deps);\n\n if (deps) {\n // Recursively get dependencies of dependencies\n const nestedDeps = recursivelyGetTelegraphDeps(deps);\n Object.assign(allDeps, nestedDeps);\n }\n } catch (_err) {\n // Skip if package.json cannot be read\n continue;\n }\n }\n\n return allDeps;\n };\n\n if (topLevelDeps) {\n return recursivelyGetTelegraphDeps(topLevelDeps);\n }\n\n return {};\n}\n\ntype GetCssStylesParams = {\n fileName?: string;\n path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n fileName = \"default.css\",\n path,\n}: GetCssStylesParams): string | null {\n try {\n const cssPath = `${path}/dist/css/${fileName}`;\n const pkgPath = nodePath.resolve(cssPath);\n\n if (nodeFs.existsSync(pkgPath)) {\n return nodeFs.readFileSync(pkgPath, \"utf8\");\n }\n\n return null;\n } catch {\n return null;\n }\n}\n\ntype BuildTelegraphCssParams = {\n root: Root;\n config: {\n tokens: Array<\"light\" | \"dark\" | \"default\">;\n components: boolean;\n };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n const deps = getTelegraphDeps();\n\n const depsWithoutTokens =\n config.components === true\n ? Object.values(deps).filter(\n (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const tokensDeps =\n config.tokens.length > 0\n ? Object.values(deps).filter((dep) =>\n dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const cssFiles = depsWithoutTokens\n .map((dep) => getCssStyles({ path: dep.path }))\n .filter(Boolean) as Array<string>;\n\n const tokensCssFiles = config.tokens\n .map((token) => {\n const cssFile = tokensDeps.map((dep) =>\n getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n );\n\n return cssFile.filter(Boolean) as Array<string>;\n })\n .filter(Boolean);\n\n const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n for (const content of allCssFiles) {\n const parsed = postcss.parse(content);\n root.append(parsed);\n }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n return {\n postcssPlugin: \"@telegraph/style-engine\",\n plugins: [\n {\n postcssPlugin: \"telegraph\",\n AtRule: {\n telegraph() {},\n },\n async Once(root) {\n const run = {\n tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n components: false,\n };\n root.walkAtRules(\"telegraph\", (atRule) => {\n if (atRule.params === \"components\") {\n run.components = true;\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-light\") {\n run.tokens.push(\"light\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-dark\") {\n run.tokens.push(\"dark\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens\") {\n run.tokens.push(\"default\");\n atRule.remove();\n }\n });\n\n await buildTelegraphCss({\n root,\n config: {\n tokens: run.tokens,\n components: run.components,\n },\n });\n },\n },\n ],\n };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"AAKA,MAAMA,IAAW,QAAQ,MAAM,GAEzBC,IAAS,QAAQ,IAAI,GAErBC,IAAU,QAAQ,SAAS;AAoBjC,SAASC,EAAiBC,IAAQ,QAAQ,OAA2B;AACnE,MAAIC,IAAUD,GACVE,IAAM;AAEV,SAAOA,KAAK;AACV,UAAMC,IAAcP,EAAS,KAAKK,GAAS,cAAc;AACzD,QAAIJ,EAAO,WAAWM,CAAW;AAC/B,UAAI;AAEF,YADY,KAAK,MAAMN,EAAO,aAAaM,GAAa,MAAM,CAAC,EACvD;AACN,iBAAOF;AAAA,MAEX,QAAQ;AAAA,MAER;AAGF,UAAMG,IAASR,EAAS,QAAQK,CAAO;AACvC,IAAIG,MAAWH,MAASC,IAAM,KAC9BD,IAAUG;AAAA,EACZ;AAGF;AAMA,MAAMC,IAAkC,CACtCC,GACAC,MAC0B;AAxD5B,MAAAC;AAyDE,MAAI,GAACF,EAAI,kBAAgBE,IAAA,OAAO,KAAKF,EAAI,YAAY,MAA5B,gBAAAE,EAA+B,YAAW;AAEnE,WAAO,OAAO,QAAQF,EAAI,YAAY,EAAE,OAAO,CAACG,GAAK,CAACC,GAAKC,CAAO,OAC5DD,EAAI,WAAW,aAAa,MAC9BD,EAAIC,CAAG,IAAI;AAAA,MACT,MAAMA;AAAA,MACN,SAAAC;AAAA,MACA,MAAMf,EAAS,QAAQW,GAAS,gBAAgBG,CAAG;AAAA,IAAA,IAGhDD,IACN,CAAA,CAAe;AACpB;AAMA,SAASG,IAA8B;AACrC,QAAML,IAAUX,EAAS,QAAQ,QAAQ,IAAA,GAAO,cAAc,GACxDU,IAAM,KAAK,MAAMT,EAAO,aAAaU,GAAS,MAAM,CAAC,GACrDM,IAAeR,EAAgCC,GAAK,QAAQ,KAAK,GACjEQ,IAAef,EAAA,GAEfgB,IAA8B,CAACC,MAA+B;AAClE,QAAI,CAACA,KAAQ,OAAO,KAAKA,CAAI,EAAE,WAAW;AACxC,aAAOA;AAGT,UAAMC,IAAU,EAAE,GAAGD,EAAA;AAErB,eAAWN,KAAO,OAAO,OAAOM,CAAI,GAAG;AACrC,UAAIb,GACAe;AAEJ,MAAIR,EAAI,QAAQ,SAAS,YAAY,KAAKI,KACxCX,IAAcP,EAAS;AAAA,QACrBkB;AAAA,QACA;AAAA,QACAJ,EAAI;AAAA,QACJ;AAAA,MAAA,GAEFQ,IAAaJ,MAEbX,IAAcP,EAAS;AAAA,QACrB,QAAQ,IAAA;AAAA,QACR;AAAA,QACAc,EAAI;AAAA,QACJ;AAAA,MAAA,GAEFQ,IAAa,QAAQ,IAAA;AAGvB,UAAI;AACF,cAAMC,IAAU,KAAK,MAAMtB,EAAO,aAAaM,GAAa,MAAM,CAAC,GAC7Da,IAAOX,EAAgCc,GAASD,CAAU;AAKhE,YAFA,OAAO,OAAOD,GAASD,CAAI,GAEvBA,GAAM;AAER,gBAAMI,IAAaL,EAA4BC,CAAI;AACnD,iBAAO,OAAOC,GAASG,CAAU;AAAA,QACnC;AAAA,MACF,QAAe;AAEb;AAAA,MACF;AAAA,IACF;AAEA,WAAOH;AAAA,EACT;AAEA,SAAIJ,IACKE,EAA4BF,CAAY,IAG1C,CAAA;AACT;AAWA,SAASQ,EAAa;AAAA,EACpB,UAAAC,IAAW;AAAA,EACX,MAAAC;AACF,GAAsC;AACpC,MAAI;AACF,UAAMC,IAAU,GAAGD,CAAI,aAAaD,CAAQ,IACtCf,IAAUX,EAAS,QAAQ4B,CAAO;AAExC,WAAI3B,EAAO,WAAWU,CAAO,IACpBV,EAAO,aAAaU,GAAS,MAAM,IAGrC;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAiBA,MAAMkB,IAAoB,OAAO,EAAE,MAAAC,GAAM,QAAAC,QAAsC;AAC7E,QAAMX,IAAOJ,EAAA,GAEPgB,IACJD,EAAO,eAAe,KAClB,OAAO,OAAOX,CAAI,EAAE;AAAA,IAClB,CAACN,MAAQ,CAACA,EAAI,KAAK,SAAS,mBAAmB;AAAA,EAAA,IAEjD,CAAA,GAEAmB,IACJF,EAAO,OAAO,SAAS,IACnB,OAAO,OAAOX,CAAI,EAAE;AAAA,IAAO,CAACN,MAC1BA,EAAI,KAAK,SAAS,mBAAmB;AAAA,EAAA,IAEvC,CAAA,GAEAoB,IAAWF,EACd,IAAI,CAAClB,MAAQW,EAAa,EAAE,MAAMX,EAAI,KAAA,CAAM,CAAC,EAC7C,OAAO,OAAO,GAEXqB,IAAiBJ,EAAO,OAC3B,IAAI,CAACK,MACYH,EAAW;AAAA,IAAI,CAACnB,MAC9BW,EAAa,EAAE,MAAMX,EAAI,MAAM,UAAU,GAAGsB,CAAK,OAAA,CAAQ;AAAA,EAAA,EAG5C,OAAO,OAAO,CAC9B,EACA,OAAO,OAAO,GAEXC,IAAc,CAAC,GAAGH,GAAU,GAAGC,CAAc;AAEnD,aAAWG,KAAWD,GAAa;AACjC,UAAME,IAASrC,EAAQ,MAAMoC,CAAO;AACpC,IAAAR,EAAK,OAAOS,CAAM;AAAA,EACpB;AACF,GAOMC,IAA2B,OACxB;AAAA,EACL,eAAe;AAAA,EACf,SAAS;AAAA,IACP;AAAA,MACE,eAAe;AAAA,MACf,QAAQ;AAAA,QACN,YAAY;AAAA,QAAC;AAAA,MAAA;AAAA,MAEf,MAAM,KAAKV,GAAM;AACf,cAAMxB,IAAM;AAAA,UACV,QAAQ,CAAA;AAAA,UACR,YAAY;AAAA,QAAA;AAEd,QAAAwB,EAAK,YAAY,aAAa,CAACW,MAAW;AACxC,UAAIA,EAAO,WAAW,iBACpBnC,EAAI,aAAa,IACjBmC,EAAO,OAAA,IAGLA,EAAO,WAAW,mBACpBnC,EAAI,OAAO,KAAK,OAAO,GACvBmC,EAAO,OAAA,IAGLA,EAAO,WAAW,kBACpBnC,EAAI,OAAO,KAAK,MAAM,GACtBmC,EAAO,OAAA,IAGLA,EAAO,WAAW,aACpBnC,EAAI,OAAO,KAAK,SAAS,GACzBmC,EAAO,OAAA;AAAA,QAEX,CAAC,GAED,MAAMZ,EAAkB;AAAA,UACtB,MAAAC;AAAA,UACA,QAAQ;AAAA,YACN,QAAQxB,EAAI;AAAA,YACZ,YAAYA,EAAI;AAAA,UAAA;AAAA,QAClB,CACD;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AACF,IAIJoC,IAAe,OAAO,OAAOF,GAA0B;AAAA,EACrD,SAAS;AACX,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getStyleProp.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/getStyleProp.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GACV,GAAG,GACH,GAAG,GACH,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,KAAK,GACL,UAAU,GACV,aAAa,GACb,WAAW,GACX,YAAY,CAAC;AAEjB,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAoFF,MAAM,MAAM,iBAAiB,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACtE,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpC,KAAK,aAAa,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IAAI,MAAM,OAAO,CAAC;AAG/E,KAAK,UAAU,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAAE,KAAK,IAC7D,IAAI,CACF;KACG,GAAG,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;CACjC,EACD,aAAa,CAAC,OAAO,CAAC,CACvB,GACD,MAAM,CAAC;AAIX,KAAK,SAAS,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACrD;KACG,GAAG,IAAI,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAG,MAAM;CAClD,GACD,MAAM,CAAC;AAEX,KAAK,kBAAkB,CAAC,OAAO,EAAE,KAAK,IAAI;IACxC,KAAK,EAAE,KAAK,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"getStyleProp.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/getStyleProp.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GACV,GAAG,GACH,GAAG,GACH,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,KAAK,GACL,UAAU,GACV,aAAa,GACb,WAAW,GACX,YAAY,CAAC;AAEjB,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAoFF,MAAM,MAAM,iBAAiB,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACtE,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpC,KAAK,aAAa,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IAAI,MAAM,OAAO,CAAC;AAG/E,KAAK,UAAU,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAAE,KAAK,IAC7D,IAAI,CACF;KACG,GAAG,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;CACjC,EACD,aAAa,CAAC,OAAO,CAAC,CACvB,GACD,MAAM,CAAC;AAIX,KAAK,SAAS,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACrD;KACG,GAAG,IAAI,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAG,MAAM;CAClD,GACD,MAAM,CAAC;AAEX,KAAK,kBAAkB,CAAC,OAAO,EAAE,KAAK,IAAI;IACxC,KAAK,EAAE,KAAK,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErC,QAAQ,kBAAkB,CAAC,OAAO,EAAE,KAAK,CAAC,KACzC;IACD,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC9B,UAAU,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACvC,WAAW,EAAE,OAAO,CAAC;CAuEtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStyleEngine.d.ts","sourceRoot":"","sources":["../../../src/hooks/useStyleEngine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAExE,KAAK,iBAAiB,CAAC,OAAO,IAAI,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpE,eAAO,MAAM,cAAc,GACzB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"useStyleEngine.d.ts","sourceRoot":"","sources":["../../../src/hooks/useStyleEngine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAExE,KAAK,iBAAiB,CAAC,OAAO,IAAI,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpE,eAAO,MAAM,cAAc,GACzB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErC,QAAQ,UAAU,CAAC,OAAO,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;;;;CAG3D,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/style-engine",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.16",
|
|
4
4
|
"description": "A wrappar around vanilla extract to style telegraph",
|
|
5
5
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/style-engine",
|
|
6
6
|
"author": "@knocklabs",
|
|
@@ -37,23 +37,23 @@
|
|
|
37
37
|
"preview": "vite preview"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@telegraph/tokens": "^0.1.
|
|
40
|
+
"@telegraph/tokens": "^0.1.2",
|
|
41
41
|
"postcss": "^8.5.3"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@knocklabs/eslint-config": "^0.0.
|
|
44
|
+
"@knocklabs/eslint-config": "^0.0.5",
|
|
45
45
|
"@knocklabs/typescript-config": "^0.0.2",
|
|
46
46
|
"@telegraph/prettier-config": "^0.0.7",
|
|
47
47
|
"@telegraph/vite-config": "^0.0.15",
|
|
48
48
|
"@types/node": "^22.13.11",
|
|
49
49
|
"@types/postcss-import": "^14.0.3",
|
|
50
|
-
"@types/react": "^
|
|
50
|
+
"@types/react": "^19.1.11",
|
|
51
51
|
"eslint": "^8.56.0",
|
|
52
52
|
"globby": "^14.1.0",
|
|
53
53
|
"lightningcss": "^1.30.1",
|
|
54
|
-
"react": "^
|
|
55
|
-
"react-dom": "^
|
|
56
|
-
"typescript": "^5.
|
|
54
|
+
"react": "^19.1.1",
|
|
55
|
+
"react-dom": "^19.1.1",
|
|
56
|
+
"typescript": "^5.9.2",
|
|
57
57
|
"vite": "^6.0.11"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|