feat: commit split codes

Author: sonofmagic

apps/vite-vue/src/App.vue

@@ -1,17 +1,78 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+
 </script>
 
 <template>
-  <div class="flex justify-between">
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+  <main class="flex min-h-screen flex-col items-center justify-between p-24">
+    <div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
+      <p
+        class="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+        Get started by editing&nbsp;
+        <code class="font-mono font-bold">pages/index.tsx</code>
+      </p>
+      <div
+        class="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
+        <a class="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+          target="_blank" rel="noopener noreferrer">
+          By
+          <img src="/vite.svg" alt="Vercel Logo" class="dark:invert" priority />
+        </a>
+      </div>
+    </div>
+
+    <div
+      class="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
+      <img class="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert" src="./assets/vue.svg" alt="Next.js Logo"
+        priority />
+    </div>
+
+    <div class="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
+      <a href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+        class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+        target="_blank" rel="noopener noreferrer">
+        <h2 class="mb-3 text-2xl font-semibold">
+          Docs <span
+            class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
+        </h2>
+        <p class="m-0 max-w-[30ch] text-sm opacity-50">Find in-depth information about Next.js
+          features and API.</p>
+      </a>
+
+      <a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+        class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+        target="_blank" rel="noopener noreferrer">
+        <h2 class="mb-3 text-2xl font-semibold">
+          Learn <span
+            class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
+        </h2>
+        <p class="m-0 max-w-[30ch] text-sm opacity-50">Learn about Next.js in an interactive
+          course with&nbsp;quizzes!</p>
+      </a>
+
+      <a href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+        class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+        target="_blank" rel="noopener noreferrer">
+        <h2 class="mb-3 text-2xl font-semibold">
+          Templates <span
+            class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
+        </h2>
+        <p class="m-0 max-w-[30ch] text-sm opacity-50">Discover and deploy boilerplate example
+          Next.js&nbsp;projects.</p>
+      </a>
+
+      <a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+        class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+        target="_blank" rel="noopener noreferrer">
+        <h2 class="mb-3 text-2xl font-semibold">
+          Deploy <span
+            class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
+        </h2>
+        <p class="m-0 max-w-[30ch] text-sm opacity-50">Instantly deploy your Next.js site to a
+          shareable URL with Vercel.</p>
+      </a>
+    </div>
+  </main>
 </template>
 
 <style scoped>
@@ -21,9 +82,11 @@ import HelloWorld from './components/HelloWorld.vue'
   will-change: filter;
   transition: filter 300ms;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
 }

packages/unplugin-tailwindcss-mangle/src/classGenerator.ts

@@ -1,7 +1,7 @@
 // import chalk from 'chalk'
 import type { IMangleOptions, IMangleContextClass, IClassGenerator } from './types'
 
-import { acceptChars, acceptPrefix, stripEscapeSequence, regExpTest } from './utils'
+import { acceptChars, stripEscapeSequence, regExpTest } from './utils'
 
 class ClassGenerator implements IClassGenerator {
   public newClassMap: Record<string, IMangleContextClass>
@@ -19,7 +19,7 @@ class ClassGenerator implements IClassGenerator {
 
   defaultClassGenerator() {
     const chars = []
-    let rest = (this.newClassSize - (this.newClassSize % acceptPrefix.length)) / acceptPrefix.length
+    let rest = (this.newClassSize - (this.newClassSize % acceptChars.length)) / acceptChars.length
     if (rest > 0) {
       while (true) {
         rest -= 1
@@ -33,9 +33,9 @@ class ClassGenerator implements IClassGenerator {
         rest /= acceptChars.length
       }
     }
-    const prefixIndex = this.newClassSize % acceptPrefix.length
+    const prefixIndex = this.newClassSize % acceptChars.length
 
-    const newClassName = `${this.classPrefix}${acceptPrefix[prefixIndex]}${chars.join('')}`
+    const newClassName = `${this.classPrefix}${acceptChars[prefixIndex]}${chars.join('')}`
     return newClassName
   }
 

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

@@ -15,26 +15,27 @@ const unplugin = createUnplugin((options: Options | undefined = {}, meta) => {
     // ignore className like 'filter','container'
     // it may be dangerous to mangle/rename all StringLiteral , so use /-/ test for only those with /-/ like:
     // bg-[#123456] w-1 etc...
-    return /-/.test(className)
+    return /[-:]/.test(className)
   }
   let classSet: Set<string>
-  let cached: boolean
+  // let cached: boolean
   const classGenerator = new ClassGenerator()
   function getCachedClassSet() {
-    if (cached) {
-      return classSet
-    }
+    // if (cached) {
+    //   return classSet
+    // }
     const set = getClassCacheSet()
     set.forEach((c) => {
       if (!mangleClass(c)) {
         set.delete(c)
+        // console.log(c)
       }
     })
     // preserveClass.forEach((c) => {
     //   set.delete(c)
     // })
     classSet = set
-    cached = true
+    // cached = true
     return classSet
   }
   return {

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

@@ -17,12 +17,12 @@ export function jsHandler(rawSource: string, options: IHandlerOptions) {
   const ast = parse(rawSource)
   const set = options.runtimeSet
   const clsGen = options.classGenerator
-  // 这样搞会把原先所有的 children 含有相关的 也都转义了
+
   const topt: TraverseOptions<Node> = {
     StringLiteral: {
       enter(p) {
         const n = p.node
-        const arr = splitCode(n.value) // .split(/\s/).filter((x) => x)
+        const arr = splitCode(n.value)
         let rawStr = n.value
         for (let i = 0; i < arr.length; i++) {
           const v = arr[i]

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

@@ -6,4 +6,4 @@ export function isValidSelector(selector = ''): selector is string {
 
 // export const splitCode = (code: string) => [...new Set(code.split(/\\?[\s'"`;={}]+/g))].filter(isValidSelector)
 
-export const splitCode = (code: string) => code.split(/\s+/).filter(isValidSelector)
+export const splitCode = (code: string) => code.split(/[\s"]+/).filter(isValidSelector)

packages/unplugin-tailwindcss-mangle/src/utils.ts

@@ -54,9 +54,7 @@ export function getGroupedEntries<T>(
   return groupedEntries as Record<'css' | 'html' | 'js' | 'other', [string, T][]>
 }
 
-export const acceptPrefix = 'abcdefghijklmnopqrstuvwxyz_'.split('')
-
-export const acceptChars = 'abcdefghijklmnopqrstuvwxyz_-0123456789'.split('')
+export const acceptChars = 'abcdefghijklmnopqrstuvwxyz'.split('')
 
 export function stripEscapeSequence(words: string) {
   return words.replace(/\\/g, '')