@hypergood/css-core 0.0.3 → 0.1.0

package/package.json

@@ -1,47 +1,57 @@
 {
   "name": "@hypergood/css-core",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./plugin": {
-      "types": "./dist/plugin.d.ts",
-      "import": "./dist/plugin.cjs"
+      "import": {
+        "types": "./dist/plugin.d.ts",
+        "default": "./dist/plugin.js"
+      },
+      "require": {
+        "types": "./dist/plugin.d.cts",
+        "default": "./dist/plugin.cjs"
+      }
     }
   },
-  "scripts": {
-    "dev": "tsup src/index.ts src/plugin.ts --watch",
-    "build": "tsup src/index.ts src/plugin.ts",
-    "test": "vitest"
-  },
   "publishConfig": {
     "access": "public"
   },
   "author": "",
   "license": "MIT",
   "description": "",
-  "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/helper-module-imports": "^7.27.1",
+  "dependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/helper-module-imports": "^7.28.6",
     "@babel/parser": "^7.29.3",
     "@babel/preset-typescript": "^7.28.5",
+    "css-tree": "^3.2.1",
+    "csstype": "^3.2.3",
+    "es-module-lexer": "^2.1.0"
+  },
+  "devDependencies": {
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-module-imports": "^7.18.3",
-    "@types/css-tree": "^2.3.11",
-    "css-tree": "^3.1.0",
-    "es-module-lexer": "^2.0.0",
-    "prettier": "^3.7.4",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.4",
-    "vitest": "^4.0.13"
+    "@types/css-tree": "^2.3.11"
   },
   "peerDependencies": {
-    "vite": "^7.2.4"
+    "vite": "^8"
+  },
+  "scripts": {
+    "dev": "tsup src/index.ts src/plugin.ts --watch",
+    "build": "tsup src/index.ts src/plugin.ts",
+    "test": "vitest"
   }
-}
+}

package/src/atomizer/css-tree.ts

@@ -134,7 +134,7 @@ const NAMED_COLOR_MAP: Record<string, string> = {
   lime: "#0f0",
   limegreen: "#32cd32",
   "#faf0e6": "linen",
-  magenta: "#ff00f",
+  magenta: "#ff00ff",
   "#800000": "maroon",
   mediumaquamarine: "#66cdaa",
   mediumblue: "#0000cd",

package/src/css-properties.ts

@@ -0,0 +1,43 @@
+import type * as CSS from "csstype";
+
+/**
+ * A value allowed inside a {@link CSSProperties} object: a string, a number, an
+ * array of strings/numbers (e.g. for fallback values), or a nested
+ * {@link CSSProperties} object (e.g. for selectors, media queries, or
+ * at-rules).
+ */
+export type CSSValue =
+  | string
+  | number
+  | Array<string | number>
+  | CSSProperties;
+
+/**
+ * The value type for a *known* CSS property.
+ *
+ * We deliberately do NOT union in a bare `string` here: csstype's own property
+ * types already permit any string via the `(string & {})` trick, which keeps
+ * the literal value suggestions (e.g. `"center"` for `alignItems`) visible in
+ * IntelliSense. Adding a bare `string` would collapse that union and suppress
+ * the autocomplete. We still allow numbers, fallback arrays, and nested objects.
+ */
+type KnownCSSValue<K extends keyof CSS.Properties> =
+  | CSS.Properties[K]
+  | number
+  | Array<string | number>
+  | CSSProperties;
+
+/**
+ * The shape of the style objects passed to `css()`, `variants()`, and
+ * `styled()`.
+ *
+ * Known camelCase CSS properties (sourced from `csstype`) offer autocomplete
+ * for both the property name and its value, but any other key is accepted
+ * without a type error so that selectors, media queries, custom properties, and
+ * other arbitrary keys can be used freely.
+ */
+export type CSSProperties = {
+  [K in keyof CSS.Properties]?: KnownCSSValue<K>;
+} & {
+  [key: string]: CSSValue;
+};

package/src/evaluate.ts

@@ -192,8 +192,21 @@ function evaluateObjectExpression(
     switch (property.type) {
       case "ObjectMethod":
         return UNKNOWN(property);
-      case "SpreadElement":
-        return UNKNOWN(property);
+      case "SpreadElement": {
+        const values = evaluateBabelExpression(
+          property.argument,
+          knownConstants,
+        );
+        if (values.confident) {
+          result = {
+            ...result,
+            ...values.value,
+          };
+          continue;
+        } else {
+          return UNKNOWN(property);
+        }
+      }
       case "ObjectProperty": {
         const keyNode = property.key;
         let key: EvaluationResult;

package/src/plugin.ts

@@ -45,16 +45,22 @@ function babelPluginGetCssJsImports({
 }
 
 function babelPluginReplaceCssProp({
+  config,
   initialKnownConstants,
   styleObjectToClassNames,
   keyframesObjectToAnimationName,
 }: {
+  config: PluginConfig;
   initialKnownConstants: Record<string, any>;
   styleObjectToClassNames: (styleObject: any) => string;
   keyframesObjectToAnimationName: (keyframesObject: any) => string;
 }): babel.PluginItem {
   let localCssFunctionName: string | undefined;
   let localKeyframesFunctionName: string | undefined;
+  let localStyledFunctionName: string | undefined;
+  let localVariantsFunctionName: string | undefined;
+
+  const jsxClassProp = config.jsxClassProp ?? "className";
 
   let knownConstants = {
     ...initialKnownConstants,
@@ -95,7 +101,7 @@ function babelPluginReplaceCssProp({
         },
       },
       ImportDeclaration(path) {
-        if (path.node.source.value !== "@hypergood/css-core") return;
+        if (path.node.source.value !== config.moduleName) return;
         const cssFunctionSpecifier = path.node.specifiers.find((specifier) => {
           return (
             specifier.type === "ImportSpecifier" &&
@@ -118,6 +124,30 @@ function babelPluginReplaceCssProp({
         if (keyframesFunctionSpecifier) {
           localKeyframesFunctionName = keyframesFunctionSpecifier.local.name;
         }
+        const styledFunctionSpecifier = path.node.specifiers.find(
+          (specifier) => {
+            return (
+              specifier.type === "ImportSpecifier" &&
+              specifier.imported.type === "Identifier" &&
+              specifier.imported.name === "styled"
+            );
+          },
+        );
+        if (styledFunctionSpecifier) {
+          localStyledFunctionName = styledFunctionSpecifier.local.name;
+        }
+        const variantsFunctionSpecifier = path.node.specifiers.find(
+          (specifier) => {
+            return (
+              specifier.type === "ImportSpecifier" &&
+              specifier.imported.type === "Identifier" &&
+              specifier.imported.name === "variants"
+            );
+          },
+        );
+        if (variantsFunctionSpecifier) {
+          localVariantsFunctionName = variantsFunctionSpecifier.local.name;
+        }
       },
       CallExpression: {
         exit(path) {
@@ -178,6 +208,182 @@ function babelPluginReplaceCssProp({
               value: classNames,
             });
           }
+
+          if (
+            babel.types.isIdentifier(path.node.callee, {
+              name: localStyledFunctionName,
+            })
+          ) {
+            const args = path.node.arguments;
+            if (args.length !== 2) return;
+            const secondArg = args[1];
+            if (secondArg.type !== "ObjectExpression") return;
+
+            const getPropertyKeyName = (
+              prop: babel.types.ObjectExpression["properties"][number],
+            ): string | undefined => {
+              if (prop.type !== "ObjectProperty") return undefined;
+              const key = prop.key;
+              if (key.type === "Identifier") return key.name;
+              if (key.type === "StringLiteral") return key.value;
+              return undefined;
+            };
+
+            const evaluateToClassNames = (
+              node: babel.types.Expression,
+              what: string,
+            ) => {
+              const result = evaluateBabelExpression(node, knownConstants);
+              if (!result.confident) {
+                throw new Error(
+                  `COULD NOT EVALUATE ${what}: L` + node.loc?.start.line,
+                );
+              }
+              return styleObjectToClassNames(result.value);
+            };
+
+            // Separate the base styles from the `variants` / `defaultVariants`
+            // keys, which get transformed independently.
+            const baseProperties: babel.types.ObjectExpression["properties"] =
+              [];
+            let variantsProperty: babel.types.ObjectProperty | undefined;
+            let defaultVariantsProperty:
+              | babel.types.ObjectExpression["properties"][number]
+              | undefined;
+
+            for (const prop of secondArg.properties) {
+              const keyName = getPropertyKeyName(prop);
+              if (keyName === "variants" && prop.type === "ObjectProperty") {
+                variantsProperty = prop;
+              } else if (keyName === "defaultVariants") {
+                defaultVariantsProperty = prop;
+              } else {
+                baseProperties.push(prop);
+              }
+            }
+
+            const newProperties: babel.types.ObjectExpression["properties"] =
+              [];
+
+            // base: everything that isn't `variants` / `defaultVariants`
+            const baseClassNames = evaluateToClassNames(
+              babel.types.objectExpression(baseProperties),
+              "STYLED",
+            );
+            newProperties.push(
+              babel.types.objectProperty(
+                babel.types.identifier("base"),
+                babel.types.stringLiteral(baseClassNames),
+              ),
+            );
+
+            // variants: { variant: { value: styleObject } } -> { variant: { value: classNames } }
+            if (variantsProperty) {
+              if (variantsProperty.value.type === "ObjectExpression") {
+                const newVariantGroups: babel.types.ObjectExpression["properties"] =
+                  [];
+                for (const group of variantsProperty.value.properties) {
+                  if (
+                    group.type !== "ObjectProperty" ||
+                    group.value.type !== "ObjectExpression"
+                  ) {
+                    newVariantGroups.push(group);
+                    continue;
+                  }
+                  const newVariantValues: babel.types.ObjectExpression["properties"] =
+                    [];
+                  for (const variant of group.value.properties) {
+                    if (
+                      variant.type !== "ObjectProperty" ||
+                      variant.value.type !== "ObjectExpression"
+                    ) {
+                      newVariantValues.push(variant);
+                      continue;
+                    }
+                    const variantClassNames = evaluateToClassNames(
+                      variant.value,
+                      "STYLED VARIANT",
+                    );
+                    newVariantValues.push(
+                      babel.types.objectProperty(
+                        variant.key,
+                        babel.types.stringLiteral(variantClassNames),
+                        variant.computed,
+                      ),
+                    );
+                  }
+                  newVariantGroups.push(
+                    babel.types.objectProperty(
+                      group.key,
+                      babel.types.objectExpression(newVariantValues),
+                      group.computed,
+                    ),
+                  );
+                }
+                newProperties.push(
+                  babel.types.objectProperty(
+                    babel.types.identifier("variants"),
+                    babel.types.objectExpression(newVariantGroups),
+                    variantsProperty.computed,
+                  ),
+                );
+              } else {
+                newProperties.push(variantsProperty);
+              }
+            }
+
+            // defaultVariants: passed through unchanged
+            if (defaultVariantsProperty) {
+              newProperties.push(defaultVariantsProperty);
+            }
+
+            args[1] = babel.types.objectExpression(newProperties);
+          }
+
+          if (
+            babel.types.isIdentifier(path.node.callee, {
+              name: localVariantsFunctionName,
+            })
+          ) {
+            const args = path.node.arguments;
+            if (args.length !== 1) return;
+            const firstArg = args[0];
+            if (firstArg.type !== "ObjectExpression") return;
+
+            // { name: styleObject } -> { name: classNames }
+            const newProperties: babel.types.ObjectExpression["properties"] =
+              [];
+            for (const prop of firstArg.properties) {
+              if (
+                prop.type !== "ObjectProperty" ||
+                prop.value.type !== "ObjectExpression"
+              ) {
+                newProperties.push(prop);
+                continue;
+              }
+              const styleObjectResult = evaluateBabelExpression(
+                prop.value,
+                knownConstants,
+              );
+              if (!styleObjectResult.confident) {
+                throw new Error(
+                  "COULD NOT EVALUATE VARIANTS: L" + prop.value.loc?.start.line,
+                );
+              }
+              const classNames = styleObjectToClassNames(
+                styleObjectResult.value,
+              );
+              newProperties.push(
+                babel.types.objectProperty(
+                  prop.key,
+                  babel.types.stringLiteral(classNames),
+                  prop.computed,
+                ),
+              );
+            }
+
+            path.replaceWith(babel.types.objectExpression(newProperties));
+          }
         },
       },
       JSXAttribute(path, state) {
@@ -214,7 +420,7 @@ function babelPluginReplaceCssProp({
               }
               const classNames = styleObjectToClassNames(styleObject);
 
-              path.node.name.name = "className";
+              path.node.name.name = jsxClassProp;
               path.node.value = {
                 type: "StringLiteral",
                 value: classNames,
@@ -226,7 +432,7 @@ function babelPluginReplaceCssProp({
               const mergeClassNamesId = addNamed(
                 path,
                 "mergeClassNames",
-                "@hypergood/css-core",
+                config.moduleName || "",
               );
 
               const cleanedElements: babel.types.Expression[] = [];
@@ -305,7 +511,7 @@ function babelPluginReplaceCssProp({
                 }
               }
 
-              path.node.name.name = "className";
+              path.node.name.name = jsxClassProp;
               value.expression = babel.types.callExpression(mergeClassNamesId, [
                 babel.types.arrayExpression(cleanedElements),
               ]);
@@ -313,7 +519,7 @@ function babelPluginReplaceCssProp({
               break;
             }
             default: {
-              path.node.name.name = "className";
+              path.node.name.name = jsxClassProp;
             }
           }
         }
@@ -323,13 +529,16 @@ function babelPluginReplaceCssProp({
 }
 
 export type PluginConfig = {
+  moduleName: string;
+  jsxClassProp?: string;
   media?: Record<string, string>;
   macros?: Record<string, (value: string) => any>;
 };
 
-export function vitePluginCss(config: PluginConfig = {}): Plugin[] {
-  const styleCache = createStyleCache();
-
+const styleCache = createStyleCache();
+export function vitePluginCss(
+  config: PluginConfig = { moduleName: "@hypergood/css-core" },
+): Plugin[] {
   const { plugin: generationPlugin, reload: reloadStyles } =
     createGenerationPlugin(styleCache);
 
@@ -345,6 +554,29 @@ export function vitePluginCss(config: PluginConfig = {}): Plugin[] {
       configureServer(server) {
         devServer = server;
       },
+
+      // `css={...}` is compiled to a literal `class="..."` string at transform
+      // time, so the markup is only as fresh as the transformed module the
+      // renderer used. `hotUpdate` runs per-environment, but a non-standard SSR
+      // environment (e.g. Nitro) may not re-transform on its own — leaving the
+      // server-rendered class stale until a restart. Explicitly invalidate the
+      // changed file in *every* environment so client and SSR copies refresh
+      // together.
+      hotUpdate(ctx) {
+        const cleanFile = ctx.file.split("?")[0]!;
+        if (!/\.[jt]sx?$/.test(cleanFile)) return;
+
+        const server = ctx.server ?? devServer;
+        if (!server?.environments) return;
+
+        for (const env of Object.values(server.environments)) {
+          for (const mod of env.moduleGraph.getModulesByFile(cleanFile) ??
+            []) {
+            env.moduleGraph.invalidateModule(mod);
+          }
+        }
+      },
+
       // Run before other plugins (like the default JSX transform)
       enforce: "pre",
 
@@ -427,6 +659,7 @@ export function vitePluginCss(config: PluginConfig = {}): Plugin[] {
             },
             plugins: [
               babelPluginReplaceCssProp({
+                config,
                 initialKnownConstants: importedConstants,
                 keyframesObjectToAnimationName: (keyframes) => {
                   const newKeyframes = Object.fromEntries(
@@ -501,15 +734,33 @@ function createGenerationPlugin(styleCache: StyleCache) {
       return;
     }
 
-    for (const [id] of modulesToInvalidate.entries()) {
-      const module = server.moduleGraph.getModuleById(id);
+    // In Vite 6+/8 every environment (client, ssr, and any custom ones such
+    // as Nitro's) keeps its own module graph. The deprecated
+    // `server.moduleGraph` / `server.reloadModule` only ever touch the client
+    // graph, so a stale SSR copy of the generated stylesheet would survive
+    // until a full dev-server restart. Invalidate in every environment.
+    const environments = server.environments
+      ? Object.values(server.environments)
+      : [];
 
-      if (!module) {
-        return;
+    for (const [id] of modulesToInvalidate.entries()) {
+      if (environments.length > 0) {
+        for (const env of environments) {
+          const mod = env.moduleGraph.getModuleById(id);
+          if (mod) env.moduleGraph.invalidateModule(mod);
+        }
+      } else {
+        // Legacy (Vite <6) fallback.
+        const mod = server.moduleGraph.getModuleById(id);
+        if (mod) server.moduleGraph.invalidateModule(mod);
       }
 
-      server.moduleGraph.invalidateModule(module);
-      await server.reloadModule(module);
+      // Push the regenerated CSS to the browser. HMR only targets the client,
+      // so use the legacy client module node `reloadModule` expects.
+      const clientMod = server.moduleGraph.getModuleById(id);
+      if (clientMod) {
+        await server.reloadModule(clientMod);
+      }
     }
   }
 
@@ -537,7 +788,7 @@ function createGenerationPlugin(styleCache: StyleCache) {
     configureServer(_server) {
       server = _server;
     },
-    async transform(code, id, { ssr: isSSR = false } = {}) {
+    async transform(code, id, { ssr: isSSR = false } = { moduleType: "jsx" }) {
       if (!/\.css/.test(id)) {
         return null;
       }

package/src/runtime.ts

@@ -1,8 +1,31 @@
-export function css(styleObject: any): string {
+import type { CSSProperties } from "./css-properties.js";
+
+export type { CSSProperties, CSSValue } from "./css-properties.js";
+
+/**
+ * The style object accepted by `styled()`: top-level CSS properties plus the
+ * optional `variants` and `defaultVariants` keys.
+ */
+export type StyledStyleObject = CSSProperties & {
+  variants?: Record<string, Record<string, CSSProperties>>;
+  defaultVariants?: Record<string, string | number | boolean>;
+};
+
+export function css(styleObject: CSSProperties): string {
+  throw new Error("RAHHH");
+}
+
+export function keyframes(styleObject: Record<string, CSSProperties>): string {
+  throw new Error("RAHHH");
+}
+
+export function styled(component: any, styleObject: StyledStyleObject): any {
   throw new Error("RAHHH");
 }
 
-export function keyframes(styleObject: any): string {
+export function variants<
+  T extends Record<string, Record<string, CSSProperties>>,
+>(variantsObject: T): { [K in keyof T]: string } {
   throw new Error("RAHHH");
 }
 

package/tests/evaluate.test.ts

@@ -49,6 +49,9 @@ describe("evaluateBabelExpression", () => {
   it("handles ObjectExpression", () => {
     expect(evaluateString("{a:1}")).toStrictEqual(KNOWN({ a: 1 }));
     expect(evaluateString('{["a"]:1}')).toStrictEqual(KNOWN({ a: 1 }));
+    expect(evaluateString("{a:1, ...({a:2,b:2}) }")).toStrictEqual(
+      KNOWN({ a: 2, b: 2 }),
+    );
   });
   it("handles TemplateLiteral", () => {
     expect(evaluateString("`Something`")).toStrictEqual(KNOWN("Something"));

package/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "module": "nodenext",
     "strict": true,
-    "moduleResolution": "nodenext"
+    "moduleResolution": "nodenext",
+    "ignoreDeprecations": "6.0"
   }
 }

package/tsup.config.ts

@@ -8,5 +8,7 @@ export const tsup: Options = {
   splitting: false,
   format: ["cjs", "esm"],
   target: "node20",
-  external: ["fs", "css-tree"],
+  // Don't bundle dependencies — @babel/core (and friends) use dynamic
+  // require() of node builtins, which is illegal in an ESM bundle.
+  skipNodeModulesBundle: true,
 };