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

package/dist/index.js

@@ -2501,11 +2501,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 dirname2, extname } 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: [dirname2(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: [dirname2(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 } from "fs/promises";
-import { basename as basename2, dirname as dirname2, extname, join as join3, relative, resolve as resolve4 } from "path";
+import { basename as basename2, dirname as dirname3, extname as extname2, join as join3, relative, resolve as resolve4 } from "path";
 var serverCacheRoot, compiledModuleCache, originalSourcePathCache, transpiler, ensureRelativeImportPath = (from, target) => {
-  const importPath = relative(dirname2(from), target).replace(/\\/g, "/");
+  const importPath = relative(dirname3(from), target).replace(/\\/g, "/");
   return importPath.startsWith(".") ? importPath : `./${importPath}`;
 }, processDirectoryEntries = (entries, dir, targetFileName, stack) => {
   for (const entry of entries) {
@@ -2551,7 +2660,7 @@ var serverCacheRoot, compiledModuleCache, originalSourcePathCache, transpiler, e
   if (!spec.startsWith(".")) {
     return null;
   }
-  const basePath = resolve4(dirname2(from), spec);
+  const basePath = resolve4(dirname3(from), spec);
   const candidates = [
     basePath,
     `${basePath}.ts`,
@@ -2583,8 +2692,8 @@ var serverCacheRoot, compiledModuleCache, originalSourcePathCache, transpiler, e
   if (!spec.startsWith(".")) {
     return null;
   }
-  const explicitPath = resolve4(dirname2(from), spec);
-  if (extname(explicitPath) === ".svelte") {
+  const explicitPath = resolve4(dirname3(from), spec);
+  if (extname2(explicitPath) === ".svelte") {
     return explicitPath;
   }
   const candidate = `${explicitPath}.svelte`;
@@ -2612,7 +2721,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)));
@@ -2662,7 +2771,7 @@ var serverCacheRoot, compiledModuleCache, originalSourcePathCache, transpiler, e
     compiledCode = compiledCode.replaceAll(spec, resolvedModuleImport);
   }
   const compiledModulePath = getCachedModulePath(sourcePath);
-  await mkdir(dirname2(compiledModulePath), { recursive: true });
+  await mkdir(dirname3(compiledModulePath), { recursive: true });
   await writeIfChanged(compiledModulePath, compiledCode);
   compiledModuleCache.set(sourcePath, compiledModulePath);
   return compiledModulePath;
@@ -2671,6 +2780,7 @@ var init_svelteServerModule = __esm(() => {
   init_resolvePackageImport();
   init_lowerIslandSyntax();
   init_lowerAwaitSlotSyntax();
+  init_stylePreprocessor();
   serverCacheRoot = join3(process.cwd(), ".absolutejs", "islands", "svelte");
   compiledModuleCache = new Map;
   originalSourcePathCache = new Map;
@@ -2837,7 +2947,7 @@ import {
   rmSync,
   writeFileSync as writeFileSync2
 } from "fs";
-import { dirname as dirname3, extname as extname2, join as join4, relative as relative2, resolve as resolve5 } from "path";
+import { dirname as dirname4, extname as extname3, join as join4, relative as relative2, resolve as resolve5 } from "path";
 import ts from "typescript";
 var frameworks, isRecord4 = (value) => typeof value === "object" && value !== null, resolveRegistryExport = (mod) => {
   if (isRecord4(mod.islandRegistry))
@@ -2846,13 +2956,13 @@ var frameworks, isRecord4 = (value) => typeof value === "object" && value !== nu
     return mod.default;
   throw new Error("Island registry module must export `islandRegistry` or a default registry object.");
 }, normalizeImportPath = (wrapperPath, targetPath) => {
-  const importPath = relative2(dirname3(wrapperPath), targetPath).replace(/\\/g, "/");
+  const importPath = relative2(dirname4(wrapperPath), targetPath).replace(/\\/g, "/");
   return importPath.startsWith(".") ? importPath : `./${importPath}`;
 }, isIdentifier = (value) => /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(value), resolveIslandSourcePath = (registryPath, sourcePath) => {
   if (sourcePath.startsWith("file://")) {
     return new URL(sourcePath).pathname;
   }
-  return resolve5(dirname3(registryPath), sourcePath);
+  return resolve5(dirname4(registryPath), sourcePath);
 }, getObjectPropertyName = (name) => {
   if (ts.isIdentifier(name) || ts.isStringLiteral(name)) {
     return name.text;
@@ -2966,7 +3076,7 @@ export default component;
     return /\.svelte(?:\.(?:ts|js))?$/.test(sourcePath);
   }
   if (framework === "vue") {
-    return extname2(sourcePath) === ".vue";
+    return extname3(sourcePath) === ".vue";
   }
   if (framework === "angular") {
     return /\.(?:ts|js|tsx|jsx|mjs|cjs)$/.test(sourcePath);
@@ -3002,7 +3112,7 @@ export default component;
     const source = buildReference ? resolveIslandSourcePath(buildInfo.resolvedRegistryPath, buildReference.source) : null;
     const compiledSourcePath = source && shouldUseCompiledClientPath(definition.framework, source) ? clientPathMaps[definition.framework]?.get(source) : undefined;
     const entrySource = source && (compiledSourcePath || !shouldUseCompiledClientPath(definition.framework, source)) ? createDirectEntrySource(entryPath, compiledSourcePath ?? source, compiledSourcePath ? undefined : buildReference?.export) : createRegistryEntrySource(entryPath, buildInfo.resolvedRegistryPath, buildInfo.hasNamedExport, definition.framework, definition.component);
-    mkdirSync(dirname3(entryPath), { recursive: true });
+    mkdirSync(dirname4(entryPath), { recursive: true });
     writeFileSync2(entryPath, entrySource);
     entries.push({
       component: definition.component,
@@ -3362,7 +3472,7 @@ var init_sourceMetadata = __esm(() => {
 
 // src/islands/pageMetadata.ts
 import { readFileSync as readFileSync4 } from "fs";
-import { dirname as dirname4, resolve as resolve8 } from "path";
+import { dirname as dirname5, resolve as resolve8 } from "path";
 var pagePatterns, getPageDirs = (config) => [
   { dir: config.angularDirectory, framework: "angular" },
   { dir: config.reactDirectory, framework: "react" },
@@ -3381,7 +3491,7 @@ var pagePatterns, getPageDirs = (config) => [
     const source = definition.buildReference?.source;
     if (!source)
       continue;
-    const resolvedSource = source.startsWith("file://") ? new URL(source).pathname : resolve8(dirname4(buildInfo.resolvedRegistryPath), source);
+    const resolvedSource = source.startsWith("file://") ? new URL(source).pathname : resolve8(dirname5(buildInfo.resolvedRegistryPath), source);
     lookup.set(`${definition.framework}:${definition.component}`, resolve8(resolvedSource));
   }
   return lookup;
@@ -3460,7 +3570,7 @@ var exports_generateManifest = {};
 __export(exports_generateManifest, {
   generateManifest: () => generateManifest
 });
-import { extname as extname3 } from "path";
+import { extname as extname4 } from "path";
 var getManifestKey = (folder, pascalName, isClientComponent, isReact, isVue, isSvelte, isAngular) => {
   if (folder === "indexes")
     return `${pascalName}Index`;
@@ -3496,7 +3606,7 @@ var getManifestKey = (folder, pascalName, isClientComponent, isReact, isVue, isS
   if (!baseName)
     return manifest;
   const pascalName = toPascal(baseName);
-  const ext = extname3(fileWithHash);
+  const ext = extname4(fileWithHash);
   const islandIndex = segments.findIndex((seg) => seg === "islands");
   if (ext === ".css") {
     const cssKey = getCssKey(pascalName, segments);
@@ -3989,16 +4099,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 file2 of glob.scan({ absolute: true, cwd: dir })) {
     const normalized = normalizePath(file2);
-    if (ignore?.some((pattern) => normalized.includes(pattern)))
+    if (isStyleModulePath(normalized) || ignore?.some((pattern) => normalized.includes(pattern)))
       continue;
     entryPaths.push(file2);
   }
   return entryPaths;
 };
-var init_scanCssEntryPoints = () => {};
+var init_scanCssEntryPoints = __esm(() => {
+  init_stylePreprocessor();
+});
 
 // src/utils/imageProcessing.ts
 import { existsSync as existsSync8, mkdirSync as mkdirSync3, readFileSync as readFileSync5, writeFileSync as writeFileSync4 } from "fs";
@@ -4170,7 +4282,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);
@@ -4216,7 +4328,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));
@@ -4255,7 +4367,7 @@ var init_telemetry = __esm(() => {
 // src/cli/telemetryEvent.ts
 import { existsSync as existsSync10, readFileSync as readFileSync7 } from "fs";
 import { arch, platform } from "os";
-import { dirname as dirname5, join as join8, parse } from "path";
+import { dirname as dirname6, join as join8, parse } from "path";
 var checkCandidate = (candidate) => {
   if (!existsSync10(candidate)) {
     return null;
@@ -4280,7 +4392,7 @@ var checkCandidate = (candidate) => {
     if (version) {
       return version;
     }
-    dir = dirname5(dir);
+    dir = dirname6(dir);
   }
   return "unknown";
 }, sendTelemetryEvent = (event, payload) => {
@@ -4318,7 +4430,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;
@@ -4353,7 +4465,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");
   });
@@ -4568,7 +4680,7 @@ var devVendorPaths = null, getDevVendorPaths = () => devVendorPaths, setDevVendo
 
 // src/build/angularLinkerPlugin.ts
 import { existsSync as existsSync12, mkdirSync as mkdirSync5, readFileSync as readFileSync8, writeFileSync as writeFileSync6 } from "fs";
-import { dirname as dirname6, join as join9, relative as relative4, resolve as resolve13 } from "path";
+import { dirname as dirname7, join as join9, relative as relative4, resolve as resolve13 } from "path";
 import { createHash } from "crypto";
 var CACHE_DIR, angularLinkerPlugin;
 var init_angularLinkerPlugin = __esm(() => {
@@ -4608,7 +4720,7 @@ var init_angularLinkerPlugin = __esm(() => {
           const mod = await import(linkerSpecifier);
           linkerPlugin = mod.createEs2015LinkerPlugin({
             fileSystem: {
-              dirname: dirname6,
+              dirname: dirname7,
               exists: existsSync12,
               readFile: readFileSync8,
               relative: relative4,
@@ -4790,10 +4902,10 @@ __export(exports_compileSvelte, {
 import { existsSync as existsSync13 } from "fs";
 import { mkdir as mkdir2, stat } from "fs/promises";
 import {
-  dirname as dirname7,
+  dirname as dirname8,
   join as join11,
   basename as basename5,
-  extname as extname4,
+  extname as extname5,
   resolve as resolve16,
   relative as relative6,
   sep as sep2
@@ -4839,7 +4951,7 @@ var resolveDevClientDir2 = () => {
 }, resolveRelativeModule2 = async (spec, from) => {
   if (!spec.startsWith("."))
     return null;
-  const basePath = resolve16(dirname7(from), spec);
+  const basePath = resolve16(dirname8(from), spec);
   const candidates = [
     basePath,
     `${basePath}.ts`,
@@ -4866,7 +4978,7 @@ var resolveDevClientDir2 = () => {
     const resolved = resolvePackageImport(spec);
     return resolved && /\.svelte(\.(?:ts|js))?$/.test(resolved) ? resolved : null;
   }
-  const basePath = resolve16(dirname7(from), spec);
+  const basePath = resolve16(dirname8(from), spec);
   const explicit = /\.(svelte|svelte\.(?:ts|js))$/.test(basePath);
   if (!explicit) {
     const extensions = [".svelte", ".svelte.ts", ".svelte.js"];
@@ -4921,12 +5033,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 = dirname7(relative6(svelteRoot, src)).replace(/\\/g, "/");
-    const relDir = rawRel.startsWith("..") ? `_ext/${relative6(process.cwd(), dirname7(src)).replace(/\\/g, "/")}` : rawRel;
+    const rawRel = dirname8(relative6(svelteRoot, src)).replace(/\\/g, "/");
+    const relDir = rawRel.startsWith("..") ? `_ext/${relative6(process.cwd(), dirname8(src)).replace(/\\/g, "/")}` : rawRel;
     const baseName = basename5(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)));
@@ -4935,8 +5048,8 @@ var resolveDevClientDir2 = () => {
     const childBuilt = await Promise.all(childSources.map((child) => build2(child)));
     const hasAwaitSlotFromChildren = childBuilt.some((child) => child.hasAwaitSlot);
     const externalRewrites = new Map;
-    const ssrOutputDir = dirname7(join11(serverDir, relDir, `${baseName}.js`));
-    const clientOutputDir = dirname7(join11(clientDir, relDir, `${baseName}.js`));
+    const ssrOutputDir = dirname8(join11(serverDir, relDir, `${baseName}.js`));
+    const clientOutputDir = dirname8(join11(clientDir, relDir, `${baseName}.js`));
     for (let idx = 0;idx < importPaths.length; idx++) {
       const rawSpec = importPaths[idx];
       if (!rawSpec)
@@ -5005,8 +5118,8 @@ var resolveDevClientDir2 = () => {
     const ssrPath = join11(serverDir, relDir, `${baseName}.js`);
     const clientPath = join11(clientDir, relDir, `${baseName}.js`);
     await Promise.all([
-      mkdir2(dirname7(ssrPath), { recursive: true }),
-      mkdir2(dirname7(clientPath), { recursive: true })
+      mkdir2(dirname8(ssrPath), { recursive: true }),
+      mkdir2(dirname8(clientPath), { recursive: true })
     ]);
     if (isModule) {
       const bundle = rewriteExternalImports(generate("client"), "client");
@@ -5033,10 +5146,10 @@ var resolveDevClientDir2 = () => {
   };
   const roots = await Promise.all(entryPoints.map(build2));
   await Promise.all(roots.map(async ({ client: client2, hasAwaitSlot }) => {
-    const relClientDir = dirname7(relative6(clientDir, client2));
-    const name = basename5(client2, extname4(client2));
+    const relClientDir = dirname8(relative6(clientDir, client2));
+    const name = basename5(client2, extname5(client2));
     const indexPath = join11(indexDir, relClientDir, `${name}.js`);
-    const importRaw = relative6(dirname7(indexPath), client2).split(sep2).join("/");
+    const importRaw = relative6(dirname8(indexPath), client2).split(sep2).join("/");
     const importPath = importRaw.startsWith(".") || importRaw.startsWith("/") ? importRaw : `./${importRaw}`;
     const hmrImports = isDev2 ? `window.__HMR_FRAMEWORK__ = "svelte";
 import "${hmrClientPath3}";
@@ -5107,13 +5220,13 @@ if (typeof window !== "undefined") {
     setTimeout(releaseStreamingSlots, 0);
   }
 }`;
-    await mkdir2(dirname7(indexPath), { recursive: true });
+    await mkdir2(dirname8(indexPath), { recursive: true });
     return write(indexPath, bootstrap);
   }));
   return {
     svelteClientPaths: roots.map(({ client: client2 }) => client2),
     svelteIndexPaths: roots.map(({ client: client2 }) => {
-      const rel = dirname7(relative6(clientDir, client2));
+      const rel = dirname8(relative6(clientDir, client2));
       return join11(indexDir, rel, basename5(client2));
     }),
     svelteServerPaths: roots.map(({ ssr }) => ssr)
@@ -5123,6 +5236,7 @@ var init_compileSvelte = __esm(() => {
   init_constants();
   init_resolvePackageImport();
   init_sourceMetadata();
+  init_stylePreprocessor();
   init_lowerIslandSyntax();
   init_lowerAwaitSlotSyntax();
   init_renderToReadableStream();
@@ -5144,7 +5258,7 @@ __export(exports_compileVue, {
 });
 import { existsSync as existsSync14 } from "fs";
 import { mkdir as mkdir3 } from "fs/promises";
-import { basename as basename6, dirname as dirname8, join as join12, relative as relative7, resolve as resolve17 } from "path";
+import { basename as basename6, dirname as dirname9, join as join12, relative as relative7, resolve as resolve17 } from "path";
 var {file: file3, write: write2, Transpiler: Transpiler2 } = globalThis.Bun;
 var resolveDevClientDir3 = () => {
   const projectRoot = process.cwd();
@@ -5255,7 +5369,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(resolve17(dirname8(sourceFilePath), relativeChildPath), outputDirs, cacheMap, false, vueRootDir, compiler)),
+    ...childComponentPaths.map((relativeChildPath) => compileVueFile(resolve17(dirname9(sourceFilePath), relativeChildPath), outputDirs, cacheMap, false, vueRootDir, compiler)),
     ...packageComponentPaths.map(([, absolutePath]) => compileVueFile(absolutePath, outputDirs, cacheMap, false, vueRootDir, compiler))
   ]);
   const hasScript = descriptor.script || descriptor.scriptSetup;
@@ -5287,13 +5401,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)
@@ -5301,7 +5415,7 @@ var resolveDevClientDir3 = () => {
   let cssOutputPaths = [];
   if (isEntryPoint && allCss.length) {
     const cssOutputFile = join12(outputDirs.css, `${toKebab(fileBaseName)}-compiled.css`);
-    await mkdir3(dirname8(cssOutputFile), { recursive: true });
+    await mkdir3(dirname9(cssOutputFile), { recursive: true });
     await write2(cssOutputFile, allCss.join(`
 `));
     cssOutputPaths = [cssOutputFile];
@@ -5333,7 +5447,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 = dirname8(relativeFilePath);
+  const relDir = dirname9(relativeFilePath);
   const relDepth = relDir === "." ? 0 : relDir.split("/").length;
   const adjustImports = (code) => code.replace(/(from\s+['"])(\.\.\/(?:\.\.\/)*)/g, (_, prefix, dots) => {
     const upCount = dots.split("/").length - 1;
@@ -5345,15 +5459,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(dirname8(outputPath), targetPath).replace(/\\/g, "/");
+      let rel = relative7(dirname9(outputPath), targetPath).replace(/\\/g, "/");
       if (!rel.startsWith("."))
         rel = `./${rel}`;
       result2 = result2.replaceAll(bareImport, rel);
     }
     return result2;
   };
-  await mkdir3(dirname8(clientOutputPath), { recursive: true });
-  await mkdir3(dirname8(serverOutputPath), { recursive: true });
+  await mkdir3(dirname9(clientOutputPath), { recursive: true });
+  await mkdir3(dirname9(serverOutputPath), { recursive: true });
   await write2(clientOutputPath, rewritePackageImports(adjustImports(clientCode), clientOutputPath, "client"));
   await write2(serverOutputPath, rewritePackageImports(adjustImports(serverCode), serverOutputPath, "server"));
   const result = {
@@ -5363,7 +5477,7 @@ if (typeof __VUE_HMR_RUNTIME__ !== 'undefined') {
     hmrId,
     serverPath: serverOutputPath,
     tsHelperPaths: [
-      ...helperModulePaths.map((helper) => resolve17(dirname8(sourceFilePath), helper.endsWith(".ts") ? helper : `${helper}.ts`)),
+      ...helperModulePaths.map((helper) => resolve17(dirname9(sourceFilePath), helper.endsWith(".ts") ? helper : `${helper}.ts`)),
       ...childBuildResults.flatMap((child) => child.tsHelperPaths)
     ]
   };
@@ -5395,14 +5509,14 @@ if (typeof __VUE_HMR_RUNTIME__ !== 'undefined') {
     const entryBaseName = basename6(entryPath, ".vue");
     const indexOutputFile = join12(indexOutputDir, `${entryBaseName}.js`);
     const clientOutputFile = join12(clientOutputDir, relative7(vueRootDir, entryPath).replace(/\\/g, "/").replace(/\.vue$/, ".js"));
-    await mkdir3(dirname8(indexOutputFile), { recursive: true });
+    await mkdir3(dirname9(indexOutputFile), { recursive: true });
     const vueHmrImports = isDev2 ? [
       `window.__HMR_FRAMEWORK__ = "vue";`,
       `import "${hmrClientPath4}";`
     ] : [];
     await write2(indexOutputFile, [
       ...vueHmrImports,
-      `import Comp from "${relative7(dirname8(indexOutputFile), clientOutputFile).replace(/\\/g, "/")}";`,
+      `import Comp from "${relative7(dirname9(indexOutputFile), clientOutputFile).replace(/\\/g, "/")}";`,
       'import { createSSRApp, createApp } from "vue";',
       "",
       "// HMR State Preservation: Check for preserved state from HMR",
@@ -5525,8 +5639,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(dirname8(outClientPath), { recursive: true });
-    await mkdir3(dirname8(outServerPath), { recursive: true });
+    await mkdir3(dirname9(outClientPath), { recursive: true });
+    await mkdir3(dirname9(outServerPath), { recursive: true });
     await write2(outClientPath, transpiledCode);
     await write2(outServerPath, transpiledCode);
   }));
@@ -5542,6 +5656,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" });
@@ -6023,7 +6138,7 @@ __export(exports_compileAngular, {
   compileAngular: () => compileAngular
 });
 import { existsSync as existsSync15, readFileSync as readFileSync9, promises as fs } from "fs";
-import { join as join13, basename as basename7, sep as sep3, dirname as dirname9, resolve as resolve18, relative as relative8 } from "path";
+import { join as join13, basename as basename7, sep as sep3, dirname as dirname10, resolve as resolve18, relative as relative8 } from "path";
 import ts2 from "typescript";
 import { createHash as createHash2 } from "crypto";
 var computeConfigHash = () => {
@@ -6087,11 +6202,7 @@ ${registrations}
   return fileName;
 }, compileAngularFile = async (inputPath, outDir) => {
   const islandMetadataExports = buildIslandMetadataExports(readFileSync9(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;
@@ -6104,7 +6215,7 @@ ${registrations}
     cached.lastUsed = Date.now();
   } else {
     const tsPath = __require.resolve("typescript");
-    const tsRootDir = dirname9(tsPath);
+    const tsRootDir = dirname10(tsPath);
     tsLibDir = tsRootDir.endsWith("lib") ? tsRootDir : resolve18(tsRootDir, "lib");
     const config = readConfiguration("./tsconfig.json");
     options = {
@@ -6170,7 +6281,7 @@ ${registrations}
     const cached2 = aotTransformCache.get(resolvedPath);
     if (cached2 !== undefined)
       return cached2;
-    const transformed = inlineTemplateAndLowerDeferSync(source, dirname9(resolvedPath)).source;
+    const transformed = inlineTemplateAndLowerDeferSync(source, dirname10(resolvedPath)).source;
     aotTransformCache.set(resolvedPath, transformed);
     return transformed;
   };
@@ -6212,7 +6323,7 @@ ${registrations}
     processedContent += islandMetadataExports;
     return { content: processedContent, target };
   });
-  await Promise.all(entries.map(({ target }) => fs.mkdir(dirname9(target), { recursive: true })));
+  await Promise.all(entries.map(({ target }) => fs.mkdir(dirname10(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 = () => {
@@ -6347,7 +6458,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*['"]([^'"]+)['"]/);
@@ -6501,9 +6612,9 @@ ${fields}
     if (!existsSync15(actualPath))
       return;
     let sourceCode = await fs.readFile(actualPath, "utf-8");
-    const inlined = await inlineResources(sourceCode, dirname9(actualPath));
-    sourceCode = inlineTemplateAndLowerDeferSync(inlined.source, dirname9(actualPath)).source;
-    const inputDir = dirname9(actualPath);
+    const inlined = await inlineResources(sourceCode, dirname10(actualPath));
+    sourceCode = inlineTemplateAndLowerDeferSync(inlined.source, dirname10(actualPath)).source;
+    const inputDir = dirname10(actualPath);
     const relativeDir = inputDir.startsWith(baseDir) ? inputDir.substring(baseDir.length + 1) : inputDir;
     const fileBase = basename7(actualPath).replace(/\.ts$/, ".js");
     const targetDir = join13(outDir, relativeDir);
@@ -6531,7 +6642,7 @@ ${fields}
       allOutputs.push(targetPath);
       jitContentCache.set(cacheKey2, contentHash);
     }
-    const inputDirForResolve = dirname9(actualPath);
+    const inputDirForResolve = dirname10(actualPath);
     await Promise.all(localImports.map((imp) => {
       const importPath = resolve18(inputDirForResolve, imp);
       return transpileFile(importPath);
@@ -6594,7 +6705,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';`)) {
@@ -6751,8 +6866,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);
@@ -6767,6 +6889,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, "/");
@@ -7104,7 +7227,7 @@ import {
   statSync,
   writeFileSync as writeFileSync7
 } from "fs";
-import { basename as basename8, dirname as dirname10, join as join18, relative as relative9, resolve as resolve20 } from "path";
+import { basename as basename8, dirname as dirname11, join as join18, relative as relative9, resolve as resolve20 } from "path";
 import { cwd, env as env3, exit } from "process";
 var {build: bunBuild6, Glob: Glob6 } = globalThis.Bun;
 var isDev2, collectConventionSourceFiles = (entry) => {
@@ -7484,7 +7607,7 @@ ${content.slice(firstUseIdx)}`;
     htmlDir,
     vueDir,
     angularDir,
-    islandBootstrapPath && dirname10(islandBootstrapPath)
+    islandBootstrapPath && dirname11(islandBootstrapPath)
   ].filter((dir) => Boolean(dir));
   const clientRoot = isSingle ? sourceClientRoots[0] ?? projectRoot : commonAncestor(sourceClientRoots, projectRoot);
   const serverDirMap = [];
@@ -7552,7 +7675,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((file4) => file4.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: []
@@ -7592,7 +7715,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(resolve20(reactIndexesPath))) {
       const pageName = basename8(entry, ".tsx");
@@ -7816,7 +7939,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",
@@ -7874,7 +7997,7 @@ ${content.slice(firstUseIdx)}`;
       format: "esm",
       naming: `[dir]/[name].[hash].[ext]`,
       outdir: serverOutDir,
-      plugins: [],
+      plugins: [stylePreprocessorPlugin],
       root: serverRoot,
       target: "bun",
       throw: false,
@@ -7890,6 +8013,7 @@ ${content.slice(firstUseIdx)}`;
       naming: `[dir]/[name].[hash].[ext]`,
       outdir: buildPath,
       plugins: [
+        stylePreprocessorPlugin,
         ...angularDir && !isDev2 ? [angularLinkerPlugin] : [],
         ...htmlScriptPlugin ? [htmlScriptPlugin] : []
       ],
@@ -7908,6 +8032,7 @@ ${content.slice(firstUseIdx)}`;
       naming: `[dir]/[name].[hash].[ext]`,
       outdir: buildPath,
       plugins: [
+        stylePreprocessorPlugin,
         ...angularDir && !isDev2 ? [angularLinkerPlugin] : []
       ],
       root: islandEntryResult.generatedRoot,
@@ -7922,6 +8047,7 @@ ${content.slice(firstUseIdx)}`;
       outdir: stylesDir ? join18(buildPath, basename8(stylesDir)) : buildPath,
       root: stylesDir || clientRoot,
       target: "browser",
+      plugins: [stylePreprocessorPlugin],
       throw: false
     }) : undefined,
     vueCssPaths.length > 0 ? bunBuild6({
@@ -8043,8 +8169,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)
@@ -8161,6 +8287,7 @@ var init_build = __esm(() => {
   init_scanEntryPoints();
   init_scanConventions();
   init_scanCssEntryPoints();
+  init_stylePreprocessor();
   init_optimizeHtmlImages();
   init_updateAssetPaths();
   init_buildHMRClient();
@@ -8529,7 +8656,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";
   }
@@ -8578,7 +8705,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-"))
@@ -8661,6 +8788,7 @@ var detectFramework = (filePath, resolved) => {
 };
 var init_pathUtils = __esm(() => {
   init_commonAncestor();
+  STYLE_EXTENSION_PATTERN2 = /\.(css|s[ac]ss|less)$/i;
 });
 
 // src/dev/fileWatcher.ts
@@ -8967,7 +9095,7 @@ var buildModulePaths = (moduleKeys, manifest) => {
     case "htmx":
       break;
     case "assets":
-      if (normalizedFile.endsWith(".css")) {
+      if (isStylePath(normalizedFile)) {
         keys.push(`${pascalName}CSS`);
       }
       break;
@@ -8975,6 +9103,7 @@ var buildModulePaths = (moduleKeys, manifest) => {
   return keys;
 };
 var init_moduleMapper = __esm(() => {
+  init_stylePreprocessor();
   init_reactComponentClassifier();
 });
 
@@ -9207,14 +9336,14 @@ var escapeHtml = (str) => String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;
 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 resolve27 } from "path";
+import { basename as basename10, dirname as dirname12, join as join20, resolve as resolve27 } from "path";
 var ssrDirty2 = false, lastSelector = "angular-page", isRecord8 = (value) => typeof value === "object" && value !== null, isAngularComponent = (value) => typeof value === "function", compilerImportPromise = null, ensureAngularCompiler = () => {
   if (!compilerImportPromise) {
     compilerImportPromise = import("@angular/compiler");
   }
   return compilerImportPromise;
 }, readAngularPageModule = (value) => isRecord8(value) ? value : null, resolveAngularSsrOutDir = () => process.env.ABSOLUTE_ANGULAR_SSR_OUTDIR ?? join20(tmpdir(), "absolutejs", "generated", "angular-ssr"), ensureAngularSsrNodeModules = async (outDir) => {
-  const outRoot = resolve27(dirname11(dirname11(outDir)));
+  const outRoot = resolve27(dirname12(dirname12(outDir)));
   const nodeModulesLink = join20(outRoot, "node_modules");
   if (process.env.ABSOLUTE_ANGULAR_SSR_OUTDIR) {
     return;
@@ -9460,14 +9589,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, isRecord10 = (value) => typeof value === "object" && value !== null, isGenericVueComponent = (value) => typeof value === "function" || isRecord10(value), readHasIslands2 = (value) => {
   if (!isRecord10(value))
     return false;
   const hasIslands = value["__ABSOLUTE_PAGE_HAS_ISLANDS__"];
   return typeof hasIslands === "boolean" ? hasIslands : false;
 }, readDefaultExport2 = (value) => isRecord10(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, {
@@ -9671,7 +9800,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 resolve28, relative as relative10 } from "path";
+import { basename as basename12, dirname as dirname14, extname as extname6, resolve as resolve28, 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 = [];
@@ -9720,9 +9849,9 @@ ${stubs}
 }, resolveRelativeImport = (relPath, fileDir, projectRoot, extensions) => {
   const absPath = resolve28(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(resolve28(projectRoot, srcPath)));
   }
   return srcUrl(srcPath, projectRoot);
@@ -9756,7 +9885,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}`);
@@ -9820,7 +9949,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;
@@ -10210,7 +10339,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 = resolve28(projectRoot, relPath);
-  const ext = extname5(filePath);
+  const ext = extname6(filePath);
   if (ext === ".svelte")
     return { ext, filePath: resolveSvelteModulePath(filePath) };
   if (ext)
@@ -10420,7 +10549,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 resolve31 } from "path";
+import { basename as basename13, dirname as dirname15, relative as relative11, resolve as resolve31 } from "path";
 var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseErrorLocationFromMessage = (msg) => {
   const pathLineCol = msg.match(/^([^\s:]+):(\d+)(?::(\d+))?/);
   if (pathLineCol) {
@@ -10728,7 +10857,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
     format: "esm",
     naming: "[dir]/[name].[hash].[ext]",
     outdir: buildDir,
-    plugins: [],
+    plugins: [stylePreprocessorPlugin],
     root: clientRoot,
     target: "browser",
     throw: false
@@ -10861,7 +10990,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,
@@ -11053,6 +11182,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
         format: "esm",
         naming: "[dir]/[name].[hash].[ext]",
         outdir: serverOutDir,
+        plugins: [stylePreprocessorPlugin],
         root: serverRoot,
         target: "bun",
         throw: false
@@ -11062,6 +11192,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
         format: "esm",
         naming: "[dir]/[name].[hash].[ext]",
         outdir: buildDir,
+        plugins: [stylePreprocessorPlugin],
         root: clientRoot,
         target: "browser",
         throw: false
@@ -11182,7 +11313,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
   const [primarySource] = sourceFiles;
   try {
     const hasComponentChanges = reactFiles.some((file4) => file4.endsWith(".tsx") || file4.endsWith(".ts") || file4.endsWith(".jsx"));
-    const hasCSSChanges = reactFiles.some((file4) => file4.endsWith(".css"));
+    const hasCSSChanges = reactFiles.some(isStylePath);
     logHmrUpdate(primarySource ?? reactFiles[0] ?? "", "react", duration);
     broadcastToClients(state, {
       data: {
@@ -11224,7 +11355,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
   if (!buildReference?.source) {
     return;
   }
-  const sourcePath = buildReference.source.startsWith("file://") ? new URL(buildReference.source).pathname : resolve31(dirname14(buildInfo.resolvedRegistryPath), buildReference.source);
+  const sourcePath = buildReference.source.startsWith("file://") ? new URL(buildReference.source).pathname : resolve31(dirname15(buildInfo.resolvedRegistryPath), buildReference.source);
   islandFiles.add(resolve31(sourcePath));
 }, resolveIslandSourceFiles = async (config) => {
   const registryPath = config.islands?.registry;
@@ -11329,7 +11460,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;
@@ -11411,7 +11542,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
     return;
   }
   const vueComponentFiles = vueFiles.filter((file4) => file4.endsWith(".vue"));
-  const vueCssFiles = vueFiles.filter((file4) => file4.endsWith(".css"));
+  const vueCssFiles = vueFiles.filter(isStylePath);
   const isCssOnlyChange = vueComponentFiles.length === 0 && vueCssFiles.length > 0;
   const vuePageFiles = vueFiles.filter((file4) => file4.replace(/\\/g, "/").includes("/pages/"));
   const pagesToUpdate = vuePageFiles.length > 0 ? vuePageFiles : vueComponentFiles;
@@ -11426,7 +11557,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;
@@ -11477,7 +11608,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
     return;
   }
   const svelteComponentFiles = svelteFiles.filter((file4) => file4.endsWith(".svelte"));
-  const svelteCssFiles = svelteFiles.filter((file4) => file4.endsWith(".css"));
+  const svelteCssFiles = svelteFiles.filter(isStylePath);
   const isCssOnlyChange = svelteComponentFiles.length === 0 && svelteCssFiles.length > 0;
   const sveltePageFiles = svelteFiles.filter((file4) => file4.replace(/\\/g, "/").includes("/pages/"));
   const pagesToUpdate = sveltePageFiles.length > 0 ? sveltePageFiles : svelteComponentFiles;
@@ -11506,7 +11637,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;
@@ -11555,8 +11686,8 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, parseError
   if (angularFiles.length === 0) {
     return;
   }
-  const angularCssFiles = angularFiles.filter((file4) => file4.endsWith(".css"));
-  const isCssOnlyChange = angularFiles.every((file4) => file4.endsWith(".css")) && angularCssFiles.length > 0;
+  const angularCssFiles = angularFiles.filter(isStylePath);
+  const isCssOnlyChange = angularFiles.every(isStylePath) && angularCssFiles.length > 0;
   const angularPageFiles = angularFiles.filter((file4) => file4.replace(/\\/g, "/").includes("/pages/"));
   let pagesToUpdate = angularPageFiles;
   if (pagesToUpdate.length === 0 && state.dependencyGraph) {
@@ -11953,6 +12084,7 @@ var init_rebuildTrigger = __esm(() => {
   init_assetStore();
   init_pathUtils();
   init_webSocket();
+  init_stylePreprocessor();
   init_pageHandler2();
   init_pageHandler();
   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 resolve32 } from "path";
+import { dirname as dirname16, resolve as resolve32 } 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;
@@ -12533,7 +12665,7 @@ __export(exports_devtoolsJson, {
   devtoolsJson: () => devtoolsJson
 });
 import { existsSync as existsSync22, mkdirSync as mkdirSync12, readFileSync as readFileSync14, writeFileSync as writeFileSync8 } from "fs";
-import { dirname as dirname16, join as join22, resolve as resolve33 } from "path";
+import { dirname as dirname17, join as join22, resolve as resolve33 } from "path";
 import { Elysia as Elysia3 } from "elysia";
 var ENDPOINT = "/.well-known/appspecific/com.chrome.devtools.json", UUID_CACHE_KEY = "__absoluteDevtoolsWorkspaceUuid", getGlobalUuid = () => Reflect.get(globalThis, UUID_CACHE_KEY), setGlobalUuid = (uuid) => {
   Reflect.set(globalThis, UUID_CACHE_KEY, uuid);
@@ -12560,7 +12692,7 @@ var ENDPOINT = "/.well-known/appspecific/com.chrome.devtools.json", UUID_CACHE_K
   if (cachedUuid)
     return setGlobalUuid(cachedUuid);
   const uuid = crypto.randomUUID();
-  mkdirSync12(dirname16(cachePath), { recursive: true });
+  mkdirSync12(dirname17(cachePath), { recursive: true });
   writeFileSync8(cachePath, uuid, "utf-8");
   return setGlobalUuid(uuid);
 }, devtoolsJson = (buildDir, options = {}) => {
@@ -14849,7 +14981,7 @@ function Constructor(parameters, returns, options) {
 }
 
 // node_modules/@sinclair/typebox/build/esm/type/function/function.mjs
-function Function(parameters, returns, options) {
+function Function2(parameters, returns, options) {
   return CreateType({ [Kind]: "Function", type: "Function", parameters, returns }, options);
 }
 
@@ -15339,7 +15471,7 @@ function FromProperties3(K, T) {
 }
 function FromSchemaType(K, T) {
   const options = { ...T };
-  return IsOptional(T) ? Optional(FromSchemaType(K, Discard(T, [OptionalKind]))) : IsReadonly(T) ? Readonly(FromSchemaType(K, Discard(T, [ReadonlyKind]))) : IsMappedResult(T) ? FromMappedResult3(K, T.properties) : IsMappedKey(T) ? FromMappedKey(K, T.keys) : IsConstructor(T) ? Constructor(FromRest2(K, T.parameters), FromSchemaType(K, T.returns), options) : IsFunction3(T) ? Function(FromRest2(K, T.parameters), FromSchemaType(K, T.returns), options) : IsAsyncIterator3(T) ? AsyncIterator(FromSchemaType(K, T.items), options) : IsIterator3(T) ? Iterator(FromSchemaType(K, T.items), options) : IsIntersect(T) ? Intersect(FromRest2(K, T.allOf), options) : IsUnion(T) ? Union(FromRest2(K, T.anyOf), options) : IsTuple(T) ? Tuple(FromRest2(K, T.items ?? []), options) : IsObject3(T) ? Object2(FromProperties3(K, T.properties), options) : IsArray3(T) ? Array2(FromSchemaType(K, T.items), options) : IsPromise2(T) ? Promise2(FromSchemaType(K, T.item), options) : T;
+  return IsOptional(T) ? Optional(FromSchemaType(K, Discard(T, [OptionalKind]))) : IsReadonly(T) ? Readonly(FromSchemaType(K, Discard(T, [ReadonlyKind]))) : IsMappedResult(T) ? FromMappedResult3(K, T.properties) : IsMappedKey(T) ? FromMappedKey(K, T.keys) : IsConstructor(T) ? Constructor(FromRest2(K, T.parameters), FromSchemaType(K, T.returns), options) : IsFunction3(T) ? Function2(FromRest2(K, T.parameters), FromSchemaType(K, T.returns), options) : IsAsyncIterator3(T) ? AsyncIterator(FromSchemaType(K, T.items), options) : IsIterator3(T) ? Iterator(FromSchemaType(K, T.items), options) : IsIntersect(T) ? Intersect(FromRest2(K, T.allOf), options) : IsUnion(T) ? Union(FromRest2(K, T.anyOf), options) : IsTuple(T) ? Tuple(FromRest2(K, T.items ?? []), options) : IsObject3(T) ? Object2(FromProperties3(K, T.properties), options) : IsArray3(T) ? Array2(FromSchemaType(K, T.items), options) : IsPromise2(T) ? Promise2(FromSchemaType(K, T.item), options) : T;
 }
 function MappedFunctionReturnType(K, T) {
   const Acc = {};
@@ -15618,7 +15750,7 @@ function ConditionalReadonly(T, root) {
   return root === true ? T : Readonly(T);
 }
 function FromValue(value, root) {
-  return IsAsyncIterator(value) ? ConditionalReadonly(Any(), root) : IsIterator(value) ? ConditionalReadonly(Any(), root) : IsArray(value) ? Readonly(Tuple(FromArray3(value))) : IsUint8Array(value) ? Uint8Array2() : IsDate(value) ? Date2() : IsObject(value) ? ConditionalReadonly(Object2(FromProperties7(value)), root) : IsFunction(value) ? ConditionalReadonly(Function([], Unknown()), root) : IsUndefined(value) ? Undefined() : IsNull(value) ? Null() : IsSymbol(value) ? Symbol2() : IsBigInt(value) ? BigInt2() : IsNumber(value) ? Literal(value) : IsBoolean(value) ? Literal(value) : IsString(value) ? Literal(value) : Object2({});
+  return IsAsyncIterator(value) ? ConditionalReadonly(Any(), root) : IsIterator(value) ? ConditionalReadonly(Any(), root) : IsArray(value) ? Readonly(Tuple(FromArray3(value))) : IsUint8Array(value) ? Uint8Array2() : IsDate(value) ? Date2() : IsObject(value) ? ConditionalReadonly(Object2(FromProperties7(value)), root) : IsFunction(value) ? ConditionalReadonly(Function2([], Unknown()), root) : IsUndefined(value) ? Undefined() : IsNull(value) ? Null() : IsSymbol(value) ? Symbol2() : IsBigInt(value) ? BigInt2() : IsNumber(value) ? Literal(value) : IsBoolean(value) ? Literal(value) : IsString(value) ? Literal(value) : Object2({});
 }
 function Const(T, options) {
   return CreateType(FromValue(T, true), options);
@@ -15775,7 +15907,7 @@ function IsObjectArrayLike(schema) {
   return IsObjectPropertyCount(schema, 0) || IsObjectPropertyCount(schema, 1) && "length" in schema.properties && IntoBooleanResult(Visit3(schema.properties["length"], length)) === ExtendsResult.True;
 }
 function IsObjectPromiseLike(schema) {
-  const then = Function([Any()], Any());
+  const then = Function2([Any()], Any());
   return IsObjectPropertyCount(schema, 0) || IsObjectPropertyCount(schema, 1) && "then" in schema.properties && IntoBooleanResult(Visit3(schema.properties["then"], then)) === ExtendsResult.True;
 }
 function Property(left, right) {
@@ -16500,7 +16632,7 @@ function FromConstructor3(moduleProperties, parameters, instanceType) {
   return Constructor(FromTypes2(moduleProperties, parameters), FromType2(moduleProperties, instanceType));
 }
 function FromFunction3(moduleProperties, parameters, returnType) {
-  return Function(FromTypes2(moduleProperties, parameters), FromType2(moduleProperties, returnType));
+  return Function2(FromTypes2(moduleProperties, parameters), FromType2(moduleProperties, returnType));
 }
 function FromIntersect8(moduleProperties, types) {
   return Intersect(FromTypes2(moduleProperties, types));
@@ -16693,7 +16825,7 @@ __export(exports_type3, {
   Instantiate: () => Instantiate,
   InstanceType: () => InstanceType,
   Index: () => Index,
-  Function: () => Function,
+  Function: () => Function2,
   Extract: () => Extract,
   Extends: () => Extends,
   Exclude: () => Exclude,
@@ -20277,5 +20409,5 @@ export {
   ANGULAR_INIT_TIMEOUT_MS
 };
 
-//# debugId=4CC81F5B1BD6340664756E2164756E21
+//# debugId=E79287F479D084DA64756E2164756E21
 //# sourceMappingURL=index.js.map