vite-plugin-css-svg-mask-image 1.0.2 → 1.0.4

package/dist/index.js

@@ -1,6 +1,7 @@
 import { readFileSync, existsSync, writeFileSync, mkdirSync } from "fs";
 import { join, resolve, dirname } from "path";
 import postcss, { Declaration } from "postcss";
+import postcssScss from "postcss-scss";
 function parse_svg_function(value) {
     const match = value.match(/^['"]?([^'",]+)['"]?\s*(?:,\s*['"]?([^'"]+)['"]?)?$/);
     if (!match) {
@@ -75,10 +76,15 @@ export function svgMaskPlugin(options = {}) {
             }
         },
         async transform(code, id) {
-            if (!id.match(/\.(css|scss|sass)$/)) {
+            const idPath = id.replace(/\?.*$/, "");
+            if (!idPath.match(/\.(css|scss|sass)$/)) {
                 return null;
             }
-            const ast = postcss.parse(code);
+            const syntax = /\.(scss|sass)$/.test(idPath) ? postcssScss : undefined;
+            const ast = postcss.parse(code, {
+                from: id,
+                ...(syntax && { parser: syntax }),
+            });
             let has_svg_functions = false;
             ast.walkDecls("mask-image", (decl) => {
                 const value = decl.value.trim();
@@ -125,7 +131,10 @@ export function svgMaskPlugin(options = {}) {
             if (!has_svg_functions) {
                 return null;
             }
-            const result = await postcss().process(ast, { from: id, to: id });
+            const processOpts = { from: id, to: id };
+            if (syntax)
+                processOpts.stringifier = postcssScss;
+            const result = await postcss().process(ast, processOpts);
             processed_files.add(id);
             return {
                 code: result.css,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-css-svg-mask-image",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Vite plugin to transform CSS/SCSS files with svg() mask-image function calls to CSS variables",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -38,7 +38,8 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
-    "postcss": "^8.5.6"
+    "postcss": "^8.5.6",
+    "postcss-scss": "^4.0.9"
   },
   "peerDependencies": {
     "vite": "^7.0.0"