@csszyx/unplugin 0.1.1 → 0.1.3
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 +45 -21
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,52 +1,76 @@
|
|
|
1
1
|
# @csszyx/unplugin
|
|
2
2
|
|
|
3
|
-
> Vite, Webpack, and
|
|
3
|
+
> Vite, Webpack, and esbuild integration for csszyx.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- 🔍 Extracting styles from your code.
|
|
8
|
-
- 🎨 Generating static CSS.
|
|
9
|
-
- 🧩 Mangling class names for production.
|
|
10
|
-
- ⚡ Injecting hydration scripts.
|
|
5
|
+
Build-time plugin that transforms `sz` props into Tailwind classes, generates static CSS, mangles class names in production, and injects hydration scripts for SSR.
|
|
11
6
|
|
|
12
7
|
## Installation
|
|
13
8
|
|
|
14
9
|
```bash
|
|
15
|
-
|
|
10
|
+
pnpm add -D @csszyx/unplugin
|
|
16
11
|
```
|
|
17
12
|
|
|
18
|
-
|
|
13
|
+
Or install the umbrella package which includes this:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add csszyx
|
|
17
|
+
```
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
## Vite
|
|
21
20
|
|
|
22
21
|
```ts
|
|
23
22
|
// vite.config.ts
|
|
24
23
|
import { defineConfig } from "vite";
|
|
25
|
-
import
|
|
24
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
25
|
+
import react from "@vitejs/plugin-react";
|
|
26
|
+
import csszyx from "csszyx/vite";
|
|
26
27
|
|
|
27
28
|
export default defineConfig({
|
|
28
|
-
plugins: [csszyx()],
|
|
29
|
+
plugins: [...csszyx(), tailwindcss(), react()],
|
|
29
30
|
});
|
|
30
31
|
```
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
The direct import also works:
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import csszyx from "@csszyx/unplugin/vite";
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Webpack (Next.js)
|
|
40
|
+
|
|
41
|
+
```js
|
|
42
|
+
// next.config.js
|
|
43
|
+
const csszyx = require("@csszyx/unplugin/webpack").default;
|
|
44
|
+
|
|
45
|
+
/** @type {import('next').NextConfig} */
|
|
46
|
+
const nextConfig = {
|
|
47
|
+
webpack: (config) => {
|
|
48
|
+
config.plugins.push(...csszyx());
|
|
49
|
+
return config;
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
module.exports = nextConfig;
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Webpack (standalone)
|
|
33
57
|
|
|
34
58
|
```js
|
|
35
59
|
// webpack.config.js
|
|
36
|
-
|
|
60
|
+
const csszyx = require("@csszyx/unplugin/webpack").default;
|
|
37
61
|
|
|
38
|
-
|
|
39
|
-
plugins: [csszyx()],
|
|
62
|
+
module.exports = {
|
|
63
|
+
plugins: [...csszyx()],
|
|
40
64
|
};
|
|
41
65
|
```
|
|
42
66
|
|
|
43
67
|
## Features
|
|
44
68
|
|
|
45
|
-
- **
|
|
46
|
-
- **HTML
|
|
47
|
-
- **
|
|
48
|
-
- **CSS
|
|
69
|
+
- **sz prop transform** -- Compiles `sz={{ }}` objects into `className` strings via Babel AST
|
|
70
|
+
- **HTML injection** -- Injects mangle maps and checksums for SSR hydration
|
|
71
|
+
- **HMR support** -- Updates styles instantly during development
|
|
72
|
+
- **CSS mangling** -- Compresses class names (e.g., `text-center` -> `z`) in production builds
|
|
49
73
|
|
|
50
74
|
## License
|
|
51
75
|
|
|
52
|
-
MIT
|
|
76
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@csszyx/unplugin",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Vite and Webpack integration for csszyx",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"csszyx",
|
|
@@ -55,11 +55,11 @@
|
|
|
55
55
|
"postcss": "^8.4.35",
|
|
56
56
|
"postcss-selector-parser": "^6.0.15",
|
|
57
57
|
"unplugin": "^1.10.1",
|
|
58
|
-
"@csszyx/compiler": "0.1.
|
|
59
|
-
"@csszyx/core": "0.1.
|
|
58
|
+
"@csszyx/compiler": "0.1.3",
|
|
59
|
+
"@csszyx/core": "0.1.3",
|
|
60
60
|
"@csszyx/svelte-adapter": "0.0.0",
|
|
61
|
-
"@csszyx/
|
|
62
|
-
"@csszyx/
|
|
61
|
+
"@csszyx/types": "0.1.3",
|
|
62
|
+
"@csszyx/vue-adapter": "0.0.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@types/node": "^20.11.0",
|