fix: Bug with utility class which contains trailing slash #24

regex should exact match class str
sonofmagic · Jun 7, 2023 · 9d5308f · 9d5308f
1 parent 29e96df
commit 9d5308f
Show file tree

Hide file tree

Showing 16 changed files with 477 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -44,5 +44,8 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "vitest": "^0.32.0"
+  }
 }
diff --git a/packages/core/jest.config.ts b/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)']
     }
   ]

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -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",
@@ -45,4 +49,4 @@
     "type": "git",
     "url": "git+https://github.com/sonofmagic/tailwindcss-mangle.git"
   }
-}
+}
diff --git a/packages/core/test/__snapshots__/html.test.ts.snap b/packages/core/test/__snapshots__/html.test.ts.snap
@@ -0,0 +1,39 @@
+// 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 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>"
+`;
diff --git a/packages/core/test/__snapshots__/js.test.ts.snap b/packages/core/test/__snapshots__/js.test.ts.snap
@@ -252,6 +252,8 @@ 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 z-10 not transform 1`] = `
 "{
   className: "tw-a tw-b tw-c tw-d tw-e tw-f tw-g tw-h";

diff --git a/packages/core/test/fixtures/trailing-slash-0.js b/packages/core/test/fixtures/trailing-slash-0.js
@@ -0,0 +1 @@
+document.getElementById('#app').classList.add('bg-red-500 bg-red-500/50')
diff --git a/packages/core/test/fixtures/trailing-slash.html b/packages/core/test/fixtures/trailing-slash.html
@@ -0,0 +1,22 @@
+<!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="bg-red-500">
+      Block with bg-red-500 class
+    </div>
+    <div class="bg-red-500/50">
+      Block with bg-red-500/50 class
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/packages/core/test/html.test.ts b/packages/core/test/html.test.ts
@@ -0,0 +1,35 @@
+import { getTestCase } from './utils'
+import { htmlHandler } from '../src/html'
+import { ClassGenerator, splitCode } from 'tailwindcss-mangle-shared'
+import { describe, it, beforeEach, expect } from 'vitest'
+describe('html handler', () => {
+  let classGenerator: ClassGenerator
+  beforeEach(() => {
+    classGenerator = new ClassGenerator()
+  })
+  it('common usage', () => {
+    const runtimeSet = new Set<string>()
+
+    splitCode('text-3xl font-bold underline').forEach((x) => {
+      runtimeSet.add(x)
+    })
+    const res = htmlHandler(getTestCase('hello-world.html'), {
+      classGenerator,
+      runtimeSet
+    })
+    expect(res).toMatchSnapshot()
+  })
+
+  it('trailing slash case', () => {
+    const runtimeSet = new Set<string>()
+
+    splitCode('bg-red-500 bg-red-500/50').forEach((x) => {
+      runtimeSet.add(x)
+    })
+    const res = htmlHandler(getTestCase('trailing-slash.html'), {
+      classGenerator,
+      runtimeSet
+    })
+    expect(res).toMatchSnapshot()
+  })
+})
diff --git a/packages/core/test/js.test.ts b/packages/core/test/js.test.ts
@@ -149,4 +149,16 @@ describe('js handler', () => {
     }).code
     expect(code).toMatchSnapshot()
   })
+  // https://github.com/sonofmagic/tailwindcss-mangle/issues/24
+  it('trailing slash case 0', () => {
+    const testCase = getTestCase('trailing-slash-0.js')
+    const runtimeSet = new Set<string>()
+    runtimeSet.add('bg-red-500')
+    runtimeSet.add('bg-red-500/50')
+    const code = jsHandler(testCase, {
+      classGenerator,
+      runtimeSet
+    }).code
+    expect(code).toMatchSnapshot()
+  })
 })
diff --git a/packages/core/vitest.config.ts b/packages/core/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['test/html.test.ts']
+    // ...
+  }
+})
diff --git a/packages/shared/src/regex.ts b/packages/shared/src/regex.ts
@@ -5,6 +5,13 @@ export function escapeStringRegexp(str: string) {
   return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d')
 }
 
-export function makeRegex(str: string) {
-  return new RegExp('(?<=^|[\\s"])' + escapeStringRegexp(str), 'g')
+export function makeRegex(
+  str: string,
+  options: {
+    exact: boolean
+  } = {
+    exact: true
+  }
+) {
+  return new RegExp('(?<=^|[\\s"])' + escapeStringRegexp(str) + (options.exact ? '(?=$|[\\s"])' : ''), 'g')
 }
diff --git a/packages/shared/test/__snapshots__/reg.test.ts.snap b/packages/shared/test/__snapshots__/reg.test.ts.snap
@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`regex trailing slash should exact match case 0 1`] = `
+[
+  [
+    "bg-red-500",
+  ],
+  [
+    "bg-red-500",
+  ],
+]
+`;
+
+exports[`regex trailing slash should exact match case 1 1`] = `
+[
+  [
+    "bg-red-500",
+  ],
+]
+`;
+
 exports[`regex z-10 regex 1`] = `
 [
   [

diff --git a/packages/shared/test/reg.test.ts b/packages/shared/test/reg.test.ts
@@ -8,4 +8,22 @@ describe('regex', () => {
     expect(arr.length).toBe(1)
     expect(arr).toMatchSnapshot()
   })
+
+  it('trailing slash should exact match case 0', () => {
+    const testCase = 'bg-red-500 bg-red-500/50'
+    const regex = makeRegex('bg-red-500', {
+      exact: false
+    })
+    const arr = Array.from(testCase.matchAll(regex))
+    expect(arr.length).toBe(2)
+    expect(arr).toMatchSnapshot()
+  })
+
+  it('trailing slash should exact match case 1', () => {
+    const testCase = 'bg-red-500 bg-red-500/50'
+    const regex = makeRegex('bg-red-500')
+    const arr = Array.from(testCase.matchAll(regex))
+    expect(arr.length).toBe(1)
+    expect(arr).toMatchSnapshot()
+  })
 })
diff --git a/packages/tailwindcss-patch/test/context.test.ts b/packages/tailwindcss-patch/test/context.test.ts
@@ -32,4 +32,15 @@ describe('common usage', () => {
     expect(Array.from(set.values())[1]).toBe("bg-[url('https://xxx.webp')]")
     //
   })
+
+  it('trailing slash', () => {
+    getCss([getTestCase('trailing-slash.vue')])
+    const ctxs = getContexts()
+    expect(ctxs).toBeTruthy()
+    const set = getClassCacheSet()
+    expect(set.size).toBeGreaterThan(0)
+    expect(set.size).toBe(4)
+    expect(set.has('bg-red-500')).toBe(true)
+    expect(set.has('bg-red-500/50')).toBe(true)
+  })
 })
diff --git a/packages/tailwindcss-patch/test/fixtures/trailing-slash.vue b/packages/tailwindcss-patch/test/fixtures/trailing-slash.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <div class="">
+      <div class="">
+        <div class="bg-[#2f2f2f]">
+          <div class="bg-red-500">
+            Block with bg-red-500 class
+          </div>
+          <div class="bg-red-500/50">
+            Block with bg-red-500/50 class
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
-Original file line number
+Diff line change
@@ Expand Up / @@ -252,6 +252,8 @@ 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 z-10 not transform 1`] = `
     "{
       className: "tw-a tw-b tw-c tw-d tw-e tw-f tw-g tw-h";
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		document.getElementById('#app').classList.add('bg-red-500 bg-red-500/50')