catom 1.2.8 → 2.0.0

package/dist/css.d.ts

@@ -1,5 +1,39 @@
-/// <reference types="node" />
-import { emitCSS } from "./plugin/cssTransform";
-export default function transformCSS(css?: string, ...plugins: any): Promise<Buffer>;
-export declare function autoPrefixCSS(css?: string, ...plugins: any): Promise<Buffer>;
-export { emitCSS };
+export interface CSSRule {
+    className: string;
+    rule: string;
+}
+/**
+ * Generate a CSS rule from a property-value pair.
+ * This is a pure function - same input always gives same output.
+ *
+ * @param property - CSS property name (camelCase or kebab-case)
+ * @param value - CSS value
+ * @param context - Optional context like media query or pseudo selector
+ * @returns CSSRule with className and the full CSS rule string
+ */
+export declare function generateRule(property: string, value: string | number, context?: {
+    media?: string;
+    pseudo?: string;
+}): CSSRule;
+export interface StyleObject {
+    [key: string]: string | number | StyleObject | undefined;
+    media?: Record<string, Record<string, string | number>>;
+    pseudo?: Record<string, Record<string, string | number>>;
+}
+export interface ProcessResult {
+    classNames: string[];
+    rules: string[];
+}
+/**
+ * Process a style object and return class names + CSS rules.
+ * Pure function - no side effects, no global state.
+ */
+export declare function processStyleObject(obj: StyleObject, context?: {
+    media?: string;
+    pseudo?: string;
+}): ProcessResult;
+/**
+ * Deduplicate and sort CSS rules for consistent output.
+ */
+export declare function dedupeRules(rules: string[]): string;
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAcA,MAAM,WAAW,OAAO;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAC5C,OAAO,CA2BT;AAED,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,WAAW,EAChB,OAAO,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAC5C,aAAa,CAiCf;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAEnD"}

package/dist/css.js

@@ -1,35 +1,87 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.emitCSS = exports.autoPrefixCSS = void 0;
-const css_1 = require("@parcel/css");
-const cssTransform_1 = require("./plugin/cssTransform");
-Object.defineProperty(exports, "emitCSS", { enumerable: true, get: function () { return cssTransform_1.emitCSS; } });
-async function transformCSS(css, ...plugins) {
-    css = css || (0, cssTransform_1.emitCSS)();
-    const { code } = (0, css_1.transform)({
-        code: Buffer.from(css),
-        drafts: { customMedia: true, nesting: true },
-        minify: true,
-        filename: "style.css",
-        sourceMap: false,
-        // browserslist hardcoded
-        // probably change or manually audit
-        targets: {
-            android: 6422528,
-            chrome: 6488064,
-            edge: 6488064,
-            firefox: 6356992,
-            ie: 720896,
-            ios_saf: 983552,
-            opera: 5439488,
-            safari: 983552,
-            samsung: 1048576,
-        },
-    });
-    return code;
+import { murmur2 } from "./hash";
+const KEBAB_CASE_RE = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;
+const NUMERIC_START = /^[0-9-]/;
+function toKebabCase(prop) {
+    return prop.replace(KEBAB_CASE_RE, "$1-$2").toLowerCase();
 }
-exports.default = transformCSS;
-function autoPrefixCSS(css, ...plugins) {
-    return transformCSS(css);
+function sanitizeClassName(hash) {
+    // CSS class names can't start with a digit or hyphen
+    return NUMERIC_START.test(hash) ? `_${hash}` : hash;
+}
+/**
+ * Generate a CSS rule from a property-value pair.
+ * This is a pure function - same input always gives same output.
+ *
+ * @param property - CSS property name (camelCase or kebab-case)
+ * @param value - CSS value
+ * @param context - Optional context like media query or pseudo selector
+ * @returns CSSRule with className and the full CSS rule string
+ */
+export function generateRule(property, value, context) {
+    const cssProp = toKebabCase(property.trim());
+    const cssValue = String(value).trim();
+    // The identity includes context so same property in different contexts gets different class
+    const identity = [
+        context?.media || "",
+        context?.pseudo || "",
+        cssProp,
+        cssValue,
+    ].join("|");
+    const className = sanitizeClassName(murmur2(identity));
+    const declaration = `${cssProp}:${cssValue}`;
+    let rule;
+    const selector = context?.pseudo
+        ? `.${className}${context.pseudo}`
+        : `.${className}`;
+    if (context?.media) {
+        rule = `@media ${context.media}{${selector}{${declaration}}}`;
+    }
+    else {
+        rule = `${selector}{${declaration}}`;
+    }
+    return { className, rule };
+}
+/**
+ * Process a style object and return class names + CSS rules.
+ * Pure function - no side effects, no global state.
+ */
+export function processStyleObject(obj, context) {
+    const classNames = [];
+    const rules = [];
+    for (const key of Object.keys(obj)) {
+        const value = obj[key];
+        if (value === undefined)
+            continue;
+        if (key === "media" && typeof value === "object") {
+            // Handle media queries: media: { "(max-width: 768px)": { color: "red" } }
+            for (const query of Object.keys(value)) {
+                const mediaStyles = value[query];
+                const result = processStyleObject(mediaStyles, { media: query });
+                classNames.push(...result.classNames);
+                rules.push(...result.rules);
+            }
+        }
+        else if (key === "pseudo" && typeof value === "object") {
+            // Handle pseudo selectors: pseudo: { ":hover": { color: "blue" } }
+            for (const selector of Object.keys(value)) {
+                const pseudoStyles = value[selector];
+                const result = processStyleObject(pseudoStyles, { pseudo: selector });
+                classNames.push(...result.classNames);
+                rules.push(...result.rules);
+            }
+        }
+        else if (typeof value === "string" || typeof value === "number") {
+            // Regular CSS property
+            const { className, rule } = generateRule(key, value, context);
+            classNames.push(className);
+            rules.push(rule);
+        }
+    }
+    return { classNames, rules };
+}
+/**
+ * Deduplicate and sort CSS rules for consistent output.
+ */
+export function dedupeRules(rules) {
+    return [...new Set(rules)].sort().join("\n");
 }
-exports.autoPrefixCSS = autoPrefixCSS;

package/dist/hash.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Murmur2 hash - deterministic hash function.
+ * Same input always produces the same output.
+ * Adapted from emotion-js.
+ */
+export declare function murmur2(str: string): string;
+//# sourceMappingURL=hash.d.ts.map

package/dist/hash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash.d.ts","sourceRoot":"","sources":["../src/hash.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAqC3C"}

package/dist/hash.js

@@ -0,0 +1,37 @@
+/**
+ * Murmur2 hash - deterministic hash function.
+ * Same input always produces the same output.
+ * Adapted from emotion-js.
+ */
+export function murmur2(str) {
+    let h = 0;
+    let k;
+    let i = 0;
+    let len = str.length;
+    for (; len >= 4; ++i, len -= 4) {
+        k =
+            (str.charCodeAt(i) & 0xff) |
+                ((str.charCodeAt(++i) & 0xff) << 8) |
+                ((str.charCodeAt(++i) & 0xff) << 16) |
+                ((str.charCodeAt(++i) & 0xff) << 24);
+        k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16);
+        k ^= k >>> 24;
+        h =
+            ((k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)) ^
+                ((h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16));
+    }
+    switch (len) {
+        case 3:
+            h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+        // fallthrough
+        case 2:
+            h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+        // fallthrough
+        case 1:
+            h ^= str.charCodeAt(i) & 0xff;
+            h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
+    }
+    h ^= h >>> 13;
+    h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
+    return ((h ^ (h >>> 15)) >>> 0).toString(36);
+}

package/dist/index.d.ts

@@ -1,13 +1,38 @@
-import { Properties } from "csstype";
-declare const config: {
-    allowRuntime: boolean;
-};
-declare function css(_styleRule: Properties & {
+import type { Properties } from "csstype";
+export { default } from "./plugin";
+export type { CatomOptions } from "./plugin";
+export { processStyleObject, generateRule, dedupeRules } from "./css";
+export type { CSSRule, StyleObject, ProcessResult } from "./css";
+/**
+ * Define atomic CSS styles. Transformed at build time to class names.
+ *
+ * @example
+ * ```ts
+ * import { css } from "catom-vite";
+ *
+ * const className = css({
+ *   display: "flex",
+ *   alignItems: "center",
+ *   padding: "1rem",
+ *   media: {
+ *     "(max-width: 768px)": {
+ *       flexDirection: "column"
+ *     }
+ *   },
+ *   pseudo: {
+ *     ":hover": {
+ *       backgroundColor: "#f0f0f0"
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export declare function css(_styles: Properties & {
     media?: {
         [query: string]: Properties;
     };
     pseudo?: {
-        [psuedoProp: string]: Properties;
+        [selector: string]: Properties;
     };
 }): string;
-export { css, config };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACtE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,GAAG,CACjB,OAAO,EAAE,UAAU,GAAG;IACpB,KAAK,CAAC,EAAE;QAAE,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAAA;KAAE,CAAC;IACxC,MAAM,CAAC,EAAE;QAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAA;KAAE,CAAC;CAC7C,GACA,MAAM,CAKR"}

package/dist/index.js

@@ -1,11 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.config = exports.css = void 0;
-const config = { allowRuntime: false };
-exports.config = config;
-function css(_styleRule) {
-    if (!config.allowRuntime)
-        throw new Error("Catom is in compile mode! Are you sure you ran your webpack transform correctly?");
-    return "";
+export { default } from "./plugin";
+// Re-export utilities for advanced usage
+export { processStyleObject, generateRule, dedupeRules } from "./css";
+/**
+ * Define atomic CSS styles. Transformed at build time to class names.
+ *
+ * @example
+ * ```ts
+ * import { css } from "catom-vite";
+ *
+ * const className = css({
+ *   display: "flex",
+ *   alignItems: "center",
+ *   padding: "1rem",
+ *   media: {
+ *     "(max-width: 768px)": {
+ *       flexDirection: "column"
+ *     }
+ *   },
+ *   pseudo: {
+ *     ":hover": {
+ *       backgroundColor: "#f0f0f0"
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export function css(_styles) {
+    throw new Error("catom css() was called at runtime. " +
+        "Ensure the catom-vite plugin is configured in vite.config.ts");
 }
-exports.css = css;

package/dist/plugin.d.ts

@@ -0,0 +1,16 @@
+import type { Plugin } from "vite";
+import { transform } from "lightningcss";
+export interface CatomOptions {
+    /** Function name to transform. Default: "css" */
+    functionName?: string;
+    /** LightningCSS browser targets */
+    targets?: Parameters<typeof transform>[0]["targets"];
+    /** Minify CSS output. Default: true in production */
+    minify?: boolean;
+    /** File patterns to include. Default: /\.[jt]sx?$/ */
+    include?: RegExp | RegExp[];
+    /** File patterns to exclude */
+    exclude?: RegExp | RegExp[];
+}
+export default function catom(options?: CatomOptions): Plugin[];
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,MAAM,WAAW,YAAY;IAC3B,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACrD,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC7B;AAWD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,OAAO,GAAE,YAAiB,GAAG,MAAM,EAAE,CAwHlE"}

package/dist/plugin.js

@@ -0,0 +1,114 @@
+import { transform } from "lightningcss";
+import AST from "unplugin-ast/vite";
+import { createCatomTransformer } from "./transformer";
+import { dedupeRules } from "./css";
+const VIRTUAL_ID = "virtual:catom.css";
+const RESOLVED_VIRTUAL_ID = "\0" + VIRTUAL_ID;
+const DEFAULT_TARGETS = {
+    chrome: 80 << 16,
+    firefox: 80 << 16,
+    safari: 14 << 16,
+};
+export default function catom(options = {}) {
+    const { functionName = "css", targets = DEFAULT_TARGETS, minify, include = /\.[jt]sx?$/, exclude, } = options;
+    // Collect CSS rules from all files.
+    // Using a Set for automatic deduplication (deterministic hashing means same rule = same string)
+    const collectedRules = new Set();
+    let isDev = false;
+    // The AST plugin handles transformation
+    const astPlugin = AST({
+        include: Array.isArray(include) ? include : [include],
+        exclude: exclude ? (Array.isArray(exclude) ? exclude : [exclude]) : undefined,
+        enforce: "pre",
+        transformer: [
+            createCatomTransformer(functionName, (rules) => {
+                for (const rule of rules) {
+                    collectedRules.add(rule);
+                }
+            }),
+        ],
+    });
+    // The CSS plugin handles virtual module and CSS emission
+    const cssPlugin = {
+        name: "catom:css",
+        enforce: "post",
+        configResolved(config) {
+            isDev = config.command === "serve";
+        },
+        buildStart() {
+            // Clear collected rules at the start of each build
+            collectedRules.clear();
+        },
+        resolveId(id) {
+            if (id === VIRTUAL_ID) {
+                return RESOLVED_VIRTUAL_ID;
+            }
+        },
+        load(id) {
+            if (id === RESOLVED_VIRTUAL_ID) {
+                // In dev, return empty - we inject via transformIndexHtml
+                // In build, this will be populated by generateBundle
+                return "";
+            }
+        },
+        // For dev: inject CSS into HTML
+        transformIndexHtml: {
+            order: "post",
+            handler() {
+                if (collectedRules.size === 0)
+                    return [];
+                const css = dedupeRules([...collectedRules]);
+                const shouldMinify = minify ?? !isDev;
+                let finalCss;
+                try {
+                    const { code } = transform({
+                        code: Buffer.from(css),
+                        filename: "catom.css",
+                        minify: shouldMinify,
+                        targets,
+                    });
+                    finalCss = code.toString();
+                }
+                catch {
+                    // Fallback if lightningcss fails
+                    finalCss = css;
+                }
+                return [
+                    {
+                        tag: "style",
+                        attrs: { "data-catom": "" },
+                        children: finalCss,
+                        injectTo: "head",
+                    },
+                ];
+            },
+        },
+        // For build: emit CSS file
+        generateBundle() {
+            if (collectedRules.size === 0)
+                return;
+            const css = dedupeRules([...collectedRules]);
+            const shouldMinify = minify ?? true;
+            let finalCss;
+            try {
+                const { code } = transform({
+                    code: Buffer.from(css),
+                    filename: "catom.css",
+                    minify: shouldMinify,
+                    targets,
+                });
+                finalCss = code.toString();
+            }
+            catch {
+                finalCss = css;
+            }
+            this.emitFile({
+                type: "asset",
+                fileName: "catom.css",
+                source: finalCss,
+            });
+        },
+    };
+    // Return both plugins - AST first (pre), then CSS (post)
+    return [astPlugin, cssPlugin];
+}

package/dist/transformer.d.ts

@@ -0,0 +1,14 @@
+import type { CallExpression } from "@babel/types";
+import type { Transformer } from "unplugin-ast";
+export interface TransformResult {
+    classNames: string;
+    rules: string[];
+}
+/**
+ * Creates an unplugin-ast transformer that finds css() calls
+ * and replaces them with class name strings.
+ *
+ * Returns the collected CSS rules separately for aggregation.
+ */
+export declare function createCatomTransformer(functionName: string, onRules: (rules: string[]) => void): Transformer<CallExpression>;
+//# sourceMappingURL=transformer.d.ts.map

package/dist/transformer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformer.d.ts","sourceRoot":"","sources":["../src/transformer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAA0B,MAAM,cAAc,CAAC;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAoDhD,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,GACjC,WAAW,CAAC,cAAc,CAAC,CAkC7B"}

package/dist/transformer.js

@@ -0,0 +1,87 @@
+import { processStyleObject } from "./css";
+/**
+ * Extract a JS value from a Babel AST node.
+ * Only handles static, compile-time constant values.
+ */
+function extractValue(node) {
+    switch (node.type) {
+        case "StringLiteral":
+            return node.value;
+        case "NumericLiteral":
+            return node.value;
+        case "ObjectExpression":
+            return extractObject(node);
+        case "TSAsExpression":
+            return extractValue(node.expression);
+        case "Identifier":
+            if (node.name === "undefined")
+                return undefined;
+            throw new Error(`Cannot evaluate identifier "${node.name}" at compile time`);
+        default:
+            throw new Error(`Cannot evaluate ${node.type} at compile time`);
+    }
+}
+function extractObject(node) {
+    const result = {};
+    for (const prop of node.properties) {
+        if (prop.type === "SpreadElement") {
+            // Handle spread of object literals
+            if (prop.argument.type === "ObjectExpression") {
+                Object.assign(result, extractObject(prop.argument));
+            }
+            else {
+                throw new Error("Spread elements must be object literals at compile time");
+            }
+        }
+        else if (prop.type === "ObjectProperty") {
+            let key;
+            if (prop.key.type === "Identifier") {
+                key = prop.key.name;
+            }
+            else if (prop.key.type === "StringLiteral") {
+                key = prop.key.value;
+            }
+            else {
+                throw new Error(`Unsupported key type: ${prop.key.type}`);
+            }
+            result[key] = extractValue(prop.value);
+        }
+    }
+    return result;
+}
+/**
+ * Creates an unplugin-ast transformer that finds css() calls
+ * and replaces them with class name strings.
+ *
+ * Returns the collected CSS rules separately for aggregation.
+ */
+export function createCatomTransformer(functionName, onRules) {
+    return {
+        onNode(node) {
+            return (node.type === "CallExpression" &&
+                node.callee.type === "Identifier" &&
+                node.callee.name === functionName);
+        },
+        transform(node) {
+            const arg = node.arguments[0];
+            if (!arg || arg.type !== "ObjectExpression") {
+                throw new Error(`${functionName}() requires an object literal argument`);
+            }
+            try {
+                const styleObj = extractObject(arg);
+                const { classNames, rules } = processStyleObject(styleObj);
+                // Report rules to the plugin
+                onRules(rules);
+                // Return a string literal with the class names
+                return {
+                    type: "StringLiteral",
+                    value: classNames.join(" "),
+                };
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : String(err);
+                throw new Error(`Failed to process ${functionName}(): ${message}`);
+            }
+        },
+    };
+}

package/package.json

@@ -1,39 +1,46 @@
 {
   "name": "catom",
-  "version": "1.2.8",
-  "description": "0 runtime CSS in JS tool",
+  "version": "2.0.0",
+  "description": "Zero-runtime atomic CSS-in-JS for Vite",
+  "type": "module",
   "main": "dist/index.js",
-  "scripts": {
-    "prepublishOnly": "npm run build",
-    "prebuild": "rm -rf ./dist",
-    "build": "tsc --build tsconfig.json"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Hydrophobefireman/catom.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Hydrophobefireman/catom/issues"
-  },
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "homepage": "https://github.com/Hydrophobefireman/catom#readme",
-  "devDependencies": {
-    "@babel/types": "^7.15.6",
-    "@types/babel__template": "^7.4.1",
-    "@types/babel__traverse": "^7.14.2",
-    "@types/estree": "^0.0.50",
-    "@types/node": "^16.10.8",
-    "typescript": "^4.4.4"
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
   },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "css-in-js",
+    "atomic-css",
+    "zero-runtime"
+  ],
+  "license": "MIT",
   "peerDependencies": {
-    "@parcel/css": "^1.5.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0",
+    "lightningcss": "^1.16.0"
   },
   "dependencies": {
-    "@babel/template": "^7.15.4",
-    "@babel/traverse": "^7.15.4",
-    "csstype": "^3.0.9"
+    "unplugin-ast": "^0.15.4",
+    "csstype": "^3.1.1"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.26.0",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "lightningcss": "^1.28.0"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 Hydrophobefireman
-
-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/README.md

@@ -1,150 +0,0 @@
-# Catom
-
-## A 0 runtime css in ~~js~~ css tool
-
-### Stage: Pre Alpha ([Caveats](#caveats))
-
-Catom allows you to write CSS in your javascript/typescript file and creates highly optimized CSS out of it.
-
-Each rule creates a unique class definition out of it and it gives you 100% freedom about where to put your generated css bundle.
-
-Your javascript code has 0 references to any styles and all that's left is are the compiled hashed clasnames as a string.
-
-It's framework agnostic as it emits pure CSS and leaves out just the classnames
-
-## Example
-
-somewhere in our App.js
-
-```javascript
-import { css } from "catom";
-
-const styledButton = css({
-  color: "#ff0000",
-  borderRadius: "5px",
-  padding: "4px",
-});
-const styledDiv = css({ color: "blue", borderRadius: "5px", padding: "4px" });
-
-function App() {
-  return (
-    <div className={styledDiv}>
-      <button className={styledButton}>Hi</button>
-    </div>
-  );
-}
-```
-
-**Css generated:**
-
-```css
-._6da32 {
-  color: #ff0000;
-}
-.quva1q {
-  border-radius: 5px;
-}
-._2rlxtj {
-  padding: 4px;
-}
-._14ksm7b {
-  color: blue;
-}
-```
-
-**App.js:**
-
-```js
-const styledButton = "_6da32 quva1q _2rlxtj";
-const styledDiv = "_14ksm7b quva1q _2rlxtj";
-....
-```
-
-As we had only 4 unique rules, catom generated only 4 classes.
-
-Catom also supports media queries and pseudo properties passing them in an object
-
-```javascript
-const mediaQuery = css({
-  media: { "only screen and (max-width:500px)": { color: "red" } },
-});
-const pseudoQuery = css({ pseudo: { ":hover": { color: "green" } } });
-```
-
-# Installation and Usage
-
-Install using npm or yarn
-
-```
-npm i catom -D
-```
-
-In your babel config:
-
-```json
-{
-    "plugins": [
-        "catom/babelPlugin"
-        `....
-    ]
-
-}
-```
-
-As catom doesn't really interact with your build tool at all, it's your job to inject the generated style.
-
-Here's an example of how you can use it with HTMLWebpackPlugin.
-
-`webpack.confg.js`
-
-```js
-const { emitCSS } = require("catom/css");
-// ...
-module.exports = {
-  plugins: [
-    new HtmlWebpackPlugin({
-      templateParameters: async function templateParametersGenerator(
-        compilation,
-        files,
-        tags,
-        options
-      ) {
-        return {
-          compilation,
-          webpackConfig: compilation.options,
-          htmlWebpackPlugin: {
-            tags,
-            files,
-            options: Object.assign(options, {
-              emitCSS,
-            }),
-          },
-        };
-      },
-    }),
-  ],
-};
-```
-
-and then inject it using a template parameter.
-
-```html
-<head>
-  <style>
-    <%= htmlWebpackPlugin.options.emitCSS() %>
-  </style>
-</head>
-```
-
-uses parcel css under the hood
-
-# 0 Runtime
-
-Catom ships with 0 js code in your bundle. In fact the first thing the babel transform does, is to [remove](https://github.com/Hydrophobefireman/catom/blob/378fefef245c399a550edb60916c051f87f671ea/babelPlugin.ts#L17) all imports of the `css` function from your code.
-
-# Caveats
-
-- It's just something I threw together because I wanted it for a project
-- Not even close to production ready
-- Since it works with AST, it does not allow you to use variable in the values (In work)
-- No support for keyframes as of now

package/babelPlugin.d.ts

@@ -1 +0,0 @@
-export * from "./dist/babelPlugin";

package/babelPlugin.js

@@ -1 +0,0 @@
-module.exports = require("./dist/babelPlugin");

package/css.d.ts

@@ -1 +0,0 @@
-export * from "./dist/css";

package/css.js

@@ -1 +0,0 @@
-module.exports = require("./dist/css");

package/dist/babelPlugin.d.ts

@@ -1,4 +0,0 @@
-import { Visitor } from "@babel/traverse";
-export default function catomBabelPlugin(): {
-    visitor: Visitor;
-};

package/dist/babelPlugin.js

@@ -1,59 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const template = __importStar(require("@babel/template"));
-const astObject_1 = require("./plugin/astObject");
-function handleExpression(path, expression, removeName) {
-    if (!expression)
-        return;
-    if (expression.type === "CallExpression") {
-        return commonInject(path, expression, {
-            name: removeName,
-        });
-    }
-}
-function catomBabelPlugin() {
-    let removeName = "css";
-    return {
-        visitor: {
-            CallExpression(path) {
-                return handleExpression(path, path.node, removeName);
-            },
-        },
-    };
-}
-exports.default = catomBabelPlugin;
-function commonInject(path, right, options) {
-    const callee = right.callee;
-    if (callee && callee.type === "Identifier") {
-        if (callee.name === options.name) {
-            const arg0 = right.arguments[0];
-            return injectDependency(path, arg0);
-        }
-    }
-}
-function injectDependency(path, arg0) {
-    if (arg0.type === "ObjectExpression") {
-        let retArray = [];
-        (0, astObject_1.parseObjectExpression)(arg0, retArray);
-        path.replaceWith(template.statement.ast(JSON.stringify(retArray.join(" "))));
-    }
-}

package/dist/plugin/astObject.d.ts

@@ -1,3 +0,0 @@
-import { Hashable } from "./constants";
-import * as babel from "@babel/types";
-export declare function parseObjectExpression(object: babel.ObjectExpression, retArray: Array<string>, hashable?: Hashable): any;

package/dist/plugin/astObject.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseObjectExpression = void 0;
-const cssTransform_1 = require("./cssTransform");
-function parseObjectExpression(object, retArray, hashable) {
-    return object.properties.forEach((p) => handleProperties(p, retArray, hashable));
-}
-exports.parseObjectExpression = parseObjectExpression;
-function handleSpread(spread, retArray, hashable) {
-    const argument = spread.argument;
-    if (argument.type === "ObjectExpression") {
-        return parseObjectExpression(argument, retArray, hashable);
-    }
-    throw Error(`Cannot parse ${spread.type}. Catom compiler only accepts compile time constant values`);
-}
-function handleProperties(propertyOrSpread, retArray, hashable) {
-    if (propertyOrSpread.type === "SpreadElement") {
-        return handleSpread(propertyOrSpread, retArray, hashable);
-    }
-    let { key, value } = propertyOrSpread;
-    if (value.type === "TSAsExpression")
-        value = value.expression;
-    let keyName;
-    if (key.type === "StringLiteral") {
-        keyName = key.value;
-    }
-    else if (key.type === "Identifier") {
-        keyName = key.name;
-    }
-    else {
-        return throwErr();
-    }
-    const isMedia = keyName === "media";
-    const isPseudo = keyName === "pseudo";
-    const canAcceptObjectLiteralInValue = isMedia || isPseudo;
-    if (value.type === "StringLiteral" || value.type === "NumericLiteral") {
-        if (canAcceptObjectLiteralInValue)
-            throwErr("Need an object literal for media query or pseudo selector");
-        return retArray.push((0, cssTransform_1.createValueHash)(keyName, value.value, hashable));
-    }
-    if (canAcceptObjectLiteralInValue && value.type === "ObjectExpression") {
-        return value.properties.forEach((prop) => handleMediaOrPseudoProperties(prop, retArray, isMedia, isPseudo));
-    }
-    throwErr();
-}
-function handleMediaOrPseudoProperties(property, retArray, isMedia, isPseudo) {
-    if (property.type === "ObjectProperty") {
-        const { key, value } = property;
-        let keyName;
-        if (key.type === "StringLiteral")
-            keyName = key.value;
-        else if (key.type === "Identifier")
-            keyName = key.name;
-        if (value.type === "ObjectExpression") {
-            return parseObjectExpression(value, retArray, (isMedia && { media: keyName }) || (isPseudo && { pseudo: keyName }));
-        }
-    }
-    throwErr();
-}
-function throwErr(err) {
-    throw TypeError(err || "Catom only accepts literals and compile time constant values");
-}

package/dist/plugin/constants.d.ts

@@ -1,17 +0,0 @@
-export { Program } from "estree";
-export declare type PropMap = Map<string, CSSProps>;
-export interface AtomicCSSOptions {
-    transpileFunctionName: "css";
-}
-export interface CSSProps {
-    class: string;
-    cssRule: string;
-}
-export interface Hashable {
-    media?: string;
-    pseudo?: string;
-}
-export declare const NAME = "AtomicCssWebpackPlugin";
-export declare const defaultOptions: AtomicCSSOptions;
-export declare const KEBAB_CASE_REGEXP: RegExp;
-export declare const PREFIX_WITH_UNDERSCORE: string[];

package/dist/plugin/constants.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PREFIX_WITH_UNDERSCORE = exports.KEBAB_CASE_REGEXP = exports.defaultOptions = exports.NAME = void 0;
-exports.NAME = "AtomicCssWebpackPlugin";
-exports.defaultOptions = {
-    transpileFunctionName: "css",
-};
-exports.KEBAB_CASE_REGEXP = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;
-exports.PREFIX_WITH_UNDERSCORE = "1234567890-".split("");

package/dist/plugin/cssTransform.d.ts

@@ -1,3 +0,0 @@
-import { Hashable } from "./constants";
-export declare function createValueHash(key: string, unparsed: string | number, hashable?: Hashable): string;
-export declare function emitCSS(): string;

package/dist/plugin/cssTransform.js

@@ -1,92 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.emitCSS = exports.createValueHash = void 0;
-const constants_1 = require("./constants");
-const hash_1 = require("./hash");
-const CSS_PROPERTY_MAP = new Map();
-const MEDIA_QUERY_MAP = new Map();
-const PSEUDO_SELECTOR_MAP = new Map();
-// function clearMaps(): void {
-//   CSS_PROPERTY_MAP.clear();
-//   MEDIA_QUERY_MAP.clear();
-//   PSEUDO_SELECTOR_MAP.clear();
-// }
-function toCSSProp(prop) {
-    return prop.replace(constants_1.KEBAB_CASE_REGEXP, "$1-$2").toLowerCase();
-}
-function makeCSSCompat(str) {
-    if (constants_1.PREFIX_WITH_UNDERSCORE.indexOf(str[0]) > -1)
-        return `_${str}`;
-    return str;
-}
-const sanitizeRegExp = /([^\w]|_)/g;
-function createValueHash(key, unparsed, hashable) {
-    key = key.trim();
-    const value = String(unparsed).trim();
-    const MEDIA_QUERY = hashable && hashable.media;
-    const PSEUDO_SELECTOR = hashable && hashable.pseudo;
-    const isSpec = MEDIA_QUERY || PSEUDO_SELECTOR;
-    // example: const rawCSSRule  = "margin:auto;"
-    const rawCSSRule = `${toCSSProp(key)}:${value};`;
-    // a unique rule will be one with a different media/pseudo rule + key&value
-    const identity = ((hashable && (MEDIA_QUERY || PSEUDO_SELECTOR)) || "").trim() + rawCSSRule;
-    let cache;
-    const $map = isSpec && MEDIA_QUERY ? MEDIA_QUERY_MAP : PSEUDO_SELECTOR_MAP;
-    let fetchMap;
-    if ($map) {
-        fetchMap = $map.get(isSpec);
-        if (!fetchMap) {
-            fetchMap = new Map();
-            $map.set(isSpec, fetchMap);
-        }
-    }
-    if (isSpec) {
-        cache = fetchMap.get(identity);
-    }
-    else {
-        cache = CSS_PROPERTY_MAP.get(identity);
-    }
-    if (cache)
-        return cache.class;
-    const hash = makeCSSCompat((0, hash_1.murmur2)(identity));
-    const obj = { class: hash, cssRule: rawCSSRule };
-    if (isSpec) {
-        fetchMap.set(identity, obj);
-    }
-    else {
-        CSS_PROPERTY_MAP.set(identity, obj);
-    }
-    return hash;
-}
-exports.createValueHash = createValueHash;
-const toCSS = (m) => Array.from(m.values())
-    .map((v) => `.${v.class} { ${v.cssRule} }`)
-    .sort()
-    .join("\n");
-function mergeDuplicateRules(value, dedupedPropMap, suffix = "") {
-    const cls = `.${value.class}${suffix}`;
-    const rule = value.cssRule;
-    let arr = dedupedPropMap.get(rule);
-    if (!arr) {
-        arr = new Set();
-        dedupedPropMap.set(rule, arr);
-    }
-    arr.add(cls);
-}
-function emitCSS() {
-    const dedupedPropMap = new Map();
-    Array.from(CSS_PROPERTY_MAP.values()).forEach((v) => mergeDuplicateRules(v, dedupedPropMap));
-    Array.from(PSEUDO_SELECTOR_MAP.entries()).forEach(([k, v]) => Array.from(v.values())
-        .sort()
-        .forEach((prop) => mergeDuplicateRules(prop, dedupedPropMap, k)));
-    const mediaQueries = Array.from(MEDIA_QUERY_MAP.entries())
-        .map(([k, v]) => `@media ${k} {\n${toCSS(v)}\n}\n`)
-        .sort()
-        .join("\n");
-    const cssProps = Array.from(dedupedPropMap.entries())
-        .map(([rule, classNames]) => `${Array.from(classNames).join(",\n")}{ ${rule} }`)
-        .sort()
-        .join("\n");
-    return [cssProps, mediaQueries].join("\n");
-}
-exports.emitCSS = emitCSS;

package/dist/plugin/hash.d.ts

@@ -1 +0,0 @@
-export declare function murmur2(str: string): string;

package/dist/plugin/hash.js

@@ -1,50 +0,0 @@
-"use strict";
-// from https://github.com/emotion-js/emotion/blob/master/packages/hash/src/index.js
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.murmur2 = void 0;
-function murmur2(str) {
-    // 'm' and 'r' are mixing constants generated offline.
-    // They're not really 'magic', they just happen to work well.
-    // const m = 0x5bd1e995;
-    // const r = 24;
-    // Initialize the hash
-    var h = 0;
-    // Mix 4 bytes at a time into the hash
-    var k, i = 0, len = str.length;
-    for (; len >= 4; ++i, len -= 4) {
-        k =
-            (str.charCodeAt(i) & 0xff) |
-                ((str.charCodeAt(++i) & 0xff) << 8) |
-                ((str.charCodeAt(++i) & 0xff) << 16) |
-                ((str.charCodeAt(++i) & 0xff) << 24);
-        k =
-            /* Math.imul(k, m): */
-            (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16);
-        k ^= /* k >>> r: */ k >>> 24;
-        h =
-            /* Math.imul(k, m): */
-            ((k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)) ^
-                /* Math.imul(h, m): */
-                ((h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16));
-    }
-    // Handle the last few bytes of the input array
-    switch (len) {
-        case 3:
-            h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
-        case 2:
-            h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
-        case 1:
-            h ^= str.charCodeAt(i) & 0xff;
-            h =
-                /* Math.imul(h, m): */
-                (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
-    }
-    // Do a few final mixes of the hash to ensure the last few
-    // bytes are well-incorporated.
-    h ^= h >>> 13;
-    h =
-        /* Math.imul(h, m): */
-        (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
-    return ((h ^ (h >>> 15)) >>> 0).toString(36);
-}
-exports.murmur2 = murmur2;

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "CommonJS",
-    "alwaysStrict": true,
-    "declaration": true,
-    "incremental": true,
-    "target": "ESNext",
-    "outDir": "dist/",
-    "moduleResolution": "Node",
-    "esModuleInterop": true
-  },
-  "exclude": ["dist/", "./css.js", "./babelPlugin.js"],
-  "include": ["./src/**/*.ts"]
-}