@absolutejs/absolute 0.19.0-beta.686 → 0.19.0-beta.688

package/dist/build.js

@@ -2447,11 +2447,120 @@ var init_lowerAwaitSlotSyntax = __esm(() => {
   AWAIT_BLOCK_RE = /\{#await\s+([^}]+)\}([\s\S]*?)\{:then(?:\s+([A-Za-z_$][\w$]*))?\}([\s\S]*?)(?:\{:catch(?:\s+([A-Za-z_$][\w$]*))?\}([\s\S]*?))?\{\/await\}/g;
 });
 
+// src/build/stylePreprocessor.ts
+import { readFile } from "fs/promises";
+import { dirname as dirname3, extname as extname3 } from "path";
+var STYLE_EXTENSION_PATTERN, STYLE_MODULE_EXTENSION_PATTERN, STYLE_LANGUAGE_PATTERN, importOptionalPeer, isPreprocessableStylePath = (filePath) => STYLE_EXTENSION_PATTERN.test(filePath), isStyleModulePath = (filePath) => STYLE_MODULE_EXTENSION_PATTERN.test(filePath), isStylePath = (filePath) => /\.(css|s[ac]ss|less)$/i.test(filePath), getStyleBaseName = (filePath) => filePath.replace(/\.(css|s[ac]ss|less)$/i, ""), getStyleLanguage = (filePathOrLanguage) => {
+  const normalized = filePathOrLanguage.toLowerCase();
+  if (normalized === "scss" || normalized.endsWith(".scss"))
+    return "scss";
+  if (normalized === "sass" || normalized.endsWith(".sass"))
+    return "sass";
+  if (normalized === "less" || normalized.endsWith(".less"))
+    return "less";
+  return null;
+}, missingDependencyError = (name, filePath) => new Error(`Unable to compile ${filePath}: install optional dependency "${name}" to use this stylesheet preprocessor.`), compileStyleSource = async (filePath, source, languageHint) => {
+  const language = getStyleLanguage(languageHint ?? filePath);
+  const contents = source ?? await readFile(filePath, "utf-8");
+  if (language === "scss" || language === "sass") {
+    let sass;
+    try {
+      sass = await importOptionalPeer("sass");
+    } catch {
+      throw missingDependencyError("sass", filePath);
+    }
+    const result = sass.compileString(contents, {
+      loadPaths: [dirname3(filePath), process.cwd()],
+      style: "expanded",
+      syntax: language === "sass" ? "indented" : "scss",
+      url: new URL(`file://${filePath}`)
+    });
+    return result.css;
+  }
+  if (language === "less") {
+    let lessModule;
+    try {
+      lessModule = await importOptionalPeer("less");
+    } catch {
+      throw missingDependencyError("less", filePath);
+    }
+    const less = lessModule.render ? lessModule : lessModule.default;
+    const render = less?.render;
+    if (!render)
+      throw missingDependencyError("less", filePath);
+    const result = await render(contents, {
+      filename: filePath,
+      paths: [dirname3(filePath), process.cwd()]
+    });
+    return result.css;
+  }
+  return contents;
+}, stylePreprocessorPlugin, createSvelteStylePreprocessor = () => ({
+  style: async ({
+    attributes,
+    content,
+    filename
+  }) => {
+    const language = typeof attributes.lang === "string" ? attributes.lang : typeof attributes.type === "string" ? attributes.type.replace(/^text\//, "") : null;
+    if (!language || !STYLE_LANGUAGE_PATTERN.test(language))
+      return;
+    const path = filename ?? `style.${language}`;
+    return {
+      code: await compileStyleSource(path, content, language)
+    };
+  }
+}), compileStyleFileIfNeeded = async (filePath) => {
+  if (!isPreprocessableStylePath(filePath)) {
+    return readFile(filePath, "utf-8");
+  }
+  return compileStyleSource(filePath);
+};
+var init_stylePreprocessor = __esm(() => {
+  STYLE_EXTENSION_PATTERN = /\.(s[ac]ss|less)$/i;
+  STYLE_MODULE_EXTENSION_PATTERN = /\.module\.(s[ac]ss|less)$/i;
+  STYLE_LANGUAGE_PATTERN = /^(s[ac]ss|less)$/i;
+  importOptionalPeer = new Function("specifier", "return import(specifier)");
+  stylePreprocessorPlugin = {
+    name: "absolute-style-preprocessor",
+    setup(build) {
+      const cssModuleSources = new Map;
+      build.onResolve({ filter: /^absolute-style-module:/ }, ({ path }) => ({
+        namespace: "absolute-style-module",
+        path: path.slice("absolute-style-module:".length)
+      }));
+      build.onLoad({ filter: /\.module\.css$/i, namespace: "absolute-style-module" }, async ({ path }) => {
+        const sourcePath = cssModuleSources.get(path);
+        if (!sourcePath) {
+          throw new Error(`Unable to resolve CSS module source for ${path}`);
+        }
+        return {
+          contents: await compileStyleSource(sourcePath),
+          loader: "css"
+        };
+      });
+      build.onLoad({ filter: STYLE_EXTENSION_PATTERN }, async ({ path }) => {
+        if (isStyleModulePath(path)) {
+          const cssModulePath = path.replace(STYLE_EXTENSION_PATTERN, ".css");
+          cssModuleSources.set(cssModulePath, path);
+          return {
+            contents: `export { default } from ${JSON.stringify(`absolute-style-module:${cssModulePath}`)};`,
+            loader: "js"
+          };
+        }
+        return {
+          contents: await compileStyleSource(path),
+          loader: "css"
+        };
+      });
+    }
+  };
+});
+
 // src/core/svelteServerModule.ts
 import { mkdir, readdir as readdir2 } from "fs/promises";
-import { basename as basename2, dirname as dirname3, extname as extname3, join as join5, relative as relative3, resolve as resolve6 } from "path";
+import { basename as basename2, dirname as dirname4, extname as extname4, join as join5, relative as relative3, resolve as resolve6 } from "path";
 var serverCacheRoot, compiledModuleCache, originalSourcePathCache, transpiler, ensureRelativeImportPath = (from, target) => {
-  const importPath = relative3(dirname3(from), target).replace(/\\/g, "/");
+  const importPath = relative3(dirname4(from), target).replace(/\\/g, "/");
   return importPath.startsWith(".") ? importPath : `./${importPath}`;
 }, processDirectoryEntries = (entries, dir, targetFileName, stack) => {
   for (const entry of entries) {
@@ -2497,7 +2606,7 @@ var serverCacheRoot, compiledModuleCache, originalSourcePathCache, transpiler, e
   if (!spec.startsWith(".")) {
     return null;
   }
-  const basePath = resolve6(dirname3(from), spec);
+  const basePath = resolve6(dirname4(from), spec);
   const candidates = [
     basePath,
     `${basePath}.ts`,
@@ -2529,8 +2638,8 @@ var serverCacheRoot, compiledModuleCache, originalSourcePathCache, transpiler, e
   if (!spec.startsWith(".")) {
     return null;
   }
-  const explicitPath = resolve6(dirname3(from), spec);
-  if (extname3(explicitPath) === ".svelte") {
+  const explicitPath = resolve6(dirname4(from), spec);
+  if (extname4(explicitPath) === ".svelte") {
     return explicitPath;
   }
   const candidate = `${explicitPath}.svelte`;
@@ -2558,7 +2667,7 @@ var serverCacheRoot, compiledModuleCache, originalSourcePathCache, transpiler, e
   const { compile, preprocess } = await import("svelte/compiler");
   const loweredAwaitSource = lowerSvelteAwaitSlotSyntax(source);
   const loweredSource = lowerSvelteIslandSyntax(loweredAwaitSource.code, "server");
-  const preprocessed = await preprocess(loweredSource.code, {});
+  const preprocessed = await preprocess(loweredSource.code, createSvelteStylePreprocessor());
   let transpiled = sourcePath.endsWith(".ts") || sourcePath.endsWith(".svelte.ts") ? transpiler.transformSync(preprocessed.code) : preprocessed.code;
   const childImportSpecs = Array.from(transpiled.matchAll(/from\s+['"]([^'"]+)['"]/g)).map((match) => match[1]).filter((value) => value !== undefined);
   const resolvedChildModules = await Promise.all(childImportSpecs.map((spec) => resolveSvelteImport(spec, resolutionSourcePath)));
@@ -2608,7 +2717,7 @@ var serverCacheRoot, compiledModuleCache, originalSourcePathCache, transpiler, e
     compiledCode = compiledCode.replaceAll(spec, resolvedModuleImport);
   }
   const compiledModulePath = getCachedModulePath(sourcePath);
-  await mkdir(dirname3(compiledModulePath), { recursive: true });
+  await mkdir(dirname4(compiledModulePath), { recursive: true });
   await writeIfChanged(compiledModulePath, compiledCode);
   compiledModuleCache.set(sourcePath, compiledModulePath);
   return compiledModulePath;
@@ -2617,6 +2726,7 @@ var init_svelteServerModule = __esm(() => {
   init_resolvePackageImport();
   init_lowerIslandSyntax();
   init_lowerAwaitSlotSyntax();
+  init_stylePreprocessor();
   serverCacheRoot = join5(process.cwd(), ".absolutejs", "islands", "svelte");
   compiledModuleCache = new Map;
   originalSourcePathCache = new Map;
@@ -3087,16 +3197,18 @@ var scanCssEntryPoints = async (dir, ignore) => {
   if (!existsSync7(dir))
     return [];
   const entryPaths = [];
-  const glob = new Glob4("**/*.css");
+  const glob = new Glob4("**/*.{css,scss,sass,less}");
   for await (const file of glob.scan({ absolute: true, cwd: dir })) {
     const normalized = normalizePath(file);
-    if (ignore?.some((pattern) => normalized.includes(pattern)))
+    if (isStyleModulePath(normalized) || ignore?.some((pattern) => normalized.includes(pattern)))
       continue;
     entryPaths.push(file);
   }
   return entryPaths;
 };
-var init_scanCssEntryPoints = () => {};
+var init_scanCssEntryPoints = __esm(() => {
+  init_stylePreprocessor();
+});
 
 // src/utils/imageProcessing.ts
 import { existsSync as existsSync8, mkdirSync as mkdirSync3, readFileSync as readFileSync4, writeFileSync as writeFileSync4 } from "fs";
@@ -3268,7 +3380,7 @@ var exports_optimizeHtmlImages = {};
 __export(exports_optimizeHtmlImages, {
   optimizeHtmlImages: () => optimizeHtmlImages
 });
-import { readFile, writeFile as writeFile2 } from "fs/promises";
+import { readFile as readFile2, writeFile as writeFile2 } from "fs/promises";
 var IMG_REGEX, getAttr = (attrs, name) => {
   const regex = new RegExp(`${name}\\s*=\\s*["']([^"']*)["']`, "i");
   const match = regex.exec(attrs);
@@ -3314,7 +3426,7 @@ var IMG_REGEX, getAttr = (attrs, name) => {
 }, optimizeHtmlImages = async (directory, config) => {
   const htmlFiles = await scanEntryPoints(directory, "*.html");
   const tasks = htmlFiles.map(async (filePath) => {
-    const original = await readFile(filePath, "utf8");
+    const original = await readFile2(filePath, "utf8");
     if (!original.includes("data-optimized"))
       return;
     const updated = original.replace(IMG_REGEX, (match, before, after) => transformImgTag(match, before, after, config));
@@ -3353,7 +3465,7 @@ var init_telemetry = __esm(() => {
 // src/cli/telemetryEvent.ts
 import { existsSync as existsSync10, readFileSync as readFileSync6 } from "fs";
 import { arch, platform } from "os";
-import { dirname as dirname4, join as join8, parse } from "path";
+import { dirname as dirname5, join as join8, parse } from "path";
 var checkCandidate = (candidate) => {
   if (!existsSync10(candidate)) {
     return null;
@@ -3378,7 +3490,7 @@ var checkCandidate = (candidate) => {
     if (version) {
       return version;
     }
-    dir = dirname4(dir);
+    dir = dirname5(dir);
   }
   return "unknown";
 }, sendTelemetryEvent = (event, payload) => {
@@ -3416,7 +3528,7 @@ var exports_updateAssetPaths = {};
 __export(exports_updateAssetPaths, {
   updateAssetPaths: () => updateAssetPaths
 });
-import { readFile as readFile2, writeFile as writeFile3 } from "fs/promises";
+import { readFile as readFile3, writeFile as writeFile3 } from "fs/promises";
 var replaceAssetRef = (match, prefix, dir, name, ext, suffix, manifest, filePath) => {
   if (/data-external(?:\s*=\s*["'][^"']*["'])?/i.test(match)) {
     return match;
@@ -3451,7 +3563,7 @@ var replaceAssetRef = (match, prefix, dir, name, ext, suffix, manifest, filePath
   const htmlFiles = await scanEntryPoints(directory, "*.html");
   const assetRegex = /((?:<script[^>]+src=|<link[^>]*?rel=["']stylesheet["'][^>]*?href=)["'])(?!\/?(?:.*\/)?htmx\.min\.js)(\/?(?:.*\/)?)([^./"']+)(?:\.[^."'/]+)?(\.(?:js|ts|css))(["'][^>]*>)/g;
   const tasks = htmlFiles.map(async (filePath) => {
-    const original = await readFile2(filePath, "utf8");
+    const original = await readFile3(filePath, "utf8");
     const updated = original.replace(assetRegex, (match, prefix, dir, name, ext, suffix) => replaceAssetRef(match, prefix, dir, name, ext, suffix, manifest, filePath));
     await writeFile3(filePath, updated, "utf8");
   });
@@ -3666,7 +3778,7 @@ var devVendorPaths = null, getDevVendorPaths = () => devVendorPaths, setDevVendo
 
 // src/build/angularLinkerPlugin.ts
 import { existsSync as existsSync12, mkdirSync as mkdirSync5, readFileSync as readFileSync7, writeFileSync as writeFileSync6 } from "fs";
-import { dirname as dirname5, join as join9, relative as relative4, resolve as resolve10 } from "path";
+import { dirname as dirname6, join as join9, relative as relative4, resolve as resolve10 } from "path";
 import { createHash } from "crypto";
 var CACHE_DIR, angularLinkerPlugin;
 var init_angularLinkerPlugin = __esm(() => {
@@ -3706,7 +3818,7 @@ var init_angularLinkerPlugin = __esm(() => {
           const mod = await import(linkerSpecifier);
           linkerPlugin = mod.createEs2015LinkerPlugin({
             fileSystem: {
-              dirname: dirname5,
+              dirname: dirname6,
               exists: existsSync12,
               readFile: readFileSync7,
               relative: relative4,
@@ -3965,10 +4077,10 @@ __export(exports_compileSvelte, {
 import { existsSync as existsSync13 } from "fs";
 import { mkdir as mkdir2, stat } from "fs/promises";
 import {
-  dirname as dirname6,
+  dirname as dirname7,
   join as join11,
   basename as basename4,
-  extname as extname4,
+  extname as extname5,
   resolve as resolve13,
   relative as relative6,
   sep as sep2
@@ -4014,7 +4126,7 @@ var resolveDevClientDir2 = () => {
 }, resolveRelativeModule2 = async (spec, from) => {
   if (!spec.startsWith("."))
     return null;
-  const basePath = resolve13(dirname6(from), spec);
+  const basePath = resolve13(dirname7(from), spec);
   const candidates = [
     basePath,
     `${basePath}.ts`,
@@ -4041,7 +4153,7 @@ var resolveDevClientDir2 = () => {
     const resolved = resolvePackageImport(spec);
     return resolved && /\.svelte(\.(?:ts|js))?$/.test(resolved) ? resolved : null;
   }
-  const basePath = resolve13(dirname6(from), spec);
+  const basePath = resolve13(dirname7(from), spec);
   const explicit = /\.(svelte|svelte\.(?:ts|js))$/.test(basePath);
   if (!explicit) {
     const extensions = [".svelte", ".svelte.ts", ".svelte.js"];
@@ -4096,12 +4208,13 @@ var resolveDevClientDir2 = () => {
     const loweredServerSource = isModule ? loweredAwaitServerSource : lowerSvelteIslandSyntax(loweredAwaitServerSource.code, "server");
     const loweredClientSource = isModule ? loweredAwaitClientSource : lowerSvelteIslandSyntax(loweredAwaitClientSource.code, "client");
     const transformedByLowering = loweredAwaitServerSource.transformed || loweredAwaitClientSource.transformed || loweredServerSource.transformed || loweredClientSource.transformed;
-    const preprocessedServer = isModule ? loweredServerSource.code : (await preprocess(loweredServerSource.code, {})).code;
-    const preprocessedClient = isModule ? loweredClientSource.code : (await preprocess(loweredClientSource.code, {})).code;
+    const svelteStylePreprocessor = createSvelteStylePreprocessor();
+    const preprocessedServer = isModule ? loweredServerSource.code : (await preprocess(loweredServerSource.code, svelteStylePreprocessor)).code;
+    const preprocessedClient = isModule ? loweredClientSource.code : (await preprocess(loweredClientSource.code, svelteStylePreprocessor)).code;
     const transpiledServer = src.endsWith(".ts") || src.endsWith(".svelte.ts") ? transpiler2.transformSync(preprocessedServer) : preprocessedServer;
     const transpiledClient = src.endsWith(".ts") || src.endsWith(".svelte.ts") ? transpiler2.transformSync(preprocessedClient) : preprocessedClient;
-    const rawRel = dirname6(relative6(svelteRoot, src)).replace(/\\/g, "/");
-    const relDir = rawRel.startsWith("..") ? `_ext/${relative6(process.cwd(), dirname6(src)).replace(/\\/g, "/")}` : rawRel;
+    const rawRel = dirname7(relative6(svelteRoot, src)).replace(/\\/g, "/");
+    const relDir = rawRel.startsWith("..") ? `_ext/${relative6(process.cwd(), dirname7(src)).replace(/\\/g, "/")}` : rawRel;
     const baseName = basename4(src).replace(/\.svelte(\.(ts|js))?$/, "");
     const importPaths = Array.from(transpiledServer.matchAll(/from\s+['"]([^'"]+)['"]/g)).map((match) => match[1]).filter((path) => path !== undefined);
     const resolvedModuleImports = await Promise.all(importPaths.map((importPath) => resolveRelativeModule2(importPath, src)));
@@ -4110,8 +4223,8 @@ var resolveDevClientDir2 = () => {
     const childBuilt = await Promise.all(childSources.map((child) => build(child)));
     const hasAwaitSlotFromChildren = childBuilt.some((child) => child.hasAwaitSlot);
     const externalRewrites = new Map;
-    const ssrOutputDir = dirname6(join11(serverDir, relDir, `${baseName}.js`));
-    const clientOutputDir = dirname6(join11(clientDir, relDir, `${baseName}.js`));
+    const ssrOutputDir = dirname7(join11(serverDir, relDir, `${baseName}.js`));
+    const clientOutputDir = dirname7(join11(clientDir, relDir, `${baseName}.js`));
     for (let idx = 0;idx < importPaths.length; idx++) {
       const rawSpec = importPaths[idx];
       if (!rawSpec)
@@ -4180,8 +4293,8 @@ var resolveDevClientDir2 = () => {
     const ssrPath = join11(serverDir, relDir, `${baseName}.js`);
     const clientPath = join11(clientDir, relDir, `${baseName}.js`);
     await Promise.all([
-      mkdir2(dirname6(ssrPath), { recursive: true }),
-      mkdir2(dirname6(clientPath), { recursive: true })
+      mkdir2(dirname7(ssrPath), { recursive: true }),
+      mkdir2(dirname7(clientPath), { recursive: true })
     ]);
     if (isModule) {
       const bundle = rewriteExternalImports(generate("client"), "client");
@@ -4208,10 +4321,10 @@ var resolveDevClientDir2 = () => {
   };
   const roots = await Promise.all(entryPoints.map(build));
   await Promise.all(roots.map(async ({ client, hasAwaitSlot }) => {
-    const relClientDir = dirname6(relative6(clientDir, client));
-    const name = basename4(client, extname4(client));
+    const relClientDir = dirname7(relative6(clientDir, client));
+    const name = basename4(client, extname5(client));
     const indexPath = join11(indexDir, relClientDir, `${name}.js`);
-    const importRaw = relative6(dirname6(indexPath), client).split(sep2).join("/");
+    const importRaw = relative6(dirname7(indexPath), client).split(sep2).join("/");
     const importPath = importRaw.startsWith(".") || importRaw.startsWith("/") ? importRaw : `./${importRaw}`;
     const hmrImports = isDev ? `window.__HMR_FRAMEWORK__ = "svelte";
 import "${hmrClientPath3}";
@@ -4282,13 +4395,13 @@ if (typeof window !== "undefined") {
     setTimeout(releaseStreamingSlots, 0);
   }
 }`;
-    await mkdir2(dirname6(indexPath), { recursive: true });
+    await mkdir2(dirname7(indexPath), { recursive: true });
     return write(indexPath, bootstrap);
   }));
   return {
     svelteClientPaths: roots.map(({ client }) => client),
     svelteIndexPaths: roots.map(({ client }) => {
-      const rel = dirname6(relative6(clientDir, client));
+      const rel = dirname7(relative6(clientDir, client));
       return join11(indexDir, rel, basename4(client));
     }),
     svelteServerPaths: roots.map(({ ssr }) => ssr)
@@ -4298,6 +4411,7 @@ var init_compileSvelte = __esm(() => {
   init_constants();
   init_resolvePackageImport();
   init_sourceMetadata();
+  init_stylePreprocessor();
   init_lowerIslandSyntax();
   init_lowerAwaitSlotSyntax();
   init_renderToReadableStream();
@@ -4319,7 +4433,7 @@ __export(exports_compileVue, {
 });
 import { existsSync as existsSync14 } from "fs";
 import { mkdir as mkdir3 } from "fs/promises";
-import { basename as basename5, dirname as dirname7, join as join12, relative as relative7, resolve as resolve14 } from "path";
+import { basename as basename5, dirname as dirname8, join as join12, relative as relative7, resolve as resolve14 } from "path";
 var {file: file2, write: write2, Transpiler: Transpiler2 } = globalThis.Bun;
 var resolveDevClientDir3 = () => {
   const projectRoot = process.cwd();
@@ -4430,7 +4544,7 @@ var resolveDevClientDir3 = () => {
   const packageComponentPaths = Array.from(resolvedPackageVueImports.entries());
   const helperModulePaths = importPaths.filter((path) => path.startsWith(".") && !path.endsWith(".vue"));
   const childBuildResults = await Promise.all([
-    ...childComponentPaths.map((relativeChildPath) => compileVueFile(resolve14(dirname7(sourceFilePath), relativeChildPath), outputDirs, cacheMap, false, vueRootDir, compiler)),
+    ...childComponentPaths.map((relativeChildPath) => compileVueFile(resolve14(dirname8(sourceFilePath), relativeChildPath), outputDirs, cacheMap, false, vueRootDir, compiler)),
     ...packageComponentPaths.map(([, absolutePath]) => compileVueFile(absolutePath, outputDirs, cacheMap, false, vueRootDir, compiler))
   ]);
   const hasScript = descriptor.script || descriptor.scriptSetup;
@@ -4462,13 +4576,13 @@ var resolveDevClientDir3 = () => {
     ssr,
     ssrCssVars: descriptor.cssVars
   }).code.replace(/(['"])(\.{1,2}\/[^'"]+)(['"])/g, (_, quoteStart, relativeImport, quoteEnd) => `${quoteStart}${toJs(relativeImport)}${quoteEnd}`);
-  const localCss = descriptor.styles.map((styleBlock) => compiler.compileStyle({
+  const localCss = await Promise.all(descriptor.styles.map(async (styleBlock) => compiler.compileStyle({
     filename: sourceFilePath,
     id: componentId,
     scoped: styleBlock.scoped,
-    source: styleBlock.content,
+    source: styleBlock.lang ? await compileStyleSource(sourceFilePath, styleBlock.content, styleBlock.lang) : styleBlock.content,
     trim: true
-  }).code);
+  }).code));
   const allCss = [
     ...localCss,
     ...childBuildResults.flatMap((result2) => result2.cssCodes)
@@ -4476,7 +4590,7 @@ var resolveDevClientDir3 = () => {
   let cssOutputPaths = [];
   if (isEntryPoint && allCss.length) {
     const cssOutputFile = join12(outputDirs.css, `${toKebab(fileBaseName)}-compiled.css`);
-    await mkdir3(dirname7(cssOutputFile), { recursive: true });
+    await mkdir3(dirname8(cssOutputFile), { recursive: true });
     await write2(cssOutputFile, allCss.join(`
 `));
     cssOutputPaths = [cssOutputFile];
@@ -4508,7 +4622,7 @@ if (typeof __VUE_HMR_RUNTIME__ !== 'undefined') {
   const serverCode = assembleModule(generateRenderFunction(true), "ssrRender", false) + islandMetadataExports;
   const clientOutputPath = join12(outputDirs.client, `${relativeWithoutExtension}.js`);
   const serverOutputPath = join12(outputDirs.server, `${relativeWithoutExtension}.js`);
-  const relDir = dirname7(relativeFilePath);
+  const relDir = dirname8(relativeFilePath);
   const relDepth = relDir === "." ? 0 : relDir.split("/").length;
   const adjustImports = (code) => code.replace(/(from\s+['"])(\.\.\/(?:\.\.\/)*)/g, (_, prefix, dots) => {
     const upCount = dots.split("/").length - 1;
@@ -4520,15 +4634,15 @@ if (typeof __VUE_HMR_RUNTIME__ !== 'undefined') {
     let result2 = code;
     for (const [bareImport, paths] of packageImportRewrites) {
       const targetPath = mode === "server" ? paths.server : paths.client;
-      let rel = relative7(dirname7(outputPath), targetPath).replace(/\\/g, "/");
+      let rel = relative7(dirname8(outputPath), targetPath).replace(/\\/g, "/");
       if (!rel.startsWith("."))
         rel = `./${rel}`;
       result2 = result2.replaceAll(bareImport, rel);
     }
     return result2;
   };
-  await mkdir3(dirname7(clientOutputPath), { recursive: true });
-  await mkdir3(dirname7(serverOutputPath), { recursive: true });
+  await mkdir3(dirname8(clientOutputPath), { recursive: true });
+  await mkdir3(dirname8(serverOutputPath), { recursive: true });
   await write2(clientOutputPath, rewritePackageImports(adjustImports(clientCode), clientOutputPath, "client"));
   await write2(serverOutputPath, rewritePackageImports(adjustImports(serverCode), serverOutputPath, "server"));
   const result = {
@@ -4538,7 +4652,7 @@ if (typeof __VUE_HMR_RUNTIME__ !== 'undefined') {
     hmrId,
     serverPath: serverOutputPath,
     tsHelperPaths: [
-      ...helperModulePaths.map((helper) => resolve14(dirname7(sourceFilePath), helper.endsWith(".ts") ? helper : `${helper}.ts`)),
+      ...helperModulePaths.map((helper) => resolve14(dirname8(sourceFilePath), helper.endsWith(".ts") ? helper : `${helper}.ts`)),
       ...childBuildResults.flatMap((child) => child.tsHelperPaths)
     ]
   };
@@ -4570,14 +4684,14 @@ if (typeof __VUE_HMR_RUNTIME__ !== 'undefined') {
     const entryBaseName = basename5(entryPath, ".vue");
     const indexOutputFile = join12(indexOutputDir, `${entryBaseName}.js`);
     const clientOutputFile = join12(clientOutputDir, relative7(vueRootDir, entryPath).replace(/\\/g, "/").replace(/\.vue$/, ".js"));
-    await mkdir3(dirname7(indexOutputFile), { recursive: true });
+    await mkdir3(dirname8(indexOutputFile), { recursive: true });
     const vueHmrImports = isDev ? [
       `window.__HMR_FRAMEWORK__ = "vue";`,
       `import "${hmrClientPath4}";`
     ] : [];
     await write2(indexOutputFile, [
       ...vueHmrImports,
-      `import Comp from "${relative7(dirname7(indexOutputFile), clientOutputFile).replace(/\\/g, "/")}";`,
+      `import Comp from "${relative7(dirname8(indexOutputFile), clientOutputFile).replace(/\\/g, "/")}";`,
       'import { createSSRApp, createApp } from "vue";',
       "",
       "// HMR State Preservation: Check for preserved state from HMR",
@@ -4700,8 +4814,8 @@ if (typeof __VUE_HMR_RUNTIME__ !== 'undefined') {
     const relativeJsPath = relative7(vueRootDir, tsPath).replace(/\.ts$/, ".js");
     const outClientPath = join12(clientOutputDir, relativeJsPath);
     const outServerPath = join12(serverOutputDir, relativeJsPath);
-    await mkdir3(dirname7(outClientPath), { recursive: true });
-    await mkdir3(dirname7(outServerPath), { recursive: true });
+    await mkdir3(dirname8(outClientPath), { recursive: true });
+    await mkdir3(dirname8(outServerPath), { recursive: true });
     await write2(outClientPath, transpiledCode);
     await write2(outServerPath, transpiledCode);
   }));
@@ -4717,6 +4831,7 @@ var init_compileVue = __esm(() => {
   init_constants();
   init_resolvePackageImport();
   init_sourceMetadata();
+  init_stylePreprocessor();
   devClientDir3 = resolveDevClientDir3();
   hmrClientPath4 = join12(devClientDir3, "hmrClient.ts").replace(/\\/g, "/");
   transpiler3 = new Transpiler2({ loader: "ts", target: "browser" });
@@ -5198,7 +5313,7 @@ __export(exports_compileAngular, {
   compileAngular: () => compileAngular
 });
 import { existsSync as existsSync15, readFileSync as readFileSync8, promises as fs } from "fs";
-import { join as join13, basename as basename6, sep as sep3, dirname as dirname8, resolve as resolve15, relative as relative8 } from "path";
+import { join as join13, basename as basename6, sep as sep3, dirname as dirname9, resolve as resolve15, relative as relative8 } from "path";
 import ts2 from "typescript";
 import { createHash as createHash2 } from "crypto";
 var computeConfigHash = () => {
@@ -5262,11 +5377,7 @@ ${registrations}
   return fileName;
 }, compileAngularFile = async (inputPath, outDir) => {
   const islandMetadataExports = buildIslandMetadataExports(readFileSync8(inputPath, "utf-8"));
-  const {
-    readConfiguration,
-    performCompilation,
-    EmitFlags
-  } = await import("@angular/compiler-cli");
+  const { readConfiguration, performCompilation, EmitFlags } = await import("@angular/compiler-cli");
   const configHash = computeConfigHash();
   const cached = globalThis.__angularCompilerCache;
   let host;
@@ -5279,7 +5390,7 @@ ${registrations}
     cached.lastUsed = Date.now();
   } else {
     const tsPath = __require.resolve("typescript");
-    const tsRootDir = dirname8(tsPath);
+    const tsRootDir = dirname9(tsPath);
     tsLibDir = tsRootDir.endsWith("lib") ? tsRootDir : resolve15(tsRootDir, "lib");
     const config = readConfiguration("./tsconfig.json");
     options = {
@@ -5345,7 +5456,7 @@ ${registrations}
     const cached2 = aotTransformCache.get(resolvedPath);
     if (cached2 !== undefined)
       return cached2;
-    const transformed = inlineTemplateAndLowerDeferSync(source, dirname8(resolvedPath)).source;
+    const transformed = inlineTemplateAndLowerDeferSync(source, dirname9(resolvedPath)).source;
     aotTransformCache.set(resolvedPath, transformed);
     return transformed;
   };
@@ -5387,7 +5498,7 @@ ${registrations}
     processedContent += islandMetadataExports;
     return { content: processedContent, target };
   });
-  await Promise.all(entries.map(({ target }) => fs.mkdir(dirname8(target), { recursive: true })));
+  await Promise.all(entries.map(({ target }) => fs.mkdir(dirname9(target), { recursive: true })));
   await Promise.all(entries.map(({ target, content }) => fs.writeFile(target, content, "utf-8")));
   return entries.map(({ target }) => target);
 }, jitContentCache, wrapperOutputCache, escapeTemplateContent = (content) => content.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${"), resolveAngularDeferImportSpecifier = () => {
@@ -5522,7 +5633,7 @@ ${fields}
 }, readAndEscapeFile = async (filePath) => {
   if (!existsSync15(filePath))
     return null;
-  const content = await fs.readFile(filePath, "utf-8");
+  const content = await compileStyleFileIfNeeded(filePath);
   return escapeTemplateContent(content);
 }, inlineTemplateAndLowerDefer = async (source, fileDir) => {
   const templateUrlMatch = source.match(/templateUrl\s*:\s*['"]([^'"]+)['"]/);
@@ -5676,9 +5787,9 @@ ${fields}
     if (!existsSync15(actualPath))
       return;
     let sourceCode = await fs.readFile(actualPath, "utf-8");
-    const inlined = await inlineResources(sourceCode, dirname8(actualPath));
-    sourceCode = inlineTemplateAndLowerDeferSync(inlined.source, dirname8(actualPath)).source;
-    const inputDir = dirname8(actualPath);
+    const inlined = await inlineResources(sourceCode, dirname9(actualPath));
+    sourceCode = inlineTemplateAndLowerDeferSync(inlined.source, dirname9(actualPath)).source;
+    const inputDir = dirname9(actualPath);
     const relativeDir = inputDir.startsWith(baseDir) ? inputDir.substring(baseDir.length + 1) : inputDir;
     const fileBase = basename6(actualPath).replace(/\.ts$/, ".js");
     const targetDir = join13(outDir, relativeDir);
@@ -5706,7 +5817,7 @@ ${fields}
       allOutputs.push(targetPath);
       jitContentCache.set(cacheKey2, contentHash);
     }
-    const inputDirForResolve = dirname8(actualPath);
+    const inputDirForResolve = dirname9(actualPath);
     await Promise.all(localImports.map((imp) => {
       const importPath = resolve15(inputDirForResolve, imp);
       return transpileFile(importPath);
@@ -5769,7 +5880,11 @@ ${fields}
     const cachedWrapper = wrapperOutputCache.get(resolvedEntry);
     const clientFile = join13(indexesDir, jsName);
     if (hmr && cachedWrapper && cachedWrapper.serverHash === serverContentHash && existsSync15(clientFile)) {
-      return { clientPath: clientFile, indexUnchanged: true, serverPath: rawServerFile };
+      return {
+        clientPath: clientFile,
+        indexUnchanged: true,
+        serverPath: rawServerFile
+      };
     }
     let rewritten = original;
     if (!rewritten.includes(`import '@angular/compiler';`)) {
@@ -5926,8 +6041,15 @@ if (pageHasRawStreamingSlots) {
     const indexHash = Bun.hash(hydration).toString(BASE_36_RADIX);
     const indexUnchanged = cachedWrapper?.indexHash === indexHash;
     await fs.writeFile(clientFile, hydration, "utf-8");
-    wrapperOutputCache.set(resolvedEntry, { indexHash, serverHash: serverContentHash });
-    return { clientPath: clientFile, indexUnchanged, serverPath: rawServerFile };
+    wrapperOutputCache.set(resolvedEntry, {
+      indexHash,
+      serverHash: serverContentHash
+    });
+    return {
+      clientPath: clientFile,
+      indexUnchanged,
+      serverPath: rawServerFile
+    };
   });
   const results = await Promise.all(compileTasks);
   const serverPaths = results.map((r) => r.serverPath);
@@ -5942,6 +6064,7 @@ var init_compileAngular = __esm(() => {
   init_constants();
   init_sourceMetadata();
   init_lowerDeferSyntax();
+  init_stylePreprocessor();
   devClientDir4 = resolveDevClientDir4();
   hmrClientPath5 = join13(devClientDir4, "hmrClient.ts").replace(/\\/g, "/");
   hmrRuntimePath = join13(devClientDir4, "handlers", "angularRuntime.ts").replace(/\\/g, "/");
@@ -6279,7 +6402,7 @@ import {
   statSync,
   writeFileSync as writeFileSync7
 } from "fs";
-import { basename as basename7, dirname as dirname9, join as join18, relative as relative9, resolve as resolve17 } from "path";
+import { basename as basename7, dirname as dirname10, join as join18, relative as relative9, resolve as resolve17 } from "path";
 import { cwd, env as env2, exit } from "process";
 var {build: bunBuild6, Glob: Glob6 } = globalThis.Bun;
 var isDev, collectConventionSourceFiles = (entry) => {
@@ -6659,7 +6782,7 @@ ${content.slice(firstUseIdx)}`;
     htmlDir,
     vueDir,
     angularDir,
-    islandBootstrapPath && dirname9(islandBootstrapPath)
+    islandBootstrapPath && dirname10(islandBootstrapPath)
   ].filter((dir) => Boolean(dir));
   const clientRoot = isSingle ? sourceClientRoots[0] ?? projectRoot : commonAncestor(sourceClientRoots, projectRoot);
   const serverDirMap = [];
@@ -6727,7 +6850,7 @@ ${content.slice(firstUseIdx)}`;
     const proc = Bun.spawn(["bun", binPath, "-i", input, "-o", join18(buildPath, output)], { stderr: "pipe", stdout: "pipe" });
     await proc.exited;
   };
-  const tailwindPromise = tailwind && (!isIncremental || normalizedIncrementalFiles?.some((file3) => file3.endsWith(".css"))) ? compileTailwind(tailwind.input, tailwind.output) : undefined;
+  const tailwindPromise = tailwind && (!isIncremental || normalizedIncrementalFiles?.some(isStylePath)) ? compileTailwind(tailwind.input, tailwind.output) : undefined;
   const emptyConventionResult = {
     conventions: undefined,
     pageFiles: []
@@ -6767,7 +6890,7 @@ ${content.slice(firstUseIdx)}`;
   if (notFoundFrameworks.length > 1) {
     logWarn(`Multiple frameworks define not-found convention files: ${notFoundFrameworks.join(", ")}. Only one will be used (priority: ${notFoundFrameworks[0]}). Remove not-found files from other frameworks to avoid ambiguity.`);
   }
-  const shouldIncludeHtmlAssets = !isIncremental || normalizedIncrementalFiles?.some((f) => f.includes("/html/") && (f.endsWith(".html") || f.endsWith(".css")));
+  const shouldIncludeHtmlAssets = !isIncremental || normalizedIncrementalFiles?.some((f) => f.includes("/html/") && (f.endsWith(".html") || isStylePath(f)));
   const reactEntries = isIncremental && reactIndexesPath && reactPagesPath ? filterToIncrementalEntries(allReactEntries, (entry) => {
     if (entry.startsWith(resolve17(reactIndexesPath))) {
       const pageName = basename7(entry, ".tsx");
@@ -6991,7 +7114,7 @@ ${content.slice(firstUseIdx)}`;
     naming: `[dir]/[name].[hash].[ext]`,
     outdir: buildPath,
     ...hmr ? { jsx: { development: true }, reactFastRefresh: true } : {},
-    plugins: [],
+    plugins: [stylePreprocessorPlugin],
     root: clientRoot,
     splitting: true,
     target: "browser",
@@ -7049,7 +7172,7 @@ ${content.slice(firstUseIdx)}`;
       format: "esm",
       naming: `[dir]/[name].[hash].[ext]`,
       outdir: serverOutDir,
-      plugins: [],
+      plugins: [stylePreprocessorPlugin],
       root: serverRoot,
       target: "bun",
       throw: false,
@@ -7065,6 +7188,7 @@ ${content.slice(firstUseIdx)}`;
       naming: `[dir]/[name].[hash].[ext]`,
       outdir: buildPath,
       plugins: [
+        stylePreprocessorPlugin,
         ...angularDir && !isDev ? [angularLinkerPlugin] : [],
         ...htmlScriptPlugin ? [htmlScriptPlugin] : []
       ],
@@ -7083,6 +7207,7 @@ ${content.slice(firstUseIdx)}`;
       naming: `[dir]/[name].[hash].[ext]`,
       outdir: buildPath,
       plugins: [
+        stylePreprocessorPlugin,
         ...angularDir && !isDev ? [angularLinkerPlugin] : []
       ],
       root: islandEntryResult.generatedRoot,
@@ -7097,6 +7222,7 @@ ${content.slice(firstUseIdx)}`;
       outdir: stylesDir ? join18(buildPath, basename7(stylesDir)) : buildPath,
       root: stylesDir || clientRoot,
       target: "browser",
+      plugins: [stylePreprocessorPlugin],
       throw: false
     }) : undefined,
     vueCssPaths.length > 0 ? bunBuild6({
@@ -7218,8 +7344,8 @@ ${content.slice(firstUseIdx)}`;
     manifest[toPascal(baseName)] = artifact.path;
   }
   const shouldCopyHtmx = !isIncremental || normalizedIncrementalFiles?.some((f) => f.includes("/htmx/") && f.endsWith(".html"));
-  const shouldUpdateHtmlAssetPaths = !isIncremental || normalizedIncrementalFiles?.some((f) => f.includes("/html/") && (f.endsWith(".html") || f.endsWith(".css")));
-  const shouldUpdateHtmxAssetPaths = !isIncremental || normalizedIncrementalFiles?.some((f) => f.includes("/htmx/") && (f.endsWith(".html") || f.endsWith(".css")));
+  const shouldUpdateHtmlAssetPaths = !isIncremental || normalizedIncrementalFiles?.some((f) => f.includes("/html/") && (f.endsWith(".html") || isStylePath(f)));
+  const shouldUpdateHtmxAssetPaths = !isIncremental || normalizedIncrementalFiles?.some((f) => f.includes("/htmx/") && (f.endsWith(".html") || isStylePath(f)));
   const hmrClientBundle = hmrClientBundlePromise ? await hmrClientBundlePromise : null;
   const injectHMRIntoHTMLFile = (filePath, framework) => {
     if (!hmrClientBundle)
@@ -7336,6 +7462,7 @@ var init_build = __esm(() => {
   init_scanEntryPoints();
   init_scanConventions();
   init_scanCssEntryPoints();
+  init_stylePreprocessor();
   init_optimizeHtmlImages();
   init_updateAssetPaths();
   init_buildHMRClient();
@@ -7704,7 +7831,7 @@ var init_clientManager = __esm(() => {
 
 // src/dev/pathUtils.ts
 import { readdirSync } from "fs";
-var detectFramework = (filePath, resolved) => {
+var STYLE_EXTENSION_PATTERN2, detectFramework = (filePath, resolved) => {
   if (shouldIgnorePath(filePath, resolved)) {
     return "ignored";
   }
@@ -7753,7 +7880,7 @@ var detectFramework = (filePath, resolved) => {
     return "angular";
   if (normalized.includes("/assets/"))
     return "assets";
-  if (normalized.endsWith(".css")) {
+  if (STYLE_EXTENSION_PATTERN2.test(normalized)) {
     if (normalized.includes("/vue/") || normalized.includes("/vue-"))
       return "vue";
     if (normalized.includes("/svelte/") || normalized.includes("/svelte-"))
@@ -7836,6 +7963,7 @@ var detectFramework = (filePath, resolved) => {
 };
 var init_pathUtils = __esm(() => {
   init_commonAncestor();
+  STYLE_EXTENSION_PATTERN2 = /\.(css|s[ac]ss|less)$/i;
 });
 
 // src/dev/fileWatcher.ts
@@ -8020,7 +8148,7 @@ var init_assetStore = __esm(() => {
 
 // src/islands/pageMetadata.ts
 import { readFileSync as readFileSync11 } from "fs";
-import { dirname as dirname10, resolve as resolve22 } from "path";
+import { dirname as dirname11, resolve as resolve22 } from "path";
 var pagePatterns, getPageDirs = (config) => [
   { dir: config.angularDirectory, framework: "angular" },
   { dir: config.reactDirectory, framework: "react" },
@@ -8039,7 +8167,7 @@ var pagePatterns, getPageDirs = (config) => [
     const source = definition.buildReference?.source;
     if (!source)
       continue;
-    const resolvedSource = source.startsWith("file://") ? new URL(source).pathname : resolve22(dirname10(buildInfo.resolvedRegistryPath), source);
+    const resolvedSource = source.startsWith("file://") ? new URL(source).pathname : resolve22(dirname11(buildInfo.resolvedRegistryPath), source);
     lookup.set(`${definition.framework}:${definition.component}`, resolve22(resolvedSource));
   }
   return lookup;
@@ -8214,7 +8342,7 @@ var buildModulePaths = (moduleKeys, manifest) => {
     case "htmx":
       break;
     case "assets":
-      if (normalizedFile.endsWith(".css")) {
+      if (isStylePath(normalizedFile)) {
         keys.push(`${pascalName}CSS`);
       }
       break;
@@ -8222,6 +8350,7 @@ var buildModulePaths = (moduleKeys, manifest) => {
   return keys;
 };
 var init_moduleMapper = __esm(() => {
+  init_stylePreprocessor();
   init_reactComponentClassifier();
 });
 
@@ -9111,14 +9240,14 @@ var init_streamingSlotWarningScope = __esm(() => {
 import { AsyncLocalStorage as AsyncLocalStorage3 } from "async_hooks";
 import { mkdir as mkdir4, symlink } from "fs/promises";
 import { tmpdir } from "os";
-import { basename as basename10, dirname as dirname11, join as join20, resolve as resolve25 } from "path";
+import { basename as basename10, dirname as dirname12, join as join20, resolve as resolve25 } from "path";
 var ssrDirty = false, lastSelector = "angular-page", isRecord7 = (value) => typeof value === "object" && value !== null, isAngularComponent = (value) => typeof value === "function", compilerImportPromise = null, ensureAngularCompiler = () => {
   if (!compilerImportPromise) {
     compilerImportPromise = import("@angular/compiler");
   }
   return compilerImportPromise;
 }, readAngularPageModule = (value) => isRecord7(value) ? value : null, resolveAngularSsrOutDir = () => process.env.ABSOLUTE_ANGULAR_SSR_OUTDIR ?? join20(tmpdir(), "absolutejs", "generated", "angular-ssr"), ensureAngularSsrNodeModules = async (outDir) => {
-  const outRoot = resolve25(dirname11(dirname11(outDir)));
+  const outRoot = resolve25(dirname12(dirname12(outDir)));
   const nodeModulesLink = join20(outRoot, "node_modules");
   if (process.env.ABSOLUTE_ANGULAR_SSR_OUTDIR) {
     return;
@@ -9440,14 +9569,14 @@ var init_pageHandler3 = __esm(() => {
 
 // src/vue/pageHandler.ts
 import { readdir as readdir4 } from "fs/promises";
-import { basename as basename11, dirname as dirname12 } from "path";
+import { basename as basename11, dirname as dirname13 } from "path";
 var ssrDirty4 = false, isRecord9 = (value) => typeof value === "object" && value !== null, isGenericVueComponent = (value) => typeof value === "function" || isRecord9(value), readHasIslands2 = (value) => {
   if (!isRecord9(value))
     return false;
   const hasIslands = value["__ABSOLUTE_PAGE_HAS_ISLANDS__"];
   return typeof hasIslands === "boolean" ? hasIslands : false;
 }, readDefaultExport2 = (value) => isRecord9(value) ? value.default : undefined, resolveCurrentGeneratedVueModulePath = async (pagePath) => {
-  const pageDirectory = dirname12(pagePath);
+  const pageDirectory = dirname13(pagePath);
   const expectedPrefix = `${basename11(pagePath, ".js").split(".")[0]}.`;
   try {
     const pageEntries = await readdir4(pageDirectory, {
@@ -9651,7 +9780,7 @@ __export(exports_moduleServer, {
   SRC_URL_PREFIX: () => SRC_URL_PREFIX
 });
 import { existsSync as existsSync20, readFileSync as readFileSync13, statSync as statSync2 } from "fs";
-import { basename as basename12, dirname as dirname13, extname as extname5, resolve as resolve26, relative as relative10 } from "path";
+import { basename as basename12, dirname as dirname14, extname as extname6, resolve as resolve26, relative as relative10 } from "path";
 var SRC_PREFIX = "/@src/", jsTranspiler2, tsTranspiler2, tsxTranspiler, TRANSPILABLE, ALL_EXPORTS_RE, STRING_CONTENTS_RE, preserveTypeExports = (originalSource, transpiled, valueExports) => {
   const codeOnly = originalSource.replace(STRING_CONTENTS_RE, '""');
   const allExports = [];
@@ -9700,9 +9829,9 @@ ${stubs}
 }, resolveRelativeImport = (relPath, fileDir, projectRoot, extensions) => {
   const absPath = resolve26(fileDir, relPath);
   const rel = relative10(projectRoot, absPath);
-  const extension = extname5(rel);
+  const extension = extname6(rel);
   let srcPath = RESOLVED_MODULE_EXTENSIONS.has(extension) ? rel : resolveRelativeExtension(rel, projectRoot, extensions);
-  if (extname5(srcPath) === ".svelte") {
+  if (extname6(srcPath) === ".svelte") {
     srcPath = relative10(projectRoot, resolveSvelteModulePath(resolve26(projectRoot, srcPath)));
   }
   return srcUrl(srcPath, projectRoot);
@@ -9736,7 +9865,7 @@ ${stubs}
   };
   result = result.replace(/^((?:import\s+[\s\S]+?\s+from|export\s+[\s\S]+?\s+from|import)\s*["'])([^"'./][^"']*)(["'])/gm, stubReplace);
   result = result.replace(/(import\s*\(\s*["'])([^"'./][^"']*)(["']\s*\))/g, stubReplace);
-  const fileDir = dirname13(filePath);
+  const fileDir = dirname14(filePath);
   result = result.replace(/(from\s*["'])(\.\.?\/[^"']+)(["'])/g, (_match, prefix, relPath, suffix) => `${prefix}${resolveRelativeImport(relPath, fileDir, projectRoot, IMPORT_EXTENSIONS)}${suffix}`);
   result = result.replace(/(import\s*\(\s*["'])(\.\.?\/[^"']+)(["']\s*\))/g, (_match, prefix, relPath, suffix) => `${prefix}${resolveRelativeImport(relPath, fileDir, projectRoot, IMPORT_EXTENSIONS)}${suffix}`);
   result = result.replace(/(import\s*["'])(\.\.?\/[^"']+)(["']\s*;?)/g, (_match, prefix, relPath, suffix) => `${prefix}${resolveRelativeImport(relPath, fileDir, projectRoot, SIDE_EFFECT_EXTENSIONS)}${suffix}`);
@@ -9800,7 +9929,7 @@ ${transpiled}`;
   return rewriteImports2(transpiled, filePath, projectRoot, rewriter);
 }, transformPlainFile = (filePath, projectRoot, rewriter, vueDir) => {
   const raw = readFileSync13(filePath, "utf-8");
-  const ext = extname5(filePath);
+  const ext = extname6(filePath);
   const isTS = ext === ".ts" || ext === ".tsx";
   const isTSX = ext === ".tsx" || ext === ".jsx";
   let transpiler4 = jsTranspiler2;
@@ -10190,7 +10319,7 @@ export default {};
   return jsResponse(`var s=document.createElement('style');s.textContent=\`${escaped}\`;s.dataset.svelteHmr=${JSON.stringify(cssCheckPath)};var p=document.querySelector('style[data-svelte-hmr="${cssCheckPath}"]');if(p)p.remove();document.head.appendChild(s);`);
 }, resolveSourcePath = (relPath, projectRoot) => {
   const filePath = resolve26(projectRoot, relPath);
-  const ext = extname5(filePath);
+  const ext = extname6(filePath);
   if (ext === ".svelte")
     return { ext, filePath: resolveSvelteModulePath(filePath) };
   if (ext)
@@ -10400,7 +10529,7 @@ var init_simpleHTMXHMR = () => {};
 
 // src/dev/rebuildTrigger.ts
 import { existsSync as existsSync21 } from "fs";
-import { basename as basename13, dirname as dirname14, relative as relative11, resolve as resolve29 } from "path";
+import { basename as basename13, dirname as dirname15, relative as relative11, resolve as resolve29 } from "path";
 var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseErrorLocationFromMessage = (msg) => {
   const pathLineCol = msg.match(/^([^\s:]+):(\d+)(?::(\d+))?/);
   if (pathLineCol) {
@@ -10708,7 +10837,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
     format: "esm",
     naming: "[dir]/[name].[hash].[ext]",
     outdir: buildDir,
-    plugins: [],
+    plugins: [stylePreprocessorPlugin],
     root: clientRoot,
     target: "browser",
     throw: false
@@ -10841,7 +10970,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
     jsx: { development: true },
     naming: "[dir]/[name].[hash].[ext]",
     outdir: buildDir,
-    plugins: [],
+    plugins: [stylePreprocessorPlugin],
     reactFastRefresh: true,
     root: clientRoot,
     splitting: true,
@@ -11033,6 +11162,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
         format: "esm",
         naming: "[dir]/[name].[hash].[ext]",
         outdir: serverOutDir,
+        plugins: [stylePreprocessorPlugin],
         root: serverRoot,
         target: "bun",
         throw: false
@@ -11042,6 +11172,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
         format: "esm",
         naming: "[dir]/[name].[hash].[ext]",
         outdir: buildDir,
+        plugins: [stylePreprocessorPlugin],
         root: clientRoot,
         target: "browser",
         throw: false
@@ -11162,7 +11293,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
   const [primarySource] = sourceFiles;
   try {
     const hasComponentChanges = reactFiles.some((file3) => file3.endsWith(".tsx") || file3.endsWith(".ts") || file3.endsWith(".jsx"));
-    const hasCSSChanges = reactFiles.some((file3) => file3.endsWith(".css"));
+    const hasCSSChanges = reactFiles.some(isStylePath);
     logHmrUpdate(primarySource ?? reactFiles[0] ?? "", "react", duration);
     broadcastToClients(state, {
       data: {
@@ -11204,7 +11335,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
   if (!buildReference?.source) {
     return;
   }
-  const sourcePath = buildReference.source.startsWith("file://") ? new URL(buildReference.source).pathname : resolve29(dirname14(buildInfo.resolvedRegistryPath), buildReference.source);
+  const sourcePath = buildReference.source.startsWith("file://") ? new URL(buildReference.source).pathname : resolve29(dirname15(buildInfo.resolvedRegistryPath), buildReference.source);
   islandFiles.add(resolve29(sourcePath));
 }, resolveIslandSourceFiles = async (config) => {
   const registryPath = config.islands?.registry;
@@ -11309,7 +11440,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
   if (!cssFile) {
     return;
   }
-  const cssBaseName = basename13(cssFile, ".css");
+  const cssBaseName = basename13(getStyleBaseName(cssFile));
   const cssPascalName = toPascal(cssBaseName);
   const cssKey = `${cssPascalName}CSS`;
   const cssUrl = manifest[cssKey] || null;
@@ -11391,7 +11522,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
     return;
   }
   const vueComponentFiles = vueFiles.filter((file3) => file3.endsWith(".vue"));
-  const vueCssFiles = vueFiles.filter((file3) => file3.endsWith(".css"));
+  const vueCssFiles = vueFiles.filter(isStylePath);
   const isCssOnlyChange = vueComponentFiles.length === 0 && vueCssFiles.length > 0;
   const vuePageFiles = vueFiles.filter((file3) => file3.replace(/\\/g, "/").includes("/pages/"));
   const pagesToUpdate = vuePageFiles.length > 0 ? vuePageFiles : vueComponentFiles;
@@ -11406,7 +11537,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
   if (!cssFile) {
     return;
   }
-  const cssBaseName = basename13(cssFile, ".css");
+  const cssBaseName = basename13(getStyleBaseName(cssFile));
   const cssPascalName = toPascal(cssBaseName);
   const cssKey = `${cssPascalName}CSS`;
   const cssUrl = manifest[cssKey] || null;
@@ -11457,7 +11588,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
     return;
   }
   const svelteComponentFiles = svelteFiles.filter((file3) => file3.endsWith(".svelte"));
-  const svelteCssFiles = svelteFiles.filter((file3) => file3.endsWith(".css"));
+  const svelteCssFiles = svelteFiles.filter(isStylePath);
   const isCssOnlyChange = svelteComponentFiles.length === 0 && svelteCssFiles.length > 0;
   const sveltePageFiles = svelteFiles.filter((file3) => file3.replace(/\\/g, "/").includes("/pages/"));
   const pagesToUpdate = sveltePageFiles.length > 0 ? sveltePageFiles : svelteComponentFiles;
@@ -11486,7 +11617,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
   if (!cssFile) {
     return;
   }
-  const cssBaseName = basename13(cssFile, ".css");
+  const cssBaseName = basename13(getStyleBaseName(cssFile));
   const cssPascalName = toPascal(cssBaseName);
   const cssKey = `${cssPascalName}CSS`;
   const cssUrl = manifest[cssKey] || null;
@@ -11535,8 +11666,8 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
   if (angularFiles.length === 0) {
     return;
   }
-  const angularCssFiles = angularFiles.filter((file3) => file3.endsWith(".css"));
-  const isCssOnlyChange = angularFiles.every((file3) => file3.endsWith(".css")) && angularCssFiles.length > 0;
+  const angularCssFiles = angularFiles.filter(isStylePath);
+  const isCssOnlyChange = angularFiles.every(isStylePath) && angularCssFiles.length > 0;
   const angularPageFiles = angularFiles.filter((file3) => file3.replace(/\\/g, "/").includes("/pages/"));
   let pagesToUpdate = angularPageFiles;
   if (pagesToUpdate.length === 0 && state.dependencyGraph) {
@@ -11933,6 +12064,7 @@ var init_rebuildTrigger = __esm(() => {
   init_assetStore();
   init_pathUtils();
   init_webSocket();
+  init_stylePreprocessor();
   init_pageHandler();
   init_pageHandler2();
   init_pageHandler3();
@@ -12107,7 +12239,7 @@ __export(exports_devBuild, {
 });
 import { readdir as readdir5 } from "fs/promises";
 import { statSync as statSync3 } from "fs";
-import { dirname as dirname15, resolve as resolve30 } from "path";
+import { dirname as dirname16, resolve as resolve30 } from "path";
 var FRAMEWORK_DIR_KEYS, collectDepVendorSourceDirs = (config) => {
   const configuredDirs = [
     config.reactDirectory,
@@ -12117,7 +12249,7 @@ var FRAMEWORK_DIR_KEYS, collectDepVendorSourceDirs = (config) => {
     config.htmlDirectory,
     config.htmxDirectory
   ].filter((dir) => Boolean(dir));
-  return Array.from(new Set(configuredDirs.flatMap((dir) => [dir, dirname15(dir)])));
+  return Array.from(new Set(configuredDirs.flatMap((dir) => [dir, dirname16(dir)])));
 }, parseDirectoryConfig = (source) => {
   const config = {};
   const dirPattern = /(\w+Directory)\s*:\s*['"]([^'"]+)['"]/g;
@@ -12419,5 +12551,5 @@ export {
   build
 };
 
-//# debugId=DF5146A94CD1A84F64756E2164756E21
+//# debugId=A12D2C8CF2A14BB064756E2164756E21
 //# sourceMappingURL=build.js.map