test: use cssesc to test with escaped class names

Author: Jinjiang

package.json

@@ -55,6 +55,7 @@
     "@babel/core": "^7.7.7",
     "@babel/preset-env": "^7.11.5",
     "@intlify/vue-i18n-loader": "^3.0.0",
+    "@types/cssesc": "^3.0.2",
     "@types/estree": "^0.0.45",
     "@types/hash-sum": "^1.0.0",
     "@types/jest": "^26.0.13",
@@ -65,6 +66,7 @@
     "cache-loader": "^4.1.0",
     "conventional-changelog-cli": "^2.1.1",
     "css-loader": "^4.3.0",
+    "cssesc": "^3.0.0",
     "file-loader": "^6.1.0",
     "html-webpack-plugin": "^4.5.0",
     "html-webpack-plugin-v5": "npm:html-webpack-plugin@^5.3.2",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 import { SourceMapConsumer } from 'source-map'
 import { fs as mfs } from 'memfs'
+import cssesc from 'cssesc'
 import {
   bundle,
   mockBundleAndRun,
@@ -14,7 +15,7 @@ test('support chaining with other loaders', async () => {
   const { componentModule } = await mockBundleAndRun({
     entry: 'basic.vue',
     modify: (config) => {
-      config!.module!.rules[0] = {
+      config!.module!.rules![0] = {
         test: /\.vue$/,
         use: [DEFAULT_VUE_USE, require.resolve('./mock-loaders/js')],
       }
@@ -28,7 +29,7 @@ test.skip('inherit queries on files', async () => {
   const { componentModule } = await mockBundleAndRun({
     entry: 'basic.vue?change',
     modify: (config) => {
-      config!.module!.rules[0] = {
+      config!.module!.rules![0] = {
         test: /\.vue$/,
         use: [DEFAULT_VUE_USE, require.resolve('./mock-loaders/query')],
       }
@@ -199,9 +200,10 @@ test('support rules with oneOf', async () => {
   const { window, instance } = await run('css-modules-simple.vue')
 
   const className = instance.$style.red
-  expect(className).toMatch(/^red_\w{5}/)
+  const escapedClassName = cssesc(instance.$style.red, { isIdentifier: true })
+  expect(className).toMatch(/^red_.{5}/)
   style = normalizeNewline(window.document.querySelector('style')!.textContent!)
-  expect(style).toContain('.' + className + ' {\n  color: red;\n}')
+  expect(style).toContain('.' + escapedClassName + ' {\n  color: red;\n}')
 })
 
 test.todo('should work with eslint loader')

test/advanced.spec.ts

@@ -1,3 +1,4 @@
+import cssesc from 'cssesc'
 import {
   mockBundleAndRun,
   genId,
@@ -130,6 +131,7 @@ test('CSS Modules', async () => {
 
     // get local class name
     const className = instance.$style.red
+    const escapedClassName = cssesc(instance.$style.red, { isIdentifier: true })
     expect(className).toMatch(regexToMatch)
 
     // class name in style
@@ -140,7 +142,7 @@ test('CSS Modules', async () => {
       })
       .join('\n')
     style = normalizeNewline(style)
-    expect(style).toContain('.' + className + ' {\n  color: red;\n}')
+    expect(style).toContain('.' + escapedClassName + ' {\n  color: red;\n}')
 
     // animation name
     const match = style.match(/@keyframes\s+(\S+)\s+{/)
@@ -151,9 +153,12 @@ test('CSS Modules', async () => {
 
     // default module + pre-processor + scoped
     const anotherClassName = instance.$style.red
+    const escapedAnotherClassName = cssesc(instance.$style.red, {
+      isIdentifier: true,
+    })
     expect(anotherClassName).toMatch(regexToMatch)
     const id = 'data-v-' + genId('css-modules.vue')
-    expect(style).toContain('.' + anotherClassName + '[' + id + ']')
+    expect(style).toContain('.' + escapedAnotherClassName + '[' + id + ']')
   }
 
   // default ident
@@ -194,8 +199,9 @@ test('CSS Modules Extend', async () => {
   })
 
   expect(instance.$el.className).toBe(instance.$style.red)
+  const escapedClassName = cssesc(instance.$style.red, { isIdentifier: true })
   const style = window.document.querySelectorAll('style')![1]!.textContent
-  expect(style).toContain(`.${instance.$style.red} {\n  color: #FF0000;\n}`)
+  expect(style).toContain(`.${escapedClassName} {\n  color: #FF0000;\n}`)
 })
 
 test('v-bind() in CSS', async () => {