chore: migrate scss import to use (#1007)

sveltejs · Oct 28, 2024 · 57902d0 · 57902d0
1 parent 58bc781
commit 57902d0
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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');