Skip to content

Commit 301da8d

Browse files
sonofmagicsonofmagic
committed
feat: vite plugin commit
1 parent ceccac4 commit 301da8d

File tree

12 files changed

+105
-14
lines changed

12 files changed

+105
-14
lines changed

‎apps/vite-react/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>Vite + React + TS</title>
88
</head>
99
<body>
10-
<div id="root"></div>
10+
<div id="root" class="text-[red]"></div>
1111
<script type="module" src="/src/main.tsx"></script>
1212
</body>
1313
</html>

‎apps/vite-react/package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"scripts": {
77
"dev": "vite",
88
"build": "tsc && vite build",
9-
"preview": "vite preview"
9+
"preview": "vite preview",
10+
"prepare": "tw-patch"
1011
},
1112
"dependencies": {
1213
"react": "^18.2.0",
@@ -16,7 +17,12 @@
1617
"@types/react": "^18.0.28",
1718
"@types/react-dom": "^18.0.11",
1819
"@vitejs/plugin-react": "^3.1.0",
20+
"autoprefixer": "^10.4.14",
21+
"postcss": "^8.4.21",
22+
"tailwindcss": "^3.3.1",
23+
"tailwindcss-patch": "workspace:*",
1924
"typescript": "^4.9.3",
25+
"unplugin-tailwindcss-mangle": "workspace:*",
2026
"vite": "^4.2.0"
2127
}
2228
}

‎apps/vite-react/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {}
5+
}
6+
}

‎apps/vite-react/src/App.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ function App() {
88

99
return (
1010
<div className="App">
11-
<div>
11+
<div className="flex justify-between">
1212
<a href="https://vitejs.dev" target="_blank">
1313
<img src={viteLogo} className="logo" alt="Vite logo" />
1414
</a>
1515
<a href="https://reactjs.org" target="_blank">
1616
<img src={reactLogo} className="logo react" alt="React logo" />
1717
</a>
1818
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
19+
<h1 className="text-[#123456]">Vite + React</h1>
20+
<div className="card bg-[#123456]">
2121
<button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
2222
<p>
2323
Edit <code>src/App.tsx</code> and save to test HMR

‎apps/vite-react/src/index.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
15
:root {
26
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
37
line-height: 1.5;

‎apps/vite-react/tailwind.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
4+
theme: {
5+
extend: {}
6+
},
7+
plugins: []
8+
}

‎apps/vite-react/vite.config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineConfig } from 'vite'
22
import react from '@vitejs/plugin-react'
3-
3+
import utwm from 'unplugin-tailwindcss-mangle'
44
// https://vitejs.dev/config/
55
export default defineConfig({
6-
plugins: [react()]
6+
plugins: [react(), utwm.vite()]
77
})

‎apps/vite-svelte/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
"svelte-check": "^2.10.3",
1717
"tslib": "^2.5.0",
1818
"typescript": "^4.9.3",
19-
"vite": "^4.2.0"
19+
"vite": "^4.2.0",
20+
"tailwindcss-patch": "workspace:*",
21+
"unplugin-tailwindcss-mangle": "workspace:*"
2022
}
2123
}

‎apps/vite-vue/vite.config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineConfig } from 'vite'
22
import vue from '@vitejs/plugin-vue'
3-
import { vitePlugin } from 'unplugin-tailwindcss-mangle'
3+
import utwm from 'unplugin-tailwindcss-mangle'
44
// https://vitejs.dev/config/
55
export default defineConfig({
6-
plugins: [vue(), vitePlugin()]
6+
plugins: [vue(), utwm.vite()]
77
})

‎packages/unplugin-tailwindcss-mangle/src/index.ts

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,62 @@ const unplugin = createUnplugin((options: Options | undefined = {}, meta) => {
7777
}
7878
}
7979
},
80-
webpack(compiler) {}
80+
webpack(compiler) {
81+
const Compilation = compiler.webpack.Compilation
82+
const { ConcatSource } = compiler.webpack.sources
83+
compiler.hooks.compilation.tap(pluginName, (compilation) => {
84+
compilation.hooks.processAssets.tap(
85+
{
86+
name: pluginName,
87+
stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
88+
},
89+
(assets) => {
90+
const runtimeSet = getCachedClassSet()
91+
const groupedEntries = getGroupedEntries(Object.entries(assets))
92+
if (groupedEntries.html.length) {
93+
for (let i = 0; i < groupedEntries.html.length; i++) {
94+
const [file, asset] = groupedEntries.html[i]
95+
const html = htmlHandler(asset.source().toString(), {
96+
classGenerator,
97+
runtimeSet
98+
})
99+
const source = new ConcatSource(html)
100+
compilation.updateAsset(file, source)
101+
}
102+
}
103+
if (groupedEntries.js.length) {
104+
for (let i = 0; i < groupedEntries.js.length; i++) {
105+
const [file, chunk] = groupedEntries.js[i]
106+
const code = jsHandler(chunk.source().toString(), {
107+
runtimeSet,
108+
classGenerator
109+
}).code
110+
const source = new ConcatSource(code)
111+
compilation.updateAsset(file, source)
112+
}
113+
}
114+
115+
if (groupedEntries.css.length) {
116+
for (let i = 0; i < groupedEntries.css.length; i++) {
117+
const [file, css] = groupedEntries.css[i]
118+
const newCss = cssHandler(css.source().toString(), {
119+
classGenerator,
120+
runtimeSet
121+
})
122+
const source = new ConcatSource(newCss)
123+
compilation.updateAsset(file, source)
124+
}
125+
}
126+
}
127+
)
128+
})
129+
}
81130
}
82131
})
83132
export default unplugin
84-
export const vitePlugin = unplugin.vite
133+
// export const vitePlugin = unplugin.vite
85134
// export const rollupPlugin = unplugin.rollup
86-
export const webpackPlugin = unplugin.webpack
135+
// export const webpackPlugin = unplugin.webpack
87136
// export const rspackPlugin = unplugin.rspack
88137
// export const esbuildPlugin = unplugin.esbuild
89138
// export const vitePlugin = unplugin.vite

‎packages/unplugin-tailwindcss-mangle/src/js/split.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@ export function isValidSelector(selector = ''): selector is string {
44
return validateFilterRE.test(selector)
55
}
66

7-
export const splitCode = (code: string) => [...new Set(code.split(/\\?[\s'"`;={}]+/g))].filter(isValidSelector)
7+
// export const splitCode = (code: string) => [...new Set(code.split(/\\?[\s'"`;={}]+/g))].filter(isValidSelector)
8+
9+
export const splitCode = (code: string) => code.split(/\s+/).filter(isValidSelector)

‎pnpm-lock.yaml

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)