@poveste/plugin-tailwind 0.11.0 → 0.12.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/README.md +7 -0
- package/dist/index.js +1 -83
- package/dist/tokens-style.d.ts +1 -0
- package/dist/tokens-style.js +85 -0
- package/package.json +9 -8
package/README.md
CHANGED
|
@@ -3,8 +3,15 @@
|
|
|
3
3
|
Renders a project's Tailwind design system — colours, spacing, typography — as a
|
|
4
4
|
story in its book.
|
|
5
5
|
|
|
6
|
+
```bash
|
|
7
|
+
pnpm add -D poveste @poveste/plugin-tailwind
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
Add the plugin in poveste config:
|
|
11
|
+
|
|
6
12
|
```ts
|
|
7
13
|
import { HstTailwind } from '@poveste/plugin-tailwind'
|
|
14
|
+
import { defineConfig } from 'poveste'
|
|
8
15
|
|
|
9
16
|
export default defineConfig({
|
|
10
17
|
plugins: [
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import fs from 'node:fs';
|
|
2
2
|
import path from 'pathe';
|
|
3
3
|
import { getInjectedImport } from 'poveste';
|
|
4
|
+
import { css } from './tokens-style.js';
|
|
4
5
|
/**
|
|
5
6
|
* The first of `fileNames` that exists and satisfies `accept`, searching `cwd`
|
|
6
7
|
* and then upwards.
|
|
@@ -654,88 +655,5 @@ export default {
|
|
|
654
655
|
],
|
|
655
656
|
}`;
|
|
656
657
|
}
|
|
657
|
-
const css = `.__pvt-shade {
|
|
658
|
-
height: 80px;
|
|
659
|
-
border-radius: 4px;
|
|
660
|
-
}
|
|
661
|
-
|
|
662
|
-
.__pvt-text {
|
|
663
|
-
font-size: 4rem;
|
|
664
|
-
display: flex;
|
|
665
|
-
align-items: flex-end;
|
|
666
|
-
}
|
|
667
|
-
|
|
668
|
-
.__pvt-border {
|
|
669
|
-
border-style: solid;
|
|
670
|
-
border-width: 2px;
|
|
671
|
-
}
|
|
672
|
-
|
|
673
|
-
.__pvt-padding {
|
|
674
|
-
background-color: rgb(113 113 122 / 0.1);
|
|
675
|
-
width: min-content;
|
|
676
|
-
}
|
|
677
|
-
|
|
678
|
-
.__pvt-margin {
|
|
679
|
-
border: dashed 1px rgb(113 113 122 / 0.5);
|
|
680
|
-
width: min-content;
|
|
681
|
-
}
|
|
682
|
-
|
|
683
|
-
.__pvt-padding-box,
|
|
684
|
-
.__pvt-margin-box {
|
|
685
|
-
width: 5rem;
|
|
686
|
-
height: 5rem;
|
|
687
|
-
background-color: rgb(113 113 122 / 0.5);
|
|
688
|
-
}
|
|
689
|
-
|
|
690
|
-
.__pvt-padding,
|
|
691
|
-
.__pvt-padding-box,
|
|
692
|
-
.__pvt-margin,
|
|
693
|
-
.__pvt-margin-box,
|
|
694
|
-
.__pvt-drop-shadow {
|
|
695
|
-
border-radius: 4px;
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
.__pvt-truncate {
|
|
699
|
-
overflow: hidden;
|
|
700
|
-
text-overflow: ellipsis;
|
|
701
|
-
white-space: nowrap;
|
|
702
|
-
}
|
|
703
|
-
|
|
704
|
-
.__pvt-drop-shadow {
|
|
705
|
-
width: 8rem;
|
|
706
|
-
height: 8rem;
|
|
707
|
-
background: white;
|
|
708
|
-
margin-bottom: 0.5rem;
|
|
709
|
-
}
|
|
710
|
-
|
|
711
|
-
.__pvt-drop-shadow {
|
|
712
|
-
background: #4e4e57;
|
|
713
|
-
}
|
|
714
|
-
|
|
715
|
-
.__pvt-border-radius {
|
|
716
|
-
width: 8rem;
|
|
717
|
-
height: 8rem;
|
|
718
|
-
background-color: rgb(113 113 122 / 0.5);
|
|
719
|
-
}
|
|
720
|
-
|
|
721
|
-
.__pvt-border-width {
|
|
722
|
-
width: 8rem;
|
|
723
|
-
height: 8rem;
|
|
724
|
-
border-color: rgb(113 113 122 / 0.5);
|
|
725
|
-
background-color: rgb(113 113 122 / 0.1);
|
|
726
|
-
}
|
|
727
|
-
|
|
728
|
-
.__pvt-width {
|
|
729
|
-
background-color: rgb(113 113 122 / 0.1);
|
|
730
|
-
}
|
|
731
|
-
|
|
732
|
-
.__pvt-width-box,
|
|
733
|
-
.__pvt-height {
|
|
734
|
-
background-color: rgb(113 113 122 / 0.5);
|
|
735
|
-
}
|
|
736
|
-
|
|
737
|
-
.__pvt-width-box {
|
|
738
|
-
height: 5rem;
|
|
739
|
-
}`;
|
|
740
658
|
/** @deprecated Use `HstTailwind`. Kept for books that named the old builtin. */
|
|
741
659
|
export const tailwindTokens = HstTailwind;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const css = ".__pvt-shade {\n height: 80px;\n border-radius: 4px;\n}\n\n.__pvt-text {\n font-size: 4rem;\n display: flex;\n align-items: flex-end;\n}\n\n.__pvt-border {\n border-style: solid;\n border-width: 2px;\n}\n\n.__pvt-padding {\n background-color: rgb(113 113 122 / 0.1);\n width: min-content;\n}\n\n.__pvt-margin {\n border: dashed 1px rgb(113 113 122 / 0.5);\n width: min-content;\n}\n\n.__pvt-padding-box,\n.__pvt-margin-box {\n width: 5rem;\n height: 5rem;\n background-color: rgb(113 113 122 / 0.5);\n}\n\n.__pvt-padding,\n.__pvt-padding-box,\n.__pvt-margin,\n.__pvt-margin-box,\n.__pvt-drop-shadow {\n border-radius: 4px;\n}\n\n.__pvt-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.__pvt-drop-shadow {\n width: 8rem;\n height: 8rem;\n background: white;\n margin-bottom: 0.5rem;\n}\n\n.__pvt-drop-shadow {\n background: #4e4e57;\n}\n\n.__pvt-border-radius {\n width: 8rem;\n height: 8rem;\n background-color: rgb(113 113 122 / 0.5);\n}\n\n.__pvt-border-width {\n width: 8rem;\n height: 8rem;\n border-color: rgb(113 113 122 / 0.5);\n background-color: rgb(113 113 122 / 0.1);\n}\n\n.__pvt-width {\n background-color: rgb(113 113 122 / 0.1);\n}\n\n.__pvt-width-box,\n.__pvt-height {\n background-color: rgb(113 113 122 / 0.5);\n}\n\n.__pvt-width-box {\n height: 5rem;\n}";
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
// Injected as `style.css` next to the generated story file, so it styles
|
|
2
|
+
// the Tailwind token stories without reaching the book's own stylesheet.
|
|
3
|
+
export const css = `.__pvt-shade {
|
|
4
|
+
height: 80px;
|
|
5
|
+
border-radius: 4px;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.__pvt-text {
|
|
9
|
+
font-size: 4rem;
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: flex-end;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.__pvt-border {
|
|
15
|
+
border-style: solid;
|
|
16
|
+
border-width: 2px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.__pvt-padding {
|
|
20
|
+
background-color: rgb(113 113 122 / 0.1);
|
|
21
|
+
width: min-content;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.__pvt-margin {
|
|
25
|
+
border: dashed 1px rgb(113 113 122 / 0.5);
|
|
26
|
+
width: min-content;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.__pvt-padding-box,
|
|
30
|
+
.__pvt-margin-box {
|
|
31
|
+
width: 5rem;
|
|
32
|
+
height: 5rem;
|
|
33
|
+
background-color: rgb(113 113 122 / 0.5);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.__pvt-padding,
|
|
37
|
+
.__pvt-padding-box,
|
|
38
|
+
.__pvt-margin,
|
|
39
|
+
.__pvt-margin-box,
|
|
40
|
+
.__pvt-drop-shadow {
|
|
41
|
+
border-radius: 4px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.__pvt-truncate {
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
text-overflow: ellipsis;
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.__pvt-drop-shadow {
|
|
51
|
+
width: 8rem;
|
|
52
|
+
height: 8rem;
|
|
53
|
+
background: white;
|
|
54
|
+
margin-bottom: 0.5rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.__pvt-drop-shadow {
|
|
58
|
+
background: #4e4e57;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.__pvt-border-radius {
|
|
62
|
+
width: 8rem;
|
|
63
|
+
height: 8rem;
|
|
64
|
+
background-color: rgb(113 113 122 / 0.5);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.__pvt-border-width {
|
|
68
|
+
width: 8rem;
|
|
69
|
+
height: 8rem;
|
|
70
|
+
border-color: rgb(113 113 122 / 0.5);
|
|
71
|
+
background-color: rgb(113 113 122 / 0.1);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.__pvt-width {
|
|
75
|
+
background-color: rgb(113 113 122 / 0.1);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.__pvt-width-box,
|
|
79
|
+
.__pvt-height {
|
|
80
|
+
background-color: rgb(113 113 122 / 0.5);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.__pvt-width-box {
|
|
84
|
+
height: 5rem;
|
|
85
|
+
}`;
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@poveste/plugin-tailwind",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.12.0",
|
|
5
5
|
"description": "Poveste plugin that renders a Tailwind design system as a story",
|
|
6
6
|
"author": {
|
|
7
|
-
"name": "Sorin Gitlan"
|
|
7
|
+
"name": "Sorin Gitlan",
|
|
8
|
+
"url": "https://x.com/50rayn"
|
|
8
9
|
},
|
|
9
10
|
"license": "MIT",
|
|
10
11
|
"homepage": "https://poveste.dev",
|
|
@@ -46,20 +47,20 @@
|
|
|
46
47
|
"node": "^22.22.2 || ^24.15.0 || >=26.0.0"
|
|
47
48
|
},
|
|
48
49
|
"peerDependencies": {
|
|
49
|
-
"
|
|
50
|
-
"
|
|
50
|
+
"poveste": "^0.12.0",
|
|
51
|
+
"tailwindcss": "^4.0.0"
|
|
51
52
|
},
|
|
52
53
|
"dependencies": {
|
|
53
|
-
"
|
|
54
|
-
"
|
|
54
|
+
"@poveste/shared": "0.12.0",
|
|
55
|
+
"pathe": "^1.1.2"
|
|
55
56
|
},
|
|
56
57
|
"devDependencies": {
|
|
57
58
|
"@types/node": "^22.10.1",
|
|
59
|
+
"poveste": "0.12.0",
|
|
58
60
|
"tailwindcss": "^4.3.3",
|
|
59
61
|
"typescript": "5.6.3",
|
|
60
62
|
"vite": "^8.2.0",
|
|
61
|
-
"vitest": "^4.1.10"
|
|
62
|
-
"poveste": "0.11.0"
|
|
63
|
+
"vitest": "^4.1.10"
|
|
63
64
|
},
|
|
64
65
|
"scripts": {
|
|
65
66
|
"build": "rimraf dist && tsc -d",
|