Skip to content

Commit f0bbe85

Browse files
sonofmagicsonofmagic
committed
chore: add website
1 parent 6d8e468 commit f0bbe85

17 files changed

+2066
-93
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,5 @@ yarn-error.log*
3131

3232
# turbo
3333
.turbo
34-
dist
34+
dist
35+
.nuxt

‎netlify.toml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,6 @@ NODE_VERSION = "20"
99
from = "/*"
1010
to = "/index.html"
1111
status = 200
12+
13+
[context.deploy-preview]
14+
ignore = "exit 0"

‎pnpm-lock.yaml

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

‎pnpm-workspace.yaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ packages:
22
- 'apps/*'
33
- 'packages/*'
44
- 'scripts/*'
5+
- website

‎website/.tw-patch/tw-class-list.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[]

‎website/next-env.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

‎website/next.config.mjs

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import nextra from 'nextra'
2+
3+
const withNextra = nextra({
4+
theme: 'nextra-theme-docs',
5+
themeConfig: './theme.config.tsx',
6+
})
7+
8+
export default withNextra({
9+
sassOptions: {
10+
silenceDeprecations: ['legacy-js-api'],
11+
},
12+
})

‎website/package.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "website",
3+
"type": "module",
4+
"version": "1.0.0",
5+
"private": true,
6+
"description": "",
7+
"author": "",
8+
"license": "ISC",
9+
"keywords": [],
10+
"scripts": {
11+
"dev": "next",
12+
"build": "next build",
13+
"start": "next start",
14+
"tw-extract": "tw-patch extract"
15+
},
16+
"dependencies": {
17+
"next": "15.0.1",
18+
"nextra": "^3.1.1",
19+
"nextra-theme-docs": "^3.1.1",
20+
"react": "^18.3.1",
21+
"react-dom": "^18.3.1"
22+
}
23+
}

‎website/pages/_app.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import './globals.scss'
2+
3+
export default function App({ Component, pageProps }) {
4+
return <Component {...pageProps} />
5+
}

‎website/pages/_meta.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
index: 'Homepage',
3+
patch: '1.Patch',
4+
mangle: '2.Mangle',
5+
}

‎website/pages/globals.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎website/pages/index.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Welcome to Tailwindcss-mangle
2+
3+
# Step
4+
5+
1. [Patch](./patch)
6+
2. [Mangle](./mangle)

‎website/pages/mangle.mdx

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
# unplugin-tailwindcss-mangle
2+
3+
mangle tailwindcss utilities plugin
4+
5+
It is recommended to read the documentation of [tailwindcss-patch](https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/tailwindcss-patch) first, `unplugin-tailwindcss-mangle` depends on this tool.
6+
7+
> Now Support `vite` and `webpack`
8+
9+
- [unplugin-tailwindcss-mangle](#unplugin-tailwindcss-mangle)
10+
- [Features](#features)
11+
- [Usage](#usage)
12+
- [1. Install Package](#1-install-package)
13+
- [2. Run install script](#2-run-install-script)
14+
- [3. add `prepare` script in your `package.json`](#3-add-prepare-script-in-your-packagejson)
15+
- [4. Run extract command](#4-run-extract-command)
16+
- [5. Register this plugin](#5-register-this-plugin)
17+
- [vite](#vite)
18+
- [webpack](#webpack)
19+
- [Nuxt 3](#nuxt-3)
20+
- [Options](#options)
21+
- [Notice](#notice)
22+
- [Migration form v1 to v2](#migration-form-v1-to-v2)
23+
24+
## Features
25+
26+
```html
27+
<!-- before -->
28+
<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div>
29+
<!-- after -->
30+
<div class="tw-g tw-h tw-i tw-d tw-e tw-j tw-k tw-l"></div>
31+
```
32+
33+
## Usage
34+
35+
### 1. Install Package
36+
37+
```sh
38+
<npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch
39+
```
40+
41+
### 2. Run install script
42+
43+
```sh
44+
npx tw-patch install
45+
```
46+
47+
### 3. add `prepare` script in your `package.json`
48+
49+
```json
50+
"scripts": {
51+
"prepare": "tw-patch install"
52+
},
53+
```
54+
55+
### 4. Run extract command
56+
57+
cd to the same directory as `package.json` and `tailwind.config.js`, then run:
58+
59+
```sh
60+
npx tw-patch extract
61+
```
62+
63+
> See more options in [tailwindcss-patch](https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/tailwindcss-patch)
64+
65+
Then there will generate a json file: `.tw-patch/tw-class-list.json`
66+
67+
### 5. Register this plugin
68+
69+
#### vite
70+
71+
```js
72+
import vue from '@vitejs/plugin-vue'
73+
import utwm from 'unplugin-tailwindcss-mangle/vite'
74+
// for example: vue vite project
75+
import { defineConfig } from 'vite'
76+
// https://vitejs.dev/config/
77+
export default defineConfig({
78+
plugins: [vue(), utwm()]
79+
})
80+
```
81+
82+
then run script:
83+
84+
```sh
85+
# generate bundle
86+
yarn build
87+
# preview
88+
yarn preview
89+
```
90+
91+
You will see all class was renamed to `tw-*`
92+
93+
#### webpack
94+
95+
```js
96+
// esm
97+
import { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'
98+
// or cjs
99+
const utwm = require('unplugin-tailwindcss-mangle/webpack')
100+
// use this webpack plugin
101+
// for example next.config.js
102+
const { defineConfig } = require('@vue/cli-service')
103+
// vue.config.js
104+
module.exports = defineConfig({
105+
transpileDependencies: true,
106+
configureWebpack: (config) => {
107+
if (process.env.NODE_ENV === 'production') {
108+
config.plugins.push(utwm())
109+
}
110+
}
111+
})
112+
113+
```
114+
115+
#### Nuxt 3
116+
117+
```ts
118+
import nuxtPlugin from 'unplugin-tailwindcss-mangle/nuxt'
119+
export default defineNuxtConfig({
120+
// ...
121+
// https://github.com/nuxt/nuxt/issues/20428
122+
// you must set this option to false to enable vite extract css
123+
experimental: {
124+
inlineSSRStyles: false
125+
},
126+
modules: [
127+
[
128+
nuxtPlugin,
129+
{
130+
// options
131+
}
132+
]
133+
]
134+
})
135+
```
136+
137+
## Options
138+
139+
[types.ts](src/types.ts)
140+
141+
## Notice
142+
143+
By default, only the build will take effect. Due to some restrictions, it cannot take effect in the development mode.
144+
145+
This plugin only transform those classes which name contain `-` or `:`, like `w-32`, `before:h-[300px]`,`after:dark:via-[#0141ff]/40`. some classes like `flex`,`relative` will not be mangled.
146+
147+
because plugin will **traverse** all `html class attr` and `js StringLiteral` to find `utilities` generated by `tailwindcss`.
148+
149+
it's dangerous to mangle some `js StringLiteral` like:
150+
151+
```js
152+
const innerHTML = 'i\'m flex and relative and grid'
153+
document.body.innerHTML = innerHTML
154+
```
155+
156+
so only strings with `-` or `:` will be transformed.
157+
158+
## Migration form v1 to v2
159+
160+
```diff
161+
// vite
162+
- import { vitePlugin } from 'unplugin-tailwindcss-mangle'
163+
+ import utwm from 'unplugin-tailwindcss-mangle/vite'
164+
165+
// webpack
166+
- import { webpackPlugin } from 'unplugin-tailwindcss-mangle'
167+
+ import utwm from 'unplugin-tailwindcss-mangle/webpack'
168+
```

‎website/pages/patch.mdx

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# tailwindcss-patch
2+
3+
{/* \[[中文(zh-cn)](./README-cn.md)\] */}
4+
5+
get tailwindcss context at runtime ! extract all classes into file!
6+
7+
- [tailwindcss-patch](#tailwindcss-patch)
8+
- [Setup](#setup)
9+
- [Usage](#usage)
10+
- [Cli](#cli)
11+
- [Extract all class into a json](#extract-all-class-into-a-json)
12+
- [Nodejs API](#nodejs-api)
13+
- [Config](#config)
14+
- [Init Config File](#init-config-file)
15+
- [What's next?](#whats-next)
16+
17+
> Nodejs version should >= `16.6.0`
18+
19+
## Setup
20+
21+
1. Install package
22+
23+
```sh
24+
<yarn|npm|pnpm> add -D tailwindcss-patch
25+
```
26+
27+
2. Patch tailwindcss
28+
29+
```sh
30+
npx tw-patch install
31+
```
32+
33+
3. Add `prepare` script (keeps patch persisted after npm install)
34+
35+
`package.json`
36+
37+
```json
38+
{
39+
/* ... */
40+
"scripts": {
41+
"prepare": "tw-patch install"
42+
}
43+
}
44+
```
45+
46+
## Usage
47+
48+
## Cli
49+
50+
### Extract all class into a json
51+
52+
```sh
53+
npx tw-patch extract
54+
```
55+
56+
default there will be a json in `.tw-patch/tw-class-list.json` in your project.
57+
58+
you can custom this behavior by config `tailwindcss-mangle.config.ts`
59+
60+
## Nodejs API
61+
62+
```js
63+
import { TailwindcssPatcher } from 'tailwindcss-patch'
64+
65+
const twPatcher = new TailwindcssPatcher(/* options */)
66+
// do patch
67+
twPatcher.patch()
68+
// get all contexts at runtime
69+
twPatcher.getContexts()
70+
// get all class generated by tailwindcss utilities
71+
twPatcher.getClassSet()
72+
```
73+
74+
## Config
75+
76+
### Init Config File
77+
78+
```sh
79+
npx tw-patch init
80+
```
81+
82+
Then there will be a ts file called `tailwindcss-mangle.config.ts` exist in your `cwd`.
83+
84+
The config as follows:
85+
86+
```ts
87+
import { defineConfig } from 'tailwindcss-patch'
88+
89+
export default defineConfig({})
90+
```
91+
92+
you can custom `tw-patch` behavior by `patch` option:
93+
94+
```ts
95+
import { defineConfig } from 'tailwindcss-patch'
96+
97+
export default defineConfig({
98+
patch: {
99+
output: {
100+
filename: 'xxx.json',
101+
loose: true,
102+
removeUniversalSelector: true
103+
},
104+
tailwindcss: {
105+
config: 'path/to/your-tailwind.config.js',
106+
cwd: 'project/cwd'
107+
}
108+
}
109+
})
110+
```
111+
112+
## What's next?
113+
114+
At the moment I just extracted all the tool classes to actually get the context of `tailwindcss` to analyze. You can add more functionality to this project by giving me `issue` or `pr`.
115+
116+
Of course, the extracted `JSON` isn't just for you to look at. You can analyze it, and I use it as a data file for my `tailwindcss-mangle`.
117+
118+
The `tailwindcss-mangle` itself is an obfuscation tool to obfuscate the tools generated by `tailwindcss`, see the next article for more details on how to use it.

‎website/tailwind.config.ts

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

‎website/theme.config.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { DocsThemeConfig } from 'nextra-theme-docs'
2+
3+
export default {
4+
logo: <span>Tailwindcss-mangle Documentation</span>,
5+
project: {
6+
link: 'https://github.com/sonofmagic/tailwindcss-mangle',
7+
},
8+
docsRepositoryBase: 'https://github.com/sonofmagic/tailwindcss-mangle/tree/main/website',
9+
} as DocsThemeConfig

0 commit comments

Comments
 (0)