cssier 0.1.3 → 0.1.4
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/dist/components/index.d.ts +161 -0
- package/dist/components/index.js +167 -0
- package/dist/components.d.ts +1 -0
- package/dist/cssier.js +811 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.js +198 -0
- package/dist/hooks.d.ts +1 -0
- package/dist/main.d.ts +1 -0
- package/package.json +12 -5
- package/dist/cssier.es.js +0 -1004
- package/dist/cssier.umd.js +0 -1
@@ -0,0 +1 @@
|
|
1
|
+
export { default as useStylesheet } from './useStylesheet';
|
@@ -0,0 +1,198 @@
|
|
1
|
+
import { useState as o, useEffect as d } from "react";
|
2
|
+
const p = [
|
3
|
+
"active",
|
4
|
+
"checked",
|
5
|
+
"disabled",
|
6
|
+
"empty",
|
7
|
+
"enabled",
|
8
|
+
"firstChild",
|
9
|
+
"firstOfType",
|
10
|
+
"focus",
|
11
|
+
"hover",
|
12
|
+
"inRange",
|
13
|
+
"invalid",
|
14
|
+
"lastChild",
|
15
|
+
"lastOfType",
|
16
|
+
"link",
|
17
|
+
"not",
|
18
|
+
"nthChild",
|
19
|
+
"nthLastChild",
|
20
|
+
"nthLastOfType",
|
21
|
+
"nthOfType",
|
22
|
+
"onlyOfType",
|
23
|
+
"onlyChild",
|
24
|
+
"optional",
|
25
|
+
"outOfRange",
|
26
|
+
"readOnly",
|
27
|
+
"readWrite",
|
28
|
+
"required",
|
29
|
+
"root",
|
30
|
+
"target",
|
31
|
+
"valid",
|
32
|
+
"visited"
|
33
|
+
], s = [
|
34
|
+
// Shadow DOM elements
|
35
|
+
"part",
|
36
|
+
"theme",
|
37
|
+
// Shadow DOM elements for specific controls
|
38
|
+
"part(container)",
|
39
|
+
"part(label)",
|
40
|
+
"part(option)",
|
41
|
+
"part(item)",
|
42
|
+
"part(placeholder)",
|
43
|
+
"part(header)",
|
44
|
+
"part(footer)",
|
45
|
+
"part(overlay)",
|
46
|
+
"part(menu)",
|
47
|
+
"part(menuitem)",
|
48
|
+
"part(list)",
|
49
|
+
"part(listitem)",
|
50
|
+
"part(progress-bar)",
|
51
|
+
"part(progress-value)",
|
52
|
+
"part(input-container)",
|
53
|
+
"part(input)",
|
54
|
+
"part(select)",
|
55
|
+
"part(option-group)",
|
56
|
+
"part(option-item)",
|
57
|
+
"part(button)",
|
58
|
+
"part(dialog)",
|
59
|
+
"part(menu-button)",
|
60
|
+
"part(tablist)",
|
61
|
+
"part(tab)",
|
62
|
+
"part(tab-panel)",
|
63
|
+
"part(carousel)",
|
64
|
+
"part(slider)",
|
65
|
+
"part(tooltip)",
|
66
|
+
"part(radio)",
|
67
|
+
"part(checkbox)",
|
68
|
+
"part(switch)",
|
69
|
+
"part(range)",
|
70
|
+
"part(textarea)",
|
71
|
+
"part(search)",
|
72
|
+
"part(navbar)",
|
73
|
+
"part(breadcrumbs)",
|
74
|
+
// Standard pseudoelements
|
75
|
+
"before",
|
76
|
+
"after",
|
77
|
+
"first-line",
|
78
|
+
"first-letter",
|
79
|
+
"selection",
|
80
|
+
"placeholder",
|
81
|
+
"backdrop",
|
82
|
+
"marker",
|
83
|
+
// WebKit-prefixed pseudoelements
|
84
|
+
"-webkit-before",
|
85
|
+
"-webkit-after",
|
86
|
+
"-webkit-first-line",
|
87
|
+
"-webkit-first-letter",
|
88
|
+
"-webkit-selection",
|
89
|
+
"-webkit-placeholder",
|
90
|
+
"-webkit-backdrop",
|
91
|
+
"-webkit-marker",
|
92
|
+
// WebKit scrollbar pseudo-elements
|
93
|
+
"-webkit-scrollbar",
|
94
|
+
"-webkit-scrollbar-thumb",
|
95
|
+
"-webkit-scrollbar-track",
|
96
|
+
"-webkit-scrollbar-track-piece",
|
97
|
+
"-webkit-scrollbar-corner",
|
98
|
+
"-webkit-scrollbar-button",
|
99
|
+
"-webkit-resizer",
|
100
|
+
// Other WebKit-prefixed pseudoelements
|
101
|
+
"-webkit-file-upload-button",
|
102
|
+
"-webkit-inner-spin-button",
|
103
|
+
"-webkit-outer-spin-button",
|
104
|
+
"-webkit-progress-bar",
|
105
|
+
"-webkit-progress-value",
|
106
|
+
"-webkit-progress-inner-element",
|
107
|
+
"-webkit-progress-outer-element",
|
108
|
+
// Additional pseudo-elements related to shadow DOM and Web Components
|
109
|
+
"slotted(*)",
|
110
|
+
"slotted(div)",
|
111
|
+
"slotted(span)",
|
112
|
+
"slotted(p)",
|
113
|
+
"slotted(a)",
|
114
|
+
"slotted(img)",
|
115
|
+
"slotted(button)",
|
116
|
+
"slotted(input)",
|
117
|
+
// Custom and experimental shadow DOM parts (subject to changes)
|
118
|
+
"part(dialog-overlay)",
|
119
|
+
"part(tab-content)",
|
120
|
+
"part(slider-track)",
|
121
|
+
"part(slider-thumb)",
|
122
|
+
"part(menu-icon)",
|
123
|
+
"part(menu-label)",
|
124
|
+
"part(list-group)",
|
125
|
+
"part(list-item)"
|
126
|
+
];
|
127
|
+
function k(t, r) {
|
128
|
+
if (!r) {
|
129
|
+
const a = document.head.querySelector(`style#${t}`);
|
130
|
+
return a && a.remove(), "";
|
131
|
+
}
|
132
|
+
let e = document.head.querySelector(`style#${t}`);
|
133
|
+
e || (e = document.createElement("style"), e.id = t, e.type = "text/css", document.head.appendChild(e));
|
134
|
+
let n = "";
|
135
|
+
return Object.entries(r).forEach(([a, l]) => {
|
136
|
+
let i = "";
|
137
|
+
a === "neutral" ? i = `.${t}` : p.includes(a) ? i = `.${t}:${a}` : s.includes(a) ? i = `.${t}::${a}` : (console.error(`Invalid pseudo class: ${a}`), console.log(
|
138
|
+
p,
|
139
|
+
s,
|
140
|
+
a,
|
141
|
+
a in p,
|
142
|
+
a in s
|
143
|
+
)), n += `${i} { ${Object.entries(l).map(([f, b]) => `${f.replace(/[A-Z]/g, (u) => `-${u.toLowerCase()}`)}: ${b}`).join("; ")} }`;
|
144
|
+
}), e.textContent = n, n;
|
145
|
+
}
|
146
|
+
function c(t, r) {
|
147
|
+
if (t == null && r == null)
|
148
|
+
return !0;
|
149
|
+
if (t == null && typeof r == "object" || r == null && typeof t == "object" || Object.keys(t).length !== Object.keys(r).length)
|
150
|
+
return !1;
|
151
|
+
for (const e in t)
|
152
|
+
if (t[e] !== r[e])
|
153
|
+
return typeof t[e] == "object" && typeof r[e] == "object" && !c(t[e], r[e]), !1;
|
154
|
+
return !0;
|
155
|
+
}
|
156
|
+
const h = [
|
157
|
+
"A",
|
158
|
+
"B",
|
159
|
+
"C",
|
160
|
+
"D",
|
161
|
+
"E",
|
162
|
+
"F",
|
163
|
+
"G",
|
164
|
+
"H",
|
165
|
+
"I",
|
166
|
+
"J",
|
167
|
+
"K",
|
168
|
+
"L",
|
169
|
+
"M",
|
170
|
+
"N",
|
171
|
+
"O",
|
172
|
+
"P",
|
173
|
+
"Q",
|
174
|
+
"R",
|
175
|
+
"S",
|
176
|
+
"T",
|
177
|
+
"U",
|
178
|
+
"V",
|
179
|
+
"W",
|
180
|
+
"X",
|
181
|
+
"Y",
|
182
|
+
"Z"
|
183
|
+
];
|
184
|
+
function m() {
|
185
|
+
let t = "";
|
186
|
+
for (let r = 0; r < 6; r++)
|
187
|
+
t += h[Math.floor(Math.random() * 24)];
|
188
|
+
return t;
|
189
|
+
}
|
190
|
+
function w(t, r) {
|
191
|
+
const [e] = o(() => r ?? m()), [n, a] = o({}), [l, i] = o("");
|
192
|
+
return d(() => {
|
193
|
+
c(n, t) || (a(t), i(k(e, t)));
|
194
|
+
}, [e, t, n, i]), [e, l];
|
195
|
+
}
|
196
|
+
export {
|
197
|
+
w as useStylesheet
|
198
|
+
};
|
package/dist/hooks.d.ts
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export * from './hooks/index'
|
package/dist/main.d.ts
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export * from './index'
|
package/package.json
CHANGED
@@ -1,20 +1,27 @@
|
|
1
1
|
{
|
2
2
|
"name": "cssier",
|
3
3
|
"private": false,
|
4
|
-
"version": "0.1.
|
4
|
+
"version": "0.1.4",
|
5
5
|
"packageManager": "pnpm@8.4.0",
|
6
6
|
"repository": {
|
7
7
|
"type": "git",
|
8
8
|
"url": "https://github.com/DanBermanTech/cssier"
|
9
9
|
},
|
10
|
-
"main": "./dist/cssier.
|
11
|
-
"module": "./dist/cssier.
|
10
|
+
"main": "./dist/cssier.js",
|
11
|
+
"module": "./dist/cssier.js",
|
12
12
|
"types": "./dist/index.d.ts",
|
13
13
|
"exports": {
|
14
14
|
".": {
|
15
15
|
"types": "./dist/index.d.ts",
|
16
|
-
"import": "./dist/cssier.
|
17
|
-
|
16
|
+
"import": "./dist/cssier.js"
|
17
|
+
},
|
18
|
+
"./hooks": {
|
19
|
+
"types": "./dist/hooks/index.d.ts",
|
20
|
+
"import": "./dist/hooks/index.js"
|
21
|
+
},
|
22
|
+
"./components": {
|
23
|
+
"types": "./dist/components/index.d.ts",
|
24
|
+
"import": "./dist/components/index.js"
|
18
25
|
}
|
19
26
|
},
|
20
27
|
"engines": {
|