@hypergood/css-core 0.0.1

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@hypergood/css-core",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./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",
+    "@babel/preset-typescript": "^7.28.5",
+    "@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"
+  },
+  "peerDependencies": {
+    "vite": "^7.2.4"
+  }
+}

package/src/atomizer/css-tree.ts

@@ -0,0 +1,579 @@
+import { CssNode } from "css-tree";
+
+export interface LexerNode {
+  syntax: {
+    type: "Type" | "Property" | "Keyword" | "Token";
+    name?: SyntaxName;
+    value?: string;
+  } | null;
+  token?: string;
+  node?: CssNode;
+  match?: LexerNode[];
+}
+
+declare module "css-tree" {
+  interface LexerMatchResult {
+    matched: LexerNode | null;
+    iterations: number;
+    getTrace(node: CssNode): Array<{ type: string; name: string }> | null;
+    isType(node: CssNode | null, type: string): boolean;
+    isProperty(node: CssNode | null, property: string): boolean;
+    isKeyword(node: CssNode | null): boolean;
+  }
+}
+
+export function evaluateLexerNode(node: LexerNode | null | undefined): string {
+  if (!node) return "";
+  switch (node.syntax?.name) {
+    case "named-color":
+      return evaluateNamedColor(node);
+  }
+  // if (node.node && node.node.type === "Operator") {
+  //   return node.node.value;
+  // }
+  if (node.token) {
+    return node.token;
+  }
+  return node.match?.map(evaluateLexerNode).join(" ") || "";
+}
+
+export function evaluateNamedColor(node: LexerNode) {
+  const name = node.match?.[0].token || "";
+  if (name.toLowerCase() in NAMED_COLOR_MAP) {
+    return NAMED_COLOR_MAP[name.toLowerCase()];
+  }
+  return name;
+}
+
+/**
+ * Choose the shortest option between hex and named color, prioritize hex color if both are the same length, prioritize gray over grey
+ */
+const NAMED_COLOR_MAP: Record<string, string> = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#0ff",
+  aquamarine: "#7fffd4",
+  "#f0ffff": "azure",
+  "#f5f5dc": "beige",
+  "#ffe4c4": "bisque",
+  black: "#000",
+  blanchedalmond: "#ffebcd",
+  blue: "#00f",
+  blueviolet: "#8a2be2",
+  "#a52a2a": "brown",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  "#ff7f50": "coral",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#0ff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgreen: "#006400",
+  darkgrey: "#a9a9a9",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkslategrey: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  fuchsia: "#f0f",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  "#ffd700": "gold",
+  goldenrod: "#daa520",
+  "#808080": "gray",
+  "#008000": "green",
+  greenyellow: "#adff2f",
+  grey: "gray",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  "#4b0082": "indigo",
+  "#fffff0": "ivory",
+  "#f0e68c": "khaki",
+  lavender: "#e6e6fa",
+  lavenderblush: "#fff0f5",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2",
+  lightgray: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightgrey: "#d3d3d3",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#789",
+  lightslategrey: "#789",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#0f0",
+  limegreen: "#32cd32",
+  "#faf0e6": "linen",
+  magenta: "#ff00f",
+  "#800000": "maroon",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  "#000080": "navy",
+  oldlace: "#fdf5e6",
+  "#808000": "olive",
+  olivedrab: "#6b8e23",
+  "#ffa500": "orange",
+  orangered: "#ff4500",
+  "#da70d6": "orchid",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  "#cd853f": "peru",
+  "#ffc0cb": "pink",
+  "#dda0dd": "plum",
+  powderblue: "#b0e0e6",
+  "#800080": "purple",
+  rebeccapurple: "#639",
+  "#f00": "red",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  "#fa8072": "salmon",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  "#a0522d": "sienna",
+  "#c0c0c0": "silver",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  slategrey: "#708090",
+  "#fffafa": "snow",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  "#d2b48c": "tan",
+  "#008080": "teal",
+  thistle: "#d8bfd8",
+  "#ff634": "tomato",
+  turquoise: "#40e0d0",
+  "#ee82ee": "violet",
+  "#f5deb3": "wheat",
+  white: "#fff",
+  whitesmoke: "#f5f5f5",
+  yellow: "#ff0",
+  yellowgreen: "#9acd32",
+};
+
+type SyntaxPropertyName = "animation-duration" | "animation-delay";
+
+export type SyntaxName =
+  | SyntaxPropertyName
+  | "abs()"
+  | "absolute-size"
+  | "acos()"
+  | "alpha-value"
+  | "an+b"
+  | "anchor()"
+  | "anchor-name"
+  | "anchor-side"
+  | "anchor-size"
+  | "anchor-size()"
+  | "angle-percentage"
+  | "angular-color-hint"
+  | "angular-color-stop"
+  | "angular-color-stop-list"
+  | "animateable-feature"
+  | "asin()"
+  | "atan()"
+  | "atan2()"
+  | "attachment"
+  | "attr()"
+  | "attr-matcher"
+  | "attr-modifier"
+  | "attr-type"
+  | "attribute-selector"
+  | "auto-repeat"
+  | "auto-track-list"
+  | "axis"
+  | "baseline-position"
+  | "basic-shape"
+  | "basic-shape-rect"
+  | "bg-clip"
+  | "bg-image"
+  | "bg-layer"
+  | "bg-position"
+  | "bg-size"
+  | "blend-mode"
+  | "blur()"
+  | "brightness()"
+  | "calc()"
+  | "calc-constant"
+  | "calc-product"
+  | "calc-size()"
+  | "calc-size-basis"
+  | "calc-sum"
+  | "calc-value"
+  | "cf-final-image"
+  | "cf-mixing-image"
+  | "circle()"
+  | "clamp()"
+  | "class-selector"
+  | "clip-source"
+  | "color"
+  | "color()"
+  | "color-base"
+  | "color-function"
+  | "color-interpolation-method"
+  | "color-mix()"
+  | "color-stop"
+  | "color-stop-angle"
+  | "color-stop-length"
+  | "color-stop-list"
+  | "colorspace-params"
+  | "combinator"
+  | "common-lig-values"
+  | "compat-auto"
+  | "compat-special"
+  | "complex-selector"
+  | "complex-selector-list"
+  | "composite-style"
+  | "compositing-operator"
+  | "compound-selector"
+  | "compound-selector-list"
+  | "conic-gradient()"
+  | "conic-gradient-syntax"
+  | "container-condition"
+  | "container-name"
+  | "container-query"
+  | "content-distribution"
+  | "content-list"
+  | "content-position"
+  | "content-replacement"
+  | "contextual-alt-values"
+  | "contrast()"
+  | "coord-box"
+  | "cos()"
+  | "counter"
+  | "counter()"
+  | "counter-name"
+  | "counter-style"
+  | "counter-style-name"
+  | "counters()"
+  | "cross-fade()"
+  | "cubic-bezier()"
+  | "cubic-bezier-easing-function"
+  | "cursor-predefined"
+  | "custom-color-space"
+  | "custom-params"
+  | "dasharray"
+  | "dashndashdigit-ident"
+  | "deprecated-system-color"
+  | "discretionary-lig-values"
+  | "display-box"
+  | "display-inside"
+  | "display-internal"
+  | "display-legacy"
+  | "display-listitem"
+  | "display-outside"
+  | "drop-shadow()"
+  | "easing-function"
+  | "east-asian-variant-values"
+  | "east-asian-width-values"
+  | "element()"
+  | "ellipse()"
+  | "env()"
+  | "exp()"
+  | "explicit-track-list"
+  | "family-name"
+  | "feature-tag-value"
+  | "feature-type"
+  | "feature-value-block"
+  | "feature-value-block-list"
+  | "feature-value-declaration"
+  | "feature-value-declaration-list"
+  | "feature-value-name"
+  | "filter-function"
+  | "filter-value-list"
+  | "final-bg-layer"
+  | "fit-content()"
+  | "fixed-breadth"
+  | "fixed-repeat"
+  | "fixed-size"
+  | "font-stretch-absolute"
+  | "font-variant-css2"
+  | "font-weight-absolute"
+  | "font-width-css3"
+  | "form-control-identifier"
+  | "frequency-percentage"
+  | "generic-complete"
+  | "general-enclosed"
+  | "generic-family"
+  | "generic-incomplete"
+  | "geometry-box"
+  | "gradient"
+  | "grayscale()"
+  | "grid-line"
+  | "historical-lig-values"
+  | "hsl()"
+  | "hsla()"
+  | "hue"
+  | "hue-interpolation-method"
+  | "hue-rotate()"
+  | "hwb()"
+  | "hypot()"
+  | "id-selector"
+  | "image"
+  | "image()"
+  | "image-set()"
+  | "image-set-option"
+  | "image-src"
+  | "image-tags"
+  | "inflexible-breadth"
+  | "inset()"
+  | "integer"
+  | "invert()"
+  | "keyframe-block"
+  | "keyframe-selector"
+  | "keyframes-name"
+  | "lab()"
+  | "layer()"
+  | "layer-name"
+  | "lch()"
+  | "leader()"
+  | "leader-type"
+  | "length-percentage"
+  | "light-dark()"
+  | "line-name-list"
+  | "line-names"
+  | "line-style"
+  | "line-width"
+  | "linear()"
+  | "linear-color-hint"
+  | "linear-color-stop"
+  | "linear-easing-function"
+  | "linear-gradient()"
+  | "linear-gradient-syntax"
+  | "log()"
+  | "mask-layer"
+  | "mask-position"
+  | "mask-reference"
+  | "mask-source"
+  | "masking-mode"
+  | "matrix()"
+  | "matrix3d()"
+  | "max()"
+  | "media-and"
+  | "media-condition"
+  | "media-condition-without-or"
+  | "media-feature"
+  | "media-in-parens"
+  | "media-not"
+  | "media-or"
+  | "media-query"
+  | "media-query-list"
+  | "media-type"
+  | "mf-boolean"
+  | "mf-name"
+  | "mf-plain"
+  | "mf-range"
+  | "mf-value"
+  | "min()"
+  | "minmax()"
+  | "mod()"
+  | "n-dimension"
+  | "name-repeat"
+  | "named-color"
+  | "namespace-prefix"
+  | "ndash-dimension"
+  | "ndashdigit-dimension"
+  | "ndashdigit-ident"
+  | "ns-prefix"
+  | "number-percentage"
+  | "numeric-figure-values"
+  | "numeric-fraction-values"
+  | "numeric-spacing-values"
+  | "offset-path"
+  | "oklab()"
+  | "oklch()"
+  | "opacity()"
+  | "opacity-value"
+  | "outline-line-style"
+  | "outline-radius"
+  | "overflow-position"
+  | "page-body"
+  | "page-margin-box"
+  | "page-margin-box-type"
+  | "page-selector"
+  | "page-selector-list"
+  | "page-size"
+  | "paint"
+  | "paint()"
+  | "paint-box"
+  | "palette-identifier"
+  | "palette-mix()"
+  | "path()"
+  | "perspective()"
+  | "polar-color-space"
+  | "polygon()"
+  | "position"
+  | "position-area"
+  | "pow()"
+  | "predefined-rgb"
+  | "predefined-rgb-params"
+  | "pseudo-class-selector"
+  | "pseudo-element-selector"
+  | "pseudo-page"
+  | "query-in-parens"
+  | "quote"
+  | "radial-extent"
+  | "radial-gradient()"
+  | "radial-gradient-syntax"
+  | "radial-shape"
+  | "radial-size"
+  | "ratio"
+  | "ray()"
+  | "ray-size"
+  | "rect()"
+  | "rectangular-color-space"
+  | "relative-selector"
+  | "relative-selector-list"
+  | "relative-size"
+  | "rem()"
+  | "repeat-style"
+  | "repeating-conic-gradient()"
+  | "repeating-linear-gradient()"
+  | "repeating-radial-gradient()"
+  | "reversed-counter-name"
+  | "rgb()"
+  | "rgba()"
+  | "rotate()"
+  | "rotate3d()"
+  | "rotateX()"
+  | "rotateY()"
+  | "rotateZ()"
+  | "round()"
+  | "rounding-strategy"
+  | "saturate()"
+  | "scale()"
+  | "scale3d()"
+  | "scaleX()"
+  | "scaleY()"
+  | "scaleZ()"
+  | "scope-end"
+  | "scope-start"
+  | "scroll()"
+  | "scroller"
+  | "scroll-state-feature"
+  | "scroll-state-in-parens"
+  | "scroll-state-query"
+  | "selector-list"
+  | "self-position"
+  | "sepia()"
+  | "shadow"
+  | "shadow-t"
+  | "shape"
+  | "shape-box"
+  | "side-or-corner"
+  | "sign()"
+  | "signed-integer"
+  | "signless-integer"
+  | "sin()"
+  | "single-animation"
+  | "single-animation-composition"
+  | "single-animation-direction"
+  | "single-animation-fill-mode"
+  | "single-animation-iteration-count"
+  | "single-animation-play-state"
+  | "single-animation-timeline"
+  | "single-transition"
+  | "single-transition-property"
+  | "size"
+  | "size-feature"
+  | "skew()"
+  | "skewX()"
+  | "skewY()"
+  | "sqrt()"
+  | "step-position"
+  | "step-easing-function"
+  | "steps()"
+  | "style-feature"
+  | "style-in-parens"
+  | "style-query"
+  | "subclass-selector"
+  | "supports-condition"
+  | "supports-decl"
+  | "supports-feature"
+  | "supports-in-parens"
+  | "supports-selector-fn"
+  | "symbol"
+  | "symbols()"
+  | "symbols-type"
+  | "system-color"
+  | "system-family-name"
+  | "tan()"
+  | "target"
+  | "target-counter()"
+  | "target-counters()"
+  | "target-text()"
+  | "text-edge"
+  | "time-percentage"
+  | "timeline-range-name"
+  | "track-breadth"
+  | "track-list"
+  | "track-repeat"
+  | "track-size"
+  | "transform-function"
+  | "transform-list"
+  | "transition-behavior-value"
+  | "translate()"
+  | "translate3d()"
+  | "translateX()"
+  | "translateY()"
+  | "translateZ()"
+  | "try-size"
+  | "try-tactic"
+  | "type-or-unit"
+  | "type-selector"
+  | "var()"
+  | "view()"
+  | "viewport-length"
+  | "visual-box"
+  | "wq-name"
+  | "xywh()"
+  | "xyz"
+  | "xyz-params";