@hypergood/css-core 0.0.1

package/src/plugin.ts

@@ -0,0 +1,573 @@
+import babel from "@babel/core";
+import { addNamed } from "@babel/helper-module-imports";
+import { Plugin, ViteDevServer } from "vite";
+import { atomizeStyleRules } from "./atomizer/index.js";
+import { cssJsLogger } from "./css-js-logger.js";
+import { evaluateBabelExpression } from "./evaluate.js";
+import { createStyleCache, StyleCache } from "./style-cache.js";
+import {
+  evaluateMacros,
+  evaluateMedia,
+  flattenStyleObject,
+} from "./style-object.js";
+
+type ImportDeclaration = {
+  source: string;
+  specifiers: Array<{ imported: string; local: string }>;
+};
+
+function babelPluginGetCssJsImports({
+  onFoundPotentialImport,
+}: {
+  onFoundPotentialImport: (potential: ImportDeclaration) => void;
+}): babel.PluginItem {
+  return {
+    name: "find-css-js-imports",
+    visitor: {
+      ImportDeclaration(path) {
+        if (path.node.source.value.includes(".css")) {
+          onFoundPotentialImport({
+            source: path.node.source.value,
+            specifiers: path.node.specifiers.map((specifier) => ({
+              imported:
+                specifier.type === "ImportSpecifier"
+                  ? specifier.imported.type === "StringLiteral"
+                    ? specifier.imported.value
+                    : specifier.imported.name
+                  : specifier.local.name,
+              local: specifier.local.name,
+            })),
+          });
+        }
+      },
+    },
+  };
+}
+
+function babelPluginReplaceCssProp({
+  initialKnownConstants,
+  styleObjectToClassNames,
+  keyframesObjectToAnimationName,
+}: {
+  initialKnownConstants: Record<string, any>;
+  styleObjectToClassNames: (styleObject: any) => string;
+  keyframesObjectToAnimationName: (keyframesObject: any) => string;
+}): babel.PluginItem {
+  let localCssFunctionName: string | undefined;
+  let localKeyframesFunctionName: string | undefined;
+
+  let knownConstants = {
+    ...initialKnownConstants,
+  };
+
+  return {
+    name: "replace-css-prop",
+    visitor: {
+      // Statically analyze global constants and register them in case they are used in css() / keyframes()
+      VariableDeclaration: {
+        exit(path) {
+          const parent = path.parentPath;
+          const isTopLevel =
+            parent.isProgram() ||
+            (parent.isExportNamedDeclaration() &&
+              parent.parentPath.isProgram());
+
+          if (!isTopLevel) return;
+          const node = path.node;
+
+          if (node.kind !== "const") return;
+
+          for (let declarator of node.declarations) {
+            const init = evaluateBabelExpression(
+              declarator.init,
+              knownConstants,
+            );
+            if (init.confident) {
+              const id = declarator.id;
+              if (id.type === "Identifier") {
+                // console.log(
+                //   `[FOUND] ${id.name} = ${JSON.stringify(init.value, null, 2)}`,
+                // );
+                knownConstants[id.name] = init.value;
+              }
+            }
+          }
+        },
+      },
+      ImportDeclaration(path) {
+        if (path.node.source.value !== "@hypergood/css-core") return;
+        const cssFunctionSpecifier = path.node.specifiers.find((specifier) => {
+          return (
+            specifier.type === "ImportSpecifier" &&
+            specifier.imported.type === "Identifier" &&
+            specifier.imported.name === "css"
+          );
+        });
+        if (cssFunctionSpecifier) {
+          localCssFunctionName = cssFunctionSpecifier.local.name;
+        }
+        const keyframesFunctionSpecifier = path.node.specifiers.find(
+          (specifier) => {
+            return (
+              specifier.type === "ImportSpecifier" &&
+              specifier.imported.type === "Identifier" &&
+              specifier.imported.name === "keyframes"
+            );
+          },
+        );
+        if (keyframesFunctionSpecifier) {
+          localKeyframesFunctionName = keyframesFunctionSpecifier.local.name;
+        }
+      },
+      CallExpression: {
+        exit(path) {
+          if (
+            babel.types.isIdentifier(path.node.callee, {
+              name: localKeyframesFunctionName,
+            })
+          ) {
+            const args = path.node.arguments;
+            if (args.length !== 1) return;
+            const firstArg = args[0];
+            if (firstArg.type !== "ObjectExpression") return;
+
+            const styleObjectResult = evaluateBabelExpression(
+              firstArg,
+              knownConstants,
+            );
+            let styleObject = styleObjectResult.value;
+            if (!styleObjectResult.confident) {
+              throw new Error(
+                "COULD NOT EVALUATE KEYFRAMES: L" + firstArg.loc?.start.line,
+              );
+            }
+
+            const animationName = keyframesObjectToAnimationName(styleObject);
+
+            path.replaceWith({
+              type: "StringLiteral",
+              value: animationName,
+            });
+          }
+
+          if (
+            babel.types.isIdentifier(path.node.callee, {
+              name: localCssFunctionName,
+            })
+          ) {
+            const args = path.node.arguments;
+            if (args.length !== 1) return;
+            const firstArg = args[0];
+            if (firstArg.type !== "ObjectExpression") return;
+
+            const styleObjectResult = evaluateBabelExpression(
+              firstArg,
+              knownConstants,
+            );
+            let styleObject = styleObjectResult.value;
+            if (!styleObjectResult.confident) {
+              throw new Error(
+                "COULD NOT EVALUATE CSS: L" + firstArg.loc?.start.line,
+              );
+            }
+
+            const classNames = styleObjectToClassNames(styleObject);
+
+            path.replaceWith({
+              type: "StringLiteral",
+              value: classNames,
+            });
+          }
+        },
+      },
+      JSXAttribute(path) {
+        if (
+          path.node.name &&
+          path.node.name.type === "JSXIdentifier" &&
+          path.node.name.name === "css"
+        ) {
+          const value = path.node.value;
+          if (value?.type !== "JSXExpressionContainer") return;
+
+          const expression = value.expression;
+
+          switch (expression.type) {
+            case "ObjectExpression": {
+              const styleObjectResult = evaluateBabelExpression(
+                expression,
+                knownConstants,
+              );
+              let styleObject = styleObjectResult.value;
+              if (!styleObjectResult.confident) {
+                throw new Error(
+                  "COULD NOT EVALUATE CSS: L" + expression.loc?.start.line,
+                );
+              }
+              const classNames = styleObjectToClassNames(styleObject);
+
+              path.node.name.name = "className";
+              path.node.value = {
+                type: "StringLiteral",
+                value: classNames,
+              };
+              break;
+            }
+            case "ArrayExpression": {
+              const elements = expression.elements;
+              const mergeClassNamesId = addNamed(
+                path,
+                "mergeClassNames",
+                "@hypergood/css-core",
+              );
+
+              const cleanedElements: babel.types.Expression[] = [];
+
+              for (const element of elements) {
+                if (element) {
+                  // if (element.type !== "SpreadElement") {
+                  //   cleanedElements.push(element);
+                  // }
+                  if (element.type === "ObjectExpression") {
+                    const styleObjectResult = evaluateBabelExpression(
+                      element,
+                      knownConstants,
+                    );
+                    if (styleObjectResult.confident) {
+                      let styleObject = styleObjectResult.value;
+                      const classNames = styleObjectToClassNames(styleObject);
+                      cleanedElements.push(
+                        babel.types.stringLiteral(classNames),
+                      );
+                    }
+                  } else if (
+                    element.type === "LogicalExpression" &&
+                    element.operator === "&&" &&
+                    element.right.type === "ObjectExpression"
+                  ) {
+                    const styleObjectResult = evaluateBabelExpression(
+                      element.right,
+                      knownConstants,
+                    );
+                    if (styleObjectResult.confident) {
+                      let styleObject = styleObjectResult.value;
+                      const classNames = styleObjectToClassNames(styleObject);
+                      cleanedElements.push(
+                        babel.types.logicalExpression(
+                          "&&",
+                          element.left,
+                          babel.types.stringLiteral(classNames),
+                        ),
+                      );
+                    }
+                  } else if (
+                    element.type === "ConditionalExpression" &&
+                    element.consequent.type === "ObjectExpression" &&
+                    element.alternate.type === "ObjectExpression"
+                  ) {
+                    const consequentObject = evaluateBabelExpression(
+                      element.consequent,
+                      knownConstants,
+                    );
+                    const alternateObject = evaluateBabelExpression(
+                      element.alternate,
+                      knownConstants,
+                    );
+                    if (
+                      consequentObject.confident &&
+                      alternateObject.confident
+                    ) {
+                      const classNames = styleObjectToClassNames(
+                        consequentObject.value,
+                      );
+                      const alternateClassNames = styleObjectToClassNames(
+                        alternateObject.value,
+                      );
+                      cleanedElements.push(
+                        babel.types.conditionalExpression(
+                          element.test,
+                          babel.types.stringLiteral(classNames),
+                          babel.types.stringLiteral(alternateClassNames),
+                        ),
+                      );
+                    }
+                  } else if (element.type !== "SpreadElement") {
+                    cleanedElements.push(element);
+                  }
+                }
+              }
+
+              path.node.name.name = "className";
+              value.expression = babel.types.callExpression(mergeClassNamesId, [
+                babel.types.arrayExpression(cleanedElements),
+              ]);
+
+              break;
+            }
+            default: {
+              path.node.name.name = "className";
+            }
+          }
+        }
+      },
+    },
+  };
+}
+
+export type PluginConfig = {
+  media?: Record<string, string>;
+  macros?: Record<string, (value: string) => any>;
+};
+
+export function vitePluginCss(config: PluginConfig = {}): Plugin[] {
+  const styleCache = createStyleCache();
+
+  const { plugin: generationPlugin, reload: reloadStyles } =
+    createGenerationPlugin(styleCache);
+
+  let devServer: ViteDevServer | null = null;
+  const { processedFiles, transform: registerCssJsFiles } = cssJsLogger();
+
+  return [
+    generationPlugin,
+    {
+      name: "hypercss:process",
+
+      // Capture the dev server instance
+      configureServer(server) {
+        devServer = server;
+      },
+      // Run before other plugins (like the default JSX transform)
+      enforce: "pre",
+
+      async transform(code, id) {
+        const cleanId = id.split("?")[0]!;
+        await registerCssJsFiles.bind(this)(code, id, devServer);
+        const rulesCount = styleCache.getLength();
+        if (!/\.[jt]sx?$/.test(cleanId)) {
+          return null;
+        }
+        if (id.includes("node_modules")) {
+          return null;
+        }
+
+        if (!code.includes("css")) {
+          return null;
+        }
+
+        const isTypeScript =
+          cleanId.endsWith(".tsx") || cleanId.endsWith(".ts");
+
+        const cssJsImportDeclarations: ImportDeclaration[] = [];
+
+        const getImportedConstants = async () => {
+          await babel.transformAsync(code, {
+            filename: id,
+            sourceFileName: id,
+            sourceMaps: true,
+            parserOpts: {
+              sourceType: "module",
+              plugins: [
+                "jsx",
+                // Add TypeScript support for .tsx files
+                ...(isTypeScript ? ["typescript" as const] : []),
+              ],
+            },
+            plugins: [
+              babelPluginGetCssJsImports({
+                onFoundPotentialImport: (dec) => {
+                  cssJsImportDeclarations.push(dec);
+                },
+              }),
+            ],
+            // Don't transform anything else, just run our plugin
+            configFile: false,
+            babelrc: false,
+          });
+          const importedConstants: Record<string, unknown> = {};
+
+          for (const declaration of cssJsImportDeclarations) {
+            const resolvedId = (await this.resolve(declaration.source, id))?.id;
+            const resolvedPath = resolvedId?.split("?")[0]!;
+
+            const module = processedFiles.get(resolvedPath);
+
+            if (module) {
+              for (const specifier of declaration.specifiers) {
+                importedConstants[specifier.local] = module[specifier.imported];
+              }
+            }
+          }
+          return importedConstants;
+        };
+
+        try {
+          const importedConstants: Record<string, unknown> =
+            await getImportedConstants();
+
+          let result = await babel.transformAsync(code, {
+            filename: id,
+            sourceFileName: id,
+            sourceMaps: true,
+            parserOpts: {
+              sourceType: "module",
+              plugins: [
+                "jsx",
+                // Add TypeScript support for .tsx files
+                ...(isTypeScript ? ["typescript" as const] : []),
+              ],
+            },
+            plugins: [
+              babelPluginReplaceCssProp({
+                initialKnownConstants: importedConstants,
+                keyframesObjectToAnimationName: (keyframes) => {
+                  const newKeyframes = Object.fromEntries(
+                    Object.entries(keyframes).map(
+                      ([key, styleObject]: [key: string, value: any]) => {
+                        if (config.macros) {
+                          styleObject = evaluateMacros(
+                            styleObject,
+                            config.macros,
+                          );
+                        }
+                        if (config.media) {
+                          styleObject = evaluateMedia(
+                            styleObject,
+                            config.media,
+                          );
+                        }
+                        const styleRules = flattenStyleObject(styleObject);
+                        const optimized = atomizeStyleRules(styleRules);
+                        return [key, optimized];
+                      },
+                    ),
+                  );
+
+                  return styleCache.getAnimationName(newKeyframes);
+                },
+                styleObjectToClassNames: (styleObject) => {
+                  if (config.macros) {
+                    styleObject = evaluateMacros(styleObject, config.macros);
+                  }
+                  if (config.media) {
+                    styleObject = evaluateMedia(styleObject, config.media);
+                  }
+                  const styleRules = flattenStyleObject(styleObject);
+                  const optimized = atomizeStyleRules(styleRules);
+                  const classNames = styleCache.getClassNames(optimized);
+                  return classNames;
+                },
+              }),
+            ],
+            // Don't transform anything else, just run our plugin
+            configFile: false,
+            babelrc: false,
+          });
+
+          if (result && result.code) {
+            if (styleCache.getLength() > rulesCount) {
+              void reloadStyles();
+            }
+            return {
+              code: result.code,
+              map: result.map,
+            };
+          }
+        } catch (error: any) {
+          this.error(`Failed to transform ${id}: ${error.message}`);
+        }
+
+        return null;
+      },
+    },
+  ];
+}
+
+const CSS_REPLACE_ME = "@hypercss;";
+function createGenerationPlugin(styleCache: StyleCache) {
+  let modulesToInvalidate = new Map<string, string>();
+  let server: ViteDevServer;
+
+  async function reload() {
+    if (!server || modulesToInvalidate.size === 0) {
+      return;
+    }
+
+    for (const [id] of modulesToInvalidate.entries()) {
+      const module = server.moduleGraph.getModuleById(id);
+
+      if (!module) {
+        return;
+      }
+
+      server.moduleGraph.invalidateModule(module);
+      await server.reloadModule(module);
+    }
+  }
+
+  function pickCssAssetFromRollupBundle(bundle: any, choose: any) {
+    const assets = Object.values(bundle).filter(
+      (a: any) =>
+        a &&
+        a.type === "asset" &&
+        typeof a.fileName === "string" &&
+        a.fileName.endsWith(".css"),
+    );
+    if (assets.length === 0) return null;
+    if (typeof choose === "function") {
+      const chosen = assets.find((a: any) => choose(a.fileName));
+      if (chosen) return chosen;
+    }
+    const best =
+      assets.find((a: any) => /(^|\/)index\.css$/.test(a.fileName)) ||
+      assets.find((a: any) => /(^|\/)style\.css$/.test(a.fileName));
+    return best || assets[0];
+  }
+  const plugin: Plugin = {
+    name: "hypercss:generate",
+    enforce: "pre",
+    configureServer(_server) {
+      server = _server;
+    },
+    async transform(code, id, { ssr: isSSR = false } = {}) {
+      if (!/\.css/.test(id)) {
+        return null;
+      }
+      if (id.includes("node_modules")) {
+        return null;
+      }
+      if (!code.includes(CSS_REPLACE_ME)) {
+        return null;
+      }
+
+      modulesToInvalidate.set(id, code);
+      if (server) {
+        if (!isSSR) {
+          await server?.waitForRequestsIdle?.(id);
+        }
+
+        return code.replace(CSS_REPLACE_ME, styleCache.processStyleRules());
+      }
+    },
+    // Rollup/Vite: append to an existing CSS asset during generateBundle
+    // Note: some bundlers/plugins may mutate CSS assets later; we also guard in writeBundle.
+    generateBundle(_opts, bundle) {
+      const css = styleCache.processStyleRules();
+      if (!css) return;
+      const target = pickCssAssetFromRollupBundle(bundle, undefined) as any;
+      if (target) {
+        const current =
+          typeof target.source === "string"
+            ? target.source
+            : target.source?.toString() || "";
+        target.source = current ? current + "\n" + css : css;
+      } else {
+        // Defer to writeBundle to append or emit fallback file
+      }
+    },
+  };
+
+  return {
+    plugin,
+    reload,
+  };
+}

package/src/print.ts

@@ -0,0 +1,101 @@
+import { AnimationRules, StyleRule } from "./style-rule.js";
+
+export function printStyleSheet({
+  animations,
+  getAnimationName,
+  styleRules,
+  styleRuleToClassName,
+}: {
+  animations: AnimationRules[];
+  getAnimationName: (rule: AnimationRules) => string;
+  styleRules: StyleRule[];
+  styleRuleToClassName: (styleRule: StyleRule) => string;
+}) {
+  const keyframesSection = animations.map((animation) => {
+    return `@keyframes ${getAnimationName(animation)} {
+${Object.entries(animation)
+  .map(
+    ([key, styleRules]) => `  ${key} {
+${styleRules.map((rule) => `    ${rule.property}: ${rule.value};`).join("\n")}
+  }`,
+  )
+  .join("\n")}
+}`;
+  });
+
+  const tree = groupStyleRules(styleRules, []);
+  const rulesSection = renderStyleRuleNode(tree, styleRuleToClassName);
+  return (
+    keyframesSection +
+    "\n" +
+    rulesSection +
+    "\n" +
+    "/* " +
+    JSON.stringify(styleRules, null, 2) +
+    " */"
+  );
+}
+
+function renderStyleRuleNode(
+  node: StyleRuleNode,
+  styleRuleToClassName: (styleRule: StyleRule) => string,
+  indent = 0,
+): string {
+  const rulesSection = node.rules
+    .sort((a, b) => a.value.localeCompare(b.value))
+    .sort((a, b) => a.property.localeCompare(b.property))
+    .sort((a, b) => a.selector.length - b.selector.length)
+    .sort((a, b) => a.atRules.length - b.atRules.length)
+    .map((rule) => {
+      const className = styleRuleToClassName(rule);
+      return `${space(indent)}${rule.selector.replaceAll("&", "." + className)} { ${rule.property}: ${rule.value} }`;
+    })
+    .join("\n");
+
+  const childrenSection = node.children
+    .map((node) => {
+      return `${space(indent)}${node.atRule} {
+${renderStyleRuleNode(node, styleRuleToClassName, indent + 1)}
+${space(indent)}}`;
+    })
+    .join("\n");
+
+  return [rulesSection, childrenSection].filter(Boolean).join("\n\n");
+}
+
+function space(indent = 0) {
+  return "".padEnd(indent * 2, " ");
+}
+
+type StyleRuleNode = {
+  atRule: string | undefined;
+  rules: StyleRule[];
+  children: StyleRuleNode[];
+};
+
+function groupStyleRules(styleRules: StyleRule[], atRulesSoFar: string[]) {
+  const matchingStyleRules = styleRules.filter(
+    (r) => r.atRules.length === atRulesSoFar.length,
+  );
+
+  const nextAtRulesArr = styleRules
+    .map((r) => r.atRules[atRulesSoFar.length])
+    .filter(Boolean);
+
+  const nextAtRulesSet = new Set(nextAtRulesArr);
+
+  const node: StyleRuleNode = {
+    atRule: atRulesSoFar.length
+      ? atRulesSoFar[atRulesSoFar.length - 1]
+      : undefined,
+    rules: matchingStyleRules,
+    children: [...nextAtRulesSet].map((atRule) =>
+      groupStyleRules(
+        styleRules.filter((r) => r.atRules[atRulesSoFar.length] === atRule),
+        [...atRulesSoFar, atRule],
+      ),
+    ),
+  };
+
+  return node;
+}

package/src/runtime.ts

@@ -0,0 +1,27 @@
+export function css(styleObject: any): string {
+  throw new Error("RAHHH");
+}
+
+export function keyframes(styleObject: any): string {
+  throw new Error("RAHHH");
+}
+
+export function mergeClassNames(
+  classNames: Array<string | boolean | null | undefined>,
+): string {
+  let cleanNames = classNames
+    .filter((element) => typeof element === "string")
+    .join(" ")
+    .split(/\s+/);
+
+  let classMap = Object.create(null) as Record<string, string>;
+  for (let className of cleanNames) {
+    if (className.startsWith("x") && className.includes("-")) {
+      classMap[className.split("-")[0]!] = className;
+    } else {
+      classMap[className] = className;
+    }
+  }
+
+  return Object.values(classMap).join(" ");
+}