fix(sass): @use

close: #10

Author: Simon-He95

src/sassCompiler.ts

@@ -9,29 +9,95 @@ export async function sassCompiler(
 ) {
   if (typeof window !== 'undefined')
     throw new Error('sassCompiler is not supported in this browser')
-  let result = globalCss
-    ? `${globalCss.replace(/@(?:include|import)\s+["']([^"']*)['"]/g, (_, v) =>
-      _.replace(v, Url.pathToFileURL(path.resolve(process.cwd(), v)) as any))}${css}`
-    : css
+
+  const baseDir = filepath ? path.dirname(filepath) : process.cwd()
+
+  // 辅助函数：处理路径转换
+  const processPathInContent = (content: string) => {
+    let processed = content
+
+    // 处理基本的 @use, @forward, @include, @import 指令
+    processed = processed.replace(
+      /@(?:use|forward|include|import)\s+["']([^"']*)['"]/g,
+      (match, filePath) => {
+        // 跳过内置 Sass 模块 (sass:*, pkg:* 等)
+        if (filePath.includes(':')) {
+          return match
+        }
+        const resolvedPath = path.resolve(baseDir, filePath)
+        return match.replace(filePath, Url.pathToFileURL(resolvedPath) as any)
+      },
+    )
+
+    // 处理 @use 的扩展语法：@use "path" as namespace 或 @use "path" with (...)
+    processed = processed.replace(
+      /@use\s+["']([^"']*)['"]\s+(?:as\s+\w+\*?|with\s*\([^)]*\))/g,
+      (match, filePath) => {
+        // 跳过内置 Sass 模块
+        if (filePath.includes(':')) {
+          return match
+        }
+        const resolvedPath = path.resolve(baseDir, filePath)
+        return match.replace(filePath, Url.pathToFileURL(resolvedPath) as any)
+      },
+    )
+
+    // 处理 @forward 的扩展语法：@forward "path" show/hide/as
+    processed = processed.replace(
+      /@forward\s+["']([^"']*)['"]\s*(?:show\s+[^;]+|hide\s+[^;]+|as\s+[^;]+)/g,
+      (match, filePath) => {
+        // 跳过内置 Sass 模块
+        if (filePath.includes(':')) {
+          return match
+        }
+        const resolvedPath = path.resolve(baseDir, filePath)
+        return match.replace(filePath, Url.pathToFileURL(resolvedPath) as any)
+      },
+    )
+
+    return processed
+  }
+
+  // 处理 globalCss 和当前 CSS
+  let result = ''
+  if (globalCss) {
+    result += processPathInContent(globalCss)
+  }
+  result += processPathInContent(css)
   try {
-    result = (await import('sass')).default.compileString(
+    const sass = await import('sass')
+    result = sass.compileString(
       result,
       filepath
         ? {
             importers: [
               {
                 findFileUrl(url) {
-                  if (!url.startsWith('~'))
-                    return new URL(url, Url.pathToFileURL(filepath) as URL)
-                  return new URL(
-                    url.slice(1),
-                    Url.pathToFileURL(filepath) as URL,
-                  )
+                  // 处理波浪号路径 (~)
+                  if (url.startsWith('~')) {
+                    return new URL(
+                      url.slice(1),
+                      Url.pathToFileURL(baseDir) as URL,
+                    )
+                  }
+                  // 处理相对路径
+                  if (!url.startsWith('/') && !url.includes('://')) {
+                    return new URL(url, Url.pathToFileURL(baseDir) as URL)
+                  }
+                  // 处理绝对路径
+                  return new URL(url, Url.pathToFileURL(baseDir) as URL)
                 },
               },
             ],
+            // 启用现代 Sass API
+            syntax: 'scss',
+            // 支持 @use 和 @forward
+            loadPaths: [baseDir, process.cwd()],
           }
-        : {},
+        : {
+            syntax: 'scss',
+            loadPaths: [process.cwd()],
+          },
     ).css
     return result
   }

test/__snapshots__/transformCode.test.ts.snap

@@ -1918,6 +1918,23 @@ export default defineComponent({
 ",
   "
 
+-----    sass-builtin-test.vue     -------
+
+<template>
+  <div class="sass-builtin-test">
+    Built-in Sass module test
+  </div>
+</template>
+
+<style>
+.sass-builtin-test {
+  width: 50px;
+  color: #ff3333;
+}
+</style>
+",
+  "
+
 -----    sass.vue     -------
 
 <script setup lang="ts">
@@ -2132,6 +2149,33 @@ onMounted(async () => {
 ",
   "
 
+-----    use-syntax-test.vue     -------
+
+<template>
+  <div class="test-use-syntax">
+    <div class="basic-use">Basic @use test</div>
+    <div class="use-as-namespace">@use with namespace test</div>
+    <div class="use-with-config">@use with configuration test</div>
+  </div>
+</template>
+
+<style>
+.test-use-syntax .basic-use {
+  color: blue;
+  font-size: 20px;
+}
+.test-use-syntax .use-as-namespace {
+  color: #ff0000;
+  font-size: 16px;
+}
+.test-use-syntax .use-with-config {
+  color: blue;
+  font-size: 18px;
+}
+</style>
+",
+  "
+
 -----    vue.tsx     -------
 
 import { defineComponent, ref } from 'vue'

test/demo/sass-builtin-test.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="sass-builtin-test">
+    Built-in Sass module test
+  </div>
+</template>
+
+<style lang="scss">
+@use "sass:math";
+@use "sass:color";
+@use "./variables.scss" as vars;
+
+.sass-builtin-test {
+  width: math.div(100px, 2);
+  color: color.adjust(vars.$primary-color, $lightness: 10%);
+}
+</style>

test/demo/use-syntax-test.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="test-use-syntax">
+    <div class="basic-use">Basic @use test</div>
+    <div class="use-as-namespace">@use with namespace test</div>
+    <div class="use-with-config">@use with configuration test</div>
+  </div>
+</template>
+
+<style lang="scss">
+// 基本 @use 语法
+@use './use-syntax.scss';
+
+// @use 带命名空间
+@use './variables.scss' as vars;
+
+.test-use-syntax {
+  .basic-use {
+    @include use-syntax.test-mixin();
+  }
+  
+  .use-as-namespace {
+    color: vars.$primary-color;
+    font-size: vars.$font-size;
+  }
+  
+  .use-with-config {
+    color: blue;
+    font-size: 18px;
+  }
+}
+</style>

test/demo/use-syntax.scss

@@ -0,0 +1,8 @@
+// Test file for @use syntax
+$test-color: blue;
+$test-size: 20px;
+
+@mixin test-mixin() {
+  color: $test-color;
+  font-size: $test-size;
+}