Release: 1.2.4

.eslintrc.js

@@ -1,4 +1,11 @@
 module.exports = {
   root: true,
-  extends: ['@icebreakers/eslint-config-ts']
+  extends: ['@icebreakers/eslint-config-ts', 'plugin:unicorn/recommended'],
+  rules: {
+    'unicorn/prefer-module': 0,
+    'unicorn/prevent-abbreviations': 0,
+    'unicorn/filename-case': 0,
+    'unicorn/no-object-as-default-parameter': 0,
+    'unicorn/no-null': 0
+  }
 }

apps/vite-vue/src/App.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <main class="flex min-h-screen flex-col items-center justify-between p-24">
+  <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">
@@ -27,11 +27,11 @@
         priority />
     </div>
 
-    <div class="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
+    <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">
+        <h2 class="bg-red-200 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>
@@ -42,7 +42,7 @@
       <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">
+        <h2 class="bg-red-200/40 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>
@@ -53,7 +53,7 @@
       <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">
+        <h2 class="bg-red-200/70 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>
@@ -64,7 +64,7 @@
       <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">
+        <h2 class="bg-red-200/90 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>
@@ -75,6 +75,39 @@
   </main>
 </template>
 
+<script lang="ts">
+import { onMounted, defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    onMounted(() => {
+      const clipPath = '';
+      document.documentElement.animate(
+        {
+          clipPath
+        },
+        {
+          duration: 500,
+          easing: /* tw-mangle ignore */ 'ease-out',
+          pseudoElement: '::view-transition-new(root)'
+        })
+      document.documentElement.animate(
+        {
+          clipPath
+        },
+        {
+          duration: 500,
+          easing: 'ease-out',
+          pseudoElement: '::view-transition-new(root)'
+        }
+      )
+    })
+    return {}
+  }
+})
+
+</script>
+
 <style scoped>
 .logo {
   height: 6em;

apps/vite-vue/vite.config.ts

@@ -1,13 +1,22 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
+import { vitePlugin as utwm, defaultMangleClassFilter } from 'unplugin-tailwindcss-mangle'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     utwm({
+      mangleClassFilter(className) {
+        if (['ease-out', 'ease-linear', 'ease-in', 'ease-in-out'].includes(className)) {
+          return false
+        }
+        return defaultMangleClassFilter(className)
+      },
       classSetOutput: true,
-      classMapOutput: true
+      classMapOutput: true,
+      jsHandlerOptions: {
+        minified: true
+      }
     })
   ]
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-mangle",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "private": true,
   "workspaces": [
     "apps/*",
@@ -29,6 +29,7 @@
     "bumpp": "^9.1.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.42.0",
+    "eslint-plugin-unicorn": "^47.0.0",
     "jest": "^29.5.0",
     "only-allow": "^1.1.1",
     "prettier": "^2.8.8",
@@ -44,5 +45,8 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "vitest": "^0.32.0"
+  }
 }

packages/core/jest.config.ts

@@ -3,7 +3,8 @@ import baseConfig from '../../jest.config'
 const config: Config = {
   projects: [
     {
-      ...baseConfig
+      ...baseConfig,
+      modulePathIgnorePatterns: ['test/html.test.ts']
       // transformIgnorePatterns: ['/node_modules/(?!(@parse5/)/tools)']
     }
   ]

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-mangle-core",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "The core of tailwindcss-mangle",
   "main": "dist/index.js",
   "module": "./dist/index.mjs",
@@ -13,7 +13,11 @@
     "build": "cross-env NODE_ENV=production rollup -c",
     "dev:tsc": "tsc -p tsconfig.json --sourceMap",
     "build:tsc": "tsc -p tsconfig.json",
-    "test": "yarn build && jest"
+    "_test": "yarn build && jest",
+    "jest:u": "jest -u",
+    "test:dev": "yarn build && vitest",
+    "test": "yarn build && jest && vitest run",
+    "coverage": "vitest run --coverage"
   },
   "keywords": [
     "tailwindcss",

packages/core/src/css/plugins.ts

@@ -8,10 +8,10 @@ const postcssPlugin = 'postcss-mangle-tailwindcss-plugin'
 
 export function isVueScoped(s: parser.ClassName): boolean {
   if (s.parent) {
-    const idx = s.parent.nodes.indexOf(s)
-    if (idx > -1) {
-      const nextNode = s.parent.nodes[idx + 1]
-      if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.indexOf('data-v-') > -1) {
+    const index = s.parent.nodes.indexOf(s)
+    if (index > -1) {
+      const nextNode = s.parent.nodes[index + 1]
+      if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.includes('data-v-')) {
         return true
       }
     }
@@ -27,10 +27,8 @@ const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin = (options)
     // must set newClassMap options
     let set: Set<string> = new Set()
 
-    if (options) {
-      if (options.runtimeSet) {
-        set = options.runtimeSet
-      }
+    if (options && options.runtimeSet) {
+      set = options.runtimeSet
     }
     return {
       postcssPlugin,
@@ -54,10 +52,8 @@ const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin = (options)
   } else {
     let newClassMap: Record<string, IClassGeneratorContextItem> = {}
 
-    if (options) {
-      if (options.classGenerator) {
-        newClassMap = options.classGenerator.newClassMap
-      }
+    if (options && options.classGenerator) {
+      newClassMap = options.classGenerator.newClassMap
     }
 
     return {

packages/core/src/html/index.ts

@@ -8,15 +8,14 @@ export function htmlHandler(rawSource: string, options: IHtmlHandlerOptions) {
   const fragment = parse(rawSource)
   traverse(fragment, {
     element(node, parent) {
-      const attr = node.attrs.find((x) => x.name === 'class')
-      if (attr) {
-        const arr = splitCode(attr.value, {
+      const attribute = node.attrs.find((x) => x.name === 'class')
+      if (attribute) {
+        const array = splitCode(attribute.value, {
           splitQuote: false
         })
-        for (let i = 0; i < arr.length; i++) {
-          const v = arr[i]
+        for (const v of array) {
           if (runtimeSet.has(v)) {
-            attr.value = attr.value.replace(makeRegex(v), classGenerator.generateClassName(v).name)
+            attribute.value = attribute.value.replace(makeRegex(v), classGenerator.generateClassName(v).name)
           }
         }
       }

packages/core/src/js/index.ts

@@ -3,29 +3,28 @@ import * as t from '@babel/types'
 import { transformSync, type BabelFileResult, type NodePath } from '@babel/core'
 import type { IJsHandlerOptions } from '../types'
 import { makeRegex, splitCode } from '../shared'
-import { isProd } from '../env'
+import { isProd as isProduction } from '../env'
 
-export function handleValue(str: string, node: StringLiteral | TemplateElement, options: IJsHandlerOptions) {
+export function handleValue(string_: string, node: StringLiteral | TemplateElement, options: IJsHandlerOptions) {
   const { runtimeSet: set, classGenerator: clsGen, splitQuote = true } = options
 
-  const arr = splitCode(str, {
+  const array = splitCode(string_, {
     splitQuote
   })
-  let rawStr = str
-  for (let i = 0; i < arr.length; i++) {
-    const v = arr[i]
+  let rawString = string_
+  for (const v of array) {
     if (set.has(v)) {
       let ignoreFlag = false
       if (Array.isArray(node.leadingComments)) {
         ignoreFlag = node.leadingComments.findIndex((x) => x.value.includes('tw-mangle') && x.value.includes('ignore')) > -1
       }
 
       if (!ignoreFlag) {
-        rawStr = rawStr.replace(makeRegex(v), clsGen.generateClassName(v).name)
+        rawString = rawString.replace(makeRegex(v), clsGen.generateClassName(v).name)
       }
     }
   }
-  return rawStr
+  return rawString
 }
 
 export function jsHandler(rawSource: string, options: IJsHandlerOptions) {
@@ -52,12 +51,10 @@ export function jsHandler(rawSource: string, options: IJsHandlerOptions) {
               enter(p: NodePath<CallExpression>) {
                 const n = p.node
                 // eval()
-                if (t.isIdentifier(n.callee) && n.callee.name === 'eval') {
-                  if (t.isStringLiteral(n.arguments[0])) {
-                    const res = jsHandler(n.arguments[0].value, options)
-                    if (res.code) {
-                      n.arguments[0].value = res.code
-                    }
+                if (t.isIdentifier(n.callee) && n.callee.name === 'eval' && t.isStringLiteral(n.arguments[0])) {
+                  const res = jsHandler(n.arguments[0].value, options)
+                  if (res.code) {
+                    n.arguments[0].value = res.code
                   }
                 }
               }
@@ -67,7 +64,7 @@ export function jsHandler(rawSource: string, options: IJsHandlerOptions) {
         }
       }
     ],
-    minified: options.minified ?? isProd(),
+    minified: options.minified ?? isProduction(),
     sourceMaps: false,
     configFile: false
   })

packages/core/test/__snapshots__/html.test.ts.snap

@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`html handler > common usage 1`] = `
+"<!DOCTYPE html><html><head>
+  <meta charset=\\"UTF-8\\">
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
+  <link href=\\"/main.css\\" rel=\\"stylesheet\\">
+</head>
+
+<body>
+  <h1 class=\\"tw-a tw-b tw-c\\">
+    Hello world!
+  </h1>
+
+
+</body></html>"
+`;
+
+exports[`html handler > trailing slash case 0 1`] = `
+"<!DOCTYPE html><html lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\">
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
+  <title>Document</title>
+</head>
+
+<body>
+  <div>
+    <div class=\\"tw-a\\">
+      Block with bg-red-500/50 class
+    </div>
+    <div class=\\"tw-b\\">
+      Block with bg-red-500 class
+    </div>
+  </div>
+
+
+</body></html>"
+`;
+
+exports[`html handler > trailing slash case 1`] = `
+"<!DOCTYPE html><html lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\">
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
+  <title>Document</title>
+</head>
+
+<body>
+  <div>
+    <div class=\\"tw-a\\">
+      Block with bg-red-500 class
+    </div>
+    <div class=\\"tw-b\\">
+      Block with bg-red-500/50 class
+    </div>
+  </div>
+
+
+</body></html>"
+`;

packages/core/test/__snapshots__/js.test.ts.snap

@@ -252,6 +252,12 @@ exports[`js handler nextjs server side mangle 1`] = `
 })();"
 `;
 
+exports[`js handler trailing slash case 0 1`] = `"document.getElementById("#app").classList.add("tw-a tw-b");"`;
+
+exports[`js handler trailing slash case 1 1`] = `"document.querySelector("#app").classList.add("tw-a tw-b");"`;
+
+exports[`js handler trailing slash case 2 1`] = `"document.querySelector("#app").classList.add("tw-a tw-b tw-a s tw-a");"`;
+
 exports[`js handler z-10 not transform 1`] = `
 "{
   className: "tw-a tw-b tw-c tw-d tw-e tw-f tw-g tw-h";