From e6e65abfba7c9d4e729428d24ed2e8cae803b0b0 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 25 Oct 2024 19:58:42 +0800
Subject: [PATCH] chore: migrate scss import to use

---
 packages/e2e-tests/css-dev-sourcemap/src/App.svelte         | 2 +-
 .../svelte-preprocess/__tests__/svelte-preprocess.spec.ts   | 6 +++---
 .../svelte-preprocess/src/lib/multifile/MultiFile.scss      | 2 +-
 packages/vite-plugin-svelte/__tests__/preprocess.spec.js    | 3 +--
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/e2e-tests/css-dev-sourcemap/src/App.svelte b/packages/e2e-tests/css-dev-sourcemap/src/App.svelte
index b0b9a5c84..181ecd779 100644
--- a/packages/e2e-tests/css-dev-sourcemap/src/App.svelte
+++ b/packages/e2e-tests/css-dev-sourcemap/src/App.svelte
@@ -2,7 +2,7 @@
 <div class="foo">magenta</div>
 
 <style lang="scss">
-	@import './foo';
+	@use './foo';
 	#test {
 		& {
 			color: red;
diff --git a/packages/e2e-tests/svelte-preprocess/__tests__/svelte-preprocess.spec.ts b/packages/e2e-tests/svelte-preprocess/__tests__/svelte-preprocess.spec.ts
index b63531268..6da1b62a3 100644
--- a/packages/e2e-tests/svelte-preprocess/__tests__/svelte-preprocess.spec.ts
+++ b/packages/e2e-tests/svelte-preprocess/__tests__/svelte-preprocess.spec.ts
@@ -81,7 +81,7 @@ if (!isBuild) {
 			expect(await getColor('h2')).toBe('magenta');
 			await editFileAndWaitForHmrComplete(
 				'src/lib/multifile/MultiFile.scss',
-				(c) => c.replace("@import 'someImport';", "/*@import 'someImport';*/"),
+				(c) => c.replace("@use 'someImport';", "/*@use 'someImport';*/"),
 				'/src/lib/multifile/MultiFile.svelte?svelte&type=style&lang.css'
 			);
 			expect(await getColor('h2')).toBe('black');
@@ -93,7 +93,7 @@ if (!isBuild) {
 			expect(await getColor('h2')).toBe('black');
 			await editFileAndWaitForHmrComplete(
 				'src/lib/multifile/MultiFile.scss',
-				(c) => c.replace("/*@import 'someImport';*/", "/*@import 'someImport';*/\n@import 'foo';"),
+				(c) => c.replace("/*@use 'someImport';*/", "/*@use 'someImport';*/\n@use 'foo';"),
 				'/src/lib/multifile/MultiFile.svelte?svelte&type=style&lang.css'
 			);
 			expect(await getColor('h2')).toBe('maroon');
@@ -135,7 +135,7 @@ if (!isBuild) {
 			expect(errorOverlay2).toBeFalsy();
 			await editFileAndWaitForHmrComplete(
 				'src/lib/multifile/MultiFile.scss',
-				(c) => c.replace("@import 'foo';", ''),
+				(c) => c.replace("@use 'foo';", ''),
 				'/src/lib/multifile/MultiFile.svelte?svelte&type=style&lang.css'
 			);
 			expect(await getColor('h2')).toBe('black');
diff --git a/packages/e2e-tests/svelte-preprocess/src/lib/multifile/MultiFile.scss b/packages/e2e-tests/svelte-preprocess/src/lib/multifile/MultiFile.scss
index 4063ca6fc..faafb38de 100644
--- a/packages/e2e-tests/svelte-preprocess/src/lib/multifile/MultiFile.scss
+++ b/packages/e2e-tests/svelte-preprocess/src/lib/multifile/MultiFile.scss
@@ -1,4 +1,4 @@
-@import 'someImport';
+@use 'someImport';
 h1 {
 	color: blue;
 }
diff --git a/packages/vite-plugin-svelte/__tests__/preprocess.spec.js b/packages/vite-plugin-svelte/__tests__/preprocess.spec.js
index 6f4630665..919b34ea8 100644
--- a/packages/vite-plugin-svelte/__tests__/preprocess.spec.js
+++ b/packages/vite-plugin-svelte/__tests__/preprocess.spec.js
@@ -51,7 +51,7 @@ describe('vitePreprocess', () => {
 			);
 			expect(style).toBeDefined();
 			const scss = `
-			  @import './foo';
+			  @use './foo';
 				.foo {
 				  &.bar {
 				    color: red;
@@ -69,7 +69,6 @@ describe('vitePreprocess', () => {
 			expect(processed).toBeDefined();
 			const { code, map, dependencies } = processed;
 			expect(code).toBe('.foo {\n  color: green;\n}\n\n.foo.bar {\n  color: red;\n}');
-			expect(map.file).toBe('File.svelte');
 			expect(map.sources.length).toBe(2);
 			expect(map.sources[0]).toBe('foo.scss');
 			expect(map.sources[1]).toBe('File.svelte');