catom 2.1.0 → 2.2.0

package/dist/runtime/index.d.ts

@@ -0,0 +1,90 @@
+import { Properties } from 'csstype';
+export { Properties as CSSProperties } from 'csstype';
+
+/**
+ * CSS properties with optional pseudo selectors
+ */
+interface CSSPropertiesWithPseudo extends Properties {
+    /**
+     * Pseudo selector styles
+     * @example
+     * ```ts
+     * { ':hover': { color: 'blue' } }
+     * ```
+     */
+    pseudo?: {
+        [selector: string]: Properties;
+    };
+}
+/**
+ * Input type for the css() function
+ * Supports standard CSS properties plus media and pseudo selectors
+ */
+interface CSSInput extends Properties {
+    /**
+     * Media query styles - can also contain pseudo selectors
+     * @example
+     * ```ts
+     * css({
+     *   color: 'red',
+     *   media: {
+     *     '(max-width: 768px)': {
+     *       color: 'blue',
+     *       pseudo: { ':hover': { color: 'darkblue' } }
+     *     }
+     *   }
+     * })
+     * ```
+     */
+    media?: {
+        [query: string]: CSSPropertiesWithPseudo;
+    };
+    /**
+     * Pseudo selector styles
+     * @example
+     * ```ts
+     * css({
+     *   color: 'red',
+     *   pseudo: {
+     *     ':hover': { color: 'blue' },
+     *     ':focus': { outline: '2px solid blue' }
+     *   }
+     * })
+     * ```
+     */
+    pseudo?: {
+        [selector: string]: Properties;
+    };
+}
+/**
+ * Define atomic CSS styles that are extracted at compile time.
+ *
+ * This function is transformed by catom/vite plugin during build.
+ * At runtime, it only serves as a type-safe placeholder.
+ *
+ * @param styles - CSS properties object with optional media and pseudo selectors
+ * @returns A string of space-separated atomic class names (at build time)
+ *
+ * @example
+ * ```tsx
+ * import { css } from 'catom'
+ *
+ * const button = css({
+ *   backgroundColor: 'blue',
+ *   color: 'white',
+ *   padding: '8px 16px',
+ *   borderRadius: '4px',
+ *   pseudo: {
+ *     ':hover': { backgroundColor: 'darkblue' }
+ *   }
+ * })
+ *
+ * // In your component:
+ * <button className={button}>Click me</button>
+ * ```
+ *
+ * @throws Error if called at runtime (indicates plugin misconfiguration)
+ */
+declare function css(_styles: CSSInput): string;
+
+export { type CSSInput, type CSSPropertiesWithPseudo, css };

package/dist/runtime/index.js

@@ -0,0 +1,10 @@
+// src/index.ts
+function css(_styles) {
+  throw new Error(
+    '[catom] css() was called at runtime. This usually means the catom vite plugin is not configured correctly. Make sure to add the plugin to your vite.config.ts: import catom from "catom/vite"'
+  );
+}
+
+export { css };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/runtime/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";AAmFO,SAAS,IAAI,OAAA,EAA2B;AAC7C,EAAA,MAAM,IAAI,KAAA;AAAA,IACR;AAAA,GAGF;AACF","file":"index.js","sourcesContent":["import type { Properties } from 'csstype'\n\n/**\n * CSS properties with optional pseudo selectors\n */\nexport interface CSSPropertiesWithPseudo extends Properties {\n  /**\n   * Pseudo selector styles\n   * @example\n   * ```ts\n   * { ':hover': { color: 'blue' } }\n   * ```\n   */\n  pseudo?: { [selector: string]: Properties }\n}\n\n/**\n * Input type for the css() function\n * Supports standard CSS properties plus media and pseudo selectors\n */\nexport interface CSSInput extends Properties {\n  /**\n   * Media query styles - can also contain pseudo selectors\n   * @example\n   * ```ts\n   * css({\n   *   color: 'red',\n   *   media: {\n   *     '(max-width: 768px)': { \n   *       color: 'blue',\n   *       pseudo: { ':hover': { color: 'darkblue' } }\n   *     }\n   *   }\n   * })\n   * ```\n   */\n  media?: { [query: string]: CSSPropertiesWithPseudo }\n\n  /**\n   * Pseudo selector styles\n   * @example\n   * ```ts\n   * css({\n   *   color: 'red',\n   *   pseudo: {\n   *     ':hover': { color: 'blue' },\n   *     ':focus': { outline: '2px solid blue' }\n   *   }\n   * })\n   * ```\n   */\n  pseudo?: { [selector: string]: Properties }\n}\n\n/**\n * Define atomic CSS styles that are extracted at compile time.\n *\n * This function is transformed by catom/vite plugin during build.\n * At runtime, it only serves as a type-safe placeholder.\n *\n * @param styles - CSS properties object with optional media and pseudo selectors\n * @returns A string of space-separated atomic class names (at build time)\n *\n * @example\n * ```tsx\n * import { css } from 'catom'\n *\n * const button = css({\n *   backgroundColor: 'blue',\n *   color: 'white',\n *   padding: '8px 16px',\n *   borderRadius: '4px',\n *   pseudo: {\n *     ':hover': { backgroundColor: 'darkblue' }\n *   }\n * })\n *\n * // In your component:\n * <button className={button}>Click me</button>\n * ```\n *\n * @throws Error if called at runtime (indicates plugin misconfiguration)\n */\nexport function css(_styles: CSSInput): string {\n  throw new Error(\n    '[catom] css() was called at runtime. ' +\n      'This usually means the catom vite plugin is not configured correctly. ' +\n      'Make sure to add the plugin to your vite.config.ts: import catom from \"catom/vite\"'\n  )\n}\n\n// Re-export the type for convenience\nexport type { Properties as CSSProperties } from 'csstype'\n"]}

package/dist/vite/index.d.ts

@@ -0,0 +1,81 @@
+import { Plugin } from 'vite';
+import { Properties } from 'csstype';
+
+/**
+ * Input type for the css() function
+ */
+interface CSSInput extends Properties {
+    media?: {
+        [query: string]: Properties;
+    };
+    pseudo?: {
+        [selector: string]: Properties;
+    };
+}
+/**
+ * A single atomic CSS rule
+ */
+interface CSSRule {
+    /** Unique class name (hash) */
+    hash: string;
+    /** CSS property in kebab-case */
+    property: string;
+    /** CSS value */
+    value: string;
+    /** Optional media query */
+    media?: string;
+    /** Optional pseudo selector (e.g., ':hover') */
+    pseudo?: string;
+}
+/**
+ * Plugin options
+ */
+interface CatomPluginOptions {
+    /**
+     * File patterns to include for transformation
+     * @default /\.[jt]sx?$/
+     */
+    include?: string | RegExp | (string | RegExp)[];
+    /**
+     * File patterns to exclude from transformation
+     * @default /node_modules/
+     */
+    exclude?: string | RegExp | (string | RegExp)[];
+    /**
+     * Name of the css function to transform
+     * @default 'css'
+     */
+    functionName?: string;
+}
+
+/**
+ * Vite plugin for zero-runtime CSS-in-JS with atomic CSS generation
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from 'vite'
+ * import catom from 'catom/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [catom()]
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // In your app code
+ * import { css } from 'catom'
+ * import 'virtual:catom.css'
+ *
+ * const button = css({
+ *   color: 'red',
+ *   padding: '8px',
+ *   pseudo: { ':hover': { color: 'blue' } }
+ * })
+ * // After transform: const button = "_a1b2c3 _d4e5f6 _g7h8i9"
+ * ```
+ */
+declare function catomPlugin(options?: CatomPluginOptions): Plugin;
+
+export { type CSSInput, type CSSRule, type CatomPluginOptions, catomPlugin, catomPlugin as default };

package/dist/vite/index.js

@@ -0,0 +1,416 @@
+import { createFilter } from 'vite';
+import { parseSync } from '@swc/core';
+
+// src/vite/index.ts
+
+// src/core/hash.ts
+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) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
+    k = /* Math.imul(k, m): */
+    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
+    k ^= /* k >>> r: */
+    k >>> 24;
+    h = /* Math.imul(k, m): */
+    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ /* Math.imul(h, m): */
+    (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 255) << 16;
+    // falls through
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 255) << 8;
+    // falls through
+    case 1:
+      h ^= str.charCodeAt(i) & 255;
+      h = /* Math.imul(h, m): */
+      (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  h ^= h >>> 13;
+  h = /* Math.imul(h, m): */
+  (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+var PREFIX_CHARS = new Set("0123456789-".split(""));
+function makeCSSCompatible(hash) {
+  if (PREFIX_CHARS.has(hash[0])) {
+    return `_${hash}`;
+  }
+  return hash;
+}
+function generateHash(identity) {
+  return makeCSSCompatible(murmur2(identity));
+}
+
+// src/core/css-generator.ts
+var KEBAB_CASE_REGEX = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;
+function toKebabCase(property) {
+  return property.replace(KEBAB_CASE_REGEX, "$1-$2").toLowerCase();
+}
+function createRuleIdentity(property, value, media, pseudo) {
+  const mediaPrefix = media ? `@${media.trim()}` : "";
+  const pseudoPrefix = pseudo ? pseudo.trim() : "";
+  const kebabProp = toKebabCase(property);
+  return `${mediaPrefix}${pseudoPrefix}${kebabProp}:${value};`;
+}
+function createCSSRule(property, value, media, pseudo) {
+  const stringValue = String(value).trim();
+  const kebabProperty = toKebabCase(property.trim());
+  const identity = createRuleIdentity(property, stringValue, media, pseudo);
+  const hash = generateHash(identity);
+  return {
+    hash,
+    property: kebabProperty,
+    value: stringValue,
+    media: media?.trim(),
+    pseudo: pseudo?.trim()
+  };
+}
+function deduplicateRules(rules) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const rule of rules) {
+    const identity = createRuleIdentity(rule.property, rule.value, rule.media, rule.pseudo);
+    if (!seen.has(identity)) {
+      seen.set(identity, rule);
+    }
+  }
+  return Array.from(seen.values());
+}
+function groupRulesByDeclaration(rules) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const rule of rules) {
+    const declaration = `${rule.property}:${rule.value};`;
+    const groupKey = `${rule.media || ""}|${rule.pseudo || ""}|${declaration}`;
+    if (!groups.has(groupKey)) {
+      groups.set(groupKey, {
+        declaration,
+        hashes: /* @__PURE__ */ new Set(),
+        media: rule.media,
+        pseudo: rule.pseudo
+      });
+    }
+    groups.get(groupKey).hashes.add(rule.hash);
+  }
+  return Array.from(groups.values());
+}
+function generateCSS(rules) {
+  const dedupedRules = deduplicateRules(rules);
+  const regularRules = [];
+  const pseudoRules = [];
+  const mediaRules = /* @__PURE__ */ new Map();
+  for (const rule of dedupedRules) {
+    if (rule.media) {
+      const existing = mediaRules.get(rule.media) || [];
+      existing.push(rule);
+      mediaRules.set(rule.media, existing);
+    } else if (rule.pseudo) {
+      pseudoRules.push(rule);
+    } else {
+      regularRules.push(rule);
+    }
+  }
+  const cssLines = [];
+  const regularGroups = groupRulesByDeclaration(regularRules);
+  for (const group of regularGroups.sort((a, b) => a.declaration.localeCompare(b.declaration))) {
+    const selectors = Array.from(group.hashes).sort().map((h) => `.${h}`).join(",\n");
+    cssLines.push(`${selectors} { ${group.declaration} }`);
+  }
+  const pseudoGroups = groupRulesByDeclaration(pseudoRules);
+  for (const group of pseudoGroups.sort((a, b) => a.declaration.localeCompare(b.declaration))) {
+    const selectors = Array.from(group.hashes).sort().map((h) => `.${h}${group.pseudo}`).join(",\n");
+    cssLines.push(`${selectors} { ${group.declaration} }`);
+  }
+  const sortedMediaQueries = Array.from(mediaRules.entries()).sort(
+    ([a], [b]) => a.localeCompare(b)
+  );
+  for (const [query, rules2] of sortedMediaQueries) {
+    const mediaGroups = groupRulesByDeclaration(rules2);
+    const mediaLines = [];
+    for (const group of mediaGroups.sort((a, b) => a.declaration.localeCompare(b.declaration))) {
+      const suffix = group.pseudo || "";
+      const selectors = Array.from(group.hashes).sort().map((h) => `.${h}${suffix}`).join(",\n");
+      mediaLines.push(`  ${selectors} { ${group.declaration} }`);
+    }
+    cssLines.push(`@media ${query} {
+${mediaLines.join("\n")}
+}`);
+  }
+  return cssLines.join("\n");
+}
+function isLiteral(expr) {
+  return expr.type === "StringLiteral" || expr.type === "NumericLiteral";
+}
+function getLiteralValue(expr) {
+  if (expr.type === "StringLiteral") {
+    return expr.value;
+  }
+  return expr.value;
+}
+function getPropertyKey(prop) {
+  if (prop.key.type === "Identifier") {
+    return prop.key.value;
+  }
+  if (prop.key.type === "StringLiteral") {
+    return prop.key.value;
+  }
+  return null;
+}
+function processPropertiesObject(obj, rules, media, pseudo) {
+  for (const prop of obj.properties) {
+    if (prop.type === "SpreadElement") {
+      if (prop.argument.type === "ObjectExpression") {
+        processPropertiesObject(prop.argument, rules, media, pseudo);
+      } else {
+        throw new Error(
+          `[catom] Spread elements must be object literals. Dynamic spreads are not supported at compile time.`
+        );
+      }
+      continue;
+    }
+    if (prop.type !== "KeyValueProperty") {
+      continue;
+    }
+    const keyName = getPropertyKey(prop);
+    if (!keyName) {
+      throw new Error(`[catom] Could not determine property key. Only identifiers and string literals are supported.`);
+    }
+    const value = prop.value;
+    if (keyName === "media") {
+      if (value.type !== "ObjectExpression") {
+        throw new Error(`[catom] 'media' property must be an object literal.`);
+      }
+      for (const mediaProp of value.properties) {
+        if (mediaProp.type !== "KeyValueProperty") continue;
+        const mediaQuery = getPropertyKey(mediaProp);
+        if (!mediaQuery) continue;
+        if (mediaProp.value.type !== "ObjectExpression") {
+          throw new Error(`[catom] Media query '${mediaQuery}' must contain an object literal.`);
+        }
+        processPropertiesObject(mediaProp.value, rules, mediaQuery, pseudo);
+      }
+      continue;
+    }
+    if (keyName === "pseudo") {
+      if (value.type !== "ObjectExpression") {
+        throw new Error(`[catom] 'pseudo' property must be an object literal.`);
+      }
+      for (const pseudoProp of value.properties) {
+        if (pseudoProp.type !== "KeyValueProperty") continue;
+        const pseudoSelector = getPropertyKey(pseudoProp);
+        if (!pseudoSelector) continue;
+        if (pseudoProp.value.type !== "ObjectExpression") {
+          throw new Error(`[catom] Pseudo selector '${pseudoSelector}' must contain an object literal.`);
+        }
+        processPropertiesObject(pseudoProp.value, rules, media, pseudoSelector);
+      }
+      continue;
+    }
+    let actualValue = value;
+    if (actualValue.type === "TsAsExpression") {
+      actualValue = actualValue.expression;
+    }
+    if (!isLiteral(actualValue)) {
+      throw new Error(
+        `[catom] Property '${keyName}' has a non-literal value. Only string and number literals are supported at compile time. Got: ${actualValue.type}`
+      );
+    }
+    const rule = createCSSRule(keyName, getLiteralValue(actualValue), media, pseudo);
+    rules.push(rule);
+  }
+}
+function processCSSCall(callExpr) {
+  const rules = [];
+  if (callExpr.arguments.length === 0) {
+    return { rules: [], classNames: "" };
+  }
+  const arg = callExpr.arguments[0];
+  if (arg.expression.type !== "ObjectExpression") {
+    throw new Error(
+      `[catom] css() must be called with an object literal. Got: ${arg.expression.type}`
+    );
+  }
+  processPropertiesObject(arg.expression, rules);
+  const classNames = rules.map((r) => r.hash).join(" ");
+  return { rules, classNames };
+}
+var SKIP_KEYS = /* @__PURE__ */ new Set(["span", "ctxt", "type", "value", "raw", "cooked"]);
+function isASTNode(value) {
+  return typeof value === "object" && value !== null && typeof value.type === "string";
+}
+function walkAndTransform(node, functionName, allRules, replacements, visited = /* @__PURE__ */ new WeakSet()) {
+  if (!node || typeof node !== "object") return;
+  if (visited.has(node)) return;
+  visited.add(node);
+  if (isCallExpression(node)) {
+    const callee = node.callee;
+    if (callee.type === "Identifier" && callee.value === functionName) {
+      try {
+        const { rules, classNames } = processCSSCall(node);
+        allRules.push(...rules);
+        replacements.set(node.span.start, classNames);
+      } catch (error) {
+        const loc = node.span;
+        const prefix = loc ? `[${loc.start}:${loc.end}]` : "";
+        throw new Error(`${prefix} ${error.message}`);
+      }
+    }
+  }
+  for (const key of Object.keys(node)) {
+    if (SKIP_KEYS.has(key)) continue;
+    const value = node[key];
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        if (isASTNode(item)) {
+          walkAndTransform(item, functionName, allRules, replacements, visited);
+        }
+      }
+    } else if (isASTNode(value)) {
+      walkAndTransform(value, functionName, allRules, replacements, visited);
+    }
+  }
+}
+function isCallExpression(node) {
+  return typeof node === "object" && node !== null && node.type === "CallExpression";
+}
+function transformCode(code, id, functionName = "css") {
+  const isTypeScript = /\.tsx?$/.test(id);
+  const isJSX = /\.[jt]sx$/.test(id);
+  let ast;
+  try {
+    ast = parseSync(code, {
+      syntax: isTypeScript ? "typescript" : "ecmascript",
+      tsx: isJSX && isTypeScript,
+      jsx: isJSX && !isTypeScript,
+      comments: true
+    });
+  } catch {
+    return { code, cssRules: [], transformed: false };
+  }
+  const allRules = [];
+  const replacements = /* @__PURE__ */ new Map();
+  walkAndTransform(ast, functionName, allRules, replacements);
+  if (replacements.size === 0) {
+    return { code, cssRules: [], transformed: false };
+  }
+  let result = code;
+  const sortedReplacements = Array.from(replacements.entries()).sort(
+    ([a], [b]) => b - a
+    // Sort descending so we replace from end to start
+  );
+  for (const [start, classNames] of sortedReplacements) {
+    const searchStart = start - 1;
+    const cssCallMatch = findCSSCallBounds(result, searchStart, functionName);
+    if (cssCallMatch) {
+      const replacement = JSON.stringify(classNames);
+      result = result.slice(0, cssCallMatch.start) + replacement + result.slice(cssCallMatch.end);
+    }
+  }
+  return {
+    code: result,
+    cssRules: allRules,
+    transformed: true
+  };
+}
+function findCSSCallBounds(code, startPos, functionName) {
+  const searchWindow = 50;
+  const searchStart = Math.max(0, startPos - searchWindow);
+  const searchEnd = Math.min(code.length, startPos + searchWindow);
+  const searchRegion = code.slice(searchStart, searchEnd);
+  const funcPattern = new RegExp(`\\b${functionName}\\s*\\(`);
+  const match = funcPattern.exec(searchRegion);
+  if (!match) return null;
+  const callStart = searchStart + match.index;
+  const parenStart = callStart + match[0].length - 1;
+  let depth = 1;
+  let i = parenStart + 1;
+  while (i < code.length && depth > 0) {
+    const char = code[i];
+    if (char === "(") depth++;
+    else if (char === ")") depth--;
+    i++;
+  }
+  if (depth !== 0) return null;
+  return { start: callStart, end: i };
+}
+
+// src/vite/index.ts
+var VIRTUAL_MODULE_ID = "virtual:catom.css";
+var RESOLVED_VIRTUAL_MODULE_ID = "\0" + VIRTUAL_MODULE_ID;
+function catomPlugin(options = {}) {
+  const {
+    include = /\.[jt]sx?$/,
+    exclude = /node_modules/,
+    functionName = "css"
+  } = options;
+  const moduleCSS = /* @__PURE__ */ new Map();
+  let filter;
+  return {
+    name: "vite-plugin-catom",
+    // Ensure we run before other transforms
+    enforce: "pre",
+    configResolved() {
+      filter = createFilter(include, exclude);
+    },
+    buildStart() {
+      moduleCSS.clear();
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_MODULE_ID) {
+        return RESOLVED_VIRTUAL_MODULE_ID;
+      }
+      return null;
+    },
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+        const allRules = [];
+        for (const state of moduleCSS.values()) {
+          allRules.push(...state.rules);
+        }
+        const css = generateCSS(allRules);
+        return css;
+      }
+      return null;
+    },
+    transform(code, id) {
+      if (!filter(id)) {
+        return null;
+      }
+      if (!code.includes(functionName + "(")) {
+        return null;
+      }
+      try {
+        const result = transformCode(code, id, functionName);
+        if (!result.transformed) {
+          return null;
+        }
+        moduleCSS.set(id, {
+          rules: result.cssRules,
+          timestamp: Date.now()
+        });
+        return {
+          code: result.code,
+          map: null
+          // TODO: Add source map support
+        };
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        this.error(`[catom] Error transforming ${id}: ${message}`);
+      }
+    },
+    // Handle module removal (for dev server)
+    watchChange(id) {
+      if (moduleCSS.has(id)) {
+        moduleCSS.delete(id);
+      }
+    }
+  };
+}
+
+export { catomPlugin, catomPlugin as default };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map