feat: add ignore identifier twIgnore

Author: sonofmagic

.changeset/afraid-ads-unite.md

@@ -0,0 +1,22 @@
+---
+"@tailwindcss-mangle/core": patch
+---
+
+feat: add `twIgnore` for ignore mangle
+
+
+## Example
+
+### Input
+
+```js
+const twIgnore = String.raw
+const className =  `${twIgnore`gap-y-4`} bg-zinc-800/30` 
+```
+
+### Output
+
+```js
+const twIgnore = String.raw
+const className =  `${twIgnore`gap-y-4`} tw-a` 
+```

package.json

@@ -38,8 +38,8 @@
     "@commitlint/config-conventional": "^19.5.0",
     "@commitlint/prompt-cli": "^19.5.0",
     "@commitlint/types": "^19.5.0",
-    "@icebreakers/eslint-config": "^0.6.1",
-    "@icebreakers/monorepo": "^0.6.12",
+    "@icebreakers/eslint-config": "^0.7.0",
+    "@icebreakers/monorepo": "^0.6.13",
     "@icebreakers/stylelint-config": "^0.1.2",
     "@rollup/pluginutils": "^5.1.3",
     "@tailwindcss-mangle/core": "workspace:*",
@@ -57,12 +57,12 @@
     "@types/lodash": "^4.17.13",
     "@types/lodash-es": "^4.17.12",
     "@types/micromatch": "^4.0.9",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.9.0",
     "@types/resolve": "^1.20.6",
     "@types/semver": "^7.5.8",
     "@types/set-value": "^4.0.3",
     "@vitest/coverage-v8": "~2.1.4",
-    "astro": "^4.16.8",
+    "astro": "^4.16.10",
     "ci-info": "^4.0.0",
     "comment-json": "^4.2.5",
     "cross-env": "^7.0.3",
@@ -94,7 +94,7 @@
     "postcss7": "npm:postcss@7",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "rollup": "^4.24.3",
+    "rollup": "^4.25.0",
     "set-value": "^4.1.0",
     "tailwindcss": "^3.4.14",
     "tailwindcss-patch": "workspace:*",
@@ -108,7 +108,7 @@
     "unplugin": "^1.15.0",
     "unplugin-tailwindcss-mangle": "workspace:*",
     "vite": "^5.4.10",
-    "vite-tsconfig-paths": "^5.0.1",
+    "vite-tsconfig-paths": "^5.1.1",
     "vitest": "~2.1.4",
     "webpack": "^5.96.1",
     "webpack-build-utils": "^0.0.7",

packages/core/src/constants.ts

@@ -0,0 +1 @@
+export const ignoreIdentifier = 'twIgnore'

packages/core/src/js/index.ts

@@ -4,6 +4,7 @@ import { jsStringEscape } from '@ast-core/escape'
 import { sort } from 'fast-sort'
 import MagicString from 'magic-string'
 import { parse, traverse } from '../babel'
+import { ignoreIdentifier } from '../constants'
 import { makeRegex, splitCode } from '../shared'
 
 export function handleValue(raw: string, node: StringLiteral | TemplateElement, options: IJsHandlerOptions, ms: MagicString, offset: number, escape: boolean) {
@@ -66,6 +67,26 @@ export function jsHandler(rawSource: string | MagicString, options: IJsHandlerOp
     TemplateElement: {
       enter(p) {
         const n = p.node
+        if (p.parentPath.isTemplateLiteral()) {
+          if (
+            (p.parentPath.parentPath.isTaggedTemplateExpression()
+              && p.parentPath.parentPath.get('tag').isIdentifier({
+                name: ignoreIdentifier,
+              })
+            )
+          ) {
+            const { splitQuote = true } = options
+            const array = splitCode(n.value.raw, {
+              splitQuote,
+            })
+            for (const item of array) {
+              ctx.addPreserveClass(item)
+            }
+
+            return
+          }
+        }
+
         handleValue(n.value.raw, n, options, ms, 0, false)
       },
     },

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

@@ -18,6 +18,11 @@ exports[`css > preserveClassNamesSet case 1 1`] = `
 .tw-a {color:red;}"
 `;
 
+exports[`css > preserveClassNamesSet case 2 1`] = `
+".gap-y-4 {color:red;}
+.tw-a {color:red;}"
+`;
+
 exports[`css > vue scoped .gap-y-4 1`] = `
 "@media (min-width: 768px) {
       .tw-a {

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

@@ -43,6 +43,24 @@ exports[`js handler > common StringLiteral with splitQuote false 1`] = `"element
 
 exports[`js handler > common TemplateElement 1`] = `"const counter = 0;element.innerHTML = \`<div class="tw-a tw-b">count is \${counter}</div>\`"`;
 
+exports[`js handler > common ignore StringLiteral 1`] = `
+"
+    const twIgnore = String.raw
+    element.innerHTML = \`<div class="\${twIgnore\`dark:bg-zinc-800/30\`} tw-a">count is counter</div>\`"
+`;
+
+exports[`js handler > common ignore StringLiteral case 0 1`] = `
+"
+    const twIgnore = String.raw
+    const className = \`\${twIgnore\`gap-y-4\`} tw-a\`"
+`;
+
+exports[`js handler > common ignore StringLiteral case 1 1`] = `
+"
+    const twIgnore = String.raw
+    const className = \`\${twIgnore\`gap-y-4\`} \${twIgnore\`bg-zinc-800/30\`}\`"
+`;
+
 exports[`js handler > eval script case 1`] = `
 "(function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
   "use strict";

packages/core/test/css.test.ts

@@ -1,5 +1,6 @@
 import { cssHandler } from '@/css'
 import { Context } from '@/ctx'
+import { jsHandler } from '@/js'
 import { getTestCase } from './utils'
 
 describe('css', () => {
@@ -33,6 +34,24 @@ describe('css', () => {
     expect(code).toMatchSnapshot()
   })
 
+  it('preserveClassNamesSet case 2', async () => {
+    await ctx.initConfig({
+      classList: ['gap-y-4'],
+    })
+    const jsTestCase = `
+    const twIgnore = String.raw
+    element.innerHTML = \`<div class="\${twIgnore\`gap-y-4\`} lg:dark:bg-zinc-800/30">count is counter</div>\``
+    jsHandler(jsTestCase, {
+      ctx,
+    })
+    const testCase = `.gap-y-4 {color:red;}`
+
+    const { code } = await cssHandler(testCase, {
+      ctx,
+    })
+    expect(code).toMatchSnapshot()
+  })
+
   it('vue scoped .gap-y-4', async () => {
     const replaceMap = ctx.replaceMap
     replaceMap.set('gap-y-4', 'tw-a')

packages/core/test/js.test.ts

@@ -32,6 +32,51 @@ describe('js handler', async () => {
     expect(code).toMatchSnapshot()
   })
 
+  it('common ignore StringLiteral', () => {
+    const replaceMap = ctx.replaceMap
+    replaceMap.set('dark:bg-zinc-800/30', '1')
+    replaceMap.set('lg:dark:bg-zinc-800/30', '1')
+
+    const testCase = `
+    const twIgnore = String.raw
+    element.innerHTML = \`<div class="\${twIgnore\`dark:bg-zinc-800/30\`} lg:dark:bg-zinc-800/30">count is counter</div>\``
+    const code = jsHandler(testCase, {
+      ctx,
+
+    }).code
+    expect(code).toMatchSnapshot()
+  })
+
+  it('common ignore StringLiteral case 0', () => {
+    const replaceMap = ctx.replaceMap
+    replaceMap.set('gap-y-4', '1')
+    replaceMap.set('bg-zinc-800/30', '1')
+
+    const testCase = `
+    const twIgnore = String.raw
+    const className = \`\${twIgnore\`gap-y-4\`} bg-zinc-800/30\``
+    const code = jsHandler(testCase, {
+      ctx,
+
+    }).code
+    expect(code).toMatchSnapshot()
+  })
+
+  it('common ignore StringLiteral case 1', () => {
+    const replaceMap = ctx.replaceMap
+    replaceMap.set('gap-y-4', '1')
+    replaceMap.set('bg-zinc-800/30', '1')
+
+    const testCase = `
+    const twIgnore = String.raw
+    const className = \`\${twIgnore\`gap-y-4\`} \${twIgnore\`bg-zinc-800/30\`}\``
+    const code = jsHandler(testCase, {
+      ctx,
+
+    }).code
+    expect(code).toMatchSnapshot()
+  })
+
   it('common StringLiteral with splitQuote false', () => {
     const replaceMap = ctx.replaceMap
     replaceMap.set('dark:bg-zinc-800/30', '1')