@hypergood/css-core 0.0.1

package/src/string.ts

@@ -0,0 +1,37 @@
+// Started with letters first because I think it looks better
+const ALPHABET = "abcdefghijklmnopqrstuvwxyz0123456789";
+const ALPHABET_LENGTH = ALPHABET.length;
+
+function toChar63(number: number) {
+  return ALPHABET[number - 1];
+}
+
+/**
+ * Oops it's actually base 36, limited to lowercase letters and numbers for
+ * better compression.
+ */
+export function toBase64ish(number: number): string {
+  let string = "";
+  let _number = number;
+
+  while (_number > 0) {
+    string = string + toChar63(_number % ALPHABET_LENGTH || ALPHABET_LENGTH);
+    _number = Math.floor((_number - 1) / ALPHABET_LENGTH);
+  }
+
+  return string;
+}
+
+/** Returns the given value converted to camel-case. */
+export const toCamelCase = (value: string) =>
+  !/[A-Z]/.test(value)
+    ? value.replace(/-[^]/g, (capital) => capital[1].toUpperCase())
+    : value;
+
+/** Returns the given value converted to kebab-case. */
+export const toKebabCase = (value: string) =>
+  // ignore kebab-like values
+  value.includes("-")
+    ? value
+    : // replace any upper-case letter with a dash and the lower-case variant
+      value.replace(/[A-Z]/g, (capital) => "-" + capital.toLowerCase());

package/src/style-cache.ts

@@ -0,0 +1,171 @@
+import { mergeClassNames } from "./index.js";
+import { printStyleSheet } from "./print.js";
+import { toBase64ish } from "./string.js";
+import { AnimationRules, StyleRule } from "./style-rule.js";
+
+function dedupeRules(rules: StyleRule[]) {
+  return rules.filter((r, i, all) => {
+    const firstIndex = all.findIndex(
+      (r2) => r2.property === r.property && r2.value === r.value,
+    );
+    if (firstIndex === i) return true;
+    return false;
+  });
+}
+
+function dedupeAnimations(rules: AnimationRules[]) {
+  return rules.filter((r, i, all) => {
+    const firstIndex = all.findIndex(
+      (r2) => JSON.stringify(r2) === JSON.stringify(r),
+    );
+    if (firstIndex === i) return true;
+    return false;
+  });
+}
+
+function createAnimationNameCache() {
+  let cacheIndex = 1;
+  let keyframesHashToAnimationName = new Map<string, string>();
+
+  function createAnimationName() {
+    return "x" + toBase64ish(cacheIndex++);
+  }
+
+  function getAnimationName(rule: AnimationRules) {
+    const propertyHash = JSON.stringify(rule);
+
+    let propertySegment = keyframesHashToAnimationName.get(propertyHash);
+    if (!propertySegment) {
+      propertySegment = createAnimationName();
+      keyframesHashToAnimationName.set(propertyHash, propertySegment);
+    }
+
+    return propertySegment;
+  }
+
+  return { getAnimationName };
+}
+
+function createPropertyClassSegmentCache() {
+  let propertyCacheIndex = 1;
+  let propertyHashToClassSegment = new Map<string, string>();
+
+  function createPropertyClassSegment() {
+    return toBase64ish(propertyCacheIndex++);
+  }
+
+  function getPropertyClassSegment(rule: StyleRule) {
+    let { selector, property, atRules } = rule;
+    const propertyHash = [selector, property, ...atRules].join(" $ ");
+
+    let propertySegment = propertyHashToClassSegment.get(propertyHash);
+    if (!propertySegment) {
+      propertySegment = createPropertyClassSegment();
+      propertyHashToClassSegment.set(propertyHash, propertySegment);
+    }
+
+    return propertySegment;
+  }
+
+  return { getPropertyClassSegment };
+}
+
+function createValueClassSegmentCache() {
+  let valueCacheIndices = new Map<string, number>();
+  function getValueCacheIndex(propertyHash: string) {
+    return valueCacheIndices.get(propertyHash) || 1;
+  }
+  function incrementValueCacheIndex(propertyHash: string) {
+    valueCacheIndices.set(propertyHash, getValueCacheIndex(propertyHash) + 1);
+  }
+  let valueClassSegmentCache: {
+    [propertyClassSegment: string]: {
+      [valueHash: string]: string;
+    };
+  } = {};
+  function getValueClassSegmentFromCache(
+    propertyHash: string,
+    valueHash: string,
+  ): string | undefined {
+    return valueClassSegmentCache[propertyHash]?.[valueHash];
+  }
+  function setValueClassSegment(
+    propertyHash: string,
+    valueHash: string,
+    valueClassSegment: string,
+  ) {
+    if (!valueClassSegmentCache[propertyHash]) {
+      valueClassSegmentCache[propertyHash] = {};
+    }
+    valueClassSegmentCache[propertyHash][valueHash] = valueClassSegment;
+  }
+  function createValueClassSegment(propertyHash: string) {
+    const idx = getValueCacheIndex(propertyHash);
+    const valueClassSegment = toBase64ish(idx);
+    incrementValueCacheIndex(propertyHash);
+    return valueClassSegment;
+  }
+
+  function getValueClassSegment(rule: StyleRule, propertyHash: string) {
+    let { value } = rule;
+
+    const valueHash = value;
+    let valueClassSegment = getValueClassSegmentFromCache(
+      propertyHash,
+      valueHash,
+    );
+    if (!valueClassSegment) {
+      valueClassSegment = createValueClassSegment(propertyHash);
+      setValueClassSegment(propertyHash, valueHash, valueClassSegment);
+    }
+    return valueClassSegment;
+  }
+
+  return { getValueClassSegment };
+}
+
+export function createStyleCache() {
+  let rules: StyleRule[] = [];
+  let animations: AnimationRules[] = [];
+
+  const { getPropertyClassSegment } = createPropertyClassSegmentCache();
+  const { getValueClassSegment } = createValueClassSegmentCache();
+  const { getAnimationName } = createAnimationNameCache();
+
+  function styleRuleToClassName(rule: StyleRule) {
+    let propertyClassSegment = getPropertyClassSegment(rule);
+    let valueClassSegment = getValueClassSegment(rule, propertyClassSegment);
+
+    const className = "x" + propertyClassSegment + "-" + valueClassSegment;
+
+    return className;
+  }
+
+  return {
+    getLength: () => rules.length,
+    addRules: (r: StyleRule[]) => {
+      rules.push(...r);
+      rules = dedupeRules(rules);
+    },
+    getClassNames: (r: StyleRule[]) => {
+      rules.push(...r);
+      rules = dedupeRules(rules);
+      return mergeClassNames(r.map(styleRuleToClassName));
+    },
+    getAnimationName: (keyframe: AnimationRules) => {
+      animations.push(keyframe);
+      animations = dedupeAnimations(animations);
+      return getAnimationName(keyframe);
+    },
+    processStyleRules: () => {
+      return printStyleSheet({
+        animations,
+        getAnimationName,
+        styleRules: rules,
+        styleRuleToClassName,
+      });
+    },
+  };
+}
+
+export type StyleCache = ReturnType<typeof createStyleCache>;

package/src/style-object.ts

@@ -0,0 +1,181 @@
+import { toKebabCase } from "./string.js";
+import { StyleRule } from "./style-rule.js";
+
+export type StyleObject = {
+  [key in string]: string | number | StyleObject;
+};
+
+export type KeyframesObject = {
+  [key in string]: StyleObject;
+};
+
+function joinSingleSelector(a: string, b: string) {
+  if (!b.includes("&")) {
+    if (b.includes(" ")) {
+      b = `& ${b}`;
+    } else {
+      if (/^[a-zA-Z]/.test(b) || b.startsWith("*")) {
+        b = `& ${b}`;
+      } else {
+        b = `&${b}`;
+      }
+    }
+  }
+  const selector = b.replaceAll("&", a);
+
+  return selector;
+}
+
+export function joinSelectors(a: string, bs: string): string[] {
+  const bsArray = bs.split(/,\s*/);
+  return bsArray.map((b) => joinSingleSelector(a, b.trim()));
+}
+
+export type MacroFn = (arg: any) => void;
+export type Macros = Record<string, (arg: any) => StyleObject>;
+
+export function evaluateMacros(
+  cssObj: StyleObject,
+  macros: Macros,
+  usedMacroKeys: string[] = [],
+) {
+  return Object.fromEntries(
+    Object.entries(cssObj).flatMap(([key, value]) => {
+      const macro = macros[key];
+      if (!macro || usedMacroKeys.includes(key)) {
+        return [
+          [
+            key,
+            typeof value === "object"
+              ? evaluateMacros(value, macros, usedMacroKeys)
+              : value,
+          ],
+        ];
+      }
+      const macrofied = macro(value);
+      return Object.entries(macrofied).map(([key, value]) => [
+        key,
+        typeof value === "object"
+          ? evaluateMacros(value, macros, [...usedMacroKeys, key])
+          : value,
+      ]);
+    }),
+  );
+}
+
+export type Media = Record<string, string>;
+
+export function evaluateMedia(cssObj: StyleObject, media: Media) {
+  return Object.fromEntries(
+    Object.entries(cssObj).map(([key, value]) => {
+      value = typeof value === "object" ? evaluateMedia(value, media) : value;
+      if (key.startsWith("@")) {
+        const thisMedia = media[key.slice(1)];
+        if (thisMedia) {
+          const newKey = `@media ${thisMedia}`;
+          return [newKey, value];
+        }
+      }
+      return [key, value];
+    }),
+  );
+}
+
+export function flattenStyleObject(
+  cssObj: StyleObject,
+  selector = "&",
+  atRules: string[] = [],
+): StyleRule[] {
+  return Object.entries(cssObj).flatMap(([key, value]) => {
+    if (typeof value === "object") {
+      if (key.startsWith("@")) {
+        let newAtRule = key;
+        return flattenStyleObject(value, selector, [...atRules, newAtRule]);
+      }
+
+      let nextSelectors = joinSelectors(selector, key);
+      return nextSelectors.flatMap((nextSelector) => {
+        return flattenStyleObject(value as StyleObject, nextSelector, atRules);
+      });
+    }
+
+    const property = toKebabCase(key);
+
+    if (typeof value === "number") {
+      if (unitlessProps[property]) {
+        value = value.toString();
+      } else {
+        value = value + "px";
+      }
+    }
+
+    value = value.trim();
+    let important = false;
+    if (value.endsWith("!important")) {
+      important = true;
+      value = value.slice(0, value.length - "!important".length);
+    }
+
+    return [
+      {
+        selector,
+        property,
+        value,
+        atRules,
+        important,
+      },
+    ];
+  });
+}
+
+/** CSS Properties whose number values should not be auto-converted to pixels. */
+export const unitlessProps: Record<string, number> = {
+  "animation-iteration-count": 1,
+  "aspect-ratio": 1,
+  "border-image-outset": 1,
+  "border-image-slice": 1,
+  "border-Image-width": 1,
+  "box-flex": 1,
+  "box-flex-group": 1,
+  "box-ordinal-group": 1,
+  "column-count": 1,
+  columns: 1,
+  flex: 1,
+  "flex-grow": 1,
+  "flex-positive": 1,
+  "flex-shrink": 1,
+  "flex-negative": 1,
+  "flex-order": 1,
+  "grid-row": 1,
+  "grid-row-end": 1,
+  "grid-row-span": 1,
+  "grid-row-start": 1,
+  "grid-column": 1,
+  "grid-column-end": 1,
+  "grid-column-span": 1,
+  "grid-column-start": 1,
+  "ms-grid-row": 1,
+  "ms-grid-row-span": 1,
+  "ms-grid-column": 1,
+  "ms-grid-column-span": 1,
+  "font-weight": 1,
+  "line-height": 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  "tab-size": 1,
+  widows: 1,
+  "z-index": 1,
+  zoom: 1,
+  "-webkit-line-clamp": 1,
+
+  // SVG-related properties
+  "fill-opacity": 1,
+  "flood-opacity": 1,
+  "stop-opacity": 1,
+  "stroke-dasharray": 1,
+  "stroke-dashoffset": 1,
+  "stroke-miterlimit": 1,
+  "stroke-opacity": 1,
+  "stroke-width": 1,
+};

package/src/style-rule.ts

@@ -0,0 +1,9 @@
+export type StyleRule = {
+  atRules: string[];
+  selector: string;
+  property: string;
+  value: string;
+  important: boolean;
+};
+
+export type AnimationRules = Record<string, StyleRule[]>;

package/tests/style-object.test.ts

@@ -0,0 +1,151 @@
+import { describe, expect, it } from "vitest";
+import {
+  evaluateMacros,
+  evaluateMedia,
+  flattenStyleObject,
+  joinSelectors,
+} from "../src/style-object.js";
+
+describe("joinSelectors", () => {
+  it("should work", () => {
+    expect(joinSelectors("&", "div")).toStrictEqual(["& div"]);
+    expect(joinSelectors("&", "div, p")).toStrictEqual(["& div", "& p"]);
+    expect(joinSelectors("&", "*")).toStrictEqual(["& *"]);
+
+    expect(joinSelectors("&", ".foo")).toStrictEqual(["&.foo"]);
+    expect(joinSelectors("&", "#foo")).toStrictEqual(["&#foo"]);
+    expect(joinSelectors("&", "[foo]")).toStrictEqual(["&[foo]"]);
+    expect(joinSelectors("&", ":hover")).toStrictEqual(["&:hover"]);
+    expect(joinSelectors("&", "::before")).toStrictEqual(["&::before"]);
+
+    expect(joinSelectors("&", ".foo .bar")).toStrictEqual(["& .foo .bar"]);
+    expect(joinSelectors("&", ">li")).toStrictEqual(["&>li"]);
+  });
+});
+
+describe("evaluateMacros", () => {
+  it("should work", () => {
+    expect(
+      evaluateMacros(
+        {
+          foo: "bar",
+        },
+        {
+          foo: (value) => ({
+            baz: value,
+          }),
+        },
+      ),
+    ).toStrictEqual({
+      baz: "bar",
+    });
+
+    expect(
+      evaluateMacros(
+        {
+          foo2: "bar",
+        },
+        {
+          foo: (value) => ({
+            baz: value,
+          }),
+        },
+      ),
+    ).toStrictEqual({
+      foo2: "bar",
+    });
+
+    expect(
+      evaluateMacros(
+        {
+          fontSize: 16,
+        },
+        {
+          fontSize: (value) => ({
+            fontSize: typeof value === "number" ? value / 16 + "rem" : value,
+          }),
+        },
+      ),
+    ).toStrictEqual({
+      fontSize: "1rem",
+    });
+
+    expect(
+      evaluateMacros(
+        {
+          ":hover": {
+            foo: "bar",
+          },
+        },
+        {
+          foo: (value) => ({
+            baz: value,
+          }),
+        },
+      ),
+    ).toStrictEqual({
+      ":hover": {
+        baz: "bar",
+      },
+    });
+  });
+
+  expect(
+    evaluateMacros(
+      {
+        darkish: {
+          foo: "bar",
+        },
+      },
+      {
+        darkish: (value) => ({
+          "@dark": value,
+        }),
+        foo: (value) => ({
+          baz: value,
+        }),
+      },
+    ),
+  ).toStrictEqual({
+    "@dark": {
+      baz: "bar",
+    },
+  });
+});
+
+describe("evaluateMedia", () => {
+  it("should work", () => {
+    expect(
+      evaluateMedia(
+        {
+          width: 50,
+          "@bp1": {
+            width: 100,
+            "@bp2": {
+              width: 150,
+            },
+          },
+        },
+        {
+          bp1: "(min-width: 640px)",
+          bp2: "(min-width: 768px)",
+          bp3: "(min-width: 1024px)",
+        },
+      ),
+    ).toStrictEqual({
+      width: 50,
+      "@media (min-width: 640px)": {
+        width: 100,
+        "@media (min-width: 768px)": {
+          width: 150,
+        },
+      },
+    });
+  });
+});
+
+describe("flattenStyleObject", () => {
+  it("should work", () => {
+    expect(flattenStyleObject({})).toStrictEqual([]);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "nodenext",
+    "strict": true,
+    "moduleResolution": "nodenext"
+  }
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import type { Options } from "tsup";
+
+export const tsup: Options = {
+  clean: true,
+  dts: true,
+  minify: false,
+  sourcemap: true,
+  splitting: false,
+  format: ["cjs", "esm"],
+  target: "node20",
+  external: ["fs", "css-tree"],
+};