@csszyx/svelte-adapter 0.9.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 csszyx contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,284 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.mergeClassAttributes = mergeClassAttributes;
+exports.parseObjectLiteral = parseObjectLiteral;
+exports.preprocess = preprocess;
+exports.preprocessor = preprocessor;
+exports.transformMarkup = transformMarkup;
+exports.vitePlugin = vitePlugin;
+var _compiler = require("@csszyx/compiler");
+var _oxcParser = require("oxc-parser");
+function extractValue(node) {
+  switch (node.type) {
+    case "Literal":
+      return node.value;
+    case "UnaryExpression":
+      if (node.operator === "-" && node.argument.type === "Literal" && typeof node.argument.value === "number") {
+        return -node.argument.value;
+      }
+      return void 0;
+    case "ArrayExpression":
+      {
+        const arr = [];
+        for (const el of node.elements ?? []) {
+          if (!el) {
+            arr.push(null);
+            continue;
+          }
+          const v = extractValue(el);
+          if (v === void 0) return void 0;
+          arr.push(v);
+        }
+        return arr;
+      }
+    case "ObjectExpression":
+      return extractObjectNode(node);
+    case "TemplateLiteral":
+      if ((node.expressions ?? []).length === 0) {
+        const quasis = node.quasis;
+        return quasis[0].value.cooked ?? void 0;
+      }
+      return void 0;
+    default:
+      return void 0;
+  }
+}
+function extractObjectNode(node) {
+  const obj = {};
+  for (const prop of node.properties ?? []) {
+    if (prop.type !== "Property") return void 0;
+    if (prop.computed) return void 0;
+    const key_node = prop.key;
+    let key;
+    if (key_node.type === "Identifier") {
+      key = key_node.name;
+    } else if (key_node.type === "Literal" && typeof key_node.value === "string") {
+      key = key_node.value;
+    } else if (key_node.type === "Literal" && typeof key_node.value === "number") {
+      key = String(key_node.value);
+    } else {
+      return void 0;
+    }
+    const value = extractValue(prop.value);
+    if (value === void 0) return void 0;
+    obj[key] = value;
+  }
+  return obj;
+}
+function parseObjectLiteral(objStr) {
+  try {
+    const src = `const _=${objStr.trim()}`;
+    const parsed = (0, _oxcParser.parseSync)("sz.js", src);
+    if (parsed.errors.length > 0) return null;
+    const decl = parsed.program.body;
+    const init = decl[0].declarations[0].init ?? null;
+    if (!init || init.type !== "ObjectExpression") return null;
+    return extractObjectNode(init) ?? null;
+  } catch {
+    return null;
+  }
+}
+function transformMarkup(content, options = {}) {
+  let result = "";
+  let count = 0;
+  let cursor = 0;
+  while (cursor < content.length) {
+    const attributeStart = findSzAttribute(content, cursor);
+    if (attributeStart === -1) {
+      result += content.slice(cursor);
+      break;
+    }
+    result += content.slice(cursor, attributeStart);
+    const match = readSzAttribute(content, attributeStart);
+    if (!match) {
+      result += content.slice(attributeStart, attributeStart + 3);
+      cursor = attributeStart + 3;
+      continue;
+    }
+    const szObj = parseObjectLiteral(match.objectSource);
+    if (!szObj) {
+      if (options.debug) {
+        console.warn(`[csszyx/svelte] Failed to parse sz object: ${match.objectSource}`);
+      }
+      result += content.slice(attributeStart, match.end);
+    } else {
+      const className = (0, _compiler.transform)(szObj).className;
+      count += 1;
+      if (options.debug) {
+        console.log(`[csszyx/svelte] Transformed: ${match.objectSource} -> "${className}"`);
+      }
+      result += `class="${className}"`;
+    }
+    cursor = match.end;
+  }
+  return {
+    code: result,
+    count
+  };
+}
+function findSzAttribute(content, from) {
+  let index = content.indexOf("sz=", from);
+  while (index !== -1) {
+    const before = index === 0 ? "<" : content.charAt(index - 1);
+    if (before === "<" || before === " " || before === "	" || before === "\n" || before === "\r") {
+      return index;
+    }
+    index = content.indexOf("sz=", index + 3);
+  }
+  return -1;
+}
+function readSzAttribute(content, start) {
+  const valueStart = start + 3;
+  const opener = content.charAt(valueStart);
+  if (opener === '"' || opener === "'") {
+    const endQuote = content.indexOf(opener, valueStart + 1);
+    if (endQuote === -1) {
+      return null;
+    }
+    let objectSource = content.slice(valueStart + 1, endQuote);
+    if (objectSource.startsWith("{{") && objectSource.endsWith("}}")) {
+      objectSource = objectSource.slice(1, -1);
+    }
+    if (!objectSource.startsWith("{") || !objectSource.endsWith("}")) {
+      return null;
+    }
+    return {
+      end: endQuote + 1,
+      objectSource
+    };
+  }
+  if (opener !== "{" || content.charAt(valueStart + 1) !== "{") {
+    return null;
+  }
+  const end = findBalancedBraceEnd(content, valueStart);
+  if (end === -1) {
+    return null;
+  }
+  return {
+    end: end + 1,
+    objectSource: content.slice(valueStart + 1, end)
+  };
+}
+function findBalancedBraceEnd(content, start) {
+  let depth = 0;
+  let quote = "";
+  let escaped = false;
+  for (let index = start; index < content.length; index += 1) {
+    const char = content.charAt(index);
+    if (quote) {
+      if (escaped) {
+        escaped = false;
+      } else if (char === "\\") {
+        escaped = true;
+      } else if (char === quote) {
+        quote = "";
+      }
+      continue;
+    }
+    if (char === '"' || char === "'" || char === "`") {
+      quote = char;
+    } else if (char === "{") {
+      depth += 1;
+    } else if (char === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return index;
+      }
+    }
+  }
+  return -1;
+}
+function mergeClassAttributes(content) {
+  let result = content;
+  let i = 0;
+  while (i < result.length) {
+    const start = result.indexOf("<", i);
+    if (start === -1) break;
+    const end = result.indexOf(">", start);
+    if (end === -1) break;
+    const tag = result.slice(start, end + 1);
+    i = end + 1;
+    if (!/^<[a-z]/i.test(tag)) continue;
+    const matches = [...tag.matchAll(/\bclass="([^"]*)"/g)].map(m => m[1]);
+    if (matches.length < 2) continue;
+    const merged = matches.join(" ");
+    const firstIdx = tag.indexOf('class="');
+    const cleaned = tag.replace(/\bclass="[^"]*"/g, "");
+    const newTag = `${cleaned.slice(0, firstIdx)}class="${merged}"${cleaned.slice(firstIdx)}`;
+    result = result.slice(0, start) + newTag + result.slice(end + 1);
+    i = start + newTag.length;
+  }
+  return result;
+}
+function preprocessor(options = {}) {
+  return {
+    name: "csszyx-svelte",
+    markup({
+      content,
+      filename
+    }) {
+      if (!content.includes("sz=")) {
+        return;
+      }
+      if (options.debug && filename) {
+        console.log(`[csszyx/svelte] Processing: ${filename}`);
+      }
+      const transformResult = transformMarkup(content, options);
+      if (transformResult.count === 0) {
+        return;
+      }
+      const mergedContent = mergeClassAttributes(transformResult.code);
+      if (options.debug) {
+        console.log(`[csszyx/svelte] Transformed ${transformResult.count} sz props`);
+      }
+      return {
+        code: mergedContent,
+        map: void 0
+        // TODO: Generate source map
+      };
+    }
+  };
+}
+function vitePlugin(options = {}) {
+  return {
+    name: "csszyx-svelte-vite",
+    enforce: "pre",
+    transform(code, id) {
+      if (!id.endsWith(".svelte")) {
+        return null;
+      }
+      if (!code.includes("sz=")) {
+        return null;
+      }
+      const transformResult = transformMarkup(code, options);
+      if (transformResult.count === 0) {
+        return null;
+      }
+      const mergedContent = mergeClassAttributes(transformResult.code);
+      return {
+        code: mergedContent,
+        map: void 0
+        // TODO: Generate source map
+      };
+    }
+  };
+}
+function preprocess(source, options = {}) {
+  const transformResult = transformMarkup(source, options);
+  if (transformResult.count === 0) {
+    return {
+      code: source,
+      map: void 0
+    };
+  }
+  const mergedContent = mergeClassAttributes(transformResult.code);
+  return {
+    code: mergedContent,
+    map: void 0
+  };
+}
+module.exports = preprocessor;

package/dist/index.d.cts

@@ -0,0 +1,124 @@
+/**
+ * @csszyx/svelte-adapter - Svelte preprocessor for csszyx.
+ *
+ * Transforms `sz` props in Svelte templates into Tailwind CSS class strings.
+ *
+ * @module @csszyx/svelte-adapter
+ */
+import { type SzObject } from '@csszyx/compiler';
+/**
+ * Preprocessor options.
+ */
+export interface SvelteAdapterOptions {
+    /**
+     * Enable verbose logging for debugging.
+     */
+    debug?: boolean;
+}
+/**
+ * Svelte preprocessor markup result.
+ */
+export interface PreprocessorResult {
+    /**
+     * The transformed source code.
+     */
+    code: string;
+    /**
+     * Optional source map.
+     */
+    map?: object | null;
+}
+/**
+ * Parse a JavaScript object literal string into an object.
+ * Handles nested objects for variants like hover, focus, etc.
+ *
+ * @param {string} objStr - Object literal string (e.g., "{ p: 4, bg: 'red-500' }")
+ * @returns {SzObject | null} Parsed object or null if invalid
+ */
+export declare function parseObjectLiteral(objStr: string): SzObject | null;
+/**
+ * Transform sz props in a Svelte template string.
+ *
+ * Supports:
+ * - Static: sz="{{ p: 4 }}" or sz="{ p: 4 }"
+ * - Shorthand bind: sz={expression} (only static objects supported)
+ *
+ * @param {string} content - Template content
+ * @param {SvelteAdapterOptions} options - Options
+ * @returns {{ code: string; count: number }} Transformation result
+ */
+export declare function transformMarkup(content: string, options?: SvelteAdapterOptions): {
+    code: string;
+    count: number;
+};
+/**
+ * Merge transformed classes with existing class attribute.
+ *
+ * @param {string} content - Content with sz props transformed to class
+ * @returns {string} Content with merged class attributes
+ */
+export declare function mergeClassAttributes(content: string): string;
+/**
+ * Create a Svelte preprocessor for csszyx.
+ *
+ * @param {SvelteAdapterOptions} options - Preprocessor options
+ * @returns {object} Svelte preprocessor
+ *
+ * @example
+ * ```typescript
+ * // svelte.config.js
+ * import { preprocessor } from '@csszyx/svelte-adapter';
+ *
+ * export default {
+ *     preprocess: [
+ *         preprocessor(),
+ *     ],
+ * };
+ * ```
+ */
+import type { PreprocessorGroup } from 'svelte/compiler';
+import type { Plugin } from 'vite';
+/**
+ * Create a Svelte preprocessor for csszyx.
+ *
+ * @param {SvelteAdapterOptions} options - Preprocessor options
+ * @returns {PreprocessorGroup} Svelte preprocessor group
+ */
+export declare function preprocessor(options?: SvelteAdapterOptions): PreprocessorGroup;
+/**
+ * Create a Vite plugin for Svelte preprocessing.
+ *
+ * Note: In most cases, you should use the preprocessor directly in svelte.config.js.
+ * This Vite plugin is provided for cases where you need to integrate at the Vite level.
+ *
+ * @param {SvelteAdapterOptions} options - Plugin options
+ * @returns {Plugin} Vite plugin
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import { svelte } from '@sveltejs/vite-plugin-svelte';
+ * import { vitePlugin as csszyx } from '@csszyx/svelte-adapter';
+ *
+ * export default defineConfig({
+ *     plugins: [
+ *         csszyx(),
+ *         svelte(),
+ *     ],
+ * });
+ * ```
+ */
+export declare function vitePlugin(options?: SvelteAdapterOptions): Plugin;
+/**
+ * Preprocess a Svelte file, transforming sz props to class attributes.
+ *
+ * @param {string} source - Svelte source code
+ * @param {SvelteAdapterOptions} options - Preprocessor options
+ * @returns {PreprocessorResult} Preprocessing result
+ */
+export declare function preprocess(source: string, options?: SvelteAdapterOptions): PreprocessorResult;
+/**
+ * Default export - the preprocessor function.
+ */
+export default preprocessor;

package/dist/index.d.mts

@@ -0,0 +1,124 @@
+/**
+ * @csszyx/svelte-adapter - Svelte preprocessor for csszyx.
+ *
+ * Transforms `sz` props in Svelte templates into Tailwind CSS class strings.
+ *
+ * @module @csszyx/svelte-adapter
+ */
+import { type SzObject } from '@csszyx/compiler';
+/**
+ * Preprocessor options.
+ */
+export interface SvelteAdapterOptions {
+    /**
+     * Enable verbose logging for debugging.
+     */
+    debug?: boolean;
+}
+/**
+ * Svelte preprocessor markup result.
+ */
+export interface PreprocessorResult {
+    /**
+     * The transformed source code.
+     */
+    code: string;
+    /**
+     * Optional source map.
+     */
+    map?: object | null;
+}
+/**
+ * Parse a JavaScript object literal string into an object.
+ * Handles nested objects for variants like hover, focus, etc.
+ *
+ * @param {string} objStr - Object literal string (e.g., "{ p: 4, bg: 'red-500' }")
+ * @returns {SzObject | null} Parsed object or null if invalid
+ */
+export declare function parseObjectLiteral(objStr: string): SzObject | null;
+/**
+ * Transform sz props in a Svelte template string.
+ *
+ * Supports:
+ * - Static: sz="{{ p: 4 }}" or sz="{ p: 4 }"
+ * - Shorthand bind: sz={expression} (only static objects supported)
+ *
+ * @param {string} content - Template content
+ * @param {SvelteAdapterOptions} options - Options
+ * @returns {{ code: string; count: number }} Transformation result
+ */
+export declare function transformMarkup(content: string, options?: SvelteAdapterOptions): {
+    code: string;
+    count: number;
+};
+/**
+ * Merge transformed classes with existing class attribute.
+ *
+ * @param {string} content - Content with sz props transformed to class
+ * @returns {string} Content with merged class attributes
+ */
+export declare function mergeClassAttributes(content: string): string;
+/**
+ * Create a Svelte preprocessor for csszyx.
+ *
+ * @param {SvelteAdapterOptions} options - Preprocessor options
+ * @returns {object} Svelte preprocessor
+ *
+ * @example
+ * ```typescript
+ * // svelte.config.js
+ * import { preprocessor } from '@csszyx/svelte-adapter';
+ *
+ * export default {
+ *     preprocess: [
+ *         preprocessor(),
+ *     ],
+ * };
+ * ```
+ */
+import type { PreprocessorGroup } from 'svelte/compiler';
+import type { Plugin } from 'vite';
+/**
+ * Create a Svelte preprocessor for csszyx.
+ *
+ * @param {SvelteAdapterOptions} options - Preprocessor options
+ * @returns {PreprocessorGroup} Svelte preprocessor group
+ */
+export declare function preprocessor(options?: SvelteAdapterOptions): PreprocessorGroup;
+/**
+ * Create a Vite plugin for Svelte preprocessing.
+ *
+ * Note: In most cases, you should use the preprocessor directly in svelte.config.js.
+ * This Vite plugin is provided for cases where you need to integrate at the Vite level.
+ *
+ * @param {SvelteAdapterOptions} options - Plugin options
+ * @returns {Plugin} Vite plugin
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import { svelte } from '@sveltejs/vite-plugin-svelte';
+ * import { vitePlugin as csszyx } from '@csszyx/svelte-adapter';
+ *
+ * export default defineConfig({
+ *     plugins: [
+ *         csszyx(),
+ *         svelte(),
+ *     ],
+ * });
+ * ```
+ */
+export declare function vitePlugin(options?: SvelteAdapterOptions): Plugin;
+/**
+ * Preprocess a Svelte file, transforming sz props to class attributes.
+ *
+ * @param {string} source - Svelte source code
+ * @param {SvelteAdapterOptions} options - Preprocessor options
+ * @returns {PreprocessorResult} Preprocessing result
+ */
+export declare function preprocess(source: string, options?: SvelteAdapterOptions): PreprocessorResult;
+/**
+ * Default export - the preprocessor function.
+ */
+export default preprocessor;

package/dist/index.d.ts

@@ -0,0 +1,124 @@
+/**
+ * @csszyx/svelte-adapter - Svelte preprocessor for csszyx.
+ *
+ * Transforms `sz` props in Svelte templates into Tailwind CSS class strings.
+ *
+ * @module @csszyx/svelte-adapter
+ */
+import { type SzObject } from '@csszyx/compiler';
+/**
+ * Preprocessor options.
+ */
+export interface SvelteAdapterOptions {
+    /**
+     * Enable verbose logging for debugging.
+     */
+    debug?: boolean;
+}
+/**
+ * Svelte preprocessor markup result.
+ */
+export interface PreprocessorResult {
+    /**
+     * The transformed source code.
+     */
+    code: string;
+    /**
+     * Optional source map.
+     */
+    map?: object | null;
+}
+/**
+ * Parse a JavaScript object literal string into an object.
+ * Handles nested objects for variants like hover, focus, etc.
+ *
+ * @param {string} objStr - Object literal string (e.g., "{ p: 4, bg: 'red-500' }")
+ * @returns {SzObject | null} Parsed object or null if invalid
+ */
+export declare function parseObjectLiteral(objStr: string): SzObject | null;
+/**
+ * Transform sz props in a Svelte template string.
+ *
+ * Supports:
+ * - Static: sz="{{ p: 4 }}" or sz="{ p: 4 }"
+ * - Shorthand bind: sz={expression} (only static objects supported)
+ *
+ * @param {string} content - Template content
+ * @param {SvelteAdapterOptions} options - Options
+ * @returns {{ code: string; count: number }} Transformation result
+ */
+export declare function transformMarkup(content: string, options?: SvelteAdapterOptions): {
+    code: string;
+    count: number;
+};
+/**
+ * Merge transformed classes with existing class attribute.
+ *
+ * @param {string} content - Content with sz props transformed to class
+ * @returns {string} Content with merged class attributes
+ */
+export declare function mergeClassAttributes(content: string): string;
+/**
+ * Create a Svelte preprocessor for csszyx.
+ *
+ * @param {SvelteAdapterOptions} options - Preprocessor options
+ * @returns {object} Svelte preprocessor
+ *
+ * @example
+ * ```typescript
+ * // svelte.config.js
+ * import { preprocessor } from '@csszyx/svelte-adapter';
+ *
+ * export default {
+ *     preprocess: [
+ *         preprocessor(),
+ *     ],
+ * };
+ * ```
+ */
+import type { PreprocessorGroup } from 'svelte/compiler';
+import type { Plugin } from 'vite';
+/**
+ * Create a Svelte preprocessor for csszyx.
+ *
+ * @param {SvelteAdapterOptions} options - Preprocessor options
+ * @returns {PreprocessorGroup} Svelte preprocessor group
+ */
+export declare function preprocessor(options?: SvelteAdapterOptions): PreprocessorGroup;
+/**
+ * Create a Vite plugin for Svelte preprocessing.
+ *
+ * Note: In most cases, you should use the preprocessor directly in svelte.config.js.
+ * This Vite plugin is provided for cases where you need to integrate at the Vite level.
+ *
+ * @param {SvelteAdapterOptions} options - Plugin options
+ * @returns {Plugin} Vite plugin
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import { svelte } from '@sveltejs/vite-plugin-svelte';
+ * import { vitePlugin as csszyx } from '@csszyx/svelte-adapter';
+ *
+ * export default defineConfig({
+ *     plugins: [
+ *         csszyx(),
+ *         svelte(),
+ *     ],
+ * });
+ * ```
+ */
+export declare function vitePlugin(options?: SvelteAdapterOptions): Plugin;
+/**
+ * Preprocess a Svelte file, transforming sz props to class attributes.
+ *
+ * @param {string} source - Svelte source code
+ * @param {SvelteAdapterOptions} options - Preprocessor options
+ * @returns {PreprocessorResult} Preprocessing result
+ */
+export declare function preprocess(source: string, options?: SvelteAdapterOptions): PreprocessorResult;
+/**
+ * Default export - the preprocessor function.
+ */
+export default preprocessor;

package/dist/index.js

@@ -0,0 +1,284 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.mergeClassAttributes = mergeClassAttributes;
+exports.parseObjectLiteral = parseObjectLiteral;
+exports.preprocess = preprocess;
+exports.preprocessor = preprocessor;
+exports.transformMarkup = transformMarkup;
+exports.vitePlugin = vitePlugin;
+var _compiler = require("@csszyx/compiler");
+var _oxcParser = require("oxc-parser");
+function extractValue(node) {
+  switch (node.type) {
+    case "Literal":
+      return node.value;
+    case "UnaryExpression":
+      if (node.operator === "-" && node.argument.type === "Literal" && typeof node.argument.value === "number") {
+        return -node.argument.value;
+      }
+      return void 0;
+    case "ArrayExpression":
+      {
+        const arr = [];
+        for (const el of node.elements ?? []) {
+          if (!el) {
+            arr.push(null);
+            continue;
+          }
+          const v = extractValue(el);
+          if (v === void 0) return void 0;
+          arr.push(v);
+        }
+        return arr;
+      }
+    case "ObjectExpression":
+      return extractObjectNode(node);
+    case "TemplateLiteral":
+      if ((node.expressions ?? []).length === 0) {
+        const quasis = node.quasis;
+        return quasis[0].value.cooked ?? void 0;
+      }
+      return void 0;
+    default:
+      return void 0;
+  }
+}
+function extractObjectNode(node) {
+  const obj = {};
+  for (const prop of node.properties ?? []) {
+    if (prop.type !== "Property") return void 0;
+    if (prop.computed) return void 0;
+    const key_node = prop.key;
+    let key;
+    if (key_node.type === "Identifier") {
+      key = key_node.name;
+    } else if (key_node.type === "Literal" && typeof key_node.value === "string") {
+      key = key_node.value;
+    } else if (key_node.type === "Literal" && typeof key_node.value === "number") {
+      key = String(key_node.value);
+    } else {
+      return void 0;
+    }
+    const value = extractValue(prop.value);
+    if (value === void 0) return void 0;
+    obj[key] = value;
+  }
+  return obj;
+}
+function parseObjectLiteral(objStr) {
+  try {
+    const src = `const _=${objStr.trim()}`;
+    const parsed = (0, _oxcParser.parseSync)("sz.js", src);
+    if (parsed.errors.length > 0) return null;
+    const decl = parsed.program.body;
+    const init = decl[0].declarations[0].init ?? null;
+    if (!init || init.type !== "ObjectExpression") return null;
+    return extractObjectNode(init) ?? null;
+  } catch {
+    return null;
+  }
+}
+function transformMarkup(content, options = {}) {
+  let result = "";
+  let count = 0;
+  let cursor = 0;
+  while (cursor < content.length) {
+    const attributeStart = findSzAttribute(content, cursor);
+    if (attributeStart === -1) {
+      result += content.slice(cursor);
+      break;
+    }
+    result += content.slice(cursor, attributeStart);
+    const match = readSzAttribute(content, attributeStart);
+    if (!match) {
+      result += content.slice(attributeStart, attributeStart + 3);
+      cursor = attributeStart + 3;
+      continue;
+    }
+    const szObj = parseObjectLiteral(match.objectSource);
+    if (!szObj) {
+      if (options.debug) {
+        console.warn(`[csszyx/svelte] Failed to parse sz object: ${match.objectSource}`);
+      }
+      result += content.slice(attributeStart, match.end);
+    } else {
+      const className = (0, _compiler.transform)(szObj).className;
+      count += 1;
+      if (options.debug) {
+        console.log(`[csszyx/svelte] Transformed: ${match.objectSource} -> "${className}"`);
+      }
+      result += `class="${className}"`;
+    }
+    cursor = match.end;
+  }
+  return {
+    code: result,
+    count
+  };
+}
+function findSzAttribute(content, from) {
+  let index = content.indexOf("sz=", from);
+  while (index !== -1) {
+    const before = index === 0 ? "<" : content.charAt(index - 1);
+    if (before === "<" || before === " " || before === "	" || before === "\n" || before === "\r") {
+      return index;
+    }
+    index = content.indexOf("sz=", index + 3);
+  }
+  return -1;
+}
+function readSzAttribute(content, start) {
+  const valueStart = start + 3;
+  const opener = content.charAt(valueStart);
+  if (opener === '"' || opener === "'") {
+    const endQuote = content.indexOf(opener, valueStart + 1);
+    if (endQuote === -1) {
+      return null;
+    }
+    let objectSource = content.slice(valueStart + 1, endQuote);
+    if (objectSource.startsWith("{{") && objectSource.endsWith("}}")) {
+      objectSource = objectSource.slice(1, -1);
+    }
+    if (!objectSource.startsWith("{") || !objectSource.endsWith("}")) {
+      return null;
+    }
+    return {
+      end: endQuote + 1,
+      objectSource
+    };
+  }
+  if (opener !== "{" || content.charAt(valueStart + 1) !== "{") {
+    return null;
+  }
+  const end = findBalancedBraceEnd(content, valueStart);
+  if (end === -1) {
+    return null;
+  }
+  return {
+    end: end + 1,
+    objectSource: content.slice(valueStart + 1, end)
+  };
+}
+function findBalancedBraceEnd(content, start) {
+  let depth = 0;
+  let quote = "";
+  let escaped = false;
+  for (let index = start; index < content.length; index += 1) {
+    const char = content.charAt(index);
+    if (quote) {
+      if (escaped) {
+        escaped = false;
+      } else if (char === "\\") {
+        escaped = true;
+      } else if (char === quote) {
+        quote = "";
+      }
+      continue;
+    }
+    if (char === '"' || char === "'" || char === "`") {
+      quote = char;
+    } else if (char === "{") {
+      depth += 1;
+    } else if (char === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return index;
+      }
+    }
+  }
+  return -1;
+}
+function mergeClassAttributes(content) {
+  let result = content;
+  let i = 0;
+  while (i < result.length) {
+    const start = result.indexOf("<", i);
+    if (start === -1) break;
+    const end = result.indexOf(">", start);
+    if (end === -1) break;
+    const tag = result.slice(start, end + 1);
+    i = end + 1;
+    if (!/^<[a-z]/i.test(tag)) continue;
+    const matches = [...tag.matchAll(/\bclass="([^"]*)"/g)].map(m => m[1]);
+    if (matches.length < 2) continue;
+    const merged = matches.join(" ");
+    const firstIdx = tag.indexOf('class="');
+    const cleaned = tag.replace(/\bclass="[^"]*"/g, "");
+    const newTag = `${cleaned.slice(0, firstIdx)}class="${merged}"${cleaned.slice(firstIdx)}`;
+    result = result.slice(0, start) + newTag + result.slice(end + 1);
+    i = start + newTag.length;
+  }
+  return result;
+}
+function preprocessor(options = {}) {
+  return {
+    name: "csszyx-svelte",
+    markup({
+      content,
+      filename
+    }) {
+      if (!content.includes("sz=")) {
+        return;
+      }
+      if (options.debug && filename) {
+        console.log(`[csszyx/svelte] Processing: ${filename}`);
+      }
+      const transformResult = transformMarkup(content, options);
+      if (transformResult.count === 0) {
+        return;
+      }
+      const mergedContent = mergeClassAttributes(transformResult.code);
+      if (options.debug) {
+        console.log(`[csszyx/svelte] Transformed ${transformResult.count} sz props`);
+      }
+      return {
+        code: mergedContent,
+        map: void 0
+        // TODO: Generate source map
+      };
+    }
+  };
+}
+function vitePlugin(options = {}) {
+  return {
+    name: "csszyx-svelte-vite",
+    enforce: "pre",
+    transform(code, id) {
+      if (!id.endsWith(".svelte")) {
+        return null;
+      }
+      if (!code.includes("sz=")) {
+        return null;
+      }
+      const transformResult = transformMarkup(code, options);
+      if (transformResult.count === 0) {
+        return null;
+      }
+      const mergedContent = mergeClassAttributes(transformResult.code);
+      return {
+        code: mergedContent,
+        map: void 0
+        // TODO: Generate source map
+      };
+    }
+  };
+}
+function preprocess(source, options = {}) {
+  const transformResult = transformMarkup(source, options);
+  if (transformResult.count === 0) {
+    return {
+      code: source,
+      map: void 0
+    };
+  }
+  const mergedContent = mergeClassAttributes(transformResult.code);
+  return {
+    code: mergedContent,
+    map: void 0
+  };
+}
+module.exports = preprocessor;

package/dist/index.mjs

@@ -0,0 +1,262 @@
+import { transform } from "@csszyx/compiler";
+import { parseSync } from "oxc-parser";
+function extractValue(node) {
+  switch (node.type) {
+    case "Literal":
+      return node.value;
+    case "UnaryExpression":
+      if (node.operator === "-" && node.argument.type === "Literal" && typeof node.argument.value === "number") {
+        return -node.argument.value;
+      }
+      return void 0;
+    case "ArrayExpression": {
+      const arr = [];
+      for (const el of node.elements ?? []) {
+        if (!el) {
+          arr.push(null);
+          continue;
+        }
+        const v = extractValue(el);
+        if (v === void 0) return void 0;
+        arr.push(v);
+      }
+      return arr;
+    }
+    case "ObjectExpression":
+      return extractObjectNode(node);
+    case "TemplateLiteral":
+      if ((node.expressions ?? []).length === 0) {
+        const quasis = node.quasis;
+        return quasis[0].value.cooked ?? void 0;
+      }
+      return void 0;
+    default:
+      return void 0;
+  }
+}
+function extractObjectNode(node) {
+  const obj = {};
+  for (const prop of node.properties ?? []) {
+    if (prop.type !== "Property") return void 0;
+    if (prop.computed) return void 0;
+    const key_node = prop.key;
+    let key;
+    if (key_node.type === "Identifier") {
+      key = key_node.name;
+    } else if (key_node.type === "Literal" && typeof key_node.value === "string") {
+      key = key_node.value;
+    } else if (key_node.type === "Literal" && typeof key_node.value === "number") {
+      key = String(key_node.value);
+    } else {
+      return void 0;
+    }
+    const value = extractValue(prop.value);
+    if (value === void 0) return void 0;
+    obj[key] = value;
+  }
+  return obj;
+}
+export function parseObjectLiteral(objStr) {
+  try {
+    const src = `const _=${objStr.trim()}`;
+    const parsed = parseSync("sz.js", src);
+    if (parsed.errors.length > 0) return null;
+    const decl = parsed.program.body;
+    const init = decl[0].declarations[0].init ?? null;
+    if (!init || init.type !== "ObjectExpression") return null;
+    return extractObjectNode(init) ?? null;
+  } catch {
+    return null;
+  }
+}
+export function transformMarkup(content, options = {}) {
+  let result = "";
+  let count = 0;
+  let cursor = 0;
+  while (cursor < content.length) {
+    const attributeStart = findSzAttribute(content, cursor);
+    if (attributeStart === -1) {
+      result += content.slice(cursor);
+      break;
+    }
+    result += content.slice(cursor, attributeStart);
+    const match = readSzAttribute(content, attributeStart);
+    if (!match) {
+      result += content.slice(attributeStart, attributeStart + 3);
+      cursor = attributeStart + 3;
+      continue;
+    }
+    const szObj = parseObjectLiteral(match.objectSource);
+    if (!szObj) {
+      if (options.debug) {
+        console.warn(`[csszyx/svelte] Failed to parse sz object: ${match.objectSource}`);
+      }
+      result += content.slice(attributeStart, match.end);
+    } else {
+      const className = transform(szObj).className;
+      count += 1;
+      if (options.debug) {
+        console.log(`[csszyx/svelte] Transformed: ${match.objectSource} -> "${className}"`);
+      }
+      result += `class="${className}"`;
+    }
+    cursor = match.end;
+  }
+  return { code: result, count };
+}
+function findSzAttribute(content, from) {
+  let index = content.indexOf("sz=", from);
+  while (index !== -1) {
+    const before = index === 0 ? "<" : content.charAt(index - 1);
+    if (before === "<" || before === " " || before === "	" || before === "\n" || before === "\r") {
+      return index;
+    }
+    index = content.indexOf("sz=", index + 3);
+  }
+  return -1;
+}
+function readSzAttribute(content, start) {
+  const valueStart = start + 3;
+  const opener = content.charAt(valueStart);
+  if (opener === '"' || opener === "'") {
+    const endQuote = content.indexOf(opener, valueStart + 1);
+    if (endQuote === -1) {
+      return null;
+    }
+    let objectSource = content.slice(valueStart + 1, endQuote);
+    if (objectSource.startsWith("{{") && objectSource.endsWith("}}")) {
+      objectSource = objectSource.slice(1, -1);
+    }
+    if (!objectSource.startsWith("{") || !objectSource.endsWith("}")) {
+      return null;
+    }
+    return { end: endQuote + 1, objectSource };
+  }
+  if (opener !== "{" || content.charAt(valueStart + 1) !== "{") {
+    return null;
+  }
+  const end = findBalancedBraceEnd(content, valueStart);
+  if (end === -1) {
+    return null;
+  }
+  return {
+    end: end + 1,
+    objectSource: content.slice(valueStart + 1, end)
+  };
+}
+function findBalancedBraceEnd(content, start) {
+  let depth = 0;
+  let quote = "";
+  let escaped = false;
+  for (let index = start; index < content.length; index += 1) {
+    const char = content.charAt(index);
+    if (quote) {
+      if (escaped) {
+        escaped = false;
+      } else if (char === "\\") {
+        escaped = true;
+      } else if (char === quote) {
+        quote = "";
+      }
+      continue;
+    }
+    if (char === '"' || char === "'" || char === "`") {
+      quote = char;
+    } else if (char === "{") {
+      depth += 1;
+    } else if (char === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return index;
+      }
+    }
+  }
+  return -1;
+}
+export function mergeClassAttributes(content) {
+  let result = content;
+  let i = 0;
+  while (i < result.length) {
+    const start = result.indexOf("<", i);
+    if (start === -1) break;
+    const end = result.indexOf(">", start);
+    if (end === -1) break;
+    const tag = result.slice(start, end + 1);
+    i = end + 1;
+    if (!/^<[a-z]/i.test(tag)) continue;
+    const matches = [...tag.matchAll(/\bclass="([^"]*)"/g)].map((m) => m[1]);
+    if (matches.length < 2) continue;
+    const merged = matches.join(" ");
+    const firstIdx = tag.indexOf('class="');
+    const cleaned = tag.replace(/\bclass="[^"]*"/g, "");
+    const newTag = `${cleaned.slice(0, firstIdx)}class="${merged}"${cleaned.slice(firstIdx)}`;
+    result = result.slice(0, start) + newTag + result.slice(end + 1);
+    i = start + newTag.length;
+  }
+  return result;
+}
+export function preprocessor(options = {}) {
+  return {
+    name: "csszyx-svelte",
+    markup({ content, filename }) {
+      if (!content.includes("sz=")) {
+        return;
+      }
+      if (options.debug && filename) {
+        console.log(`[csszyx/svelte] Processing: ${filename}`);
+      }
+      const transformResult = transformMarkup(content, options);
+      if (transformResult.count === 0) {
+        return;
+      }
+      const mergedContent = mergeClassAttributes(transformResult.code);
+      if (options.debug) {
+        console.log(`[csszyx/svelte] Transformed ${transformResult.count} sz props`);
+      }
+      return {
+        code: mergedContent,
+        map: void 0
+        // TODO: Generate source map
+      };
+    }
+  };
+}
+export function vitePlugin(options = {}) {
+  return {
+    name: "csszyx-svelte-vite",
+    enforce: "pre",
+    transform(code, id) {
+      if (!id.endsWith(".svelte")) {
+        return null;
+      }
+      if (!code.includes("sz=")) {
+        return null;
+      }
+      const transformResult = transformMarkup(code, options);
+      if (transformResult.count === 0) {
+        return null;
+      }
+      const mergedContent = mergeClassAttributes(transformResult.code);
+      return {
+        code: mergedContent,
+        map: void 0
+        // TODO: Generate source map
+      };
+    }
+  };
+}
+export function preprocess(source, options = {}) {
+  const transformResult = transformMarkup(source, options);
+  if (transformResult.count === 0) {
+    return {
+      code: source,
+      map: void 0
+    };
+  }
+  const mergedContent = mergeClassAttributes(transformResult.code);
+  return {
+    code: mergedContent,
+    map: void 0
+  };
+}
+export default preprocessor;

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@csszyx/svelte-adapter",
+  "version": "0.9.1",
+  "private": false,
+  "description": "Svelte preprocessor for csszyx - transforms sz props into Tailwind CSS classes",
+  "homepage": "https://github.com/nguyennhutien/csszyx/tree/main/packages/svelte-adapter#readme",
+  "bugs": {
+    "url": "https://github.com/nguyennhutien/csszyx/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "oxc-parser": "0.131.0",
+    "@csszyx/compiler": "0.9.1"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "svelte": "^5.0.0",
+    "typescript": "^6.0.3",
+    "unbuild": "^3.6.1",
+    "vitest": "^4.1.6"
+  },
+  "keywords": [
+    "csszyx",
+    "svelte",
+    "preprocessor",
+    "tailwindcss",
+    "css-in-js"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nguyennhutien/csszyx.git",
+    "directory": "packages/svelte-adapter"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "test": "vitest run",
+    "type-check": "tsc --noEmit"
+  }
+}