@csszyx/vue-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,262 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.extractTemplate = extractTemplate;
+exports.mergeClassAttributes = mergeClassAttributes;
+exports.parseObjectLiteral = parseObjectLiteral;
+exports.preprocess = preprocess;
+exports.transformTemplate = transformTemplate;
+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 extractTemplate(source) {
+  const lowered = source.toLowerCase();
+  let openStart = -1;
+  let openEnd = -1;
+  let i = 0;
+  while (i < lowered.length) {
+    const candidate = lowered.indexOf("<template", i);
+    if (candidate === -1) return null;
+    const after = lowered.charAt(candidate + "<template".length);
+    if (after === ">" || after === " " || after === "	" || after === "\n" || after === "\r") {
+      const tagClose = lowered.indexOf(">", candidate);
+      if (tagClose === -1) return null;
+      openStart = candidate;
+      openEnd = tagClose + 1;
+      break;
+    }
+    i = candidate + 1;
+  }
+  if (openStart === -1) return null;
+  const closeStart = lowered.indexOf("</template>", openEnd);
+  if (closeStart === -1) return null;
+  return {
+    content: source.slice(openEnd, closeStart),
+    start: openEnd,
+    end: closeStart
+  };
+}
+function transformTemplate(template, options = {}) {
+  let result = "";
+  let count = 0;
+  let cursor = 0;
+  while (cursor < template.length) {
+    const attribute = findVueSzAttribute(template, cursor);
+    if (!attribute) {
+      result += template.slice(cursor);
+      break;
+    }
+    result += template.slice(cursor, attribute.start);
+    const match = readQuotedSzAttribute(template, attribute.start, attribute.valueStart);
+    if (!match) {
+      result += template.slice(attribute.start, attribute.valueStart);
+      cursor = attribute.valueStart;
+      continue;
+    }
+    const szObj = parseObjectLiteral(match.objectSource);
+    if (!szObj) {
+      if (options.debug) {
+        console.warn(`[csszyx/vue] Failed to parse sz object: ${match.objectSource}`);
+      }
+      result += template.slice(attribute.start, match.end);
+    } else {
+      const className = (0, _compiler.transform)(szObj).className;
+      count += 1;
+      if (options.debug) {
+        console.log(`[csszyx/vue] Transformed: ${match.objectSource} -> "${className}"`);
+      }
+      result += `class="${className}"`;
+    }
+    cursor = match.end;
+  }
+  return {
+    code: result,
+    transformed: count > 0,
+    count
+  };
+}
+function findVueSzAttribute(template, from) {
+  let szStart = template.indexOf("sz=", from);
+  while (szStart !== -1) {
+    for (const prefix of ["v-bind:", ":", ""]) {
+      const start = szStart - prefix.length;
+      if (start < 0 || template.slice(start, szStart) !== prefix) {
+        continue;
+      }
+      const before = start === 0 ? "<" : template.charAt(start - 1);
+      if (isAttributeBoundary(before)) {
+        return {
+          start,
+          valueStart: szStart + 3
+        };
+      }
+    }
+    szStart = template.indexOf("sz=", szStart + 3);
+  }
+  return null;
+}
+function readQuotedSzAttribute(template, start, valueStart) {
+  const quote = template.charAt(valueStart);
+  if (quote !== '"' && quote !== "'") {
+    return null;
+  }
+  const endQuote = template.indexOf(quote, valueStart + 1);
+  if (endQuote === -1) {
+    return null;
+  }
+  const objectSource = template.slice(valueStart + 1, endQuote);
+  if (!objectSource.startsWith("{") || !objectSource.endsWith("}")) {
+    return null;
+  }
+  return {
+    end: endQuote + 1,
+    objectSource
+  };
+}
+function isAttributeBoundary(char) {
+  return char === "<" || char === " " || char === "	" || char === "\n" || char === "\r";
+}
+function mergeClassAttributes(template) {
+  let result = template;
+  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 staticMatch = /\bclass="([^"]*)"/.exec(tag);
+    const dynamicMatch = /\b(?::class|v-bind:class)="([^"]*)"/.exec(tag);
+    if (!staticMatch || !dynamicMatch) continue;
+    const cleaned = tag.replace(/\bclass="[^"]*"/, "").replace(/\b(?::class|v-bind:class)="[^"]*"/, "");
+    const insertIdx = cleaned.indexOf(" ") + 1;
+    const newTag = `${cleaned.slice(0, insertIdx)}:class="['${staticMatch[1]}', ${dynamicMatch[1]}]" ${cleaned.slice(insertIdx)}`;
+    result = result.slice(0, start) + newTag + result.slice(end + 1);
+    i = start + newTag.length;
+  }
+  return result;
+}
+function preprocess(source, options = {}) {
+  const templateInfo = extractTemplate(source);
+  if (!templateInfo) {
+    return {
+      code: source,
+      transformed: false,
+      count: 0
+    };
+  }
+  const transformResult = transformTemplate(templateInfo.content, options);
+  if (!transformResult.transformed) {
+    return {
+      code: source,
+      transformed: false,
+      count: 0
+    };
+  }
+  const mergedContent = mergeClassAttributes(transformResult.code);
+  const code = source.slice(0, templateInfo.start) + mergedContent + source.slice(templateInfo.end);
+  return {
+    code,
+    transformed: true,
+    count: transformResult.count
+  };
+}
+function vitePlugin(options = {}) {
+  return {
+    name: "csszyx-vue",
+    enforce: "pre",
+    transform(code, id) {
+      if (!id.endsWith(".vue")) {
+        return null;
+      }
+      if (!code.includes("sz=")) {
+        return null;
+      }
+      const result = preprocess(code, options);
+      if (!result.transformed) {
+        return null;
+      }
+      return {
+        code: result.code,
+        map: null
+        // TODO: Generate source map
+      };
+    }
+  };
+}
+module.exports = vitePlugin;

package/dist/index.d.cts

@@ -0,0 +1,129 @@
+/**
+ * @csszyx/vue-adapter - Vue SFC preprocessor for csszyx.
+ *
+ * Transforms `sz` props in Vue SFC templates into Tailwind CSS class strings.
+ *
+ * @module @csszyx/vue-adapter
+ */
+import { type SzObject } from '@csszyx/compiler';
+/**
+ * Preprocessor options.
+ */
+export interface VueAdapterOptions {
+    /**
+     * Enable verbose logging for debugging.
+     */
+    debug?: boolean;
+}
+/**
+ * Result of preprocessing a Vue SFC.
+ */
+export interface PreprocessResult {
+    /**
+     * The transformed source code.
+     */
+    code: string;
+    /**
+     * Whether any transformations were made.
+     */
+    transformed: boolean;
+    /**
+     * Number of sz props transformed.
+     */
+    count: number;
+}
+/**
+ * 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;
+/**
+ * Extract the template section from a Vue SFC.
+ *
+ * @param {string} source - Vue SFC source code
+ * @returns {{ content: string; start: number; end: number } | null} Template info or null
+ */
+export declare function extractTemplate(source: string): {
+    content: string;
+    start: number;
+    end: number;
+} | null;
+/**
+ * Transform sz props in a template string.
+ *
+ * Supports:
+ * - Static: sz="{ p: 4 }" or sz='{ p: 4 }'
+ * - Bound (Vue): :sz="{ p: 4 }" or v-bind:sz="{ p: 4 }"
+ *
+ * @param {string} template - Template string
+ * @param {VueAdapterOptions} options - Options
+ * @returns {PreprocessResult} Transformation result
+ */
+export declare function transformTemplate(template: string, options?: VueAdapterOptions): PreprocessResult;
+/**
+ * Merge transformed classes with existing class attribute.
+ *
+ * @param {string} template - Template with sz props transformed to class
+ * @returns {string} Template with merged class attributes
+ */
+export declare function mergeClassAttributes(template: string): string;
+/**
+ * Preprocess a Vue SFC file, transforming sz props to class attributes.
+ *
+ * @param {string} source - Vue SFC source code
+ * @param {VueAdapterOptions} options - Preprocessor options
+ * @returns {PreprocessResult} Preprocessing result
+ *
+ * @example
+ * ```typescript
+ * import { preprocess } from '@csszyx/vue-adapter';
+ *
+ * const result = preprocess(`
+ *   <template>
+ *     <div sz="{ p: 4, bg: 'red-500' }">Hello</div>
+ *   </template>
+ * `);
+ *
+ * // result.code contains:
+ * // <template>
+ * //   <div class="p-4 bg-red-500">Hello</div>
+ * // </template>
+ * ```
+ */
+export declare function preprocess(source: string, options?: VueAdapterOptions): PreprocessResult;
+/**
+ * Create a Vite plugin for Vue SFC preprocessing.
+ *
+ * @param {VueAdapterOptions} options - Plugin options
+ * @returns {object} Vite plugin
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import vue from '@vitejs/plugin-vue';
+ * import { vitePlugin as csszyx } from '@csszyx/vue-adapter';
+ *
+ * export default defineConfig({
+ *     plugins: [
+ *         csszyx(),
+ *         vue(),
+ *     ],
+ * });
+ * ```
+ */
+import type { Plugin } from 'vite';
+/**
+ * Create a Vite plugin for Vue SFC preprocessing.
+ *
+ * @param {VueAdapterOptions} options - Plugin options
+ * @returns {Plugin} Vite plugin
+ */
+export declare function vitePlugin(options?: VueAdapterOptions): Plugin;
+/**
+ * Default export for convenient importing.
+ */
+export default vitePlugin;

package/dist/index.d.mts

@@ -0,0 +1,129 @@
+/**
+ * @csszyx/vue-adapter - Vue SFC preprocessor for csszyx.
+ *
+ * Transforms `sz` props in Vue SFC templates into Tailwind CSS class strings.
+ *
+ * @module @csszyx/vue-adapter
+ */
+import { type SzObject } from '@csszyx/compiler';
+/**
+ * Preprocessor options.
+ */
+export interface VueAdapterOptions {
+    /**
+     * Enable verbose logging for debugging.
+     */
+    debug?: boolean;
+}
+/**
+ * Result of preprocessing a Vue SFC.
+ */
+export interface PreprocessResult {
+    /**
+     * The transformed source code.
+     */
+    code: string;
+    /**
+     * Whether any transformations were made.
+     */
+    transformed: boolean;
+    /**
+     * Number of sz props transformed.
+     */
+    count: number;
+}
+/**
+ * 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;
+/**
+ * Extract the template section from a Vue SFC.
+ *
+ * @param {string} source - Vue SFC source code
+ * @returns {{ content: string; start: number; end: number } | null} Template info or null
+ */
+export declare function extractTemplate(source: string): {
+    content: string;
+    start: number;
+    end: number;
+} | null;
+/**
+ * Transform sz props in a template string.
+ *
+ * Supports:
+ * - Static: sz="{ p: 4 }" or sz='{ p: 4 }'
+ * - Bound (Vue): :sz="{ p: 4 }" or v-bind:sz="{ p: 4 }"
+ *
+ * @param {string} template - Template string
+ * @param {VueAdapterOptions} options - Options
+ * @returns {PreprocessResult} Transformation result
+ */
+export declare function transformTemplate(template: string, options?: VueAdapterOptions): PreprocessResult;
+/**
+ * Merge transformed classes with existing class attribute.
+ *
+ * @param {string} template - Template with sz props transformed to class
+ * @returns {string} Template with merged class attributes
+ */
+export declare function mergeClassAttributes(template: string): string;
+/**
+ * Preprocess a Vue SFC file, transforming sz props to class attributes.
+ *
+ * @param {string} source - Vue SFC source code
+ * @param {VueAdapterOptions} options - Preprocessor options
+ * @returns {PreprocessResult} Preprocessing result
+ *
+ * @example
+ * ```typescript
+ * import { preprocess } from '@csszyx/vue-adapter';
+ *
+ * const result = preprocess(`
+ *   <template>
+ *     <div sz="{ p: 4, bg: 'red-500' }">Hello</div>
+ *   </template>
+ * `);
+ *
+ * // result.code contains:
+ * // <template>
+ * //   <div class="p-4 bg-red-500">Hello</div>
+ * // </template>
+ * ```
+ */
+export declare function preprocess(source: string, options?: VueAdapterOptions): PreprocessResult;
+/**
+ * Create a Vite plugin for Vue SFC preprocessing.
+ *
+ * @param {VueAdapterOptions} options - Plugin options
+ * @returns {object} Vite plugin
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import vue from '@vitejs/plugin-vue';
+ * import { vitePlugin as csszyx } from '@csszyx/vue-adapter';
+ *
+ * export default defineConfig({
+ *     plugins: [
+ *         csszyx(),
+ *         vue(),
+ *     ],
+ * });
+ * ```
+ */
+import type { Plugin } from 'vite';
+/**
+ * Create a Vite plugin for Vue SFC preprocessing.
+ *
+ * @param {VueAdapterOptions} options - Plugin options
+ * @returns {Plugin} Vite plugin
+ */
+export declare function vitePlugin(options?: VueAdapterOptions): Plugin;
+/**
+ * Default export for convenient importing.
+ */
+export default vitePlugin;

package/dist/index.d.ts

@@ -0,0 +1,129 @@
+/**
+ * @csszyx/vue-adapter - Vue SFC preprocessor for csszyx.
+ *
+ * Transforms `sz` props in Vue SFC templates into Tailwind CSS class strings.
+ *
+ * @module @csszyx/vue-adapter
+ */
+import { type SzObject } from '@csszyx/compiler';
+/**
+ * Preprocessor options.
+ */
+export interface VueAdapterOptions {
+    /**
+     * Enable verbose logging for debugging.
+     */
+    debug?: boolean;
+}
+/**
+ * Result of preprocessing a Vue SFC.
+ */
+export interface PreprocessResult {
+    /**
+     * The transformed source code.
+     */
+    code: string;
+    /**
+     * Whether any transformations were made.
+     */
+    transformed: boolean;
+    /**
+     * Number of sz props transformed.
+     */
+    count: number;
+}
+/**
+ * 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;
+/**
+ * Extract the template section from a Vue SFC.
+ *
+ * @param {string} source - Vue SFC source code
+ * @returns {{ content: string; start: number; end: number } | null} Template info or null
+ */
+export declare function extractTemplate(source: string): {
+    content: string;
+    start: number;
+    end: number;
+} | null;
+/**
+ * Transform sz props in a template string.
+ *
+ * Supports:
+ * - Static: sz="{ p: 4 }" or sz='{ p: 4 }'
+ * - Bound (Vue): :sz="{ p: 4 }" or v-bind:sz="{ p: 4 }"
+ *
+ * @param {string} template - Template string
+ * @param {VueAdapterOptions} options - Options
+ * @returns {PreprocessResult} Transformation result
+ */
+export declare function transformTemplate(template: string, options?: VueAdapterOptions): PreprocessResult;
+/**
+ * Merge transformed classes with existing class attribute.
+ *
+ * @param {string} template - Template with sz props transformed to class
+ * @returns {string} Template with merged class attributes
+ */
+export declare function mergeClassAttributes(template: string): string;
+/**
+ * Preprocess a Vue SFC file, transforming sz props to class attributes.
+ *
+ * @param {string} source - Vue SFC source code
+ * @param {VueAdapterOptions} options - Preprocessor options
+ * @returns {PreprocessResult} Preprocessing result
+ *
+ * @example
+ * ```typescript
+ * import { preprocess } from '@csszyx/vue-adapter';
+ *
+ * const result = preprocess(`
+ *   <template>
+ *     <div sz="{ p: 4, bg: 'red-500' }">Hello</div>
+ *   </template>
+ * `);
+ *
+ * // result.code contains:
+ * // <template>
+ * //   <div class="p-4 bg-red-500">Hello</div>
+ * // </template>
+ * ```
+ */
+export declare function preprocess(source: string, options?: VueAdapterOptions): PreprocessResult;
+/**
+ * Create a Vite plugin for Vue SFC preprocessing.
+ *
+ * @param {VueAdapterOptions} options - Plugin options
+ * @returns {object} Vite plugin
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import vue from '@vitejs/plugin-vue';
+ * import { vitePlugin as csszyx } from '@csszyx/vue-adapter';
+ *
+ * export default defineConfig({
+ *     plugins: [
+ *         csszyx(),
+ *         vue(),
+ *     ],
+ * });
+ * ```
+ */
+import type { Plugin } from 'vite';
+/**
+ * Create a Vite plugin for Vue SFC preprocessing.
+ *
+ * @param {VueAdapterOptions} options - Plugin options
+ * @returns {Plugin} Vite plugin
+ */
+export declare function vitePlugin(options?: VueAdapterOptions): Plugin;
+/**
+ * Default export for convenient importing.
+ */
+export default vitePlugin;

package/dist/index.js

@@ -0,0 +1,262 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.extractTemplate = extractTemplate;
+exports.mergeClassAttributes = mergeClassAttributes;
+exports.parseObjectLiteral = parseObjectLiteral;
+exports.preprocess = preprocess;
+exports.transformTemplate = transformTemplate;
+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 extractTemplate(source) {
+  const lowered = source.toLowerCase();
+  let openStart = -1;
+  let openEnd = -1;
+  let i = 0;
+  while (i < lowered.length) {
+    const candidate = lowered.indexOf("<template", i);
+    if (candidate === -1) return null;
+    const after = lowered.charAt(candidate + "<template".length);
+    if (after === ">" || after === " " || after === "	" || after === "\n" || after === "\r") {
+      const tagClose = lowered.indexOf(">", candidate);
+      if (tagClose === -1) return null;
+      openStart = candidate;
+      openEnd = tagClose + 1;
+      break;
+    }
+    i = candidate + 1;
+  }
+  if (openStart === -1) return null;
+  const closeStart = lowered.indexOf("</template>", openEnd);
+  if (closeStart === -1) return null;
+  return {
+    content: source.slice(openEnd, closeStart),
+    start: openEnd,
+    end: closeStart
+  };
+}
+function transformTemplate(template, options = {}) {
+  let result = "";
+  let count = 0;
+  let cursor = 0;
+  while (cursor < template.length) {
+    const attribute = findVueSzAttribute(template, cursor);
+    if (!attribute) {
+      result += template.slice(cursor);
+      break;
+    }
+    result += template.slice(cursor, attribute.start);
+    const match = readQuotedSzAttribute(template, attribute.start, attribute.valueStart);
+    if (!match) {
+      result += template.slice(attribute.start, attribute.valueStart);
+      cursor = attribute.valueStart;
+      continue;
+    }
+    const szObj = parseObjectLiteral(match.objectSource);
+    if (!szObj) {
+      if (options.debug) {
+        console.warn(`[csszyx/vue] Failed to parse sz object: ${match.objectSource}`);
+      }
+      result += template.slice(attribute.start, match.end);
+    } else {
+      const className = (0, _compiler.transform)(szObj).className;
+      count += 1;
+      if (options.debug) {
+        console.log(`[csszyx/vue] Transformed: ${match.objectSource} -> "${className}"`);
+      }
+      result += `class="${className}"`;
+    }
+    cursor = match.end;
+  }
+  return {
+    code: result,
+    transformed: count > 0,
+    count
+  };
+}
+function findVueSzAttribute(template, from) {
+  let szStart = template.indexOf("sz=", from);
+  while (szStart !== -1) {
+    for (const prefix of ["v-bind:", ":", ""]) {
+      const start = szStart - prefix.length;
+      if (start < 0 || template.slice(start, szStart) !== prefix) {
+        continue;
+      }
+      const before = start === 0 ? "<" : template.charAt(start - 1);
+      if (isAttributeBoundary(before)) {
+        return {
+          start,
+          valueStart: szStart + 3
+        };
+      }
+    }
+    szStart = template.indexOf("sz=", szStart + 3);
+  }
+  return null;
+}
+function readQuotedSzAttribute(template, start, valueStart) {
+  const quote = template.charAt(valueStart);
+  if (quote !== '"' && quote !== "'") {
+    return null;
+  }
+  const endQuote = template.indexOf(quote, valueStart + 1);
+  if (endQuote === -1) {
+    return null;
+  }
+  const objectSource = template.slice(valueStart + 1, endQuote);
+  if (!objectSource.startsWith("{") || !objectSource.endsWith("}")) {
+    return null;
+  }
+  return {
+    end: endQuote + 1,
+    objectSource
+  };
+}
+function isAttributeBoundary(char) {
+  return char === "<" || char === " " || char === "	" || char === "\n" || char === "\r";
+}
+function mergeClassAttributes(template) {
+  let result = template;
+  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 staticMatch = /\bclass="([^"]*)"/.exec(tag);
+    const dynamicMatch = /\b(?::class|v-bind:class)="([^"]*)"/.exec(tag);
+    if (!staticMatch || !dynamicMatch) continue;
+    const cleaned = tag.replace(/\bclass="[^"]*"/, "").replace(/\b(?::class|v-bind:class)="[^"]*"/, "");
+    const insertIdx = cleaned.indexOf(" ") + 1;
+    const newTag = `${cleaned.slice(0, insertIdx)}:class="['${staticMatch[1]}', ${dynamicMatch[1]}]" ${cleaned.slice(insertIdx)}`;
+    result = result.slice(0, start) + newTag + result.slice(end + 1);
+    i = start + newTag.length;
+  }
+  return result;
+}
+function preprocess(source, options = {}) {
+  const templateInfo = extractTemplate(source);
+  if (!templateInfo) {
+    return {
+      code: source,
+      transformed: false,
+      count: 0
+    };
+  }
+  const transformResult = transformTemplate(templateInfo.content, options);
+  if (!transformResult.transformed) {
+    return {
+      code: source,
+      transformed: false,
+      count: 0
+    };
+  }
+  const mergedContent = mergeClassAttributes(transformResult.code);
+  const code = source.slice(0, templateInfo.start) + mergedContent + source.slice(templateInfo.end);
+  return {
+    code,
+    transformed: true,
+    count: transformResult.count
+  };
+}
+function vitePlugin(options = {}) {
+  return {
+    name: "csszyx-vue",
+    enforce: "pre",
+    transform(code, id) {
+      if (!id.endsWith(".vue")) {
+        return null;
+      }
+      if (!code.includes("sz=")) {
+        return null;
+      }
+      const result = preprocess(code, options);
+      if (!result.transformed) {
+        return null;
+      }
+      return {
+        code: result.code,
+        map: null
+        // TODO: Generate source map
+      };
+    }
+  };
+}
+module.exports = vitePlugin;

package/dist/index.mjs

@@ -0,0 +1,243 @@
+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 extractTemplate(source) {
+  const lowered = source.toLowerCase();
+  let openStart = -1;
+  let openEnd = -1;
+  let i = 0;
+  while (i < lowered.length) {
+    const candidate = lowered.indexOf("<template", i);
+    if (candidate === -1) return null;
+    const after = lowered.charAt(candidate + "<template".length);
+    if (after === ">" || after === " " || after === "	" || after === "\n" || after === "\r") {
+      const tagClose = lowered.indexOf(">", candidate);
+      if (tagClose === -1) return null;
+      openStart = candidate;
+      openEnd = tagClose + 1;
+      break;
+    }
+    i = candidate + 1;
+  }
+  if (openStart === -1) return null;
+  const closeStart = lowered.indexOf("</template>", openEnd);
+  if (closeStart === -1) return null;
+  return {
+    content: source.slice(openEnd, closeStart),
+    start: openEnd,
+    end: closeStart
+  };
+}
+export function transformTemplate(template, options = {}) {
+  let result = "";
+  let count = 0;
+  let cursor = 0;
+  while (cursor < template.length) {
+    const attribute = findVueSzAttribute(template, cursor);
+    if (!attribute) {
+      result += template.slice(cursor);
+      break;
+    }
+    result += template.slice(cursor, attribute.start);
+    const match = readQuotedSzAttribute(template, attribute.start, attribute.valueStart);
+    if (!match) {
+      result += template.slice(attribute.start, attribute.valueStart);
+      cursor = attribute.valueStart;
+      continue;
+    }
+    const szObj = parseObjectLiteral(match.objectSource);
+    if (!szObj) {
+      if (options.debug) {
+        console.warn(`[csszyx/vue] Failed to parse sz object: ${match.objectSource}`);
+      }
+      result += template.slice(attribute.start, match.end);
+    } else {
+      const className = transform(szObj).className;
+      count += 1;
+      if (options.debug) {
+        console.log(`[csszyx/vue] Transformed: ${match.objectSource} -> "${className}"`);
+      }
+      result += `class="${className}"`;
+    }
+    cursor = match.end;
+  }
+  return {
+    code: result,
+    transformed: count > 0,
+    count
+  };
+}
+function findVueSzAttribute(template, from) {
+  let szStart = template.indexOf("sz=", from);
+  while (szStart !== -1) {
+    for (const prefix of ["v-bind:", ":", ""]) {
+      const start = szStart - prefix.length;
+      if (start < 0 || template.slice(start, szStart) !== prefix) {
+        continue;
+      }
+      const before = start === 0 ? "<" : template.charAt(start - 1);
+      if (isAttributeBoundary(before)) {
+        return { start, valueStart: szStart + 3 };
+      }
+    }
+    szStart = template.indexOf("sz=", szStart + 3);
+  }
+  return null;
+}
+function readQuotedSzAttribute(template, start, valueStart) {
+  const quote = template.charAt(valueStart);
+  if (quote !== '"' && quote !== "'") {
+    return null;
+  }
+  const endQuote = template.indexOf(quote, valueStart + 1);
+  if (endQuote === -1) {
+    return null;
+  }
+  const objectSource = template.slice(valueStart + 1, endQuote);
+  if (!objectSource.startsWith("{") || !objectSource.endsWith("}")) {
+    return null;
+  }
+  return { end: endQuote + 1, objectSource };
+}
+function isAttributeBoundary(char) {
+  return char === "<" || char === " " || char === "	" || char === "\n" || char === "\r";
+}
+export function mergeClassAttributes(template) {
+  let result = template;
+  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 staticMatch = /\bclass="([^"]*)"/.exec(tag);
+    const dynamicMatch = /\b(?::class|v-bind:class)="([^"]*)"/.exec(tag);
+    if (!staticMatch || !dynamicMatch) continue;
+    const cleaned = tag.replace(/\bclass="[^"]*"/, "").replace(/\b(?::class|v-bind:class)="[^"]*"/, "");
+    const insertIdx = cleaned.indexOf(" ") + 1;
+    const newTag = `${cleaned.slice(0, insertIdx)}:class="['${staticMatch[1]}', ${dynamicMatch[1]}]" ${cleaned.slice(insertIdx)}`;
+    result = result.slice(0, start) + newTag + result.slice(end + 1);
+    i = start + newTag.length;
+  }
+  return result;
+}
+export function preprocess(source, options = {}) {
+  const templateInfo = extractTemplate(source);
+  if (!templateInfo) {
+    return {
+      code: source,
+      transformed: false,
+      count: 0
+    };
+  }
+  const transformResult = transformTemplate(templateInfo.content, options);
+  if (!transformResult.transformed) {
+    return {
+      code: source,
+      transformed: false,
+      count: 0
+    };
+  }
+  const mergedContent = mergeClassAttributes(transformResult.code);
+  const code = source.slice(0, templateInfo.start) + mergedContent + source.slice(templateInfo.end);
+  return {
+    code,
+    transformed: true,
+    count: transformResult.count
+  };
+}
+export function vitePlugin(options = {}) {
+  return {
+    name: "csszyx-vue",
+    enforce: "pre",
+    transform(code, id) {
+      if (!id.endsWith(".vue")) {
+        return null;
+      }
+      if (!code.includes("sz=")) {
+        return null;
+      }
+      const result = preprocess(code, options);
+      if (!result.transformed) {
+        return null;
+      }
+      return {
+        code: result.code,
+        map: null
+        // TODO: Generate source map
+      };
+    }
+  };
+}
+export default vitePlugin;

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@csszyx/vue-adapter",
+  "version": "0.9.1",
+  "private": false,
+  "description": "Vue SFC preprocessor for csszyx - transform sz props to className",
+  "license": "MIT",
+  "homepage": "https://github.com/nguyennhutien/csszyx/tree/main/packages/vue-adapter#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nguyennhutien/csszyx.git",
+    "directory": "packages/vue-adapter"
+  },
+  "bugs": {
+    "url": "https://github.com/nguyennhutien/csszyx/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "dependencies": {
+    "oxc-parser": "0.131.0",
+    "@csszyx/compiler": "0.9.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.13",
+    "vitest": "^4.1.6",
+    "vue": "^3.4.0",
+    "unbuild": "^3.6.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "csszyx",
+    "vue",
+    "sfc",
+    "preprocessor",
+    "tailwind"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "test": "vitest run",
+    "type-check": "tsc --noEmit"
+  }
+}