test: fix run css playground with legacy sass (#18946)

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'

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'

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')

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()

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()

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')
+  })
+}

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

playground/vitestGlobalSetup.ts

@@ -43,8 +43,8 @@ export async function setup({ provide }: GlobalSetupContext): Promise<void> {
     })
   // 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(