fix(core): jsStringEscape

Author: sonofmagic

apps/next-app/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@types/node": "20.4.9",
-    "@types/react": "18.2.19",
+    "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
     "eslint": "8.46.0",

apps/remix-app/package.json

@@ -10,17 +10,17 @@
     "prepare": "tw-patch install"
   },
   "dependencies": {
-    "@remix-run/node": "^1.19.2",
-    "@remix-run/react": "^1.19.2",
-    "@remix-run/serve": "^1.19.2",
+    "@remix-run/node": "^1.19.3",
+    "@remix-run/react": "^1.19.3",
+    "@remix-run/serve": "^1.19.3",
     "isbot": "^3.6.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@remix-run/dev": "^1.19.2",
     "@remix-run/eslint-config": "^1.19.2",
-    "@types/react": "^18.2.19",
+    "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.46.0",
     "tailwindcss": "^3.3.3",

apps/solid-app/package.json

@@ -23,6 +23,6 @@
     "vite-plugin-solid": "^2.5.0"
   },
   "dependencies": {
-    "solid-js": "^1.7.9"
+    "solid-js": "^1.7.10"
   }
 }

apps/vite-react/package.json

@@ -14,7 +14,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.19",
+    "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.14",

apps/webpack5-vue3/package.json

@@ -29,9 +29,9 @@
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.16.1",
+    "eslint-plugin-vue": "^9.17.0",
     "postcss": "^8.4.27",
-    "sass": "^1.64.2",
+    "sass": "^1.65.1",
     "sass-loader": "^13.3.2",
     "tailwindcss": "^3.3.3",
     "tailwindcss-patch": "workspace:*",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss-mangle/core",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "The core of tailwindcss-mangle",
   "exports": {
     ".": {

packages/core/src/js/pre.ts

@@ -10,8 +10,36 @@ interface Options {
   addToUsedBy: (key: string, file: string) => void
 }
 
-export function handleValue(options: { raw: string; node: babel.types.StringLiteral | babel.types.TemplateElement; offset: number } & Options) {
-  const { addToUsedBy, id, magicString, node, raw, replaceMap, offset = 0 } = options
+export function jsStringEscape(str: unknown) {
+  return ('' + str).replaceAll(/[\n\r"'\\\u2028\u2029]/g, (character) => {
+    switch (character) {
+      case '"':
+      case "'":
+      case '\\': {
+        return '\\' + character
+      }
+
+      case '\n': {
+        return '\\n'
+      }
+      case '\r': {
+        return '\\r'
+      }
+      case '\u2028': {
+        return '\\u2028'
+      }
+      case '\u2029': {
+        return '\\u2029'
+      }
+      default: {
+        return character
+      }
+    }
+  })
+}
+
+export function handleValue(options: { raw: string; node: babel.types.StringLiteral | babel.types.TemplateElement; offset: number; escape: boolean } & Options) {
+  const { addToUsedBy, id, magicString, node, raw, replaceMap, offset = 0, escape = false } = options
   let value = raw
   const arr = sort(splitCode(value)).desc((x) => x.length)
 
@@ -25,7 +53,7 @@ export function handleValue(options: { raw: string; node: babel.types.StringLite
     }
   }
   if (typeof node.start === 'number' && typeof node.end === 'number' && value) {
-    magicString.update(node.start + offset, node.end - offset, value)
+    magicString.update(node.start + offset, node.end - offset, escape ? jsStringEscape(value) : value)
   }
 }
 
@@ -44,7 +72,8 @@ export const plugin = declare((api, options: Options) => {
             node,
             raw: node.value,
             replaceMap,
-            offset: 1
+            offset: 1,
+            escape: true
           })
         }
       },
@@ -58,7 +87,8 @@ export const plugin = declare((api, options: Options) => {
             node,
             raw: node.value.raw,
             replaceMap,
-            offset: 0
+            offset: 0,
+            escape: false
           })
         }
       }

packages/core/test/js.test.ts

@@ -1,5 +1,5 @@
 import { getCss, getTestCase } from './utils'
-import { jsHandler } from '@/js'
+import { jsHandler, preProcessJs } from '@/js'
 import { ClassGenerator } from '@/shared'
 
 describe('js handler', () => {
@@ -194,4 +194,30 @@ describe('js handler', () => {
     }).code
     expect(code).toMatchSnapshot()
   })
+
+  it('LINEFEED case', () => {
+    const testCase = 'const LINEFEED = "\\n";'
+    const replaceMap = new Map()
+    // replaceMap.set('bg-red-500/50', true)
+    // replaceMap.set('bg-red-500', true)
+    const code = jsHandler(testCase, {
+      classGenerator,
+      replaceMap
+    }).code
+    expect(code).toBe('const LINEFEED="\\n";')
+  })
+
+  it('preProcessJs case', () => {
+    const testCase = 'const LINEFEED = "\\n";'
+    const replaceMap = new Map()
+    // replaceMap.set('bg-red-500/50', true)
+    // replaceMap.set('bg-red-500', true)
+    const code = preProcessJs({
+      code: testCase,
+      addToUsedBy: () => {},
+      id: 'xxx',
+      replaceMap
+    })
+    expect(code).toBe(testCase)
+  })
 })