From 322503b0076cee9a30896349bfd51665586d8ce3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Fri, 20 Dec 2024 16:08:04 +0900 Subject: [PATCH] test: fix run css playground with legacy sass (#18946) --- .../__tests__/sass-legacy/sass-legacy.spec.ts | 1 + .../__tests__/sass-modern/sass-modern.spec.ts | 1 + playground/css/__tests__/css.spec.ts | 95 +-------------- .../__tests__/sass-legacy/sass-legacy.spec.ts | 6 + .../sass-modern-compiler.spec.ts | 1 - .../__tests__/sass-modern/sass-modern.spec.ts | 7 +- playground/css/__tests__/sass-tests.ts | 112 ++++++++++++++++++ playground/css/vite.config-sass-legacy.js | 1 + playground/vitestGlobalSetup.ts | 4 +- 9 files changed, 133 insertions(+), 95 deletions(-) create mode 100644 playground/css/__tests__/sass-legacy/sass-legacy.spec.ts delete mode 100644 playground/css/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts create mode 100644 playground/css/__tests__/sass-tests.ts diff --git a/playground/css-sourcemap/__tests__/sass-legacy/sass-legacy.spec.ts b/playground/css-sourcemap/__tests__/sass-legacy/sass-legacy.spec.ts index 371c61a76d0049..69a693758c71cc 100644 --- a/playground/css-sourcemap/__tests__/sass-legacy/sass-legacy.spec.ts +++ b/playground/css-sourcemap/__tests__/sass-legacy/sass-legacy.spec.ts @@ -1 +1,2 @@ +// NOTE: a separate directory from `playground/css-sourcemap` is created by playground/vitestGlobalSetup.ts import '../css-sourcemap.spec' diff --git a/playground/css-sourcemap/__tests__/sass-modern/sass-modern.spec.ts b/playground/css-sourcemap/__tests__/sass-modern/sass-modern.spec.ts index 371c61a76d0049..69a693758c71cc 100644 --- a/playground/css-sourcemap/__tests__/sass-modern/sass-modern.spec.ts +++ b/playground/css-sourcemap/__tests__/sass-modern/sass-modern.spec.ts @@ -1 +1,2 @@ +// NOTE: a separate directory from `playground/css-sourcemap` is created by playground/vitestGlobalSetup.ts import '../css-sourcemap.spec' diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index f0ff63c6b5dbb5..42f50aa92ce2df 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -1,5 +1,6 @@ import { readFileSync } from 'node:fs' import { expect, test } from 'vitest' +import { sassModuleTests, sassOtherTests, sassTest } from './sass-tests' import { editFile, findAssetFile, @@ -75,51 +76,7 @@ test('postcss config', async () => { await untilUpdated(() => getColor(imported), 'red') }) -test('sass', async () => { - const imported = await page.$('.sass') - const atImport = await page.$('.sass-at-import') - const atImportAlias = await page.$('.sass-at-import-alias') - const urlStartsWithVariable = await page.$('.sass-url-starts-with-variable') - const urlStartsWithFunctionCall = await page.$( - '.sass-url-starts-with-function-call', - ) - const partialImport = await page.$('.sass-partial') - - expect(await getColor(imported)).toBe('orange') - expect(await getColor(atImport)).toBe('olive') - expect(await getBg(atImport)).toMatch(isBuild ? /base64/ : '/nested/icon.png') - expect(await getColor(atImportAlias)).toBe('olive') - expect(await getBg(atImportAlias)).toMatch( - isBuild ? /base64/ : '/nested/icon.png', - ) - expect(await getBg(urlStartsWithVariable)).toMatch( - isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`, - ) - expect(await getBg(urlStartsWithFunctionCall)).toMatch( - isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`, - ) - expect(await getColor(partialImport)).toBe('orchid') - expect(await getColor(await page.$('.sass-file-absolute'))).toBe('orange') - expect(await getColor(await page.$('.sass-dir-index'))).toBe('orange') - expect(await getColor(await page.$('.sass-root-relative'))).toBe('orange') - - if (isBuild) return - - editFile('sass.scss', (code) => - code.replace('color: $injectedColor', 'color: red'), - ) - await untilUpdated(() => getColor(imported), 'red') - - editFile('nested/_index.scss', (code) => - code.replace('color: olive', 'color: blue'), - ) - await untilUpdated(() => getColor(atImport), 'blue') - - editFile('nested/_partial.scss', (code) => - code.replace('color: orchid', 'color: green'), - ) - await untilUpdated(() => getColor(partialImport), 'green') -}) +sassTest() test('less', async () => { const imported = await page.$('.less') @@ -225,26 +182,7 @@ test('css modules composes/from path resolving', async () => { // await untilUpdated(() => getColor(imported), 'red') }) -test('sass modules composes/from path resolving', async () => { - const imported = await page.$('.path-resolved-modules-sass') - expect(await getColor(imported)).toBe('orangered') - - // check if the generated CSS module class name is indeed using the - // format specified in vite.config.js - expect(await imported.getAttribute('class')).toMatch( - /.composed-module__apply-color___[\w-]{5}/, - ) - - expect(await imported.getAttribute('class')).toMatch( - /.composes-path-resolving-module__path-resolving-sass___[\w-]{5}/, - ) - - // @todo HMR is not working on this situation. - // editFile('composed.module.scss', (code) => - // code.replace('color: orangered', 'color: red') - // ) - // await untilUpdated(() => getColor(imported), 'red') -}) +sassModuleTests() test('less modules composes/from path resolving', async () => { const imported = await page.$('.path-resolved-modules-less') @@ -267,21 +205,6 @@ test('less modules composes/from path resolving', async () => { // await untilUpdated(() => getColor(imported), 'red') }) -test('css modules w/ sass', async () => { - const imported = await page.$('.modules-sass') - expect(await getColor(imported)).toBe('orangered') - expect(await imported.getAttribute('class')).toMatch( - /.mod-module__apply-color___[\w-]{5}/, - ) - - if (isBuild) return - - editFile('mod.module.scss', (code) => - code.replace('color: orangered', 'color: blue'), - ) - await untilUpdated(() => getColor(imported), 'blue') -}) - test('inline css modules', async () => { const css = await page.textContent('.modules-inline') expect(css).toMatch(/\.inline-module__apply-color-inline___[\w-]{5}/) @@ -303,18 +226,10 @@ test('@import dependency w/ style entry', async () => { expect(await getColor('.css-dep')).toBe('purple') }) -test('@import dependency w/ sass entry', async () => { - expect(await getColor('.css-dep-sass')).toBe('orange') -}) - test('@import dependency w/ style export mapping', async () => { expect(await getColor('.css-dep-exports')).toBe('purple') }) -test('@import dependency w/ sass export mapping', async () => { - expect(await getColor('.css-dep-exports-sass')).toBe('orange') -}) - test('@import dependency that @import another dependency', async () => { expect(await getColor('.css-proxy-dep')).toBe('purple') }) @@ -323,9 +238,7 @@ test('@import scss dependency that has @import with a css extension pointing to expect(await getColor('.scss-proxy-dep')).toBe('purple') }) -test('@import dependency w/out package scss', async () => { - expect(await getColor('.sass-dep')).toBe('lavender') -}) +sassOtherTests() test('async chunk', async () => { const el = await page.$('.async') diff --git a/playground/css/__tests__/sass-legacy/sass-legacy.spec.ts b/playground/css/__tests__/sass-legacy/sass-legacy.spec.ts new file mode 100644 index 00000000000000..b2e4ca42c5118d --- /dev/null +++ b/playground/css/__tests__/sass-legacy/sass-legacy.spec.ts @@ -0,0 +1,6 @@ +// NOTE: a separate directory from `playground/css` is created by playground/vitestGlobalSetup.ts +import { sassModuleTests, sassOtherTests, sassTest } from '../sass-tests' + +sassTest() +sassModuleTests() +sassOtherTests() diff --git a/playground/css/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts b/playground/css/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts deleted file mode 100644 index 90a9b9774d3ebc..00000000000000 --- a/playground/css/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts +++ /dev/null @@ -1 +0,0 @@ -import '../css.spec' diff --git a/playground/css/__tests__/sass-modern/sass-modern.spec.ts b/playground/css/__tests__/sass-modern/sass-modern.spec.ts index 90a9b9774d3ebc..b2e4ca42c5118d 100644 --- a/playground/css/__tests__/sass-modern/sass-modern.spec.ts +++ b/playground/css/__tests__/sass-modern/sass-modern.spec.ts @@ -1 +1,6 @@ -import '../css.spec' +// NOTE: a separate directory from `playground/css` is created by playground/vitestGlobalSetup.ts +import { sassModuleTests, sassOtherTests, sassTest } from '../sass-tests' + +sassTest() +sassModuleTests() +sassOtherTests() diff --git a/playground/css/__tests__/sass-tests.ts b/playground/css/__tests__/sass-tests.ts new file mode 100644 index 00000000000000..c9a3c9a5d42d07 --- /dev/null +++ b/playground/css/__tests__/sass-tests.ts @@ -0,0 +1,112 @@ +import { expect, test } from 'vitest' +import { + editFile, + getBg, + getColor, + isBuild, + page, + untilUpdated, + viteTestUrl, +} from '~utils' + +export const sassTest = () => { + test('sass', async () => { + const imported = await page.$('.sass') + const atImport = await page.$('.sass-at-import') + const atImportAlias = await page.$('.sass-at-import-alias') + const urlStartsWithVariable = await page.$('.sass-url-starts-with-variable') + const urlStartsWithFunctionCall = await page.$( + '.sass-url-starts-with-function-call', + ) + const partialImport = await page.$('.sass-partial') + + expect(await getColor(imported)).toBe('orange') + expect(await getColor(atImport)).toBe('olive') + expect(await getBg(atImport)).toMatch( + isBuild ? /base64/ : '/nested/icon.png', + ) + expect(await getColor(atImportAlias)).toBe('olive') + expect(await getBg(atImportAlias)).toMatch( + isBuild ? /base64/ : '/nested/icon.png', + ) + expect(await getBg(urlStartsWithVariable)).toMatch( + isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`, + ) + expect(await getBg(urlStartsWithFunctionCall)).toMatch( + isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`, + ) + expect(await getColor(partialImport)).toBe('orchid') + expect(await getColor(await page.$('.sass-file-absolute'))).toBe('orange') + expect(await getColor(await page.$('.sass-dir-index'))).toBe('orange') + expect(await getColor(await page.$('.sass-root-relative'))).toBe('orange') + + if (isBuild) return + + editFile('sass.scss', (code) => + code.replace('color: $injectedColor', 'color: red'), + ) + await untilUpdated(() => getColor(imported), 'red') + + editFile('nested/_index.scss', (code) => + code.replace('color: olive', 'color: blue'), + ) + await untilUpdated(() => getColor(atImport), 'blue') + + editFile('nested/_partial.scss', (code) => + code.replace('color: orchid', 'color: green'), + ) + await untilUpdated(() => getColor(partialImport), 'green') + }) +} + +export const sassModuleTests = (enableHmrTests = false) => { + test('sass modules composes/from path resolving', async () => { + const imported = await page.$('.path-resolved-modules-sass') + expect(await getColor(imported)).toBe('orangered') + + // check if the generated CSS module class name is indeed using the + // format specified in vite.config.js + expect(await imported.getAttribute('class')).toMatch( + /.composed-module__apply-color___[\w-]{5}/, + ) + + expect(await imported.getAttribute('class')).toMatch( + /.composes-path-resolving-module__path-resolving-sass___[\w-]{5}/, + ) + + // @todo HMR is not working on this situation. + // editFile('composed.module.scss', (code) => + // code.replace('color: orangered', 'color: red') + // ) + // await untilUpdated(() => getColor(imported), 'red') + }) + + test('css modules w/ sass', async () => { + const imported = await page.$('.modules-sass') + expect(await getColor(imported)).toBe('orangered') + expect(await imported.getAttribute('class')).toMatch( + /.mod-module__apply-color___[\w-]{5}/, + ) + + if (isBuild) return + + editFile('mod.module.scss', (code) => + code.replace('color: orangered', 'color: blue'), + ) + await untilUpdated(() => getColor(imported), 'blue') + }) +} + +export const sassOtherTests = () => { + test('@import dependency w/ sass entry', async () => { + expect(await getColor('.css-dep-sass')).toBe('orange') + }) + + test('@import dependency w/ sass export mapping', async () => { + expect(await getColor('.css-dep-exports-sass')).toBe('orange') + }) + + test('@import dependency w/out package scss', async () => { + expect(await getColor('.sass-dep')).toBe('lavender') + }) +} diff --git a/playground/css/vite.config-sass-legacy.js b/playground/css/vite.config-sass-legacy.js index cc6c0ae746cba3..61979f691d38d1 100644 --- a/playground/css/vite.config-sass-legacy.js +++ b/playground/css/vite.config-sass-legacy.js @@ -11,6 +11,7 @@ export default defineConfig({ ...baseConfig.css.preprocessorOptions, scss: { api: 'legacy', + additionalData: `$injectedColor: orange;`, importer: [ function (url) { return url === 'virtual-dep' ? { contents: '' } : null diff --git a/playground/vitestGlobalSetup.ts b/playground/vitestGlobalSetup.ts index b47918f042e2d2..95a3e21273baa1 100644 --- a/playground/vitestGlobalSetup.ts +++ b/playground/vitestGlobalSetup.ts @@ -43,8 +43,8 @@ export async function setup({ provide }: GlobalSetupContext): Promise { }) // also setup dedicated copy for "variant" tests for (const [original, variants] of [ - ['css', ['sass-modern', 'sass-modern-compiler']], - ['css-sourcemap', ['sass-modern', 'sass-modern-compiler']], + ['css', ['sass-legacy', 'sass-modern']], + ['css-sourcemap', ['sass-legacy', 'sass-modern']], ] as const) { for (const variant of variants) { await fs.cp(