fix(optimizer): encode _ and . in different way (#8508)

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

packages/vite/src/node/utils.ts

@@ -37,7 +37,10 @@ export function unwrapId(id: string): string {
 }
 
 export const flattenId = (id: string): string =>
-  id.replace(/(\s*>\s*)/g, '__').replace(/[\/\.:]/g, '_')
+  id
+    .replace(/[\/:]/g, '_')
+    .replace(/[\.]/g, '__')
+    .replace(/(\s*>\s*)/g, '___')
 
 export const normalizeId = (id: string): string =>
   id.replace(/(\s*>\s*)/g, ' > ')

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -121,6 +121,11 @@ test('variable names are reused in different scripts', async () => {
   expect(await page.textContent('.reused-variable-names')).toBe('reused')
 })
 
+test('flatten id should generate correctly', async () => {
+  expect(await page.textContent('.clonedeep-slash')).toBe('clonedeep-slash')
+  expect(await page.textContent('.clonedeep-dot')).toBe('clonedeep-dot')
+})
+
 test.runIf(isServe)('error on builtin modules usage', () => {
   expect(browserLogs).toEqual(
     expect.arrayContaining([

playground/optimize-deps/index.html

@@ -74,6 +74,10 @@ <h2>Alias with colon</h2>
 <h2>Reused variable names</h2>
 <div>This should show reused: <span class="reused-variable-names"></span></div>
 
+<h2>Flatten Id</h2>
+<div class="clonedeep-slash"></div>
+<div class="clonedeep-dot"></div>
+
 <script>
   function text(el, text) {
     document.querySelector(el).textContent = text
@@ -169,3 +173,11 @@ <h2>Reused variable names</h2>
     read()
   }
 </script>
+
+<script type="module">
+  import cloneDeepSlash from 'lodash/cloneDeep'
+  import cloneDeepDot from 'lodash.clonedeep'
+
+  text('.clonedeep-slash', cloneDeepSlash({ name: 'clonedeep-slash' }).name)
+  text('.clonedeep-dot', cloneDeepDot({ name: 'clonedeep-dot' }).name)
+</script>

playground/optimize-deps/package.json

@@ -31,7 +31,9 @@
     "resolve-linked": "workspace:0.0.0",
     "url": "^0.11.0",
     "vue": "^3.2.37",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "lodash": "^4.17.21",
+    "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*"