@csszyx/unplugin 0.1.0

package/README.md

@@ -0,0 +1,52 @@
+# @csszyx/unplugin
+
+> Vite, Webpack, and Rollup integration for csszyx.
+
+This package provides the build-time transformations needed to make csszyx work. It handles:
+
+- 🔍 Extracting styles from your code.
+- 🎨 Generating static CSS.
+- 🧩 Mangling class names for production.
+- ⚡ Injecting hydration scripts.
+
+## Installation
+
+```bash
+npm install -D @csszyx/unplugin
+```
+
+## Usage
+
+### Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import csszyx from "@csszyx/unplugin/vite";
+
+export default defineConfig({
+  plugins: [csszyx()],
+});
+```
+
+### Webpack
+
+```js
+// webpack.config.js
+import csszyx from "@csszyx/unplugin/webpack";
+
+export default {
+  plugins: [csszyx()],
+};
+```
+
+## Features
+
+- **Universal Support**: Works with standard unplugin hooks.
+- **HTML Injection**: Automatically injects mangle maps and checksums.
+- **Hot Module Replacement**: Updates styles instantly in dev.
+- **CSS Mangling**: Compresses class names (e.g., `text-center` -> `a`) in production.
+
+## License
+
+MIT © [csszyx contributors](https://github.com/nguyennhutien/csszyx)

package/dist/chunk-4M7CPGP7.js

@@ -0,0 +1,202 @@
+// src/css-mangler.ts
+import postcss from "postcss";
+import selectorParser from "postcss-selector-parser";
+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 selectorParser((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 postcss([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 = postcss.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`);
+      }
+    }
+  };
+}
+
+export {
+  unescapeTailwindClass,
+  escapeCSSClassName,
+  mangleCSS,
+  mangleCSSSync,
+  createPostCSSPlugin
+};