@import "./dir" should be orange
++ @import "/nested/root-relative.scss" should be orange +
Less: This should be blue
diff --git a/playground/css/nested/_index.scss b/playground/css/nested/_index.scss
index 72e6b14268334e..ff81e7d82351b9 100644
--- a/playground/css/nested/_index.scss
+++ b/playground/css/nested/_index.scss
@@ -1,4 +1,5 @@
@use 'sass:string';
+@use '/nested/root-relative'; // root relative path
@import './css-in-scss.css';
diff --git a/playground/css/nested/root-relative.scss b/playground/css/nested/root-relative.scss
new file mode 100644
index 00000000000000..775dca855743b3
--- /dev/null
+++ b/playground/css/nested/root-relative.scss
@@ -0,0 +1,3 @@
+.sass-root-relative {
+ color: orange;
+}
From be69295b48551158aeb5dfef94c09b3e3631e7a4 Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Thu, 12 Dec 2024 11:44:52 +0900
Subject: [PATCH 2/8] test: run css playground tests with legacy sass
---
.../sass-legacy.spec.ts} | 0
playground/css/vite.config-sass-legacy.js | 1 +
2 files changed, 1 insertion(+)
rename playground/css/__tests__/{sass-modern-compiler/sass-modern-compiler.spec.ts => sass-legacy/sass-legacy.spec.ts} (100%)
diff --git a/playground/css/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts b/playground/css/__tests__/sass-legacy/sass-legacy.spec.ts
similarity index 100%
rename from playground/css/__tests__/sass-modern-compiler/sass-modern-compiler.spec.ts
rename to playground/css/__tests__/sass-legacy/sass-legacy.spec.ts
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
From 0fa159c98f5d3ac2459d8ddac2a61875ff134f6d Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Thu, 12 Dec 2024 11:45:14 +0900
Subject: [PATCH 3/8] test: fix flaky fails
---
playground/css/__tests__/css.spec.ts | 95 +--------------
.../__tests__/sass-legacy/sass-legacy.spec.ts | 6 +-
.../__tests__/sass-modern/sass-modern.spec.ts | 6 +-
playground/css/__tests__/sass-tests.ts | 112 ++++++++++++++++++
4 files changed, 126 insertions(+), 93 deletions(-)
create mode 100644 playground/css/__tests__/sass-tests.ts
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index f0ff63c6b5dbb5..16d93f761f457f 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(true)
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(true)
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
index 90a9b9774d3ebc..89c5167ffd0303 100644
--- a/playground/css/__tests__/sass-legacy/sass-legacy.spec.ts
+++ b/playground/css/__tests__/sass-legacy/sass-legacy.spec.ts
@@ -1 +1,5 @@
-import '../css.spec'
+import { sassModuleTests, sassOtherTests, sassTest } from '../sass-tests'
+
+sassTest()
+sassModuleTests()
+sassOtherTests()
diff --git a/playground/css/__tests__/sass-modern/sass-modern.spec.ts b/playground/css/__tests__/sass-modern/sass-modern.spec.ts
index 90a9b9774d3ebc..89c5167ffd0303 100644
--- a/playground/css/__tests__/sass-modern/sass-modern.spec.ts
+++ b/playground/css/__tests__/sass-modern/sass-modern.spec.ts
@@ -1 +1,5 @@
-import '../css.spec'
+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..5646af8de81528
--- /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 = (enableHmrTests = false) => {
+ 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 || !enableHmrTests) 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 || !enableHmrTests) 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')
+ })
+}
From aa7d6411cefdb2448cb6db535d7fd8ee47f4250c Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Thu, 12 Dec 2024 12:59:43 +0900
Subject: [PATCH 4/8] test: add workaround
---
playground/css/__tests__/sass-tests.ts | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/playground/css/__tests__/sass-tests.ts b/playground/css/__tests__/sass-tests.ts
index 5646af8de81528..367d8dc01b2778 100644
--- a/playground/css/__tests__/sass-tests.ts
+++ b/playground/css/__tests__/sass-tests.ts
@@ -42,6 +42,8 @@ export const sassTest = (enableHmrTests = false) => {
if (isBuild || !enableHmrTests) return
+ await new Promise((resolve) => setTimeout(resolve, 100)) // wait for other non-enableHmrTests tests to finish
+
editFile('sass.scss', (code) =>
code.replace('color: $injectedColor', 'color: red'),
)
@@ -90,6 +92,8 @@ export const sassModuleTests = (enableHmrTests = false) => {
if (isBuild || !enableHmrTests) return
+ await new Promise((resolve) => setTimeout(resolve, 100)) // wait for other non-enableHmrTests tests to finish
+
editFile('mod.module.scss', (code) =>
code.replace('color: orangered', 'color: blue'),
)
From 35346ed85333c8da194ea9ff8ba2985e349e16e8 Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Thu, 12 Dec 2024 13:21:01 +0900
Subject: [PATCH 5/8] test: check both
---
playground/css/__tests__/css.spec.ts | 4 +-
playground/css/__tests__/sass-tests.ts | 57 +++++++++++++++++++++-----
2 files changed, 49 insertions(+), 12 deletions(-)
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index 16d93f761f457f..f34ebe9d9470c2 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -76,7 +76,7 @@ test('postcss config', async () => {
await untilUpdated(() => getColor(imported), 'red')
})
-sassTest(true)
+sassTest(!isBuild)
test('less', async () => {
const imported = await page.$('.less')
@@ -182,7 +182,7 @@ test('css modules composes/from path resolving', async () => {
// await untilUpdated(() => getColor(imported), 'red')
})
-sassModuleTests(true)
+sassModuleTests(!isBuild)
test('less modules composes/from path resolving', async () => {
const imported = await page.$('.path-resolved-modules-less')
diff --git a/playground/css/__tests__/sass-tests.ts b/playground/css/__tests__/sass-tests.ts
index 367d8dc01b2778..2d3c6a1dbcd121 100644
--- a/playground/css/__tests__/sass-tests.ts
+++ b/playground/css/__tests__/sass-tests.ts
@@ -20,8 +20,8 @@ export const sassTest = (enableHmrTests = false) => {
)
const partialImport = await page.$('.sass-partial')
- expect(await getColor(imported)).toBe('orange')
- expect(await getColor(atImport)).toBe('olive')
+ expectToBeEither(await getColor(imported), 'orange', 'red', enableHmrTests)
+ expectToBeEither(await getColor(atImport), 'olive', 'blue', enableHmrTests)
expect(await getBg(atImport)).toMatch(
isBuild ? /base64/ : '/nested/icon.png',
)
@@ -35,14 +35,17 @@ export const sassTest = (enableHmrTests = false) => {
expect(await getBg(urlStartsWithFunctionCall)).toMatch(
isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
)
- expect(await getColor(partialImport)).toBe('orchid')
+ expectToBeEither(
+ await getColor(partialImport),
+ 'orchid',
+ 'green',
+ enableHmrTests,
+ )
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 || !enableHmrTests) return
-
- await new Promise((resolve) => setTimeout(resolve, 100)) // wait for other non-enableHmrTests tests to finish
+ if (!enableHmrTests) return
editFile('sass.scss', (code) =>
code.replace('color: $injectedColor', 'color: red'),
@@ -85,14 +88,17 @@ export const sassModuleTests = (enableHmrTests = false) => {
test('css modules w/ sass', async () => {
const imported = await page.$('.modules-sass')
- expect(await getColor(imported)).toBe('orangered')
+ expectToBeEither(
+ await getColor(imported),
+ 'orangered',
+ 'blue',
+ enableHmrTests,
+ )
expect(await imported.getAttribute('class')).toMatch(
/.mod-module__apply-color___[\w-]{5}/,
)
- if (isBuild || !enableHmrTests) return
-
- await new Promise((resolve) => setTimeout(resolve, 100)) // wait for other non-enableHmrTests tests to finish
+ if (!enableHmrTests) return
editFile('mod.module.scss', (code) =>
code.replace('color: orangered', 'color: blue'),
@@ -114,3 +120,34 @@ export const sassOtherTests = () => {
expect(await getColor('.sass-dep')).toBe('lavender')
})
}
+
+/**
+ * used to test things that is affected by the file modification for the HMR tests
+ *
+ * @param expected the expected value before the file modification
+ * @param expectedAfterHMR the expected value after the file modification
+ * @param hmrTestsEnabled whether the HMR tests are enabled
+ */
+const expectToBeEither = (
+ actual: string,
+ expected: string,
+ expectedAfterHMR: string,
+ hmrTestsEnabled: boolean,
+) => {
+ if (hmrTestsEnabled) {
+ expect(actual).toBe(expected)
+ return
+ }
+
+ try {
+ expect(actual).toBe(expected)
+ return
+ } catch {}
+ try {
+ expect(actual).toMatch(expectedAfterHMR)
+ } catch {
+ throw new Error(
+ `expected ${actual} to be ${expected} or ${expectedAfterHMR}`,
+ )
+ }
+}
From 7ab45fa7f488157e8fa3c0882d0880b576314482 Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Tue, 17 Dec 2024 12:09:04 +0900
Subject: [PATCH 6/8] chore: remove expectToBeEither
---
playground/css/__tests__/sass-tests.ts | 49 +++-----------------------
1 file changed, 4 insertions(+), 45 deletions(-)
diff --git a/playground/css/__tests__/sass-tests.ts b/playground/css/__tests__/sass-tests.ts
index 2d3c6a1dbcd121..b7ada904431aa7 100644
--- a/playground/css/__tests__/sass-tests.ts
+++ b/playground/css/__tests__/sass-tests.ts
@@ -20,8 +20,8 @@ export const sassTest = (enableHmrTests = false) => {
)
const partialImport = await page.$('.sass-partial')
- expectToBeEither(await getColor(imported), 'orange', 'red', enableHmrTests)
- expectToBeEither(await getColor(atImport), 'olive', 'blue', enableHmrTests)
+ expect(await getColor(imported)).toBe('orange')
+ expect(await getColor(atImport)).toBe('olive')
expect(await getBg(atImport)).toMatch(
isBuild ? /base64/ : '/nested/icon.png',
)
@@ -35,12 +35,7 @@ export const sassTest = (enableHmrTests = false) => {
expect(await getBg(urlStartsWithFunctionCall)).toMatch(
isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
)
- expectToBeEither(
- await getColor(partialImport),
- 'orchid',
- 'green',
- enableHmrTests,
- )
+ 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')
@@ -88,12 +83,7 @@ export const sassModuleTests = (enableHmrTests = false) => {
test('css modules w/ sass', async () => {
const imported = await page.$('.modules-sass')
- expectToBeEither(
- await getColor(imported),
- 'orangered',
- 'blue',
- enableHmrTests,
- )
+ expect(await getColor(imported)).toBe('orangered')
expect(await imported.getAttribute('class')).toMatch(
/.mod-module__apply-color___[\w-]{5}/,
)
@@ -120,34 +110,3 @@ export const sassOtherTests = () => {
expect(await getColor('.sass-dep')).toBe('lavender')
})
}
-
-/**
- * used to test things that is affected by the file modification for the HMR tests
- *
- * @param expected the expected value before the file modification
- * @param expectedAfterHMR the expected value after the file modification
- * @param hmrTestsEnabled whether the HMR tests are enabled
- */
-const expectToBeEither = (
- actual: string,
- expected: string,
- expectedAfterHMR: string,
- hmrTestsEnabled: boolean,
-) => {
- if (hmrTestsEnabled) {
- expect(actual).toBe(expected)
- return
- }
-
- try {
- expect(actual).toBe(expected)
- return
- } catch {}
- try {
- expect(actual).toMatch(expectedAfterHMR)
- } catch {
- throw new Error(
- `expected ${actual} to be ${expected} or ${expectedAfterHMR}`,
- )
- }
-}
From cacd4cfc389cb0c907bbcadb6a73ede4aea070f8 Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Tue, 17 Dec 2024 12:09:47 +0900
Subject: [PATCH 7/8] chore: run HMR tests in all files
---
playground/css/__tests__/css.spec.ts | 4 ++--
playground/css/__tests__/sass-tests.ts | 6 +++---
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index f34ebe9d9470c2..42f50aa92ce2df 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -76,7 +76,7 @@ test('postcss config', async () => {
await untilUpdated(() => getColor(imported), 'red')
})
-sassTest(!isBuild)
+sassTest()
test('less', async () => {
const imported = await page.$('.less')
@@ -182,7 +182,7 @@ test('css modules composes/from path resolving', async () => {
// await untilUpdated(() => getColor(imported), 'red')
})
-sassModuleTests(!isBuild)
+sassModuleTests()
test('less modules composes/from path resolving', async () => {
const imported = await page.$('.path-resolved-modules-less')
diff --git a/playground/css/__tests__/sass-tests.ts b/playground/css/__tests__/sass-tests.ts
index b7ada904431aa7..c9a3c9a5d42d07 100644
--- a/playground/css/__tests__/sass-tests.ts
+++ b/playground/css/__tests__/sass-tests.ts
@@ -9,7 +9,7 @@ import {
viteTestUrl,
} from '~utils'
-export const sassTest = (enableHmrTests = false) => {
+export const sassTest = () => {
test('sass', async () => {
const imported = await page.$('.sass')
const atImport = await page.$('.sass-at-import')
@@ -40,7 +40,7 @@ export const sassTest = (enableHmrTests = false) => {
expect(await getColor(await page.$('.sass-dir-index'))).toBe('orange')
expect(await getColor(await page.$('.sass-root-relative'))).toBe('orange')
- if (!enableHmrTests) return
+ if (isBuild) return
editFile('sass.scss', (code) =>
code.replace('color: $injectedColor', 'color: red'),
@@ -88,7 +88,7 @@ export const sassModuleTests = (enableHmrTests = false) => {
/.mod-module__apply-color___[\w-]{5}/,
)
- if (!enableHmrTests) return
+ if (isBuild) return
editFile('mod.module.scss', (code) =>
code.replace('color: orangered', 'color: blue'),
From f8b9ea33d5d50adc9246370d131b605057ae4aa8 Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Tue, 17 Dec 2024 12:10:18 +0900
Subject: [PATCH 8/8] chore: add sass-legacy to the "dedicated copy" list
---
.../css-sourcemap/__tests__/sass-legacy/sass-legacy.spec.ts | 1 +
.../css-sourcemap/__tests__/sass-modern/sass-modern.spec.ts | 1 +
playground/css/__tests__/sass-legacy/sass-legacy.spec.ts | 1 +
playground/css/__tests__/sass-modern/sass-modern.spec.ts | 1 +
playground/vitestGlobalSetup.ts | 4 ++--
5 files changed, 6 insertions(+), 2 deletions(-)
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__/sass-legacy/sass-legacy.spec.ts b/playground/css/__tests__/sass-legacy/sass-legacy.spec.ts
index 89c5167ffd0303..b2e4ca42c5118d 100644
--- a/playground/css/__tests__/sass-legacy/sass-legacy.spec.ts
+++ b/playground/css/__tests__/sass-legacy/sass-legacy.spec.ts
@@ -1,3 +1,4 @@
+// NOTE: a separate directory from `playground/css` is created by playground/vitestGlobalSetup.ts
import { sassModuleTests, sassOtherTests, sassTest } from '../sass-tests'
sassTest()
diff --git a/playground/css/__tests__/sass-modern/sass-modern.spec.ts b/playground/css/__tests__/sass-modern/sass-modern.spec.ts
index 89c5167ffd0303..b2e4ca42c5118d 100644
--- a/playground/css/__tests__/sass-modern/sass-modern.spec.ts
+++ b/playground/css/__tests__/sass-modern/sass-modern.spec.ts
@@ -1,3 +1,4 @@
+// NOTE: a separate directory from `playground/css` is created by playground/vitestGlobalSetup.ts
import { sassModuleTests, sassOtherTests, sassTest } from '../sass-tests'
sassTest()
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