@hypergood/css-core 0.0.1

package/src/atomizer/index.ts

@@ -0,0 +1,291 @@
+import * as csstree from "css-tree";
+import { StyleRule } from "../style-rule.js";
+import { evaluateLexerNode, LexerNode } from "./css-tree.js";
+import { AtomizerFn } from "./types.js";
+
+const atomizers: Record<string, AtomizerFn> = {
+  animation: (value) => {
+    const ast = csstree.parse(value, { context: "value" });
+    const matchResult = csstree.lexer.matchProperty("animation", ast);
+    const match = matchResult.matched?.match;
+
+    // console.log({ match: JSON.stringify(match) });
+
+    if (!match) return undefined;
+
+    const animationNames: LexerNode[] = [];
+    const animationDurations: LexerNode[] = [];
+    const animationDelays: LexerNode[] = [];
+    const timingFunctions: LexerNode[] = [];
+    const iterations: LexerNode[] = [];
+    const fillModes: LexerNode[] = [];
+    const playStates: LexerNode[] = [];
+
+    for (const singleAnimation of match) {
+      const keyframesName = singleAnimation.match?.find(
+        (n) => n.syntax?.name === "keyframes-name",
+      );
+      if (keyframesName) {
+        animationNames.push(keyframesName);
+      }
+      const duration = singleAnimation.match?.find(
+        (n) => n.syntax?.name === "animation-duration",
+      );
+      if (duration) {
+        animationDurations.push(duration);
+      }
+      const easing = singleAnimation.match?.find(
+        (n) => n.syntax?.name === "easing-function",
+      );
+      if (easing) {
+        timingFunctions.push(easing);
+      }
+      const delay = singleAnimation.match?.find(
+        (n) => n.syntax?.name === "animation-delay",
+      );
+      if (delay) {
+        animationDelays.push(delay);
+      }
+      const count = singleAnimation.match?.find(
+        (n) => n.syntax?.name === "single-animation-iteration-count",
+      );
+      if (count) {
+        iterations.push(count);
+      }
+      const fillMode = singleAnimation.match?.find(
+        (n) => n.syntax?.name === "single-animation-fill-mode",
+      );
+      if (fillMode) {
+        fillModes.push(fillMode);
+      }
+      const playState = singleAnimation.match?.find(
+        (n) => n.syntax?.name === "single-animation-play-state",
+      );
+      if (playState) {
+        playStates.push(playState);
+      }
+    }
+
+    return {
+      "animation-name":
+        animationNames.map(evaluateLexerNode).join(",") || undefined,
+      "animation-iteration-count":
+        iterations.map(evaluateLexerNode).join(",") || undefined,
+      "animation-delay":
+        animationDelays.map(evaluateLexerNode).join(",") || undefined,
+      "animation-duration":
+        animationDurations.map(evaluateLexerNode).join(",") || undefined,
+      "animation-timing-function":
+        timingFunctions.map(evaluateLexerNode).join(",") || undefined,
+      "animation-fill-mode":
+        fillModes.map(evaluateLexerNode).join(",") || undefined,
+      "animation-play-state":
+        playStates.map(evaluateLexerNode).join(",") || undefined,
+    };
+  },
+  border: (value) => {
+    const ast = csstree.parse(value, { context: "value" });
+    const matchResult = csstree.lexer.matchProperty("border", ast);
+    const match = matchResult.matched?.match;
+
+    if (!match) return;
+
+    const lineWidth = match.find((t) => t.syntax?.name === "line-width");
+    const lineStyle = match.find((t) => t.syntax?.name === "line-style");
+    const color = match.find((t) => t.syntax?.name === "color");
+
+    const lineWidthString = evaluateLexerNode(lineWidth);
+    const lineStyleString = evaluateLexerNode(lineStyle);
+    const colorString = evaluateLexerNode(color);
+
+    return {
+      "border-bottom-style": lineStyleString,
+      "border-left-style": lineStyleString,
+      "border-right-style": lineStyleString,
+      "border-top-style": lineStyleString,
+      "border-bottom-color": colorString,
+      "border-left-color": colorString,
+      "border-right-color": colorString,
+      "border-top-color": colorString,
+      "border-bottom-width": lineWidthString,
+      "border-left-width": lineWidthString,
+      "border-right-width": lineWidthString,
+      "border-top-width": lineWidthString,
+    };
+  },
+  "border-radius": (value) => {
+    const ast = csstree.parse(value, { context: "value" });
+    const matchResult = csstree.lexer.matchProperty("border-radius", ast);
+    const match = matchResult.matched?.match;
+    if (!match) return undefined;
+
+    const slashIndex = match.findIndex(
+      (n) => n.syntax?.type === "Token" && n.syntax.value === "/",
+    );
+    const horizontalRadiiNodes =
+      slashIndex === -1 ? match : match.slice(0, slashIndex);
+    let verticalRadiiNodes =
+      slashIndex === -1 ? match : match.slice(slashIndex + 1);
+    if (!verticalRadiiNodes.length) {
+      verticalRadiiNodes = horizontalRadiiNodes;
+    }
+
+    const horizontalRadiiStrings = horizontalRadiiNodes.map(evaluateLexerNode);
+    const verticalRadiiStrings = verticalRadiiNodes.map(evaluateLexerNode);
+
+    const horizontalRadii = expandRadii(horizontalRadiiStrings);
+    const verticalRadii = expandRadii(verticalRadiiStrings);
+
+    return {
+      "border-top-left-radius": `${horizontalRadii.topLeft} ${verticalRadii.topLeft}`,
+      "border-top-right-radius": `${horizontalRadii.topRight} ${verticalRadii.topRight}`,
+      "border-bottom-left-radius": `${horizontalRadii.bottomLeft} ${verticalRadii.bottomLeft}`,
+      "border-bottom-right-radius": `${horizontalRadii.bottomRight} ${verticalRadii.bottomRight}`,
+    };
+  },
+  margin: (value) => {
+    const ast = csstree.parse(value, { context: "value" });
+    const matchResult = csstree.lexer.matchProperty("margin", ast);
+    const match = matchResult.matched?.match;
+    if (!match) return undefined;
+
+    const sizeStrings = match.map(evaluateLexerNode);
+    const sizes = expandSizing(sizeStrings);
+
+    return {
+      "margin-top": sizes.top,
+      "margin-right": sizes.right,
+      "margin-bottom": sizes.bottom,
+      "margin-left": sizes.left,
+    };
+  },
+  padding: (value) => {
+    const ast = csstree.parse(value, { context: "value" });
+    const matchResult = csstree.lexer.matchProperty("padding", ast);
+    const match = matchResult.matched?.match;
+    if (!match) return undefined;
+
+    const sizeStrings = match.map(evaluateLexerNode);
+
+    const sizes = expandSizing(sizeStrings);
+
+    return {
+      "padding-top": sizes.top,
+      "padding-right": sizes.right,
+      "padding-bottom": sizes.bottom,
+      "padding-left": sizes.left,
+    };
+  },
+};
+
+function createDefaultAtomizer(property: string) {
+  const atomizer: AtomizerFn = (value) => {
+    const ast = csstree.parse(value, { context: "value" });
+    const matchResult = csstree.lexer.matchProperty(property, ast);
+    // if (property === "color") {
+    //   console.log(JSON.stringify(matchResult));
+    // }
+    const lexxed = evaluateLexerNode(matchResult.matched);
+
+    return {
+      [property]: lexxed,
+    };
+  };
+  return atomizer;
+}
+
+function expandRadii(radii: string[]): {
+  topLeft: string;
+  topRight: string;
+  bottomLeft: string;
+  bottomRight: string;
+} {
+  const [r1, r2, r3, r4] = radii;
+  switch (radii.length) {
+    case 1:
+      return {
+        topLeft: r1,
+        topRight: r1,
+        bottomLeft: r1,
+        bottomRight: r1,
+      };
+    case 2:
+      return {
+        topLeft: r1,
+        topRight: r2,
+        bottomLeft: r2,
+        bottomRight: r1,
+      };
+    case 3:
+      return {
+        topLeft: r1,
+        topRight: r2,
+        bottomLeft: r2,
+        bottomRight: r3,
+      };
+    default:
+      return {
+        topLeft: r1,
+        topRight: r2,
+        bottomLeft: r4,
+        bottomRight: r3,
+      };
+  }
+}
+function expandSizing(sizes: string[]): {
+  top: string;
+  right: string;
+  bottom: string;
+  left: string;
+} {
+  const [r1, r2, r3, r4] = sizes;
+  switch (sizes.length) {
+    case 1:
+      return {
+        top: r1,
+        right: r1,
+        bottom: r1,
+        left: r1,
+      };
+    case 2:
+      return {
+        top: r1,
+        right: r2,
+        bottom: r1,
+        left: r2,
+      };
+    case 3:
+      return {
+        top: r1,
+        right: r2,
+        bottom: r3,
+        left: r2,
+      };
+    default:
+      return {
+        top: r1,
+        right: r2,
+        bottom: r3,
+        left: r4,
+      };
+  }
+}
+
+export function atomizeStyleRules(styleRules: StyleRule[]): StyleRule[] {
+  return styleRules.flatMap((rule) => {
+    const atomizer =
+      atomizers[rule.property] || createDefaultAtomizer(rule.property);
+    if (!atomizer) return [rule];
+
+    const atomized = atomizer(rule.value);
+    if (!atomized) return [rule];
+
+    return Object.entries(atomized)
+      .filter(([key, value]) => value !== undefined)
+      .map(([key, value]) => ({
+        ...rule,
+        property: key,
+        value: value!,
+      }));
+  });
+}

package/src/atomizer/types.ts

@@ -0,0 +1,3 @@
+export type AtomizerFn = (
+  value: string,
+) => Record<string, string | undefined> | undefined;

package/src/css-js-logger.ts

@@ -0,0 +1,57 @@
+import type { ViteDevServer } from "vite";
+
+const CSS_JS_REGEX = /\.css\.[jt]s/;
+const IMPORT_REGEX =
+  /import\s+(?:[\s\S]*?\s+from\s+)?['"]([^'"]+\.css(?:\.[jt]s)?)['"]/g;
+
+export function cssJsLogger() {
+  const processedFiles = new Map<string, Record<string, unknown>>();
+
+  async function transform(
+    code: string,
+    id: string,
+    devServer: ViteDevServer | null,
+  ) {
+    if (!devServer) return null;
+
+    // Skip the .css.ts files themselves - we'll process them from their importers
+    const cleanId = id.split("?")[0];
+    // if (CSS_JS_REGEX.test(cleanId)) return null;
+
+    // Only check JS/TS files for imports
+    if (!/\.[jt]sx?$/.test(cleanId)) return null;
+
+    const imports: string[] = [];
+    let match;
+    while ((match = IMPORT_REGEX.exec(code)) !== null) {
+      imports.push(match[1]);
+    }
+
+    for (const specifier of imports) {
+      // Get the import specifier
+      if (!specifier) continue;
+
+      if (!specifier.includes(".css")) continue;
+
+      // Resolve the full path
+      const resolved = await this.resolve(specifier, id);
+      if (!resolved) continue;
+
+      const resolvedPath = resolved.id.split("?")[0];
+
+      if (!CSS_JS_REGEX.test(resolvedPath)) continue;
+
+      try {
+        // Now it's safe to load - the module has already been transformed
+        const moduleExports = await devServer.ssrLoadModule(resolvedPath);
+        processedFiles.set(resolvedPath, moduleExports);
+      } catch (error) {
+        console.error(`\n❌ Error processing ${resolvedPath}:`, error);
+      }
+    }
+
+    return null;
+  }
+
+  return { processedFiles, transform };
+}

package/src/evaluate.ts

@@ -0,0 +1,136 @@
+export type EvaluationResult = {
+  confident: boolean;
+  value: any;
+};
+
+const UNKNOWN: EvaluationResult = {
+  confident: false,
+  value: undefined,
+};
+const known = (value: any) => ({
+  confident: true,
+  value,
+});
+
+export function evaluateBabelExpression(
+  node: babel.types.Node | null | undefined,
+  knownConstants: Record<string, any>,
+): EvaluationResult {
+  if (!node) return UNKNOWN;
+  switch (node.type) {
+    case "BinaryExpression":
+      return evaluateBinaryExpression(node, knownConstants);
+    case "Identifier":
+      return evaluateIdentifier(node, knownConstants);
+    case "NumericLiteral":
+      return evaluateNumericLiteral(node);
+    case "MemberExpression":
+      return evaluateMemberExpression(node, knownConstants);
+    case "ObjectExpression":
+      return evaluateObjectExpression(node, knownConstants);
+    case "StringLiteral":
+      return evaluateStringLiteral(node);
+    default:
+      return UNKNOWN;
+  }
+}
+
+function evaluateBinaryExpression(
+  node: babel.types.BinaryExpression,
+  knownConstants: Record<string, any>,
+): EvaluationResult {
+  const left = evaluateBabelExpression(node.left, knownConstants);
+  const right = evaluateBabelExpression(node.right, knownConstants);
+
+  if (!left.confident || !right.confident) return UNKNOWN;
+
+  switch (node.operator) {
+    case "*":
+      return known(left.value * right.value);
+    case "+":
+      return known(left.value + right.value);
+    default:
+      return UNKNOWN;
+  }
+}
+
+function evaluateIdentifier(
+  node: babel.types.Identifier,
+  knownConstants: Record<string, any>,
+): EvaluationResult {
+  if (node.name in knownConstants) {
+    return known(knownConstants[node.name]);
+  }
+  return UNKNOWN;
+}
+
+function evaluateMemberExpression(
+  node: babel.types.MemberExpression,
+  knownConstants: Record<string, any>,
+): EvaluationResult {
+  const obj = evaluateBabelExpression(node.object, knownConstants);
+
+  const propertyNode = node.property;
+  let property: EvaluationResult;
+  if (node.computed) {
+    property = evaluateBabelExpression(propertyNode, knownConstants);
+  } else {
+    if (propertyNode.type === "Identifier") {
+      property = known(propertyNode.name);
+    } else {
+      return UNKNOWN;
+    }
+  }
+
+  if (!obj.confident || !property.confident) return UNKNOWN;
+
+  return known(obj.value[property.value]);
+}
+
+function evaluateNumericLiteral(
+  node: babel.types.NumericLiteral,
+): EvaluationResult {
+  return known(node.value);
+}
+
+function evaluateObjectExpression(
+  node: babel.types.ObjectExpression,
+  knownConstants: Record<string, any>,
+): EvaluationResult {
+  let result: any = {};
+
+  for (const property of node.properties) {
+    switch (property.type) {
+      case "ObjectMethod":
+        return UNKNOWN;
+      case "SpreadElement":
+        return UNKNOWN;
+      case "ObjectProperty": {
+        const keyNode = property.key;
+        let key: EvaluationResult;
+        if (property.computed) {
+          key = evaluateBabelExpression(keyNode, knownConstants);
+        } else {
+          if (keyNode.type === "StringLiteral") {
+            key = known(keyNode.value);
+          } else if (keyNode.type === "Identifier") {
+            key = known(keyNode.name);
+          } else {
+            return UNKNOWN;
+          }
+        }
+        const value = evaluateBabelExpression(property.value, knownConstants);
+        if (!key || !key.confident || !value.confident) return UNKNOWN;
+        result[key.value] = value.value;
+      }
+    }
+  }
+
+  return known(result);
+}
+
+function evaluateStringLiteral(
+  node: babel.types.StringLiteral,
+): EvaluationResult {
+  return known(node.value);
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./runtime.js";