From b44696e768e6d22382a20b283386d05e9f1cbc18 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Thu, 11 Jan 2024 10:06:15 +0800 Subject: [PATCH] test: use cssesc to test with escaped class names --- package.json | 2 ++ pnpm-lock.yaml | 10 ++++++++++ test/advanced.spec.ts | 10 ++++++---- test/style.spec.ts | 12 +++++++++--- 4 files changed, 27 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 08eeedeb..56390b74 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 85f1d4ad..7fd8c757 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,6 +25,9 @@ devDependencies: '@intlify/vue-i18n-loader': specifier: ^3.0.0 version: 3.3.0(vue@3.4.8) + '@types/cssesc': + specifier: ^3.0.2 + version: 3.0.2 '@types/estree': specifier: ^0.0.45 version: 0.0.45 @@ -55,6 +58,9 @@ devDependencies: css-loader: specifier: ^4.3.0 version: 4.3.0(webpack@5.89.0) + cssesc: + specifier: ^3.0.0 + version: 3.0.0 file-loader: specifier: ^6.1.0 version: 6.2.0(webpack@5.89.0) @@ -1729,6 +1735,10 @@ packages: '@types/babel-types': 7.0.15 dev: true + /@types/cssesc@3.0.2: + resolution: {integrity: sha512-Qii6nTRktvtI380EloxH/V7MwgrYxkPgBI+NklUjQuhzgAd1AqT3QDJd+eD+0doRADgfwvtagLRo7JFa7aMHXg==} + dev: true + /@types/eslint-scope@3.7.7: resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} dependencies: diff --git a/test/advanced.spec.ts b/test/advanced.spec.ts index eec28bc9..25cd6226 100644 --- a/test/advanced.spec.ts +++ b/test/advanced.spec.ts @@ -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') diff --git a/test/style.spec.ts b/test/style.spec.ts index 72fb3cbd..f208bb16 100644 --- a/test/style.spec.ts +++ b/test/style.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 () => {