chore: release tailwindcss-patch 2.0.0 (#34)

* refactor: tailwindcss-patch stage 0

* chore: add postcss test

* feat: commit class list

* feat: commit options

* chore: release tailwindcss-patch 2.0.0

* chore: ci remove unplugin-tailwindcss-mangle test

* chore: remove tailwindcss-patch test for tmp

* chore: default remove  "*"

Author: sonofmagic

.vscode/launch.json

@@ -11,6 +11,13 @@
       "type": "node-terminal",
       "cwd": "${workspaceFolder}/packages/tailwindcss-patch"
     },
+    {
+      "command": "npm run test:dev",
+      "name": "[tailwindcss-patch] test:dev",
+      "request": "launch",
+      "type": "node-terminal",
+      "cwd": "${workspaceFolder}/packages/tailwindcss-patch"
+    },
     {
       "command": "npm run build",
       "name": "Debug nuxt-app",

apps/vite-svelte/package.json

@@ -11,7 +11,7 @@
     "prepare": "tw-patch"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.3",
+    "@sveltejs/vite-plugin-svelte": "^2.4.4",
     "@tsconfig/svelte": "^5.0.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.27",

apps/vite-vue/.tw-patch/tw-class-list.json

@@ -0,0 +1,115 @@
+[
+  "*",
+  "after:-z-20",
+  "after:absolute",
+  "after:blur-2xl",
+  "after:content-['']",
+  "after:dark:from-sky-900",
+  "after:dark:via-[#0141ff]/40",
+  "after:from-sky-200",
+  "after:h-[180px]",
+  "after:translate-x-1/3",
+  "after:via-blue-200",
+  "after:w-[240px]",
+  "backdrop-blur-2xl",
+  "before:-translate-x-1/2",
+  "before:absolute",
+  "before:blur-2xl",
+  "before:content-['']",
+  "before:dark:bg-gradient-to-br",
+  "before:dark:from-transparent",
+  "before:dark:to-blue-700/10",
+  "before:from-white",
+  "before:h-[300px]",
+  "before:lg:h-[360px]",
+  "before:rounded-full",
+  "before:to-transparent",
+  "before:w-[480px]",
+  "bg-gradient-to-b",
+  "bg-gradient-to-t",
+  "bg-red-200",
+  "bg-red-200/40",
+  "bg-red-200/70",
+  "bg-red-200/90",
+  "border",
+  "border-b",
+  "border-gray-300",
+  "border-transparent",
+  "bottom-0",
+  "dark:bg-zinc-800/30",
+  "dark:border-neutral-800",
+  "dark:drop-shadow-[0_0_0.3rem_#ffffff70]",
+  "dark:from-black",
+  "dark:from-inherit",
+  "dark:invert",
+  "dark:via-black",
+  "drop-shadow",
+  "ease-out",
+  "filter",
+  "fixed",
+  "flex",
+  "flex-col",
+  "font-bold",
+  "font-mono",
+  "font-semibold",
+  "from-white",
+  "from-zinc-200",
+  "gap-2",
+  "grid",
+  "group-hover:translate-x-1",
+  "h-48",
+  "hover:bg-gray-100",
+  "hover:border-gray-300",
+  "hover:dark:bg-neutral-800/30",
+  "hover:dark:border-neutral-700",
+  "inline-block",
+  "items-center",
+  "items-end",
+  "justify-between",
+  "justify-center",
+  "left-0",
+  "lg:bg-gray-200",
+  "lg:bg-none",
+  "lg:border",
+  "lg:dark:bg-zinc-800/30",
+  "lg:flex",
+  "lg:grid-cols-4",
+  "lg:h-auto",
+  "lg:mb-0",
+  "lg:p-0",
+  "lg:p-4",
+  "lg:pointer-events-auto",
+  "lg:rounded-xl",
+  "lg:static",
+  "lg:text-left",
+  "lg:w-auto",
+  "m-0",
+  "max-w-5xl",
+  "max-w-[30ch]",
+  "mb-3",
+  "mb-32",
+  "min-h-screen",
+  "motion-reduce:transform-none",
+  "opacity-50",
+  "p-24",
+  "p-8",
+  "pb-6",
+  "place-items-center",
+  "pointer-events-none",
+  "pt-8",
+  "px-5",
+  "py-4",
+  "relative",
+  "rounded-lg",
+  "text-2xl",
+  "text-[16px]",
+  "text-center",
+  "text-sm",
+  "top-0",
+  "transition",
+  "transition-colors",
+  "transition-transform",
+  "via-white",
+  "w-full",
+  "z-10"
+]

apps/vite-vue/package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "prepare": "tw-patch"
+    "prepare": "tw-patch install"
   },
   "dependencies": {
     "vue": "^3.3.4"

apps/vite-vue/tailwindcss-patch.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'tailwindcss-patch'
+
+export default defineConfig({})

packages/core/test/js.test.ts

@@ -1,7 +1,6 @@
 import { jsHandler } from '@/js'
 import { getCss, getTestCase } from './utils'
 import { ClassGenerator } from '@/shared'
-// import { getClassCacheSet } from 'tailwindcss-patch'
 
 describe('js handler', () => {
   let classGenerator: ClassGenerator

packages/tailwindcss-patch/README.md

@@ -1,6 +1,18 @@
 # tailwindcss-patch
 
-get tailwindcss context at runtime!
+get tailwindcss context at runtime ! extract all class to json file!
+
+- [tailwindcss-patch](#tailwindcss-patch)
+  - [Setup](#setup)
+  - [Usage](#usage)
+  - [Cli](#cli)
+    - [Init Config File](#init-config-file)
+    - [Extract all class into a json](#extract-all-class-into-a-json)
+    - [Nodejs](#nodejs)
+  - [Migration form v1 to v2](#migration-form-v1-to-v2)
+    - [2. cli command change](#2-cli-command-change)
+    - [1. default remove `*` in json array result](#1-default-remove--in-json-array-result)
+  - [Notice](#notice)
 
 ## Setup
 
@@ -13,7 +25,7 @@ get tailwindcss context at runtime!
 2. Patch tailwindcss
 
 ```sh
-npx tw-patch
+npx tw-patch install
 ```
 
 3. Add `prepare` script (keeps patch persisted after npm install)
@@ -24,19 +36,64 @@ npx tw-patch
 {
   /* ... */
   "scripts": {
-    "prepare": "tw-patch"
+    "prepare": "tw-patch install"
   }
 }
 ```
 
 ## Usage
 
+## Cli
+
+### Init Config File
+
+```sh
+tw-patch init
+```
+
+Then there will be a ts file called `tailwindcss-patch.config.ts` exist in your `cwd`.
+
+### Extract all class into a json
+
+```sh
+tw-patch extract
+```
+
+default there will be a json in `.tw-patch/tw-class-list.json` in your project.
+
+you can custom this behavior by config `tailwindcss-patch.config.ts`
+
+### Nodejs
+
 ```js
-import { getContexts, getClassCacheSet } from 'tailwindcss-patch'
+import { TailwindcssPatcher } from 'tailwindcss-patch'
+
+const twPatcher = new TailwindcssPatcher(/* options */)
 // get all contexts at runtime
-getContexts()
+twPatcher.getContexts()
 // get all class generated by tailwindcss utilities
-getClassCacheSet()
+twPatcher.getClassSet()
+```
+
+## Migration form v1 to v2
+
+### 2. cli command change
+
+```diff
+{
+- "tw-patch"
++ "tw-patch install"
+}
+```
+
+### 1. default remove `*` in json array result
+
+```diff
+[
+- "*",
+  "text-[99px]",
+  "text-[100px]"
+]
 ```
 
 ## Notice

packages/tailwindcss-patch/build.config.ts

@@ -1,3 +1,4 @@
+import path from 'node:path'
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
@@ -11,5 +12,8 @@ export default defineBuildConfig({
       respectExternal: false
     }
   },
+  alias: {
+    '@': path.resolve(__dirname, './src')
+  },
   declaration: true
 })

packages/tailwindcss-patch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-patch",
-  "version": "1.2.7",
+  "version": "2.0.0",
   "description": "patch tailwindcss for exposing context",
   "exports": {
     ".": {
@@ -30,9 +30,9 @@
   ],
   "scripts": {
     "build": "unbuild",
-    "test": "vitest run",
+    "test": "vitest run --coverage.enabled",
     "test:dev": "vitest",
-    "cli": "node bin/tw-patch.js"
+    "cli": "node bin/tw-patch.js install"
   },
   "keywords": [
     "tailwindcss",
@@ -49,9 +49,9 @@
     "@types/babel__traverse": "^7.20.1",
     "@types/resolve": "^1.20.2",
     "@types/semver": "^7.5.0",
+    "dedent": "^1.5.1",
     "defu": "^6.1.2",
     "pkg-types": "^1.0.3",
-    "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3"
   },
   "dependencies": {
@@ -61,12 +61,20 @@
     "@babel/types": "^7.22.5",
     "c12": "^1.4.2",
     "cac": "^6.7.14",
+    "postcss": "^8.4.27",
+    "postcss-load-config": "^4.0.1",
     "resolve": "^1.22.4",
     "semver": "^7.5.4"
   },
   "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sonofmagic/tailwindcss-mangle.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sonofmagic/tailwindcss-mangle/issues"
+  },
+  "directories": {
+    "test": "test"
   }
-}
+}

packages/tailwindcss-patch/src/cli.ts

@@ -1,4 +1,44 @@
-import { createPatch, getPatchOptions } from './core'
-const opt = getPatchOptions()
-const patch = createPatch(opt)
-patch()
+import { createPatch, getPatchOptions, TailwindcssPatcher, getConfig } from './core'
+import cac from 'cac'
+import dedent from 'dedent'
+import path from 'node:path'
+import fs from 'node:fs/promises'
+
+function init() {
+  const cwd = process.cwd()
+  return fs.writeFile(
+    path.resolve(cwd, 'tailwindcss-patch.config.ts'),
+    dedent`
+      import { defineConfig } from 'tailwindcss-patch'
+
+      export default defineConfig({})
+    `,
+    'utf8'
+  )
+}
+
+const cli = cac()
+
+cli.command('install', 'patch install').action(() => {
+  const opt = getPatchOptions()
+  const patch = createPatch(opt)
+  patch()
+})
+
+cli.command('init').action(async () => {
+  await init()
+  console.log('✨ tailwindcss-patch config initialized!')
+})
+
+cli.command('extract').action(async () => {
+  const { config } = await getConfig()
+  if (config) {
+    const twPatcher = new TailwindcssPatcher()
+    const p = await twPatcher.extract(config)
+    console.log('✨ tailwindcss-patch extract success! file path:\n' + p)
+  }
+})
+
+cli.help()
+
+cli.parse()