rbx-css 0.1.0

package/dist/lib.js

@@ -0,0 +1,2812 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/parser/css-parser.ts
+import { transform } from "lightningcss";
+function resolveNestingSelector(parentSelectors, childSelectors) {
+  const resolved = [];
+  for (const childSel of childSelectors) {
+    const nestingIndex = childSel.findIndex((comp) => comp.type === "nesting");
+    if (nestingIndex === -1) {
+      for (const parentSel of parentSelectors) {
+        resolved.push([
+          ...parentSel,
+          { type: "combinator", value: "descendant" },
+          ...childSel
+        ]);
+      }
+    } else {
+      for (const parentSel of parentSelectors) {
+        const newSel = [
+          ...childSel.slice(0, nestingIndex),
+          ...parentSel,
+          ...childSel.slice(nestingIndex + 1)
+        ];
+        resolved.push(newSel);
+      }
+    }
+  }
+  return resolved;
+}
+function resolveFullSelectorStack(selectorStack) {
+  if (selectorStack.length === 0)
+    return [];
+  if (selectorStack.length === 1)
+    return selectorStack[0];
+  let resolved = selectorStack[0];
+  for (let i = 1;i < selectorStack.length; i++) {
+    resolved = resolveNestingSelector(resolved, selectorStack[i]);
+  }
+  return resolved;
+}
+function parseCSS(source, filename) {
+  const collectedRules = [];
+  const collectedMedia = [];
+  const mediaStack = [];
+  const selectorStack = [];
+  transform({
+    filename,
+    code: Buffer.from(source),
+    visitor: {
+      Rule(rule) {
+        if (rule.type === "media") {
+          const value = rule.value;
+          const query = JSON.parse(JSON.stringify(value.query));
+          const entry = { query, rules: [] };
+          collectedMedia.push(entry);
+          mediaStack.push({ query, entry });
+        } else if (rule.type === "style") {
+          const value = rule.value;
+          const selectors = value.selectors;
+          const decls = value.declarations;
+          selectorStack.push(selectors);
+          const parsed = {
+            selectors: JSON.parse(JSON.stringify(selectors)),
+            declarations: JSON.parse(JSON.stringify(decls.declarations))
+          };
+          if (parsed.declarations.length > 0) {
+            if (mediaStack.length > 0) {
+              mediaStack[mediaStack.length - 1].entry.rules.push(parsed);
+            } else {
+              collectedRules.push(parsed);
+            }
+          }
+        } else if (rule.type === "nested-declarations") {
+          const value = rule.value;
+          const decls = value.declarations;
+          const declarations = JSON.parse(JSON.stringify(decls.declarations));
+          if (declarations.length > 0 && selectorStack.length > 0) {
+            const resolvedSelectors = resolveFullSelectorStack(selectorStack.map((s) => JSON.parse(JSON.stringify(s))));
+            const parsed = {
+              selectors: resolvedSelectors,
+              declarations
+            };
+            if (mediaStack.length > 0) {
+              mediaStack[mediaStack.length - 1].entry.rules.push(parsed);
+            } else {
+              collectedRules.push(parsed);
+            }
+          }
+        }
+      },
+      RuleExit(rule) {
+        if (rule.type === "media") {
+          mediaStack.pop();
+        } else if (rule.type === "style") {
+          selectorStack.pop();
+        }
+      }
+    }
+  });
+  return { rules: collectedRules, mediaRules: collectedMedia };
+}
+
+// src/mappers/colors.ts
+function convertCssColor(cssColor) {
+  if (!cssColor || typeof cssColor !== "object")
+    return null;
+  const c = cssColor;
+  if (c.type === "rgb") {
+    const r = Math.round(c.r);
+    const g = Math.round(c.g);
+    const b = Math.round(c.b);
+    const alpha = c.alpha;
+    return {
+      color: [r, g, b],
+      transparency: alpha < 1 ? Math.round((1 - alpha) * 100) / 100 : undefined
+    };
+  }
+  if (c.type === "oklch") {
+    const rgb = oklchToRgb(c.l, c.c, c.h);
+    const alpha = c.alpha;
+    return {
+      color: rgb,
+      transparency: alpha < 1 ? Math.round((1 - alpha) * 100) / 100 : undefined
+    };
+  }
+  if (c.type === "oklab") {
+    const rgb = oklabToRgb(c.l, c.a, c.b);
+    const alpha = c.alpha;
+    return {
+      color: rgb,
+      transparency: alpha < 1 ? Math.round((1 - alpha) * 100) / 100 : undefined
+    };
+  }
+  if (c.type === "lab") {
+    const rgb = labToRgb(c.l, c.a, c.b);
+    const alpha = c.alpha;
+    return {
+      color: rgb,
+      transparency: alpha < 1 ? Math.round((1 - alpha) * 100) / 100 : undefined
+    };
+  }
+  if (c.type === "lch") {
+    const hRad = c.h * Math.PI / 180;
+    const a = c.c * Math.cos(hRad);
+    const b = c.c * Math.sin(hRad);
+    const rgb = labToRgb(c.l, a, b);
+    const alpha = c.alpha;
+    return {
+      color: rgb,
+      transparency: alpha < 1 ? Math.round((1 - alpha) * 100) / 100 : undefined
+    };
+  }
+  if (c.type === "currentcolor") {
+    return null;
+  }
+  return null;
+}
+function gammaCorrect(x) {
+  return x <= 0.0031308 ? x * 12.92 : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;
+}
+function clampRgb(r, g, b) {
+  return [
+    Math.round(Math.max(0, Math.min(1, r)) * 255),
+    Math.round(Math.max(0, Math.min(1, g)) * 255),
+    Math.round(Math.max(0, Math.min(1, b)) * 255)
+  ];
+}
+function oklabToRgb(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  const rLin = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const gLin = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const bLin = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+  return clampRgb(gammaCorrect(rLin), gammaCorrect(gLin), gammaCorrect(bLin));
+}
+function oklchToRgb(L, C, H) {
+  const hRad = H * Math.PI / 180;
+  return oklabToRgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
+}
+function labToRgb(L, a, b) {
+  const fy = (L + 16) / 116;
+  const fx = a / 500 + fy;
+  const fz = fy - b / 200;
+  const delta = 6 / 29;
+  const invF = (t) => t > delta ? t * t * t : 3 * delta * delta * (t - 4 / 29);
+  const X = 0.95047 * invF(fx);
+  const Y = 1 * invF(fy);
+  const Z = 1.08883 * invF(fz);
+  const rLin = 3.2404542 * X - 1.5371385 * Y - 0.4985314 * Z;
+  const gLin = -0.969266 * X + 1.8760108 * Y + 0.041556 * Z;
+  const bLin = 0.0556434 * X - 0.2040259 * Y + 1.0572252 * Z;
+  return clampRgb(gammaCorrect(rLin), gammaCorrect(gLin), gammaCorrect(bLin));
+}
+function rgbToHex(rgb) {
+  return "#" + rgb.map((c) => Math.round(c).toString(16).padStart(2, "0")).join("");
+}
+
+// src/ir/tokens.ts
+function extractTokens(rules, warnings) {
+  const tokens = new Map;
+  const nonRootRules = [];
+  for (const rule of rules) {
+    if (isRootSelector(rule.selectors)) {
+      for (const decl of rule.declarations) {
+        const d = decl;
+        if (d.property === "custom") {
+          const val = d.value;
+          const name = val.name.replace(/^--/, "");
+          const tokenValue = inferTokenValue(val.value, name, warnings);
+          if (tokenValue) {
+            tokens.set(name, tokenValue);
+          }
+        }
+      }
+    } else {
+      nonRootRules.push(rule);
+    }
+  }
+  return { tokens, nonRootRules };
+}
+function isRootSelector(selectors) {
+  return selectors.some((sel) => {
+    if (sel.length !== 1)
+      return false;
+    const comp = sel[0];
+    return comp.type === "pseudo-class" && comp.kind === "root";
+  });
+}
+function inferTokenValue(tokens, _varName, _warnings) {
+  if (!tokens || tokens.length === 0)
+    return null;
+  const first = tokens[0];
+  if (first.type === "color") {
+    const colorResult = convertCssColor(first.value);
+    if (colorResult) {
+      return { type: "Color3", value: colorResult.color };
+    }
+  }
+  if (first.type === "length") {
+    const val = first.value;
+    if (val.unit === "px") {
+      return { type: "UDim", value: [0, val.value] };
+    }
+    if (val.unit === "%") {
+      return { type: "UDim", value: [val.value / 100, 0] };
+    }
+  }
+  if (first.type === "dimension") {
+    const val = first.value;
+    if (val.unit === "px") {
+      return { type: "UDim", value: [0, val.value] };
+    }
+  }
+  if (first.type === "token") {
+    const tok = first.value;
+    if (tok.type === "string") {
+      return { type: "string", value: tok.value };
+    }
+    if (tok.type === "number") {
+      return { type: "number", value: tok.value };
+    }
+    if (tok.type === "dimension") {
+      const dim = tok.value;
+      return {
+        type: "UDim",
+        value: [0, dim.value]
+      };
+    }
+    if (tok.type === "ident") {
+      return { type: "string", value: tok.value };
+    }
+  }
+  if (typeof first === "string") {
+    return { type: "string", value: first };
+  }
+  return null;
+}
+
+// src/ir/themes.ts
+function extractThemes(parsed, warnings) {
+  const themes = new Map;
+  for (const rule of parsed.rules) {
+    const themeName = extractDataThemeAttribute(rule.selectors);
+    if (themeName) {
+      const themeTokens = themes.get(themeName) ?? new Map;
+      extractCustomProperties(rule.declarations, themeTokens, warnings);
+      themes.set(themeName, themeTokens);
+    }
+  }
+  for (const media of parsed.mediaRules) {
+    const scheme = extractColorScheme(media.query);
+    if (scheme) {
+      const themeTokens = themes.get(scheme) ?? new Map;
+      for (const rule of media.rules) {
+        if (isRootSelector2(rule.selectors)) {
+          extractCustomProperties(rule.declarations, themeTokens, warnings);
+        }
+      }
+      themes.set(scheme, themeTokens);
+    }
+  }
+  return themes;
+}
+function extractDataThemeAttribute(selectors) {
+  for (const sel of selectors) {
+    for (const comp of sel) {
+      const c = comp;
+      if (c.type === "attribute") {
+        if (c.name === "data-theme") {
+          const op = c.operation;
+          if (op?.operator === "equal") {
+            return op.value;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}
+function extractColorScheme(query) {
+  return findColorScheme(query);
+}
+function findColorScheme(obj) {
+  if (!obj || typeof obj !== "object")
+    return null;
+  const o = obj;
+  if (o.type === "feature") {
+    const value = o.value;
+    if (value?.type === "plain") {
+      const name = value.name;
+      if (name === "prefers-color-scheme") {
+        const featureValue = value.value;
+        if (featureValue?.type === "ident") {
+          return featureValue.value;
+        }
+      }
+    }
+  }
+  if (Array.isArray(obj)) {
+    for (const item of obj) {
+      const found = findColorScheme(item);
+      if (found)
+        return found;
+    }
+  } else {
+    for (const val of Object.values(o)) {
+      const found = findColorScheme(val);
+      if (found)
+        return found;
+    }
+  }
+  return null;
+}
+function isRootSelector2(selectors) {
+  return selectors.some((sel) => {
+    if (sel.length !== 1)
+      return false;
+    const comp = sel[0];
+    return comp.type === "pseudo-class" && comp.kind === "root";
+  });
+}
+function extractCustomProperties(declarations, tokens, warnings) {
+  for (const decl of declarations) {
+    const d = decl;
+    if (d.property === "custom") {
+      const val = d.value;
+      const name = val.name.replace(/^--/, "");
+      const tokenValue = inferTokenValue2(val.value);
+      if (tokenValue) {
+        tokens.set(name, tokenValue);
+      }
+    }
+  }
+}
+function inferTokenValue2(tokens) {
+  if (!tokens || tokens.length === 0)
+    return null;
+  const first = tokens[0];
+  if (first.type === "color") {
+    const colorResult = convertCssColor(first.value);
+    if (colorResult) {
+      return { type: "Color3", value: colorResult.color };
+    }
+  }
+  if (first.type === "length") {
+    const val = first.value;
+    if (val.unit === "px") {
+      return { type: "UDim", value: [0, val.value] };
+    }
+  }
+  if (first.type === "token") {
+    const tok = first.value;
+    if (tok.type === "string") {
+      return { type: "string", value: tok.value };
+    }
+    if (tok.type === "number") {
+      return { type: "number", value: tok.value };
+    }
+  }
+  return null;
+}
+
+// src/mappings/elements.ts
+var HTML_TO_ROBLOX = {
+  div: "Frame",
+  span: "TextLabel",
+  p: "TextLabel",
+  h1: "TextLabel",
+  h2: "TextLabel",
+  h3: "TextLabel",
+  h4: "TextLabel",
+  h5: "TextLabel",
+  h6: "TextLabel",
+  button: "TextButton",
+  input: "TextBox",
+  img: "ImageLabel",
+  a: "TextButton",
+  canvas: "ViewportFrame",
+  label: "TextLabel",
+  textarea: "TextBox",
+  video: "VideoFrame",
+  scroll: "ScrollingFrame",
+  nav: "Frame",
+  header: "Frame",
+  footer: "Frame",
+  main: "Frame",
+  section: "Frame",
+  article: "Frame",
+  aside: "Frame",
+  form: "Frame",
+  ul: "Frame",
+  ol: "Frame",
+  li: "Frame",
+  table: "Frame",
+  thead: "Frame",
+  tbody: "Frame",
+  tfoot: "Frame",
+  tr: "Frame",
+  td: "TextLabel",
+  th: "TextLabel",
+  dialog: "Frame",
+  details: "Frame",
+  summary: "TextButton",
+  select: "Frame",
+  option: "TextButton",
+  optgroup: "Frame"
+};
+
+// src/mappings/roblox-classes.ts
+var ROBLOX_GUI_CLASSES = new Set([
+  "Frame",
+  "ScrollingFrame",
+  "TextLabel",
+  "TextButton",
+  "TextBox",
+  "ImageLabel",
+  "ImageButton",
+  "ViewportFrame",
+  "VideoFrame",
+  "CanvasGroup",
+  "BillboardGui",
+  "SurfaceGui",
+  "ScreenGui",
+  "GuiButton",
+  "GuiObject",
+  "LayerCollector"
+]);
+
+// src/mappings/pseudo-classes.ts
+var CSS_TO_ROBLOX_PSEUDO = {
+  hover: "Hover",
+  active: "Press",
+  focus: "NonDefault",
+  disabled: "NonDefault"
+};
+
+// src/mappers/selector.ts
+var IGNORED_HTML_ELEMENTS = new Set([
+  "html",
+  "body",
+  "head",
+  "meta",
+  "link",
+  "style",
+  "script",
+  "noscript",
+  "hr",
+  "br",
+  "b",
+  "i",
+  "em",
+  "strong",
+  "u",
+  "s",
+  "mark",
+  "small",
+  "sub",
+  "sup",
+  "code",
+  "kbd",
+  "samp",
+  "pre",
+  "blockquote",
+  "cite",
+  "q",
+  "abbr",
+  "address",
+  "dl",
+  "dt",
+  "dd",
+  "menu",
+  "caption",
+  "colgroup",
+  "col",
+  "fieldset",
+  "legend",
+  "figure",
+  "figcaption",
+  "audio",
+  "source",
+  "track",
+  "embed",
+  "object",
+  "iframe",
+  "svg",
+  "picture",
+  "progress",
+  "meter",
+  "output",
+  "map",
+  "area",
+  "ruby",
+  "rt",
+  "rp",
+  "wbr",
+  "data",
+  "time",
+  "var",
+  "dfn",
+  "ins",
+  "del"
+]);
+var IGNORED_PSEUDO_CLASSES = new Set([
+  "host",
+  "where",
+  "is",
+  "has",
+  "not",
+  "first-child",
+  "last-child",
+  "nth-child",
+  "nth-last-child",
+  "first-of-type",
+  "last-of-type",
+  "only-child",
+  "only-of-type",
+  "empty",
+  "checked",
+  "indeterminate",
+  "default",
+  "valid",
+  "invalid",
+  "required",
+  "optional",
+  "read-only",
+  "read-write",
+  "placeholder-shown",
+  "autofill",
+  "enabled",
+  "link",
+  "visited",
+  "any-link",
+  "target",
+  "scope",
+  "defined",
+  "before",
+  "after",
+  "placeholder",
+  "selection",
+  "marker",
+  "backdrop",
+  "custom"
+]);
+function escapeSelectorIdent(name) {
+  return name.replace(/([^a-zA-Z0-9_-])/g, "\\$1");
+}
+function mapSelector(components, warnings) {
+  const parts = [];
+  for (const comp of components) {
+    switch (comp.type) {
+      case "class":
+        parts.push(`.${escapeSelectorIdent(comp.name)}`);
+        break;
+      case "id":
+        parts.push(`#${escapeSelectorIdent(comp.name)}`);
+        break;
+      case "type": {
+        const name = comp.name;
+        if (ROBLOX_GUI_CLASSES.has(name)) {
+          parts.push(name);
+        } else if (HTML_TO_ROBLOX[name]) {
+          parts.push(HTML_TO_ROBLOX[name]);
+        } else if (IGNORED_HTML_ELEMENTS.has(name)) {
+          return null;
+        } else {
+          parts.push(name);
+          warnings.warn({
+            code: "unsupported-selector",
+            message: `Unknown element '${name}', passing through as-is`
+          });
+        }
+        break;
+      }
+      case "pseudo-class": {
+        const kind = comp.kind;
+        const mapped = CSS_TO_ROBLOX_PSEUDO[kind];
+        if (mapped) {
+          parts.push(`:${mapped}`);
+        } else if (kind === "root") {
+          return null;
+        } else if (IGNORED_PSEUDO_CLASSES.has(kind)) {
+          return null;
+        } else {
+          warnings.warn({
+            code: "unsupported-selector",
+            message: `Pseudo-class ':${kind}' has no Roblox equivalent`
+          });
+        }
+        break;
+      }
+      case "combinator":
+        if (comp.value === "child") {
+          parts.push(" > ");
+        } else if (comp.value === "descendant") {
+          parts.push(" ");
+        } else {
+          warnings.warn({
+            code: "unsupported-selector",
+            message: `Combinator '${comp.value}' not supported in Roblox`
+          });
+          return null;
+        }
+        break;
+      case "universal":
+        return null;
+      case "attribute":
+        return null;
+      default:
+        break;
+    }
+  }
+  return parts.join("") || null;
+}
+function isDataThemeSelector(selectors) {
+  for (const sel of selectors) {
+    for (const comp of sel) {
+      if (comp.type === "attribute") {
+        const c = comp;
+        if (c.name === "data-theme") {
+          const op = c.operation;
+          if (op?.operator === "equal") {
+            return op.value;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}
+
+// src/mappers/units.ts
+function convertLengthDimension(dim, warnings) {
+  if (!dim || typeof dim !== "object")
+    return null;
+  const d = dim;
+  if (d.type === "dimension") {
+    const val = d.value;
+    const unit = val.unit;
+    const value = val.value;
+    switch (unit) {
+      case "px":
+        return { scale: 0, offset: value };
+      case "rem":
+        return { scale: 0, offset: value * 16 };
+      case "em":
+        return { scale: 0, offset: value * 16 };
+      case "vw":
+      case "vh":
+        return { scale: value / 100, offset: 0 };
+      default:
+        warnings.warn({
+          code: "unsupported-unit",
+          message: `'${unit}' not supported, consider using 'px' - skipped`
+        });
+        return null;
+    }
+  }
+  if (d.type === "percentage") {
+    const value = d.value;
+    return { scale: value, offset: 0 };
+  }
+  if (d.type === "calc") {
+    warnings.warn({
+      code: "unsupported-unit",
+      message: "calc() expressions are not supported - skipped"
+    });
+    return null;
+  }
+  return null;
+}
+function toUDim(result) {
+  return { type: "UDim", value: [result.scale, result.offset] };
+}
+
+// src/mappers/fonts.ts
+var FONT_FAMILY_MAP = {
+  gothamssm: "GothamSSm",
+  gotham: "GothamSSm",
+  "builder sans": "BuilderSans",
+  "source sans pro": "SourceSansPro",
+  roboto: "Roboto",
+  montserrat: "Montserrat",
+  monospace: "RobotoMono",
+  "sans-serif": "GothamSSm",
+  serif: "Merriweather"
+};
+function mapFontFamily(families, warnings) {
+  for (const raw of families) {
+    const normalized = raw.replace(/['"]/g, "").trim().toLowerCase();
+    const mapped = FONT_FAMILY_MAP[normalized];
+    if (mapped)
+      return mapped;
+  }
+  const name = families[0].replace(/['"]/g, "").trim();
+  warnings.warn({
+    code: "partial-mapping",
+    message: `Unknown font '${name}', assuming rbxasset://fonts/families/${name}.json`
+  });
+  return name;
+}
+var WEIGHT_MAP = {
+  "100": "Thin",
+  thin: "Thin",
+  "200": "ExtraLight",
+  "extra-light": "ExtraLight",
+  "300": "Light",
+  light: "Light",
+  "400": "Regular",
+  normal: "Regular",
+  "500": "Medium",
+  medium: "Medium",
+  "600": "SemiBold",
+  "semi-bold": "SemiBold",
+  "700": "Bold",
+  bold: "Bold",
+  "800": "ExtraBold",
+  "extra-bold": "ExtraBold",
+  "900": "Heavy",
+  black: "Heavy"
+};
+function mapFontWeight(weight) {
+  return WEIGHT_MAP[String(weight).toLowerCase()] ?? "Regular";
+}
+function mapFontStyle(style) {
+  return style === "italic" ? "Italic" : "Normal";
+}
+
+// src/mappers/properties.ts
+var IGNORED_CSS_PROPERTIES = new Set([
+  "box-sizing",
+  "text-decoration",
+  "text-decoration-line",
+  "text-decoration-style",
+  "text-decoration-color",
+  "text-decoration-thickness",
+  "text-size-adjust",
+  "tab-size",
+  "text-indent",
+  "text-transform",
+  "text-rendering",
+  "text-shadow",
+  "white-space",
+  "word-spacing",
+  "letter-spacing",
+  "list-style",
+  "list-style-type",
+  "list-style-position",
+  "list-style-image",
+  "resize",
+  "appearance",
+  "bottom",
+  "right",
+  "float",
+  "clear",
+  "content",
+  "counter-increment",
+  "counter-reset",
+  "quotes",
+  "border-collapse",
+  "border-spacing",
+  "table-layout",
+  "caption-side",
+  "empty-cells",
+  "border-top-width",
+  "border-right-width",
+  "border-bottom-width",
+  "border-left-width",
+  "border-top-style",
+  "border-right-style",
+  "border-bottom-style",
+  "border-left-style",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "border-image",
+  "border-image-source",
+  "border-image-slice",
+  "border-image-width",
+  "border-image-outset",
+  "border-image-repeat",
+  "outline-offset",
+  "background-position",
+  "background-position-x",
+  "background-position-y",
+  "background-repeat",
+  "background-size",
+  "background-origin",
+  "background-clip",
+  "background-attachment",
+  "transition",
+  "transition-property",
+  "transition-duration",
+  "transition-timing-function",
+  "transition-delay",
+  "transition-behavior",
+  "animation",
+  "animation-name",
+  "animation-duration",
+  "animation-timing-function",
+  "animation-delay",
+  "animation-iteration-count",
+  "animation-direction",
+  "animation-fill-mode",
+  "animation-play-state",
+  "pointer-events",
+  "user-select",
+  "touch-action",
+  "will-change",
+  "contain",
+  "isolation",
+  "mix-blend-mode",
+  "filter",
+  "backdrop-filter",
+  "clip-path",
+  "mask",
+  "mask-image",
+  "object-position",
+  "scroll-behavior",
+  "scroll-margin",
+  "scroll-padding",
+  "overscroll-behavior",
+  "hyphens",
+  "writing-mode",
+  "direction",
+  "unicode-bidi",
+  "columns",
+  "column-count",
+  "column-gap",
+  "column-rule",
+  "column-span",
+  "column-width",
+  "break-before",
+  "break-after",
+  "break-inside",
+  "page-break-before",
+  "page-break-after",
+  "page-break-inside",
+  "orphans",
+  "widows",
+  "accent-color",
+  "caret-color",
+  "color-scheme",
+  "forced-color-adjust",
+  "print-color-adjust"
+]);
+function mapDeclarations(declarations, warnings) {
+  const props = new Map;
+  const acc = { hasFlex: false, hasGrid: false };
+  for (const decl of declarations) {
+    mapSingleDeclaration(decl, props, acc, warnings);
+  }
+  const pseudoInstances = finalizeAccumulator(acc, props, warnings);
+  return {
+    properties: props,
+    pseudoInstances,
+    overflowScroll: acc.overflowScroll ?? false
+  };
+}
+function mapSingleDeclaration(decl, props, acc, warnings) {
+  const property = decl.property;
+  const value = decl.value;
+  if (IGNORED_CSS_PROPERTIES.has(property))
+    return;
+  if (property === "unparsed") {
+    handleUnparsed(value, props, acc, warnings);
+    return;
+  }
+  if (property === "custom") {
+    handleCustomProperty(value, props, acc, warnings);
+    return;
+  }
+  switch (property) {
+    case "background-color": {
+      const result = convertCssColor(value);
+      if (result) {
+        props.set("BackgroundColor3", {
+          type: "Color3",
+          value: result.color
+        });
+        if (result.transparency !== undefined) {
+          props.set("BackgroundTransparency", {
+            type: "number",
+            value: result.transparency
+          });
+        }
+      }
+      break;
+    }
+    case "background": {
+      handleBackground(value, props, acc, warnings);
+      break;
+    }
+    case "color": {
+      const result = convertCssColor(value);
+      if (result) {
+        props.set("TextColor3", { type: "Color3", value: result.color });
+        if (result.transparency !== undefined) {
+          props.set("TextTransparency", {
+            type: "number",
+            value: result.transparency
+          });
+        }
+      }
+      break;
+    }
+    case "opacity": {
+      const opacity = value;
+      if (opacity !== 1) {
+        props.set("BackgroundTransparency", {
+          type: "number",
+          value: 1 - opacity
+        });
+      }
+      break;
+    }
+    case "width": {
+      acc.widthX = handleSize(value, warnings);
+      break;
+    }
+    case "height": {
+      acc.heightY = handleSize(value, warnings);
+      break;
+    }
+    case "left": {
+      const v = value;
+      if (v.type === "length-percentage") {
+        const result = convertLengthDimension(v.value, warnings);
+        if (result && result !== "auto")
+          acc.leftX = result;
+      }
+      break;
+    }
+    case "top": {
+      const v = value;
+      if (v.type === "length-percentage") {
+        const result = convertLengthDimension(v.value, warnings);
+        if (result && result !== "auto")
+          acc.topY = result;
+      }
+      break;
+    }
+    case "display": {
+      handleDisplay(value, props, acc);
+      break;
+    }
+    case "flex-direction": {
+      acc.flexDirection = value;
+      break;
+    }
+    case "justify-content": {
+      const v = value;
+      acc.justifyContent = extractContentAlignment(v);
+      break;
+    }
+    case "align-items": {
+      const v = value;
+      acc.alignItems = extractItemsAlignment(v);
+      break;
+    }
+    case "gap": {
+      const v = value;
+      const row = v.row;
+      const column = v.column;
+      if (row?.type === "length-percentage") {
+        const result = convertLengthDimension(row.value, warnings);
+        if (result && result !== "auto") {
+          acc.gap = toUDim(result);
+          acc.gridGapY = toUDim(result);
+        }
+      }
+      if (column?.type === "length-percentage") {
+        const result = convertLengthDimension(column.value, warnings);
+        if (result && result !== "auto") {
+          acc.gridGapX = toUDim(result);
+        }
+      } else if (acc.gridGapY) {
+        acc.gridGapX = acc.gridGapY;
+      }
+      break;
+    }
+    case "flex-wrap": {
+      const v = value;
+      acc.flexWrap = v === "wrap" || v === "wrap-reverse";
+      break;
+    }
+    case "flex-grow": {
+      acc.flexGrow = value;
+      break;
+    }
+    case "flex-shrink": {
+      acc.flexShrink = value;
+      break;
+    }
+    case "padding": {
+      handlePadding(value, acc, warnings);
+      break;
+    }
+    case "padding-top":
+    case "padding-bottom":
+    case "padding-left":
+    case "padding-right": {
+      handlePaddingSide(property, value, acc, warnings);
+      break;
+    }
+    case "padding-inline": {
+      const pi = value;
+      handlePaddingSide("padding-left", pi.inlineStart, acc, warnings);
+      handlePaddingSide("padding-right", pi.inlineEnd, acc, warnings);
+      break;
+    }
+    case "padding-block": {
+      const pb = value;
+      handlePaddingSide("padding-top", pb.blockStart, acc, warnings);
+      handlePaddingSide("padding-bottom", pb.blockEnd, acc, warnings);
+      break;
+    }
+    case "padding-inline-start":
+    case "padding-inline-end": {
+      const physicalProp = property === "padding-inline-start" ? "padding-left" : "padding-right";
+      handlePaddingSide(physicalProp, value, acc, warnings);
+      break;
+    }
+    case "padding-block-start":
+    case "padding-block-end": {
+      const physicalProp = property === "padding-block-start" ? "padding-top" : "padding-bottom";
+      handlePaddingSide(physicalProp, value, acc, warnings);
+      break;
+    }
+    case "border": {
+      handleBorder(value, acc, warnings);
+      break;
+    }
+    case "border-top":
+    case "border-right":
+    case "border-bottom":
+    case "border-left": {
+      handleBorder(value, acc, warnings);
+      break;
+    }
+    case "border-radius": {
+      handleBorderRadius(value, acc, warnings);
+      break;
+    }
+    case "border-color": {
+      const v = value;
+      const colorVal = v.top ?? value;
+      const result = convertCssColor(colorVal);
+      if (result)
+        acc.borderColor = result.color;
+      break;
+    }
+    case "border-width": {
+      const v = value;
+      const top = v.top;
+      if (top?.type === "length") {
+        const inner = top.value;
+        if (inner?.type === "value") {
+          const dim = inner.value;
+          acc.borderWidth = dim.value;
+        }
+      }
+      break;
+    }
+    case "border-style": {
+      const v = value;
+      acc.borderStyle = v.top ?? "solid";
+      break;
+    }
+    case "font-size": {
+      const v = value;
+      if (v.type === "length") {
+        const inner = v.value;
+        if (inner.type === "dimension") {
+          const dim = inner.value;
+          if (dim.unit === "px") {
+            props.set("TextSize", {
+              type: "number",
+              value: dim.value
+            });
+          } else if (dim.unit === "rem" || dim.unit === "em") {
+            props.set("TextSize", {
+              type: "number",
+              value: dim.value * 16
+            });
+          }
+        }
+      }
+      break;
+    }
+    case "font-family": {
+      const families = value;
+      acc.fontFamily = mapFontFamily(families, warnings);
+      break;
+    }
+    case "font-weight": {
+      const v = value;
+      if (v.type === "absolute") {
+        const abs = v.value;
+        acc.fontWeight = mapFontWeight(abs.value);
+      } else if (v.type === "bolder" || v.type === "lighter") {
+        acc.fontWeight = mapFontWeight(v.type);
+      }
+      break;
+    }
+    case "font-style": {
+      if (typeof value === "string") {
+        acc.fontStyle = mapFontStyle(value);
+      } else {
+        const v = value;
+        acc.fontStyle = mapFontStyle(v.type);
+      }
+      break;
+    }
+    case "text-align": {
+      const v = value;
+      props.set("TextXAlignment", mapTextXAlignment(v));
+      break;
+    }
+    case "vertical-align": {
+      const v = value;
+      const align = typeof v === "string" ? v : v.type === "keyword" ? v.value : "top";
+      props.set("TextYAlignment", mapTextYAlignment(align));
+      break;
+    }
+    case "z-index": {
+      const v = value;
+      if (v.type === "integer") {
+        props.set("ZIndex", { type: "number", value: v.value });
+      }
+      break;
+    }
+    case "overflow": {
+      const v = value;
+      const x = v.x;
+      const y = v.y;
+      if (x === "hidden" || y === "hidden") {
+        props.set("ClipsDescendants", { type: "boolean", value: true });
+      }
+      if (x === "scroll" || y === "scroll") {
+        acc.overflowScroll = true;
+        warnings.warn({
+          code: "partial-mapping",
+          message: "overflow: scroll detected — will trigger ScrollingFrame upgrade via manifest"
+        });
+      }
+      break;
+    }
+    case "visibility": {
+      if (value === "hidden") {
+        props.set("Visible", { type: "boolean", value: false });
+      }
+      break;
+    }
+    case "background-image": {
+      const imgs = value;
+      if (imgs?.length > 0) {
+        const img = imgs[0];
+        if (img.type === "url") {
+          const urlVal = img.value;
+          props.set("Image", {
+            type: "string",
+            value: urlVal.url
+          });
+        }
+      }
+      break;
+    }
+    case "object-fit": {
+      handleObjectFit(value, props);
+      break;
+    }
+    case "aspect-ratio": {
+      const v = value;
+      const ratio = v.ratio;
+      if (ratio) {
+        acc.aspectRatio = ratio[0] / ratio[1];
+      }
+      break;
+    }
+    case "line-height": {
+      const v = value;
+      if (v.type === "number") {
+        props.set("LineHeight", {
+          type: "number",
+          value: v.value
+        });
+      }
+      break;
+    }
+    case "word-wrap":
+    case "overflow-wrap": {
+      if (value === "break-word") {
+        props.set("TextWrapped", { type: "boolean", value: true });
+      }
+      break;
+    }
+    case "text-overflow": {
+      if (value === "ellipsis") {
+        props.set("TextTruncate", {
+          type: "Enum",
+          enum: "TextTruncate",
+          value: "AtEnd"
+        });
+      }
+      break;
+    }
+    case "min-width": {
+      const px = extractPxFromLengthPercentage(value, warnings);
+      if (px !== null)
+        acc.minWidth = px;
+      break;
+    }
+    case "max-width": {
+      const px = extractPxFromLengthPercentage(value, warnings);
+      if (px !== null)
+        acc.maxWidth = px;
+      break;
+    }
+    case "min-height": {
+      const px = extractPxFromLengthPercentage(value, warnings);
+      if (px !== null)
+        acc.minHeight = px;
+      break;
+    }
+    case "max-height": {
+      const px = extractPxFromLengthPercentage(value, warnings);
+      if (px !== null)
+        acc.maxHeight = px;
+      break;
+    }
+    case "transform-origin": {
+      handleTransformOrigin(value, props);
+      break;
+    }
+    case "position":
+    case "cursor":
+      break;
+    case "outline": {
+      handleOutline(value, acc, warnings);
+      break;
+    }
+    case "transform": {
+      handleTransform(value, acc, warnings);
+      break;
+    }
+    case "order": {
+      const v = value;
+      if (typeof v === "number") {
+        props.set("LayoutOrder", { type: "number", value: v });
+      }
+      break;
+    }
+    case "align-self": {
+      const v = value;
+      acc.alignSelf = extractItemsAlignment(v);
+      break;
+    }
+    case "flex-basis": {
+      const v = value;
+      if (v.type === "length-percentage") {
+        const result = convertLengthDimension(v.value, warnings);
+        if (result && result !== "auto") {
+          acc.flexBasis = result;
+        }
+      }
+      break;
+    }
+    case "grid-template-columns": {
+      acc.hasGrid = true;
+      handleGridTemplateColumns(value, acc, warnings);
+      break;
+    }
+    case "grid-template-rows": {
+      acc.hasGrid = true;
+      handleGridTemplateRows(value, acc, warnings);
+      break;
+    }
+    case "margin":
+    case "margin-top":
+    case "margin-right":
+    case "margin-bottom":
+    case "margin-left":
+    case "margin-block":
+    case "margin-inline":
+      warnings.warn({
+        code: "unsupported-property",
+        message: `'${property}' has no Roblox equivalent (use 'gap' on parent flex container instead) - skipped`
+      });
+      break;
+    default:
+      warnings.warn({
+        code: "unsupported-property",
+        message: `'${property}' has no Roblox equivalent - skipped`
+      });
+  }
+}
+function handleDisplay(value, props, acc) {
+  const v = value;
+  if (v.type === "keyword" && v.value === "none") {
+    props.set("Visible", { type: "boolean", value: false });
+    return;
+  }
+  if (v.type === "pair") {
+    const inside = v.inside;
+    if (inside?.type === "flex") {
+      acc.hasFlex = true;
+    } else if (inside?.type === "grid") {
+      acc.hasGrid = true;
+    }
+  }
+}
+function handleSize(value, warnings) {
+  const v = value;
+  if (v.type === "auto")
+    return "auto";
+  if (v.type === "length-percentage") {
+    const result = convertLengthDimension(v.value, warnings);
+    if (result)
+      return result;
+  }
+  return;
+}
+function handlePadding(value, acc, warnings) {
+  for (const [side, key] of [
+    ["top", "paddingTop"],
+    ["right", "paddingRight"],
+    ["bottom", "paddingBottom"],
+    ["left", "paddingLeft"]
+  ]) {
+    const sideVal = value[side];
+    if (sideVal?.type === "length-percentage") {
+      const result = convertLengthDimension(sideVal.value, warnings);
+      if (result && result !== "auto") {
+        acc[key] = toUDim(result);
+      }
+    }
+  }
+}
+function handlePaddingSide(property, value, acc, warnings) {
+  const v = value;
+  if (v.type === "length-percentage") {
+    const result = convertLengthDimension(v.value, warnings);
+    if (result && result !== "auto") {
+      const udim = toUDim(result);
+      switch (property) {
+        case "padding-top":
+          acc.paddingTop = udim;
+          break;
+        case "padding-bottom":
+          acc.paddingBottom = udim;
+          break;
+        case "padding-left":
+          acc.paddingLeft = udim;
+          break;
+        case "padding-right":
+          acc.paddingRight = udim;
+          break;
+      }
+    }
+  }
+}
+function handleBorder(value, acc, warnings) {
+  const width = value.width;
+  if (width?.type === "length") {
+    const inner = width.value;
+    if (inner?.type === "value") {
+      const dim = inner.value;
+      acc.borderWidth = dim.value;
+    }
+  }
+  const style = value.style;
+  acc.borderStyle = style ?? "solid";
+  if (style === "dashed" || style === "dotted") {
+    warnings.warn({
+      code: "partial-mapping",
+      message: `border-style '${style}' not supported in Roblox, using solid`
+    });
+  }
+  const color = convertCssColor(value.color);
+  if (color) {
+    acc.borderColor = color.color;
+    if (color.transparency !== undefined) {
+      acc.borderTransparency = color.transparency;
+    }
+  }
+}
+function handleBorderRadius(value, acc, warnings) {
+  const topLeft = value.topLeft;
+  if (!topLeft?.[0])
+    return;
+  const first = topLeft[0];
+  const allSame = ["topLeft", "topRight", "bottomRight", "bottomLeft"].every((corner) => {
+    const c = value[corner];
+    if (!c?.[0])
+      return false;
+    const dim = c[0];
+    return dim.type === first.type && JSON.stringify(dim.value) === JSON.stringify(first.value);
+  });
+  if (!allSame) {
+    warnings.warn({
+      code: "partial-mapping",
+      message: "Per-corner border-radius not supported in Roblox, using first value"
+    });
+  }
+  if (first.type === "dimension") {
+    const dim = first.value;
+    if (dim.unit === "px") {
+      acc.borderRadius = {
+        type: "UDim",
+        value: [0, dim.value]
+      };
+    } else if (dim.unit === "rem" || dim.unit === "em") {
+      acc.borderRadius = {
+        type: "UDim",
+        value: [0, dim.value * 16]
+      };
+    }
+  } else if (first.type === "percentage") {
+    acc.borderRadius = {
+      type: "UDim",
+      value: [first.value, 0]
+    };
+  }
+}
+function handleBackground(value, props, acc, warnings) {
+  const layers = value;
+  if (!Array.isArray(layers) || layers.length === 0)
+    return;
+  const layer = layers[0];
+  const image = layer.image;
+  if (image?.type === "gradient") {
+    const gradient = image.value;
+    if (gradient.type === "linear") {
+      handleLinearGradient(gradient, acc, warnings);
+    } else {
+      warnings.warn({
+        code: "unsupported-property",
+        message: `'${gradient.type}-gradient' not supported, only linear-gradient`
+      });
+    }
+    return;
+  }
+  const color = layer.color;
+  if (color) {
+    const result = convertCssColor(color);
+    if (result && result.color[0] === 0 && result.color[1] === 0 && result.color[2] === 0 && result.transparency === 1) {
+      props.set("BackgroundTransparency", { type: "number", value: 1 });
+    } else if (result) {
+      props.set("BackgroundColor3", { type: "Color3", value: result.color });
+      if (result.transparency !== undefined) {
+        props.set("BackgroundTransparency", {
+          type: "number",
+          value: result.transparency
+        });
+      }
+    }
+  }
+}
+function handleLinearGradient(gradient, acc, _warnings) {
+  const direction = gradient.direction;
+  if (direction?.type === "angle") {
+    const angle = direction.value;
+    acc.gradientRotation = angle.value;
+  }
+  const items = gradient.items;
+  if (items) {
+    acc.gradientStops = [];
+    let autoIndex = 0;
+    const colorStops = items.filter((i) => i.type === "color-stop");
+    const stopCount = colorStops.length;
+    for (const item of colorStops) {
+      if (item.type === "color-stop") {
+        const colorResult = convertCssColor(item.color);
+        if (colorResult) {
+          const position = item.position !== null ? extractGradientPosition(item.position) : autoIndex / Math.max(stopCount - 1, 1);
+          acc.gradientStops.push({
+            position,
+            color: colorResult.color
+          });
+        }
+        autoIndex++;
+      }
+    }
+  }
+}
+function extractGradientPosition(pos) {
+  if (pos.type === "percentage")
+    return pos.value;
+  return 0;
+}
+function handleObjectFit(value, props) {
+  switch (value) {
+    case "cover":
+      props.set("ScaleType", {
+        type: "Enum",
+        enum: "ScaleType",
+        value: "Crop"
+      });
+      break;
+    case "contain":
+      props.set("ScaleType", {
+        type: "Enum",
+        enum: "ScaleType",
+        value: "Fit"
+      });
+      break;
+    case "fill":
+      props.set("ScaleType", {
+        type: "Enum",
+        enum: "ScaleType",
+        value: "Stretch"
+      });
+      break;
+  }
+}
+function handleTransformOrigin(value, props) {
+  const x = resolveAnchorAxis(value.x);
+  const y = resolveAnchorAxis(value.y);
+  if (x !== null && y !== null) {
+    props.set("AnchorPoint", { type: "Vector2", value: [x, y] });
+  }
+}
+function resolveAnchorAxis(axis) {
+  if (!axis)
+    return null;
+  if (axis.type === "center")
+    return 0.5;
+  if (axis.type === "left" || axis.type === "top")
+    return 0;
+  if (axis.type === "right" || axis.type === "bottom")
+    return 1;
+  if (axis.type === "side") {
+    const side = axis.side;
+    if (side === "left" || side === "top")
+      return 0;
+    if (side === "right" || side === "bottom")
+      return 1;
+  }
+  if (axis.type === "length") {
+    const v = axis.value;
+    if (v.type === "percentage")
+      return v.value / 100;
+  }
+  return null;
+}
+function handleOutline(value, acc, warnings) {
+  handleBorder(value, acc, warnings);
+  acc.borderStyle = "outline";
+}
+function handleCustomProperty(value, props, acc, warnings) {
+  const name = value.name;
+  const tokens = value.value;
+  if (name === "object-fit" && tokens?.[0]) {
+    const tok = tokens[0];
+    if (tok.type === "token") {
+      const tokenVal = tok.value;
+      if (tokenVal.type === "ident") {
+        handleObjectFit(tokenVal.value, props);
+      }
+    }
+    return;
+  }
+}
+function handleUnparsed(unparsed, props, acc, _warnings) {
+  const propertyId = unparsed.propertyId;
+  const propName = propertyId.property;
+  const tokens = unparsed.value;
+  if (IGNORED_CSS_PROPERTIES.has(propName))
+    return;
+  const varRef = extractVarReference(tokens);
+  if (varRef) {
+    mapTokenReference(propName, varRef, props, acc);
+  }
+}
+function extractVarReference(tokens) {
+  for (const tok of tokens) {
+    const t = tok;
+    if (t.type === "var") {
+      const val = t.value;
+      const name = val.name;
+      const ident = name.ident;
+      return ident.replace(/^--/, "");
+    }
+  }
+  return null;
+}
+function mapTokenReference(cssProperty, tokenName, props, acc) {
+  const tokenRef = { type: "token", name: tokenName };
+  switch (cssProperty) {
+    case "background-color":
+      props.set("BackgroundColor3", tokenRef);
+      props.set("BackgroundTransparency", { type: "number", value: 0 });
+      break;
+    case "color":
+      props.set("TextColor3", tokenRef);
+      break;
+    case "border-radius":
+      acc.borderRadius = tokenRef;
+      break;
+    case "border-color":
+      break;
+    case "padding":
+      acc.paddingTop = tokenRef;
+      acc.paddingBottom = tokenRef;
+      acc.paddingLeft = tokenRef;
+      acc.paddingRight = tokenRef;
+      break;
+    case "padding-top":
+      acc.paddingTop = tokenRef;
+      break;
+    case "padding-bottom":
+      acc.paddingBottom = tokenRef;
+      break;
+    case "padding-left":
+      acc.paddingLeft = tokenRef;
+      break;
+    case "padding-right":
+      acc.paddingRight = tokenRef;
+      break;
+    case "gap":
+      acc.gap = tokenRef;
+      break;
+    case "width":
+      acc.widthX = { scale: 0, offset: 0 };
+      props.set("Size", tokenRef);
+      break;
+    case "height":
+      acc.heightY = { scale: 0, offset: 0 };
+      break;
+    case "font-size":
+      props.set("TextSize", tokenRef);
+      break;
+    case "font-family":
+      props.set("FontFace", tokenRef);
+      break;
+    case "opacity":
+      props.set("BackgroundTransparency", tokenRef);
+      break;
+    default:
+      break;
+  }
+}
+function mapTextXAlignment(value) {
+  switch (value) {
+    case "left":
+      return { type: "Enum", enum: "TextXAlignment", value: "Left" };
+    case "center":
+      return { type: "Enum", enum: "TextXAlignment", value: "Center" };
+    case "right":
+      return { type: "Enum", enum: "TextXAlignment", value: "Right" };
+    default:
+      return { type: "Enum", enum: "TextXAlignment", value: "Left" };
+  }
+}
+function mapTextYAlignment(value) {
+  switch (value) {
+    case "top":
+      return { type: "Enum", enum: "TextYAlignment", value: "Top" };
+    case "center":
+    case "middle":
+      return { type: "Enum", enum: "TextYAlignment", value: "Center" };
+    case "bottom":
+      return { type: "Enum", enum: "TextYAlignment", value: "Bottom" };
+    default:
+      return { type: "Enum", enum: "TextYAlignment", value: "Top" };
+  }
+}
+function extractPxFromLengthPercentage(value, warnings) {
+  const v = value;
+  if (v.type === "length-percentage") {
+    const inner = v.value;
+    if (inner.type === "dimension") {
+      const dim = inner.value;
+      if (dim.unit === "px")
+        return dim.value;
+      if (dim.unit === "rem" || dim.unit === "em")
+        return dim.value * 16;
+    }
+  }
+  return null;
+}
+function extractContentAlignment(v) {
+  if (typeof v === "string")
+    return v;
+  if (v.type === "normal")
+    return "flex-start";
+  if (v.type === "content-distribution")
+    return v.value;
+  if (v.type === "content-position") {
+    return v.value;
+  }
+  return "flex-start";
+}
+function extractItemsAlignment(v) {
+  if (typeof v === "string")
+    return v;
+  if (v.type === "normal")
+    return "stretch";
+  if (v.type === "self-position")
+    return v.value;
+  if (v.type === "keyword")
+    return v.value;
+  return "stretch";
+}
+function handleTransform(transforms, acc, warnings) {
+  if (!Array.isArray(transforms))
+    return;
+  for (const t of transforms) {
+    const tf = t;
+    switch (tf.type) {
+      case "scale": {
+        const vals = tf.value;
+        if (vals && vals.length >= 1) {
+          const x = vals[0].value;
+          const y = vals.length >= 2 ? vals[1].value : x;
+          acc.scale = x === y ? x : (x + y) / 2;
+        }
+        break;
+      }
+      case "scaleX":
+      case "scaleY": {
+        const v = tf.value;
+        acc.scale = v.value;
+        break;
+      }
+      case "rotate": {
+        const v = tf.value;
+        if (v.type === "deg") {
+          acc.rotation = v.value;
+        } else if (v.type === "rad") {
+          acc.rotation = v.value * (180 / Math.PI);
+        } else if (v.type === "turn") {
+          acc.rotation = v.value * 360;
+        }
+        break;
+      }
+      default:
+        warnings.warn({
+          code: "unsupported-property",
+          message: `transform function '${tf.type}' has no Roblox equivalent - skipped`
+        });
+    }
+  }
+}
+function extractTrackSize(trackBreadth, warnings) {
+  if (trackBreadth.type === "length") {
+    const dim = trackBreadth.value;
+    if (dim.type === "dimension") {
+      const val = dim.value;
+      const unit = val.unit;
+      const value = val.value;
+      switch (unit) {
+        case "px":
+          return { scale: 0, offset: value };
+        case "rem":
+          return { scale: 0, offset: value * 16 };
+        default:
+          return null;
+      }
+    }
+  }
+  return null;
+}
+function handleGridTemplateColumns(value, acc, warnings) {
+  const v = value;
+  if (v.type !== "track-list")
+    return;
+  const items = v.items;
+  if (!Array.isArray(items))
+    return;
+  for (const item of items) {
+    const t = item;
+    if (t.type === "track-repeat") {
+      const repeat = t.value;
+      const count = repeat?.count;
+      if (count?.type === "number") {
+        acc.gridMaxCellsPerRow = count.value;
+      }
+      const trackSizes = repeat?.trackSizes;
+      if (trackSizes && trackSizes.length > 0) {
+        const first = trackSizes[0];
+        if (first.type === "track-breadth") {
+          const size = extractTrackSize(first.value, warnings);
+          if (size)
+            acc.gridCellWidth = size;
+        }
+      }
+    } else if (t.type === "track-size") {
+      if (!acc.gridMaxCellsPerRow)
+        acc.gridMaxCellsPerRow = 0;
+      acc.gridMaxCellsPerRow++;
+      if (acc.gridMaxCellsPerRow === 1) {
+        const breadth = t.value;
+        if (breadth.type === "track-breadth") {
+          const size = extractTrackSize(breadth.value, warnings);
+          if (size)
+            acc.gridCellWidth = size;
+        }
+      }
+    }
+  }
+}
+function handleGridTemplateRows(value, acc, warnings) {
+  const v = value;
+  if (v.type !== "track-list")
+    return;
+  const items = v.items;
+  if (!Array.isArray(items))
+    return;
+  for (const item of items) {
+    const t = item;
+    if (t.type === "track-repeat") {
+      const repeat = t.value;
+      const trackSizes = repeat?.trackSizes;
+      if (trackSizes && trackSizes.length > 0) {
+        const first = trackSizes[0];
+        if (first.type === "track-breadth") {
+          const size = extractTrackSize(first.value, warnings);
+          if (size)
+            acc.gridCellHeight = size;
+        }
+      }
+    } else if (t.type === "track-size") {
+      const breadth = t.value;
+      if (breadth.type === "track-breadth") {
+        const size = extractTrackSize(breadth.value, warnings);
+        if (size) {
+          acc.gridCellHeight = size;
+          break;
+        }
+      }
+    }
+  }
+}
+function mapFillDirection(direction) {
+  if (direction === "row" || direction === "row-reverse") {
+    return { type: "Enum", enum: "FillDirection", value: "Horizontal" };
+  }
+  return { type: "Enum", enum: "FillDirection", value: "Vertical" };
+}
+function mapJustifyContent(justifyContent, flexDirection) {
+  const isHorizontal = !flexDirection || flexDirection === "row" || flexDirection === "row-reverse";
+  const prop = isHorizontal ? "HorizontalAlignment" : "VerticalAlignment";
+  const enumName = isHorizontal ? "HorizontalAlignment" : "VerticalAlignment";
+  switch (justifyContent) {
+    case "flex-start":
+    case "start":
+      return {
+        prop,
+        value: {
+          type: "Enum",
+          enum: enumName,
+          value: isHorizontal ? "Left" : "Top"
+        }
+      };
+    case "center":
+      return {
+        prop,
+        value: { type: "Enum", enum: enumName, value: "Center" }
+      };
+    case "flex-end":
+    case "end":
+      return {
+        prop,
+        value: {
+          type: "Enum",
+          enum: enumName,
+          value: isHorizontal ? "Right" : "Bottom"
+        }
+      };
+    case "space-between":
+      return {
+        prop: isHorizontal ? "HorizontalFlex" : "VerticalFlex",
+        value: { type: "Enum", enum: "UIFlexAlignment", value: "SpaceBetween" }
+      };
+    case "space-around":
+      return {
+        prop: isHorizontal ? "HorizontalFlex" : "VerticalFlex",
+        value: { type: "Enum", enum: "UIFlexAlignment", value: "SpaceAround" }
+      };
+    case "space-evenly":
+      return {
+        prop: isHorizontal ? "HorizontalFlex" : "VerticalFlex",
+        value: { type: "Enum", enum: "UIFlexAlignment", value: "SpaceEvenly" }
+      };
+    default:
+      return null;
+  }
+}
+function mapAlignItems(alignItems, flexDirection) {
+  const isHorizontal = !flexDirection || flexDirection === "row" || flexDirection === "row-reverse";
+  const prop = isHorizontal ? "VerticalAlignment" : "HorizontalAlignment";
+  const enumName = isHorizontal ? "VerticalAlignment" : "HorizontalAlignment";
+  switch (alignItems) {
+    case "flex-start":
+    case "start":
+      return {
+        prop,
+        value: {
+          type: "Enum",
+          enum: enumName,
+          value: isHorizontal ? "Top" : "Left"
+        }
+      };
+    case "center":
+      return {
+        prop,
+        value: { type: "Enum", enum: enumName, value: "Center" }
+      };
+    case "flex-end":
+    case "end":
+      return {
+        prop,
+        value: {
+          type: "Enum",
+          enum: enumName,
+          value: isHorizontal ? "Bottom" : "Right"
+        }
+      };
+    case "stretch":
+      return {
+        prop: "ItemLineAlignment",
+        value: { type: "Enum", enum: "ItemLineAlignment", value: "Stretch" }
+      };
+    default:
+      return null;
+  }
+}
+function mapAlignSelf(alignSelf) {
+  switch (alignSelf) {
+    case "flex-start":
+    case "start":
+      return { type: "Enum", enum: "ItemLineAlignment", value: "Start" };
+    case "center":
+      return { type: "Enum", enum: "ItemLineAlignment", value: "Center" };
+    case "flex-end":
+    case "end":
+      return { type: "Enum", enum: "ItemLineAlignment", value: "End" };
+    case "stretch":
+      return { type: "Enum", enum: "ItemLineAlignment", value: "Stretch" };
+    default:
+      return null;
+  }
+}
+function finalizeAccumulator(acc, props, warnings) {
+  const pseudos = [];
+  if (acc.flexBasis) {
+    const isRow = !acc.flexDirection || acc.flexDirection === "row" || acc.flexDirection === "row-reverse";
+    if (isRow && acc.widthX === undefined) {
+      acc.widthX = acc.flexBasis;
+    } else if (!isRow && acc.heightY === undefined) {
+      acc.heightY = acc.flexBasis;
+    }
+  }
+  if (acc.widthX !== undefined || acc.heightY !== undefined) {
+    const xAuto = acc.widthX === "auto";
+    const yAuto = acc.heightY === "auto";
+    if (xAuto && yAuto) {
+      props.set("AutomaticSize", {
+        type: "Enum",
+        enum: "AutomaticSize",
+        value: "XY"
+      });
+    } else if (xAuto) {
+      props.set("AutomaticSize", {
+        type: "Enum",
+        enum: "AutomaticSize",
+        value: "X"
+      });
+      if (acc.heightY && acc.heightY !== "auto") {
+        props.set("Size", {
+          type: "UDim2",
+          value: [0, 0, acc.heightY.scale, acc.heightY.offset]
+        });
+      }
+    } else if (yAuto) {
+      props.set("AutomaticSize", {
+        type: "Enum",
+        enum: "AutomaticSize",
+        value: "Y"
+      });
+      if (acc.widthX && acc.widthX !== "auto") {
+        props.set("Size", {
+          type: "UDim2",
+          value: [acc.widthX.scale, acc.widthX.offset, 0, 0]
+        });
+      }
+    } else {
+      const x = acc.widthX ?? {
+        scale: 0,
+        offset: 0
+      };
+      const y = acc.heightY ?? {
+        scale: 0,
+        offset: 0
+      };
+      props.set("Size", {
+        type: "UDim2",
+        value: [x.scale, x.offset, y.scale, y.offset]
+      });
+    }
+  }
+  if (acc.leftX !== undefined || acc.topY !== undefined) {
+    const x = acc.leftX ?? { scale: 0, offset: 0 };
+    const y = acc.topY ?? { scale: 0, offset: 0 };
+    props.set("Position", {
+      type: "UDim2",
+      value: [x.scale, x.offset, y.scale, y.offset]
+    });
+  }
+  if (acc.fontFamily) {
+    props.set("FontFace", {
+      type: "Font",
+      family: acc.fontFamily,
+      weight: acc.fontWeight,
+      style: acc.fontStyle
+    });
+  }
+  if (acc.paddingTop || acc.paddingBottom || acc.paddingLeft || acc.paddingRight) {
+    const paddingProps = new Map;
+    if (acc.paddingTop)
+      paddingProps.set("PaddingTop", acc.paddingTop);
+    if (acc.paddingBottom)
+      paddingProps.set("PaddingBottom", acc.paddingBottom);
+    if (acc.paddingLeft)
+      paddingProps.set("PaddingLeft", acc.paddingLeft);
+    if (acc.paddingRight)
+      paddingProps.set("PaddingRight", acc.paddingRight);
+    pseudos.push({ type: "UIPadding", properties: paddingProps });
+  }
+  if (acc.borderRadius) {
+    const cornerProps = new Map;
+    cornerProps.set("CornerRadius", acc.borderRadius);
+    pseudos.push({ type: "UICorner", properties: cornerProps });
+  }
+  if (acc.borderWidth && acc.borderStyle !== "none") {
+    const strokeProps = new Map;
+    strokeProps.set("Thickness", {
+      type: "number",
+      value: acc.borderWidth
+    });
+    if (acc.borderColor) {
+      strokeProps.set("Color", {
+        type: "Color3",
+        value: acc.borderColor
+      });
+    }
+    if (acc.borderTransparency !== undefined) {
+      strokeProps.set("Transparency", {
+        type: "number",
+        value: acc.borderTransparency
+      });
+    }
+    strokeProps.set("ApplyStrokeMode", {
+      type: "Enum",
+      enum: "ApplyStrokeMode",
+      value: acc.borderStyle === "outline" ? "Contextual" : "Border"
+    });
+    pseudos.push({ type: "UIStroke", properties: strokeProps });
+  }
+  const hasFlexProperties = acc.justifyContent !== undefined || acc.alignItems !== undefined || acc.flexDirection !== undefined || acc.flexWrap !== undefined || acc.gap !== undefined;
+  if (acc.hasFlex || hasFlexProperties) {
+    const layoutProps = new Map;
+    if (acc.hasFlex || acc.flexDirection) {
+      layoutProps.set("FillDirection", mapFillDirection(acc.flexDirection ?? "row"));
+    }
+    if (acc.justifyContent) {
+      const alignment = mapJustifyContent(acc.justifyContent, acc.flexDirection);
+      if (alignment)
+        layoutProps.set(alignment.prop, alignment.value);
+    }
+    if (acc.alignItems) {
+      const alignment = mapAlignItems(acc.alignItems, acc.flexDirection);
+      if (alignment)
+        layoutProps.set(alignment.prop, alignment.value);
+    }
+    if (acc.gap)
+      layoutProps.set("Padding", acc.gap);
+    if (acc.flexWrap) {
+      layoutProps.set("Wraps", { type: "boolean", value: true });
+    }
+    pseudos.push({ type: "UIListLayout", properties: layoutProps });
+  }
+  if (acc.flexGrow !== undefined || acc.flexShrink !== undefined || acc.alignSelf !== undefined) {
+    const flexProps = new Map;
+    if (acc.flexGrow !== undefined || acc.flexShrink !== undefined) {
+      flexProps.set("FlexMode", {
+        type: "Enum",
+        enum: "UIFlexMode",
+        value: "Custom"
+      });
+      if (acc.flexGrow !== undefined) {
+        flexProps.set("GrowRatio", {
+          type: "number",
+          value: acc.flexGrow
+        });
+      }
+      if (acc.flexShrink !== undefined) {
+        flexProps.set("ShrinkRatio", {
+          type: "number",
+          value: acc.flexShrink
+        });
+      }
+    }
+    if (acc.alignSelf) {
+      const alignment = mapAlignSelf(acc.alignSelf);
+      if (alignment)
+        flexProps.set("ItemLineAlignment", alignment);
+    }
+    pseudos.push({ type: "UIFlexItem", properties: flexProps });
+  }
+  if (acc.gradientStops && acc.gradientStops.length > 0) {
+    const gradientProps = new Map;
+    gradientProps.set("Color", {
+      type: "ColorSequence",
+      stops: acc.gradientStops
+    });
+    if (acc.gradientRotation !== undefined) {
+      gradientProps.set("Rotation", {
+        type: "number",
+        value: acc.gradientRotation
+      });
+    }
+    pseudos.push({ type: "UIGradient", properties: gradientProps });
+  }
+  if (acc.aspectRatio !== undefined) {
+    const aspectProps = new Map;
+    aspectProps.set("AspectRatio", {
+      type: "number",
+      value: acc.aspectRatio
+    });
+    pseudos.push({ type: "UIAspectRatioConstraint", properties: aspectProps });
+  }
+  if (acc.minWidth !== undefined || acc.maxWidth !== undefined || acc.minHeight !== undefined || acc.maxHeight !== undefined) {
+    const constraintProps = new Map;
+    if (acc.minWidth !== undefined || acc.minHeight !== undefined) {
+      constraintProps.set("MinSize", {
+        type: "Vector2",
+        value: [acc.minWidth ?? 0, acc.minHeight ?? 0]
+      });
+    }
+    if (acc.maxWidth !== undefined || acc.maxHeight !== undefined) {
+      constraintProps.set("MaxSize", {
+        type: "Vector2",
+        value: [acc.maxWidth ?? Infinity, acc.maxHeight ?? Infinity]
+      });
+    }
+    pseudos.push({ type: "UISizeConstraint", properties: constraintProps });
+  }
+  if (acc.scale !== undefined) {
+    const scaleProps = new Map;
+    scaleProps.set("Scale", { type: "number", value: acc.scale });
+    pseudos.push({ type: "UIScale", properties: scaleProps });
+  }
+  if (acc.rotation !== undefined) {
+    props.set("Rotation", { type: "number", value: acc.rotation });
+  }
+  if (acc.hasGrid) {
+    const gridProps = new Map;
+    if (acc.gridCellWidth || acc.gridCellHeight) {
+      const cellW = acc.gridCellWidth ?? { scale: 0, offset: 100 };
+      const cellH = acc.gridCellHeight ?? { scale: 0, offset: 100 };
+      gridProps.set("CellSize", {
+        type: "UDim2",
+        value: [cellW.scale, cellW.offset, cellH.scale, cellH.offset]
+      });
+    }
+    if (acc.gridGapX || acc.gridGapY) {
+      const gapX = acc.gridGapX ?? {
+        type: "UDim",
+        value: [0, 0]
+      };
+      const gapY = acc.gridGapY ?? {
+        type: "UDim",
+        value: [0, 0]
+      };
+      const xVal = gapX.value;
+      const yVal = gapY.value;
+      gridProps.set("CellPadding", {
+        type: "UDim2",
+        value: [xVal[0], xVal[1], yVal[0], yVal[1]]
+      });
+    }
+    if (acc.gridMaxCellsPerRow !== undefined) {
+      gridProps.set("FillDirectionMaxCells", {
+        type: "number",
+        value: acc.gridMaxCellsPerRow
+      });
+    }
+    pseudos.push({ type: "UIGridLayout", properties: gridProps });
+  }
+  return pseudos;
+}
+
+// src/warnings.ts
+class WarningCollector {
+  warnings = [];
+  level;
+  strict;
+  constructor(level = "all", strict = false) {
+    this.level = level;
+    this.strict = strict;
+  }
+  warn(warning) {
+    if (this.shouldEmit(warning.code)) {
+      this.warnings.push(warning);
+    }
+  }
+  getWarnings() {
+    return this.warnings;
+  }
+  hasErrors() {
+    return this.strict && this.warnings.length > 0;
+  }
+  format() {
+    return this.warnings.map((w) => {
+      const loc = w.file ? `${w.file}:${w.line ?? 0}:${w.column ?? 0} ` : "";
+      return `warning: ${loc}[${w.code}] ${w.message}`;
+    }).join(`
+`);
+  }
+  shouldEmit(code) {
+    if (this.level === "none")
+      return false;
+    if (this.level === "unsupported") {
+      return code.startsWith("unsupported");
+    }
+    return true;
+  }
+}
+
+// src/compiler.ts
+function compile(sources, options) {
+  const warnings = new WarningCollector(options.warnLevel, options.strict);
+  const allParsed = sources.map((s) => parseCSS(s.content, s.filename));
+  const allRules = allParsed.flatMap((p) => p.rules);
+  const allMediaRules = allParsed.flatMap((p) => p.mediaRules);
+  const { tokens, nonRootRules } = extractTokens(allRules, warnings);
+  const themes = extractThemes({ rules: allRules, mediaRules: allMediaRules }, warnings);
+  for (const mediaRule of allMediaRules) {
+    const query = mediaRule.query;
+    if (isUniversalMediaQuery(query)) {
+      for (const rule of mediaRule.rules) {
+        nonRootRules.push(rule);
+      }
+    }
+  }
+  const styleRules = nonRootRules.filter((rule) => {
+    return !isDataThemeSelector(rule.selectors);
+  });
+  const NON_INHERITABLE_TEXT_PROPS = new Set(["TextXAlignment", "TextYAlignment"]);
+  const TEXT_CAPABLE_CLASSES = new Set(["TextLabel", "TextButton", "TextBox"]);
+  const irRules = [];
+  const overflowScrollClasses = new Map;
+  for (const rule of styleRules) {
+    for (const selectorComponents of rule.selectors) {
+      const mappedSelector = mapSelector(selectorComponents, warnings);
+      if (!mappedSelector)
+        continue;
+      const { properties, pseudoInstances, overflowScroll } = mapDeclarations(rule.declarations, warnings);
+      if (/^[A-Z]\w+$/.test(mappedSelector) && !TEXT_CAPABLE_CLASSES.has(mappedSelector)) {
+        for (const prop of NON_INHERITABLE_TEXT_PROPS) {
+          properties.delete(prop);
+        }
+      }
+      const classMatches = mappedSelector.match(/\.([a-zA-Z0-9_-]+)/g);
+      if (classMatches) {
+        for (const match of classMatches) {
+          const className = match.slice(1);
+          if (overflowScroll) {
+            overflowScrollClasses.set(className, true);
+          } else if (!overflowScrollClasses.has(className)) {
+            overflowScrollClasses.set(className, false);
+          }
+        }
+      }
+      if (properties.size > 0) {
+        irRules.push({
+          selector: mappedSelector,
+          properties,
+          pseudoInstances: []
+        });
+      }
+      for (const pseudo of pseudoInstances) {
+        irRules.push({
+          selector: `${mappedSelector}::${pseudo.type}`,
+          properties: pseudo.properties,
+          pseudoInstances: []
+        });
+      }
+    }
+  }
+  if (options.includeBaseRules !== false) {
+    generateBaseElementRules(irRules);
+  }
+  generateSizeCompoundRules(irRules);
+  const themeMap = new Map;
+  for (const [themeName, themeTokens] of themes) {
+    themeMap.set(themeName, {
+      name: `${options.name}_${themeName}`,
+      tokens: themeTokens,
+      rules: []
+    });
+  }
+  const ir = {
+    name: options.name,
+    tokens,
+    rules: irRules,
+    themes: themeMap.size > 0 ? themeMap : undefined
+  };
+  return { ir, warnings, overflowScrollClasses };
+}
+function generateBaseElementRules(irRules) {
+  const autoSizeXY = {
+    type: "Enum",
+    enum: "AutomaticSize",
+    value: "XY"
+  };
+  const transparentBg = { type: "number", value: 1 };
+  const textLabelProps = new Map;
+  textLabelProps.set("AutomaticSize", autoSizeXY);
+  textLabelProps.set("BackgroundTransparency", transparentBg);
+  irRules.unshift({
+    selector: "TextLabel",
+    properties: textLabelProps,
+    pseudoInstances: []
+  });
+  const textButtonProps = new Map;
+  textButtonProps.set("AutomaticSize", autoSizeXY);
+  textButtonProps.set("BackgroundTransparency", transparentBg);
+  irRules.unshift({
+    selector: "TextButton",
+    properties: textButtonProps,
+    pseudoInstances: []
+  });
+  const textBoxProps = new Map;
+  textBoxProps.set("AutomaticSize", autoSizeXY);
+  irRules.unshift({
+    selector: "TextBox",
+    properties: textBoxProps,
+    pseudoInstances: []
+  });
+  const frameProps = new Map;
+  frameProps.set("BackgroundTransparency", transparentBg);
+  irRules.unshift({
+    selector: "Frame",
+    properties: frameProps,
+    pseudoInstances: []
+  });
+  const scrollingFrameProps = new Map;
+  scrollingFrameProps.set("BackgroundTransparency", transparentBg);
+  irRules.unshift({
+    selector: "ScrollingFrame",
+    properties: scrollingFrameProps,
+    pseudoInstances: []
+  });
+}
+function generateSizeCompoundRules(irRules) {
+  const widthRules = [];
+  const heightRules = [];
+  for (const rule of irRules) {
+    if (!rule.selector.match(/^\.[a-zA-Z0-9_-]+$/) && !rule.selector.match(/^\.[a-zA-Z0-9_-]+\[/))
+      continue;
+    const sizeVal = rule.properties.get("Size");
+    const autoVal = rule.properties.get("AutomaticSize");
+    if (!sizeVal || sizeVal.type !== "UDim2")
+      continue;
+    const [xScale, xOffset, yScale, yOffset] = sizeVal.value;
+    const autoStr = autoVal && autoVal.type === "Enum" ? autoVal.value : null;
+    const xIsSet = xScale !== 0 || xOffset !== 0;
+    const yIsSet = yScale !== 0 || yOffset !== 0;
+    if (xIsSet && !yIsSet) {
+      widthRules.push({
+        selector: rule.selector,
+        udim2: sizeVal.value,
+        hasAuto: autoStr
+      });
+    } else if (yIsSet && !xIsSet) {
+      heightRules.push({
+        selector: rule.selector,
+        udim2: sizeVal.value,
+        hasAuto: autoStr
+      });
+    }
+  }
+  for (const rule of irRules) {
+    if (!rule.selector.match(/^\.[a-zA-Z0-9_-]+$/))
+      continue;
+    const autoVal = rule.properties.get("AutomaticSize");
+    const sizeVal = rule.properties.get("Size");
+    if (!autoVal || autoVal.type !== "Enum" || sizeVal)
+      continue;
+    if (autoVal.value === "X") {
+      widthRules.push({
+        selector: rule.selector,
+        udim2: [0, 0, 0, 0],
+        hasAuto: "X"
+      });
+    } else if (autoVal.value === "Y") {
+      heightRules.push({
+        selector: rule.selector,
+        udim2: [0, 0, 0, 0],
+        hasAuto: "Y"
+      });
+    }
+  }
+  if (widthRules.length === 0 || heightRules.length === 0)
+    return;
+  for (const w of widthRules) {
+    for (const h of heightRules) {
+      const compoundSelector = `${w.selector}${h.selector}`;
+      const props = new Map;
+      const xAuto = w.hasAuto === "X";
+      const yAuto = h.hasAuto === "Y";
+      if (xAuto && yAuto) {
+        props.set("AutomaticSize", {
+          type: "Enum",
+          enum: "AutomaticSize",
+          value: "XY"
+        });
+      } else if (xAuto) {
+        props.set("AutomaticSize", {
+          type: "Enum",
+          enum: "AutomaticSize",
+          value: "X"
+        });
+        if (h.udim2[2] !== 0 || h.udim2[3] !== 0) {
+          props.set("Size", {
+            type: "UDim2",
+            value: [0, 0, h.udim2[2], h.udim2[3]]
+          });
+        }
+      } else if (yAuto) {
+        props.set("AutomaticSize", {
+          type: "Enum",
+          enum: "AutomaticSize",
+          value: "Y"
+        });
+        if (w.udim2[0] !== 0 || w.udim2[1] !== 0) {
+          props.set("Size", {
+            type: "UDim2",
+            value: [w.udim2[0], w.udim2[1], 0, 0]
+          });
+        }
+      } else {
+        props.set("Size", {
+          type: "UDim2",
+          value: [w.udim2[0], w.udim2[1], h.udim2[2], h.udim2[3]]
+        });
+      }
+      if (props.size > 0) {
+        irRules.push({
+          selector: compoundSelector,
+          properties: props,
+          pseudoInstances: []
+        });
+      }
+    }
+  }
+}
+function isUniversalMediaQuery(query) {
+  const queries = query.mediaQueries;
+  if (!queries || queries.length !== 1)
+    return false;
+  const q = queries[0];
+  if (q.condition) {
+    const cond = q.condition;
+    if (cond.type === "feature") {
+      const feature = cond.value;
+      if (feature.type === "plain") {
+        if ((feature.name === "hover" || feature.name === "pointer") && feature.value !== undefined) {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+// src/codegen/luau.ts
+function generateLuau(ir, options) {
+  const lines = [];
+  const t = options.minify ? "" : "    ";
+  if (!options.minify) {
+    lines.push("-- Auto-generated by rbx-css");
+    if (options.sourceFile) {
+      lines.push(`-- Source: ${options.sourceFile}`);
+    }
+    lines.push("");
+  }
+  lines.push("local function createStyleSheet()");
+  lines.push(`${t}local sheet = Instance.new("StyleSheet")`);
+  lines.push(`${t}sheet.Name = ${luauStr(ir.name)}`);
+  lines.push("");
+  if (ir.tokens.size > 0) {
+    lines.push(`${t}-- Tokens from :root`);
+    for (const [name, value] of ir.tokens) {
+      lines.push(`${t}sheet:SetAttribute(${luauStr(name)}, ${serializeTokenValue(value)})`);
+    }
+    lines.push("");
+  }
+  for (const rule of ir.rules) {
+    emitRule(rule, lines, t);
+  }
+  if (ir.themes && ir.themes.size > 0) {
+    emitThemes(ir, lines, t);
+  }
+  lines.push(`${t}return sheet`);
+  lines.push("end");
+  lines.push("");
+  lines.push("return createStyleSheet");
+  lines.push("");
+  return lines.join(`
+`);
+}
+function emitRule(rule, lines, t) {
+  const t2 = t + t;
+  lines.push(`${t}-- Rule: ${rule.selector}`);
+  lines.push(`${t}do`);
+  lines.push(`${t2}local rule = Instance.new("StyleRule")`);
+  lines.push(`${t2}rule.Selector = ${luauStr(rule.selector)}`);
+  lines.push(`${t2}rule.Parent = sheet`);
+  if (rule.properties.size === 1) {
+    const [propName, propValue] = [...rule.properties.entries()][0];
+    lines.push(`${t2}rule:SetProperty(${luauStr(propName)}, ${serializeRobloxValue(propValue)})`);
+  } else if (rule.properties.size > 1) {
+    lines.push(`${t2}rule:SetProperties({`);
+    for (const [propName, propValue] of rule.properties) {
+      lines.push(`${t2}${t}${propName} = ${serializeRobloxValue(propValue)},`);
+    }
+    lines.push(`${t2}})`);
+  }
+  lines.push(`${t}end`);
+  lines.push("");
+}
+function emitThemes(ir, lines, t) {
+  if (!ir.themes)
+    return;
+  const t2 = t + t;
+  lines.push(`${t}-- Themes`);
+  lines.push(`${t}local themes = {}`);
+  lines.push("");
+  for (const [themeName, themeIR] of ir.themes) {
+    lines.push(`${t}do`);
+    lines.push(`${t2}local theme = Instance.new("StyleSheet")`);
+    lines.push(`${t2}theme.Name = ${luauStr(themeIR.name)}`);
+    for (const [tokenName, tokenValue] of themeIR.tokens) {
+      lines.push(`${t2}theme:SetAttribute(${luauStr(tokenName)}, ${serializeTokenValue(tokenValue)})`);
+    }
+    lines.push(`${t2}themes[${luauStr(themeName)}] = theme`);
+    lines.push(`${t}end`);
+    lines.push("");
+  }
+  lines.push(`${t}-- Theme derive`);
+  lines.push(`${t}local themeDerive = Instance.new("StyleDerive")`);
+  lines.push(`${t}themeDerive.Parent = sheet`);
+  lines.push("");
+  lines.push(`${t}-- Theme switcher`);
+  lines.push(`${t}local function setTheme(themeName: string)`);
+  lines.push(`${t2}themeDerive.StyleSheet = themes[themeName]`);
+  lines.push(`${t}end`);
+  lines.push("");
+}
+function serializeRobloxValue(value) {
+  switch (value.type) {
+    case "Color3":
+      return `Color3.fromRGB(${value.value[0]}, ${value.value[1]}, ${value.value[2]})`;
+    case "UDim2":
+      return `UDim2.new(${value.value.join(", ")})`;
+    case "UDim":
+      return `UDim.new(${value.value.join(", ")})`;
+    case "number":
+      return formatNumber(value.value);
+    case "boolean":
+      return String(value.value);
+    case "Enum":
+      return `Enum.${value.enum}.${value.value}`;
+    case "token":
+      return `"$${value.name}"`;
+    case "Font":
+      return serializeFont(value);
+    case "Vector2":
+      return `Vector2.new(${value.value.map(formatNumber).join(", ")})`;
+    case "string":
+      return luauStr(value.value);
+    case "ColorSequence":
+      return serializeColorSequence(value.stops);
+  }
+}
+function serializeFont(font) {
+  const path = `rbxasset://fonts/families/${font.family}.json`;
+  const args = [luauStr(path)];
+  if (font.weight && font.weight !== "Regular") {
+    args.push(`Enum.FontWeight.${font.weight}`);
+  }
+  if (font.style && font.style !== "Normal") {
+    if (args.length === 1) {
+      args.push("Enum.FontWeight.Regular");
+    }
+    args.push(`Enum.FontStyle.${font.style}`);
+  }
+  return `Font.new(${args.join(", ")})`;
+}
+function serializeColorSequence(stops) {
+  if (stops.length === 2 && stops[0].position === 0 && stops[1].position === 1) {
+    return `ColorSequence.new(Color3.fromRGB(${stops[0].color.join(", ")}), Color3.fromRGB(${stops[1].color.join(", ")}))`;
+  }
+  const keypoints = stops.map((s) => `ColorSequenceKeypoint.new(${formatNumber(s.position)}, Color3.fromRGB(${s.color.join(", ")}))`).join(", ");
+  return `ColorSequence.new({${keypoints}})`;
+}
+function serializeTokenValue(value) {
+  switch (value.type) {
+    case "Color3":
+      return `Color3.fromHex(${luauStr(rgbToHex(value.value))})`;
+    case "UDim":
+      return `UDim.new(${value.value.join(", ")})`;
+    case "number":
+      return formatNumber(value.value);
+    case "Font":
+      return serializeFont(value);
+    case "string":
+      return luauStr(value.value);
+  }
+}
+function luauStr(s) {
+  return `"${s.replace(/\\/g, "\\\\").replace(/"/g, "\\\"")}"`;
+}
+function formatNumber(n) {
+  if (n === Infinity)
+    return "math.huge";
+  if (n === -Infinity)
+    return "-math.huge";
+  if (Number.isInteger(n))
+    return String(n);
+  const s = n.toPrecision(10);
+  return parseFloat(s).toString();
+}
+// src/codegen/rbxmx.ts
+function generateRBXMX(ir) {
+  let referentCounter = 0;
+  const nextReferent = () => `RBX${String(++referentCounter).padStart(4, "0")}`;
+  const lines = [];
+  lines.push('<roblox version="4">');
+  const sheetRef = nextReferent();
+  lines.push(`  <Item class="StyleSheet" referent="${sheetRef}">`);
+  lines.push("    <Properties>");
+  lines.push(`      <string name="Name">${escapeXml(ir.name)}</string>`);
+  lines.push("    </Properties>");
+  if (ir.tokens.size > 0) {
+    lines.push(`    <!-- Tokens -->`);
+    for (const [name, value] of ir.tokens) {
+      lines.push(`    <!-- ${escapeXml(name)}: ${serializeTokenComment(value)} -->`);
+    }
+  }
+  for (const rule of ir.rules) {
+    const ruleRef = nextReferent();
+    lines.push(`    <Item class="StyleRule" referent="${ruleRef}">`, "      <Properties>", `        <string name="Selector">${escapeXml(rule.selector)}</string>`, "      </Properties>");
+    if (rule.properties.size > 0) {
+      lines.push("      <!-- Properties:");
+      for (const [propName, propValue] of rule.properties) {
+        lines.push(`        ${escapeXml(propName)} = ${serializeValueComment(propValue)}`);
+      }
+      lines.push("      -->");
+    }
+    lines.push("    </Item>");
+  }
+  lines.push("  </Item>");
+  if (ir.themes) {
+    for (const [themeName, themeIR] of ir.themes) {
+      const themeRef = nextReferent();
+      lines.push(`  <Item class="StyleSheet" referent="${themeRef}">`, "    <Properties>", `      <string name="Name">${escapeXml(themeIR.name)}</string>`, "    </Properties>", "  </Item>");
+    }
+  }
+  lines.push("</roblox>", "");
+  return lines.join(`
+`);
+}
+function escapeXml(s) {
+  return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+}
+function serializeTokenComment(value) {
+  switch (value.type) {
+    case "Color3":
+      return rgbToHex(value.value);
+    case "UDim":
+      return `UDim(${value.value.join(", ")})`;
+    case "number":
+      return String(value.value);
+    case "Font":
+      return value.family;
+    case "string":
+      return value.value;
+  }
+}
+function serializeValueComment(value) {
+  switch (value.type) {
+    case "Color3":
+      return `Color3(${value.value.join(", ")})`;
+    case "UDim2":
+      return `UDim2(${value.value.join(", ")})`;
+    case "UDim":
+      return `UDim(${value.value.join(", ")})`;
+    case "number":
+      return String(value.value);
+    case "boolean":
+      return String(value.value);
+    case "Enum":
+      return `Enum.${value.enum}.${value.value}`;
+    case "token":
+      return `$${value.name}`;
+    case "Font":
+      return value.family;
+    case "Vector2":
+      return `Vector2(${value.value.join(", ")})`;
+    case "string":
+      return value.value;
+    case "ColorSequence":
+      return "ColorSequence(...)";
+  }
+}
+// src/manifest.ts
+function generateManifest(overflowScrollClasses) {
+  const classes = {};
+  for (const [className, overflowScroll] of overflowScrollClasses) {
+    classes[className] = { overflowScroll };
+  }
+  const elementMap = { ...HTML_TO_ROBLOX };
+  return { classes, elementMap };
+}
+export {
+  generateRBXMX,
+  generateManifest,
+  generateLuau,
+  compile,
+  WarningCollector
+};