@devup-ui/vite-plugin 1.0.42 → 1.0.44
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 +43 -34
- package/dist/plugin.cjs +1 -1
- package/dist/plugin.js +59 -61
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
<img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
|
|
3
3
|
</div>
|
|
4
4
|
|
|
5
|
-
|
|
6
5
|
<h3 align="center">
|
|
7
6
|
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
|
|
8
7
|
</h3>
|
|
@@ -23,8 +22,8 @@
|
|
|
23
22
|
<a href="https://discord.gg/8zjcGc7cWh">
|
|
24
23
|
<img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
|
|
25
24
|
</a>
|
|
26
|
-
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
|
|
27
|
-
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
|
|
25
|
+
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
|
|
26
|
+
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
|
|
28
27
|
</a>
|
|
29
28
|
</div>
|
|
30
29
|
|
|
@@ -76,17 +75,17 @@ npm install @devup-ui/webpack-plugin
|
|
|
76
75
|
|
|
77
76
|
Next.js Build Time and Build Size (github action - ubuntu-latest)
|
|
78
77
|
|
|
79
|
-
| Library
|
|
80
|
-
|
|
81
|
-
| tailwindcss
|
|
82
|
-
| styleX
|
|
83
|
-
| vanilla-extract
|
|
84
|
-
| kuma-ui
|
|
85
|
-
| panda-css
|
|
86
|
-
| chakra-ui
|
|
87
|
-
| mui
|
|
88
|
-
| devup-ui(per-file css)
|
|
89
|
-
| devup-ui(single css)
|
|
78
|
+
| Library | Version | Build Time | Build Size |
|
|
79
|
+
| ---------------------- | ------- | ---------- | ----------------- |
|
|
80
|
+
| tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
|
|
81
|
+
| styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
|
|
82
|
+
| vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
|
|
83
|
+
| kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
|
|
84
|
+
| panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
|
|
85
|
+
| chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
|
|
86
|
+
| mui | 7.3.2 | 22.21s | 94,231,958 bytes |
|
|
87
|
+
| devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
|
|
88
|
+
| devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
|
|
90
89
|
|
|
91
90
|
## How it works
|
|
92
91
|
|
|
@@ -94,30 +93,40 @@ Devup UI is a CSS in JS preprocessor that does not require runtime.
|
|
|
94
93
|
Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
|
|
95
94
|
We develop a preprocessor that considers all grammatical cases.
|
|
96
95
|
|
|
97
|
-
```
|
|
98
|
-
const before = <Box bg=
|
|
96
|
+
```tsx
|
|
97
|
+
const before = <Box bg="red" />
|
|
99
98
|
|
|
100
|
-
const after = <div className="d0"/>
|
|
99
|
+
const after = <div className="d0" />
|
|
101
100
|
```
|
|
102
101
|
|
|
103
102
|
Variables are fully supported.
|
|
104
103
|
|
|
105
|
-
```
|
|
106
|
-
const before = <Box bg={colorVariable}/>
|
|
107
|
-
|
|
108
|
-
const after =
|
|
109
|
-
|
|
110
|
-
|
|
104
|
+
```tsx
|
|
105
|
+
const before = <Box bg={colorVariable} />
|
|
106
|
+
|
|
107
|
+
const after = (
|
|
108
|
+
<div
|
|
109
|
+
className="d0"
|
|
110
|
+
style={{
|
|
111
|
+
'--d0': colorVariable,
|
|
112
|
+
}}
|
|
113
|
+
/>
|
|
114
|
+
)
|
|
111
115
|
```
|
|
112
116
|
|
|
113
117
|
Various expressions and responsiveness are also fully supported.
|
|
114
118
|
|
|
115
|
-
```
|
|
116
|
-
const before = <Box bg={[
|
|
117
|
-
|
|
118
|
-
const after =
|
|
119
|
-
|
|
120
|
-
}}
|
|
119
|
+
```tsx
|
|
120
|
+
const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
|
|
121
|
+
|
|
122
|
+
const after = (
|
|
123
|
+
<div
|
|
124
|
+
className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
|
|
125
|
+
style={{
|
|
126
|
+
'--d2': variable,
|
|
127
|
+
}}
|
|
128
|
+
/>
|
|
129
|
+
)
|
|
121
130
|
```
|
|
122
131
|
|
|
123
132
|
Support Theme with Typing
|
|
@@ -139,19 +148,19 @@ Support Theme with Typing
|
|
|
139
148
|
}
|
|
140
149
|
```
|
|
141
150
|
|
|
142
|
-
```
|
|
151
|
+
```tsx
|
|
143
152
|
// Type Safe
|
|
144
|
-
<Text color="$text"/>
|
|
153
|
+
<Text color="$text" />
|
|
145
154
|
```
|
|
146
155
|
|
|
147
156
|
Support Responsive And Pseudo Selector
|
|
148
157
|
|
|
149
158
|
You can use responsive and pseudo selector.
|
|
150
159
|
|
|
151
|
-
```
|
|
160
|
+
```tsx
|
|
152
161
|
// Responsive with Selector
|
|
153
|
-
const box = <Box _hover={{bg: [
|
|
162
|
+
const box = <Box _hover={{ bg: ['red', 'blue'] }} />
|
|
154
163
|
|
|
155
164
|
// Same
|
|
156
|
-
const box = <Box _hover={[{bg:
|
|
165
|
+
const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
|
|
157
166
|
```
|
package/dist/plugin.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("node:fs"),c=require("node:fs/promises"),t=require("node:path"),a=require("@devup-ui/wasm");function T(s){return s.endsWith("devup-ui.css")?null:parseInt(s.split("devup-ui-")[1].split(".")[0])}async function F(s){try{const u=f.existsSync(s.devupFile)?await c.readFile(s.devupFile,"utf-8"):void 0;if(u){a.registerTheme(JSON.parse(u)?.theme??{});const o=a.getThemeInterface(s.package,"DevupThemeColors","DevupThemeTypography","DevupTheme");o&&await c.writeFile(t.join(s.distDir,"theme.d.ts"),o,"utf-8")}else a.registerTheme({})}catch(u){console.error(u),a.registerTheme({})}await Promise.all([f.existsSync(s.cssDir)?Promise.resolve():c.mkdir(s.cssDir,{recursive:!0}),s.singleCss?Promise.resolve():c.writeFile(t.join(s.cssDir,"devup-ui.css"),a.getCss(null,!1))])}function E({package:s="@devup-ui/react",devupFile:u="devup.json",distDir:o="df",cssDir:l=t.resolve(o,"devup-ui"),extractCss:m=!0,debug:S=!1,include:v=[],singleCss:d=!1}={}){a.setDebug(S);const p=new Map;return{name:"devup-ui",async configResolved(){f.existsSync(o)||await c.mkdir(o,{recursive:!0}),await c.writeFile(t.join(o,".gitignore"),"*","utf-8"),await F({package:s,cssDir:l,devupFile:u,distDir:o,singleCss:d})},config(){const r=a.getDefaultTheme(),e={};r&&(e["process.env.DEVUP_UI_DEFAULT_THEME"]=JSON.stringify(r));const i={server:{watch:{ignored:[`!${u}`]}},define:e,optimizeDeps:{exclude:[...v,"@devup-ui/components"]},ssr:{noExternal:[...v,/@devup-ui/]}};return m&&(i.build={rollupOptions:{output:{manualChunks(n){if(n.split("?")[0].endsWith("devup-ui.css"))return"devup-ui.css"}}}}),i},apply(){return!0},async watchChange(r){if(t.resolve(r)===t.resolve(u)&&f.existsSync(u))try{await F({package:s,cssDir:l,devupFile:u,distDir:o,singleCss:d})}catch(e){console.error(e)}},resolveId(r,e){if(r.includes("devup-ui.css")&&t.resolve(e?t.join(t.dirname(e),r):r)===t.resolve(t.join(l,"devup-ui.css")))return t.join(l,`devup-ui.css?t=${Date.now().toString()+(p.get(null)?.length??0)}`)},load(r){const e=t.basename(r).split("?")[0];if(e.startsWith("devup-ui")&&e.endsWith(".css")){const i=T(e),n=a.getCss(i,!1);return p.set(i,n),n}},enforce:"pre",async transform(r,e){if(!m)return;const i=e.split("?")[0];if(!/\.(tsx|ts|js|mjs|jsx)$/i.test(i)||new RegExp(`node_modules(?!.*(${["@devup-ui",...v].join("|").replaceAll("/","[\\/\\\\_]")})([\\/\\\\.]|$))`).test(i))return;let n=t.relative(t.dirname(e),l).replaceAll("\\","/");n.startsWith("./")||(n=`./${n}`);const{code:$,css:w="",map:x,cssFile:g,updatedBaseStyle:_}=a.codeExtract(i,r,s,n,d,!0,!1),h=[];if(_&&h.push(c.writeFile(t.join(l,"devup-ui.css"),a.getCss(null,!1),"utf-8")),g){const y=T(g),j=p.get(y);j&&j.length<w.length&&p.set(y,w),h.push(c.writeFile(t.join(l,t.basename(g)),`/* ${e} ${Date.now()} */`,"utf-8"))}return await Promise.all(h),{code:$,map:x}},async generateBundle(r,e){if(!m)return;const i=Object.keys(e).find(n=>e[n].name==="devup-ui.css");i&&"source"in e[i]&&(e[i].source=p.get(null))}}}exports.DevupUI=E;
|
package/dist/plugin.js
CHANGED
|
@@ -1,42 +1,41 @@
|
|
|
1
1
|
import { existsSync as p } from "node:fs";
|
|
2
2
|
import { writeFile as f, mkdir as _, readFile as W } from "node:fs/promises";
|
|
3
|
-
import { relative as C, dirname as E, resolve as l, join as
|
|
3
|
+
import { relative as C, dirname as E, resolve as l, join as a, basename as N } from "node:path";
|
|
4
4
|
import { setDebug as O, codeExtract as U, getCss as y, getDefaultTheme as A, registerTheme as w, getThemeInterface as B } from "@devup-ui/wasm";
|
|
5
|
-
function x(
|
|
6
|
-
return
|
|
5
|
+
function x(t) {
|
|
6
|
+
return t.endsWith("devup-ui.css") ? null : parseInt(t.split("devup-ui-")[1].split(".")[0]);
|
|
7
7
|
}
|
|
8
|
-
async function F(
|
|
9
|
-
var a;
|
|
8
|
+
async function F(t) {
|
|
10
9
|
try {
|
|
11
|
-
const
|
|
12
|
-
if (
|
|
13
|
-
w(
|
|
10
|
+
const n = p(t.devupFile) ? await W(t.devupFile, "utf-8") : void 0;
|
|
11
|
+
if (n) {
|
|
12
|
+
w(JSON.parse(n)?.theme ?? {});
|
|
14
13
|
const i = B(
|
|
15
|
-
|
|
14
|
+
t.package,
|
|
16
15
|
"DevupThemeColors",
|
|
17
16
|
"DevupThemeTypography",
|
|
18
17
|
"DevupTheme"
|
|
19
18
|
);
|
|
20
19
|
i && await f(
|
|
21
|
-
|
|
20
|
+
a(t.distDir, "theme.d.ts"),
|
|
22
21
|
i,
|
|
23
22
|
"utf-8"
|
|
24
23
|
);
|
|
25
24
|
} else
|
|
26
25
|
w({});
|
|
27
|
-
} catch (
|
|
28
|
-
console.error(
|
|
26
|
+
} catch (n) {
|
|
27
|
+
console.error(n), w({});
|
|
29
28
|
}
|
|
30
29
|
await Promise.all([
|
|
31
|
-
p(
|
|
32
|
-
|
|
30
|
+
p(t.cssDir) ? Promise.resolve() : _(t.cssDir, { recursive: !0 }),
|
|
31
|
+
t.singleCss ? Promise.resolve() : f(a(t.cssDir, "devup-ui.css"), y(null, !1))
|
|
33
32
|
]);
|
|
34
33
|
}
|
|
35
34
|
function z({
|
|
36
|
-
package:
|
|
37
|
-
devupFile:
|
|
38
|
-
distDir:
|
|
39
|
-
cssDir:
|
|
35
|
+
package: t = "@devup-ui/react",
|
|
36
|
+
devupFile: n = "devup.json",
|
|
37
|
+
distDir: i = "df",
|
|
38
|
+
cssDir: o = l(i, "devup-ui"),
|
|
40
39
|
extractCss: m = !0,
|
|
41
40
|
debug: k = !1,
|
|
42
41
|
include: v = [],
|
|
@@ -47,84 +46,83 @@ function z({
|
|
|
47
46
|
return {
|
|
48
47
|
name: "devup-ui",
|
|
49
48
|
async configResolved() {
|
|
50
|
-
p(
|
|
51
|
-
package:
|
|
52
|
-
cssDir:
|
|
53
|
-
devupFile:
|
|
54
|
-
distDir:
|
|
49
|
+
p(i) || await _(i, { recursive: !0 }), await f(a(i, ".gitignore"), "*", "utf-8"), await F({
|
|
50
|
+
package: t,
|
|
51
|
+
cssDir: o,
|
|
52
|
+
devupFile: n,
|
|
53
|
+
distDir: i,
|
|
55
54
|
singleCss: d
|
|
56
55
|
});
|
|
57
56
|
},
|
|
58
57
|
config() {
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
const
|
|
58
|
+
const s = A(), e = {};
|
|
59
|
+
s && (e["process.env.DEVUP_UI_DEFAULT_THEME"] = JSON.stringify(s));
|
|
60
|
+
const r = {
|
|
62
61
|
server: {
|
|
63
62
|
watch: {
|
|
64
|
-
ignored: [`!${
|
|
63
|
+
ignored: [`!${n}`]
|
|
65
64
|
}
|
|
66
65
|
},
|
|
67
66
|
define: e,
|
|
68
67
|
optimizeDeps: {
|
|
69
|
-
exclude: v
|
|
68
|
+
exclude: [...v, "@devup-ui/components"]
|
|
70
69
|
},
|
|
71
70
|
ssr: {
|
|
72
71
|
noExternal: [...v, /@devup-ui/]
|
|
73
72
|
}
|
|
74
73
|
};
|
|
75
|
-
return m && (
|
|
74
|
+
return m && (r.build = {
|
|
76
75
|
rollupOptions: {
|
|
77
76
|
output: {
|
|
78
|
-
manualChunks(
|
|
79
|
-
if (
|
|
77
|
+
manualChunks(u) {
|
|
78
|
+
if (u.split("?")[0].endsWith("devup-ui.css"))
|
|
80
79
|
return "devup-ui.css";
|
|
81
80
|
}
|
|
82
81
|
}
|
|
83
82
|
}
|
|
84
|
-
}),
|
|
83
|
+
}), r;
|
|
85
84
|
},
|
|
86
85
|
apply() {
|
|
87
86
|
return !0;
|
|
88
87
|
},
|
|
89
|
-
async watchChange(
|
|
90
|
-
if (l(
|
|
88
|
+
async watchChange(s) {
|
|
89
|
+
if (l(s) === l(n) && p(n))
|
|
91
90
|
try {
|
|
92
91
|
await F({
|
|
93
|
-
package:
|
|
94
|
-
cssDir:
|
|
95
|
-
devupFile:
|
|
96
|
-
distDir:
|
|
92
|
+
package: t,
|
|
93
|
+
cssDir: o,
|
|
94
|
+
devupFile: n,
|
|
95
|
+
distDir: i,
|
|
97
96
|
singleCss: d
|
|
98
97
|
});
|
|
99
98
|
} catch (e) {
|
|
100
99
|
console.error(e);
|
|
101
100
|
}
|
|
102
101
|
},
|
|
103
|
-
resolveId(
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
`devup-ui.css?t=${Date.now().toString() + (((t = c.get(null)) == null ? void 0 : t.length) ?? 0)}`
|
|
102
|
+
resolveId(s, e) {
|
|
103
|
+
if (s.includes("devup-ui.css") && l(e ? a(E(e), s) : s) === l(a(o, "devup-ui.css")))
|
|
104
|
+
return a(
|
|
105
|
+
o,
|
|
106
|
+
`devup-ui.css?t=${Date.now().toString() + (c.get(null)?.length ?? 0)}`
|
|
109
107
|
);
|
|
110
108
|
},
|
|
111
|
-
load(
|
|
112
|
-
const e = N(
|
|
109
|
+
load(s) {
|
|
110
|
+
const e = N(s).split("?")[0];
|
|
113
111
|
if (e.startsWith("devup-ui") && e.endsWith(".css")) {
|
|
114
|
-
const
|
|
115
|
-
return c.set(
|
|
112
|
+
const r = x(e), u = y(r, !1);
|
|
113
|
+
return c.set(r, u), u;
|
|
116
114
|
}
|
|
117
115
|
},
|
|
118
116
|
enforce: "pre",
|
|
119
|
-
async transform(
|
|
117
|
+
async transform(s, e) {
|
|
120
118
|
if (!m) return;
|
|
121
|
-
const
|
|
122
|
-
if (!/\.(tsx|ts|js|mjs|jsx)$/i.test(
|
|
119
|
+
const r = e.split("?")[0];
|
|
120
|
+
if (!/\.(tsx|ts|js|mjs|jsx)$/i.test(r) || new RegExp(
|
|
123
121
|
`node_modules(?!.*(${["@devup-ui", ...v].join("|").replaceAll("/", "[\\/\\\\_]")})([\\/\\\\.]|$))`
|
|
124
|
-
).test(
|
|
122
|
+
).test(r))
|
|
125
123
|
return;
|
|
126
|
-
let
|
|
127
|
-
|
|
124
|
+
let u = C(E(e), o).replaceAll("\\", "/");
|
|
125
|
+
u.startsWith("./") || (u = `./${u}`);
|
|
128
126
|
const {
|
|
129
127
|
code: D,
|
|
130
128
|
css: T = "",
|
|
@@ -132,14 +130,14 @@ function z({
|
|
|
132
130
|
cssFile: h,
|
|
133
131
|
updatedBaseStyle: S
|
|
134
132
|
// import main css in code
|
|
135
|
-
} = U(
|
|
133
|
+
} = U(r, s, t, u, d, !0, !1), g = [];
|
|
136
134
|
if (S && g.push(
|
|
137
|
-
f(o
|
|
135
|
+
f(a(o, "devup-ui.css"), y(null, !1), "utf-8")
|
|
138
136
|
), h) {
|
|
139
137
|
const $ = x(h), j = c.get($);
|
|
140
138
|
j && j.length < T.length && c.set($, T), g.push(
|
|
141
139
|
f(
|
|
142
|
-
o
|
|
140
|
+
a(o, N(h)),
|
|
143
141
|
`/* ${e} ${Date.now()} */`,
|
|
144
142
|
"utf-8"
|
|
145
143
|
)
|
|
@@ -150,12 +148,12 @@ function z({
|
|
|
150
148
|
map: I
|
|
151
149
|
};
|
|
152
150
|
},
|
|
153
|
-
async generateBundle(
|
|
151
|
+
async generateBundle(s, e) {
|
|
154
152
|
if (!m) return;
|
|
155
|
-
const
|
|
156
|
-
(
|
|
153
|
+
const r = Object.keys(e).find(
|
|
154
|
+
(u) => e[u].name === "devup-ui.css"
|
|
157
155
|
);
|
|
158
|
-
|
|
156
|
+
r && "source" in e[r] && (e[r].source = c.get(null));
|
|
159
157
|
}
|
|
160
158
|
};
|
|
161
159
|
}
|
package/package.json
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"vite"
|
|
19
19
|
],
|
|
20
20
|
"type": "module",
|
|
21
|
-
"version": "1.0.
|
|
21
|
+
"version": "1.0.44",
|
|
22
22
|
"publishConfig": {
|
|
23
23
|
"access": "public"
|
|
24
24
|
},
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"dist"
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@devup-ui/wasm": "1.0.
|
|
39
|
+
"@devup-ui/wasm": "1.0.41"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"vite-plugin-dts": "^4.5.4",
|
|
43
|
-
"typescript": "^5.9.
|
|
43
|
+
"typescript": "^5.9.3"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"vite": "*",
|