@csszyx/unplugin 0.1.0

package/dist/css-mangler.cjs

@@ -0,0 +1,240 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/css-mangler.ts
+var css_mangler_exports = {};
+__export(css_mangler_exports, {
+  createPostCSSPlugin: () => createPostCSSPlugin,
+  escapeCSSClassName: () => escapeCSSClassName,
+  mangleCSS: () => mangleCSS,
+  mangleCSSSync: () => mangleCSSSync,
+  unescapeTailwindClass: () => unescapeTailwindClass
+});
+module.exports = __toCommonJS(css_mangler_exports);
+var import_postcss = __toESM(require("postcss"), 1);
+var import_postcss_selector_parser = __toESM(require("postcss-selector-parser"), 1);
+function unescapeTailwindClass(escapedName) {
+  let result = "";
+  let i = 0;
+  while (i < escapedName.length) {
+    if (escapedName[i] === "\\") {
+      i++;
+      if (i >= escapedName.length) {
+        break;
+      }
+      const char = escapedName[i];
+      if (/[0-9a-fA-F]/.test(char)) {
+        let hexStr = "";
+        while (i < escapedName.length && /[0-9a-fA-F]/.test(escapedName[i]) && hexStr.length < 6) {
+          hexStr += escapedName[i];
+          i++;
+        }
+        if (i < escapedName.length && escapedName[i] === " ") {
+          i++;
+        }
+        const codePoint = parseInt(hexStr, 16);
+        if (codePoint > 0) {
+          result += String.fromCodePoint(codePoint);
+        }
+        continue;
+      }
+      result += char;
+      i++;
+    } else {
+      result += escapedName[i];
+      i++;
+    }
+  }
+  return result;
+}
+function escapeCSSClassName(className) {
+  let result = "";
+  for (let i = 0; i < className.length; i++) {
+    const char = className[i];
+    const code = char.charCodeAt(0);
+    if (i === 0) {
+      if (/[0-9]/.test(char)) {
+        result += "\\3" + char + " ";
+        continue;
+      }
+      if (char === "-" && i + 1 < className.length) {
+        const next = className[i + 1];
+        if (/[0-9]/.test(next) || next === "-") {
+          result += "\\-";
+          continue;
+        }
+      }
+    }
+    if (/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/.test(char)) {
+      result += "\\" + char;
+    } else if (code >= 128) {
+      result += char;
+    } else {
+      result += char;
+    }
+  }
+  return result;
+}
+function createSelectorProcessor(mangleMap, mangledClasses, unmangledClasses) {
+  return (0, import_postcss_selector_parser.default)((selectors) => {
+    selectors.walkClasses((classNode) => {
+      const originalValue = classNode.value;
+      const unescapedValue = unescapeTailwindClass(originalValue);
+      let mangledValue, matchedKey;
+      if (mangleMap[unescapedValue]) {
+        mangledValue = mangleMap[unescapedValue];
+        matchedKey = unescapedValue;
+      } else if (mangleMap[originalValue]) {
+        mangledValue = mangleMap[originalValue];
+        matchedKey = originalValue;
+      }
+      if (mangledValue && matchedKey) {
+        classNode.value = mangledValue;
+        mangledClasses.add(matchedKey);
+      } else {
+        unmangledClasses.add(originalValue);
+      }
+    });
+  });
+}
+async function mangleCSS(css, mangleMap, options = {}) {
+  const mangledClasses = /* @__PURE__ */ new Set();
+  const unmangledClasses = /* @__PURE__ */ new Set();
+  let transformedCount = 0;
+  const selectorProcessor = createSelectorProcessor(
+    mangleMap,
+    mangledClasses,
+    unmangledClasses
+  );
+  const csszyxManglerPlugin = {
+    postcssPlugin: "csszyx-css-mangler",
+    Rule(rule) {
+      try {
+        const originalSelector = rule.selector;
+        const newSelector = selectorProcessor.processSync(originalSelector);
+        if (newSelector !== originalSelector) {
+          rule.selector = newSelector;
+          transformedCount++;
+        }
+      } catch (error) {
+        if (options.debug) {
+          console.warn(`[csszyx] Failed to process selector: ${rule.selector}`, error);
+        }
+      }
+    }
+  };
+  const result = await (0, import_postcss.default)([csszyxManglerPlugin]).process(css, {
+    from: options.from
+  });
+  if (options.debug) {
+    console.log(`[csszyx] CSS Mangler: ${transformedCount} selectors transformed`);
+    console.log(`[csszyx] Mangled classes: ${mangledClasses.size}`);
+    console.log(`[csszyx] Unmangled classes: ${unmangledClasses.size}`);
+  }
+  return {
+    css: result.css,
+    transformedCount,
+    mangledClasses: Array.from(mangledClasses),
+    unmangledClasses: Array.from(unmangledClasses)
+  };
+}
+function mangleCSSSync(css, mangleMap, options = {}) {
+  const mangledClasses = /* @__PURE__ */ new Set();
+  const unmangledClasses = /* @__PURE__ */ new Set();
+  let transformedCount = 0;
+  const selectorProcessor = createSelectorProcessor(
+    mangleMap,
+    mangledClasses,
+    unmangledClasses
+  );
+  const root = import_postcss.default.parse(css, { from: options.from });
+  root.walkRules((rule) => {
+    try {
+      const originalSelector = rule.selector;
+      const newSelector = selectorProcessor.processSync(originalSelector);
+      if (newSelector !== originalSelector) {
+        rule.selector = newSelector;
+        transformedCount++;
+      }
+    } catch (error) {
+      if (options.debug) {
+        console.warn(`[csszyx] Failed to process selector: ${rule.selector}`, error);
+      }
+    }
+  });
+  if (options.debug) {
+    console.log(`[csszyx] CSS Mangler: ${transformedCount} selectors transformed`);
+    console.log(`[csszyx] Mangled classes: ${mangledClasses.size}`);
+    console.log(`[csszyx] Unmangled classes: ${unmangledClasses.size}`);
+  }
+  return {
+    css: root.toString(),
+    transformedCount,
+    mangledClasses: Array.from(mangledClasses),
+    unmangledClasses: Array.from(unmangledClasses)
+  };
+}
+function createPostCSSPlugin(mangleMap, options = {}) {
+  const mangledClasses = /* @__PURE__ */ new Set();
+  const unmangledClasses = /* @__PURE__ */ new Set();
+  const selectorProcessor = createSelectorProcessor(
+    mangleMap,
+    mangledClasses,
+    unmangledClasses
+  );
+  return {
+    postcssPlugin: "csszyx-css-mangler",
+    Rule(rule) {
+      try {
+        const originalSelector = rule.selector;
+        const newSelector = selectorProcessor.processSync(originalSelector);
+        if (newSelector !== originalSelector) {
+          rule.selector = newSelector;
+        }
+      } catch (error) {
+        if (options.debug) {
+          console.warn(`[csszyx] Failed to process selector: ${rule.selector}`, error);
+        }
+      }
+    },
+    OnceExit() {
+      if (options.debug) {
+        console.log(`[csszyx] Mangled ${mangledClasses.size} unique classes`);
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createPostCSSPlugin,
+  escapeCSSClassName,
+  mangleCSS,
+  mangleCSSSync,
+  unescapeTailwindClass
+});

package/dist/css-mangler.d.cts

@@ -0,0 +1,123 @@
+import postcss from 'postcss';
+
+/**
+ * CSS Mangler Module - Zero-Risk CSS Selector Transformation.
+ *
+ * Uses PostCSS AST to safely transform CSS class selectors using the mangle map.
+ * This module guarantees:
+ * - Only class selectors are touched (never IDs, attributes, CSS variables)
+ * - Exact class matching (no partial replacements)
+ * - Proper handling of Tailwind's escaped characters
+ * - Zero CSS syntax errors after transformation
+ *
+ * @module @csszyx/unplugin/css-mangler
+ */
+
+/**
+ * Mangle map type: original class name -> mangled ID.
+ */
+type MangleMap = Record<string, string>;
+/**
+ * CSS Mangler options.
+ */
+interface CSSManglerOptions {
+    /**
+     * Enable debug logging.
+     */
+    debug?: boolean;
+    /**
+     * Source file path for better error messages.
+     */
+    from?: string;
+}
+/**
+ * CSS Mangler result.
+ */
+interface CSSManglerResult {
+    /**
+     * The transformed CSS.
+     */
+    css: string;
+    /**
+     * Number of selectors transformed.
+     */
+    transformedCount: number;
+    /**
+     * List of classes that were mangled.
+     */
+    mangledClasses: string[];
+    /**
+     * List of classes not found in the mangle map.
+     */
+    unmangledClasses: string[];
+}
+/**
+ * Unescape a Tailwind CSS class name.
+ *
+ * Tailwind uses CSS escape sequences for special characters:
+ * - `\.` for literal `.` (e.g., `p-0\.5` -> `p-0.5`)
+ * - `\/` for literal `/` (e.g., `w-1\/2` -> `w-1/2`)
+ * - `\:` for literal `:` (e.g., `hover\:bg-red-500` in CSS -> `hover:bg-red-500`)
+ * - `\!` for literal `!` (important modifier)
+ * - `\[` and `\]` for arbitrary values
+ * - `\#` for hex colors
+ * - `\@` for at-rules in class names
+ * - `\32` (hex for '2') for numeric prefixes like `2xl:`
+ * - Unicode escapes like `\31 ` (space-terminated)
+ *
+ * @param {string} escapedName - The escaped class name from CSS selector
+ * @returns {string} The unescaped class name
+ */
+declare function unescapeTailwindClass(escapedName: string): string;
+/**
+ * Escape a class name for use in CSS selector.
+ *
+ * This is the inverse of unescapeTailwindClass.
+ *
+ * @param {string} className - The unescaped class name
+ * @returns {string} The escaped class name for CSS
+ */
+declare function escapeCSSClassName(className: string): string;
+/**
+ * Mangle CSS selectors using the provided mangle map.
+ *
+ * This function uses PostCSS AST to safely transform only class selectors,
+ * ensuring zero risk of breaking CSS syntax or mangling unintended content.
+ *
+ * @param {string} css - The CSS content to transform
+ * @param {MangleMap} mangleMap - The mangle map (original -> mangled)
+ * @param {CSSManglerOptions} options - Options
+ * @returns {Promise<CSSManglerResult>} The transformation result
+ */
+declare function mangleCSS(css: string, mangleMap: MangleMap, options?: CSSManglerOptions): Promise<CSSManglerResult>;
+/**
+ * Synchronous version of mangleCSS.
+ *
+ * @param {string} css - The CSS content to transform
+ * @param {MangleMap} mangleMap - The mangle map
+ * @param {CSSManglerOptions} options - Options
+ * @returns {CSSManglerResult} The transformation result
+ */
+declare function mangleCSSSync(css: string, mangleMap: MangleMap, options?: CSSManglerOptions): CSSManglerResult;
+/**
+ * Create a PostCSS plugin for CSS mangling.
+ *
+ * This can be used directly in a PostCSS pipeline.
+ *
+ * @param {MangleMap} mangleMap - The mangle map
+ * @param {CSSManglerOptions} options - Options
+ * @returns {postcss.Plugin} PostCSS plugin
+ *
+ * @example
+ * ```typescript
+ * import postcss from 'postcss';
+ * import { createPostCSSPlugin } from '@csszyx/unplugin/css-mangler';
+ *
+ * const result = await postcss([
+ *     createPostCSSPlugin(mangleMap, { debug: true })
+ * ]).process(css);
+ * ```
+ */
+declare function createPostCSSPlugin(mangleMap: MangleMap, options?: CSSManglerOptions): postcss.Plugin;
+
+export { type CSSManglerOptions, type CSSManglerResult, type MangleMap, createPostCSSPlugin, escapeCSSClassName, mangleCSS, mangleCSSSync, unescapeTailwindClass };

package/dist/css-mangler.d.ts

@@ -0,0 +1,123 @@
+import postcss from 'postcss';
+
+/**
+ * CSS Mangler Module - Zero-Risk CSS Selector Transformation.
+ *
+ * Uses PostCSS AST to safely transform CSS class selectors using the mangle map.
+ * This module guarantees:
+ * - Only class selectors are touched (never IDs, attributes, CSS variables)
+ * - Exact class matching (no partial replacements)
+ * - Proper handling of Tailwind's escaped characters
+ * - Zero CSS syntax errors after transformation
+ *
+ * @module @csszyx/unplugin/css-mangler
+ */
+
+/**
+ * Mangle map type: original class name -> mangled ID.
+ */
+type MangleMap = Record<string, string>;
+/**
+ * CSS Mangler options.
+ */
+interface CSSManglerOptions {
+    /**
+     * Enable debug logging.
+     */
+    debug?: boolean;
+    /**
+     * Source file path for better error messages.
+     */
+    from?: string;
+}
+/**
+ * CSS Mangler result.
+ */
+interface CSSManglerResult {
+    /**
+     * The transformed CSS.
+     */
+    css: string;
+    /**
+     * Number of selectors transformed.
+     */
+    transformedCount: number;
+    /**
+     * List of classes that were mangled.
+     */
+    mangledClasses: string[];
+    /**
+     * List of classes not found in the mangle map.
+     */
+    unmangledClasses: string[];
+}
+/**
+ * Unescape a Tailwind CSS class name.
+ *
+ * Tailwind uses CSS escape sequences for special characters:
+ * - `\.` for literal `.` (e.g., `p-0\.5` -> `p-0.5`)
+ * - `\/` for literal `/` (e.g., `w-1\/2` -> `w-1/2`)
+ * - `\:` for literal `:` (e.g., `hover\:bg-red-500` in CSS -> `hover:bg-red-500`)
+ * - `\!` for literal `!` (important modifier)
+ * - `\[` and `\]` for arbitrary values
+ * - `\#` for hex colors
+ * - `\@` for at-rules in class names
+ * - `\32` (hex for '2') for numeric prefixes like `2xl:`
+ * - Unicode escapes like `\31 ` (space-terminated)
+ *
+ * @param {string} escapedName - The escaped class name from CSS selector
+ * @returns {string} The unescaped class name
+ */
+declare function unescapeTailwindClass(escapedName: string): string;
+/**
+ * Escape a class name for use in CSS selector.
+ *
+ * This is the inverse of unescapeTailwindClass.
+ *
+ * @param {string} className - The unescaped class name
+ * @returns {string} The escaped class name for CSS
+ */
+declare function escapeCSSClassName(className: string): string;
+/**
+ * Mangle CSS selectors using the provided mangle map.
+ *
+ * This function uses PostCSS AST to safely transform only class selectors,
+ * ensuring zero risk of breaking CSS syntax or mangling unintended content.
+ *
+ * @param {string} css - The CSS content to transform
+ * @param {MangleMap} mangleMap - The mangle map (original -> mangled)
+ * @param {CSSManglerOptions} options - Options
+ * @returns {Promise<CSSManglerResult>} The transformation result
+ */
+declare function mangleCSS(css: string, mangleMap: MangleMap, options?: CSSManglerOptions): Promise<CSSManglerResult>;
+/**
+ * Synchronous version of mangleCSS.
+ *
+ * @param {string} css - The CSS content to transform
+ * @param {MangleMap} mangleMap - The mangle map
+ * @param {CSSManglerOptions} options - Options
+ * @returns {CSSManglerResult} The transformation result
+ */
+declare function mangleCSSSync(css: string, mangleMap: MangleMap, options?: CSSManglerOptions): CSSManglerResult;
+/**
+ * Create a PostCSS plugin for CSS mangling.
+ *
+ * This can be used directly in a PostCSS pipeline.
+ *
+ * @param {MangleMap} mangleMap - The mangle map
+ * @param {CSSManglerOptions} options - Options
+ * @returns {postcss.Plugin} PostCSS plugin
+ *
+ * @example
+ * ```typescript
+ * import postcss from 'postcss';
+ * import { createPostCSSPlugin } from '@csszyx/unplugin/css-mangler';
+ *
+ * const result = await postcss([
+ *     createPostCSSPlugin(mangleMap, { debug: true })
+ * ]).process(css);
+ * ```
+ */
+declare function createPostCSSPlugin(mangleMap: MangleMap, options?: CSSManglerOptions): postcss.Plugin;
+
+export { type CSSManglerOptions, type CSSManglerResult, type MangleMap, createPostCSSPlugin, escapeCSSClassName, mangleCSS, mangleCSSSync, unescapeTailwindClass };

package/dist/css-mangler.js

@@ -0,0 +1,14 @@
+import {
+  createPostCSSPlugin,
+  escapeCSSClassName,
+  mangleCSS,
+  mangleCSSSync,
+  unescapeTailwindClass
+} from "./chunk-4M7CPGP7.js";
+export {
+  createPostCSSPlugin,
+  escapeCSSClassName,
+  mangleCSS,
+  mangleCSSSync,
+  unescapeTailwindClass
+};