Types

Complete TypeScript type reference for the rbx-css programmatic API.

Compiler types

CompileOptions

Configuration options for the compile() function.

interface CompileOptions {
  name: string;
  warnLevel: WarningLevel;
  strict: boolean;
  includeBaseRules?: boolean;
}

name

string

required

Name for the generated StyleSheet instance

warnLevel

WarningLevel

required

Warning verbosity level: "all", "unsupported", or "none"

strict

boolean

required

When true, warnings are treated as errors

includeBaseRules

boolean

When false, skip auto-generated base element rules. Defaults to true

CompileResult

Return type of the compile() function.

interface CompileResult {
  ir: StyleSheetIR;
  warnings: WarningCollector;
  overflowScrollClasses: Map<string, boolean>;
}

StyleSheetIR

The compiled intermediate representation

warnings

WarningCollector

Warning collector with diagnostics

overflowScrollClasses

Map<string, boolean>

Map of class names to whether they use overflow: scroll

LuauOptions

Configuration options for the generateLuau() function.

interface LuauOptions {
  minify: boolean;
  sourceFile?: string;
}

minify

boolean

required

When true, removes comments and indentation

sourceFile

string

Optional source filename to include in generated comments

Intermediate representation types

StyleSheetIR

The root intermediate representation of a compiled stylesheet.

interface StyleSheetIR {
  name: string;
  tokens: Map<string, TokenValue>;
  rules: StyleRuleIR[];
  themes?: Map<string, StyleSheetIR>;
}

name

string

StyleSheet instance name

tokens

Map<string, TokenValue>

Design tokens extracted from :root CSS custom properties

rules

StyleRuleIR[]

Array of compiled style rules

themes

Map<string, StyleSheetIR>

Optional theme variations (from [data-theme] or @media (prefers-color-scheme))

StyleRuleIR

A single compiled style rule.

interface StyleRuleIR {
  selector: string;
  properties: Map<string, RobloxValue>;
  pseudoInstances: PseudoInstanceIR[];
}

selector

string

The Roblox selector (e.g., ".card", "Frame", "TextButton.primary")

properties

Map<string, RobloxValue>

Map of Roblox property names to values

pseudoInstances

PseudoInstanceIR[]

Array of pseudo-instance declarations (currently unused; pseudo-instances are emitted as separate rules with ::Component selectors)

PseudoInstanceIR

A pseudo-instance declaration (e.g., UICorner, UIStroke).

interface PseudoInstanceIR {
  type: PseudoInstanceType;
  properties: Map<string, RobloxValue>;
}

type

PseudoInstanceType

The type of Roblox instance (e.g., "UICorner", "UIStroke")

properties

Map<string, RobloxValue>

Map of property names to values for this instance

PseudoInstanceType

Supported pseudo-instance types.

type PseudoInstanceType =
  | "UICorner"
  | "UIStroke"
  | "UIPadding"
  | "UIListLayout"
  | "UIGridLayout"
  | "UIGradient"
  | "UIFlexItem"
  | "UIScale"
  | "UIAspectRatioConstraint"
  | "UISizeConstraint";

Value types

RobloxValue

A Roblox property value in the IR. Can be any of the following types:

type RobloxValue =
  | { type: "Color3"; value: [number, number, number] }
  | { type: "UDim2"; value: [number, number, number, number] }
  | { type: "UDim"; value: [number, number] }
  | { type: "number"; value: number }
  | { type: "boolean"; value: boolean }
  | { type: "Enum"; enum: string; value: string }
  | { type: "token"; name: string }
  | { type: "Font"; family: string; weight?: string; style?: string }
  | { type: "Vector2"; value: [number, number] }
  | { type: "string"; value: string }
  | {
      type: "ColorSequence";
      stops: Array<{ position: number; color: [number, number, number] }>;
    };

Show RobloxValue variants

Color3

{ type: 'Color3'; value: [number, number, number] }

RGB color value (0-255 range)

UDim2

{ type: 'UDim2'; value: [number, number, number, number] }

2D dimension value [xScale, xOffset, yScale, yOffset]

UDim

{ type: 'UDim'; value: [number, number] }

1D dimension value [scale, offset]

number

{ type: 'number'; value: number }

Numeric value

boolean

{ type: 'boolean'; value: boolean }

Boolean value

Enum

{ type: 'Enum'; enum: string; value: string }

Roblox enum value (e.g., { type: "Enum", enum: "AutomaticSize", value: "XY" })

token

{ type: 'token'; name: string }

Reference to a design token (e.g., { type: "token", name: "--primary" })

Font

{ type: 'Font'; family: string; weight?: string; style?: string }

Font value with optional weight and style

Vector2

{ type: 'Vector2'; value: [number, number] }

2D vector [x, y]

string

{ type: 'string'; value: string }

String value

ColorSequence

{ type: 'ColorSequence'; stops: Array<{ position: number; color: [number, number, number] }> }

Gradient color sequence with keypoint stops

TokenValue

A design token value from :root CSS custom properties.

type TokenValue =
  | { type: "Color3"; value: [number, number, number] }
  | { type: "UDim"; value: [number, number] }
  | { type: "number"; value: number }
  | { type: "Font"; family: string; weight?: string; style?: string }
  | { type: "string"; value: string };

Show TokenValue variants

Color3

{ type: 'Color3'; value: [number, number, number] }

RGB color token

UDim

{ type: 'UDim'; value: [number, number] }

1D dimension token (for border-radius, padding, etc.)

number

{ type: 'number'; value: number }

Numeric token

Font

{ type: 'Font'; family: string; weight?: string; style?: string }

Font token

string

{ type: 'string'; value: string }

String token

Warning types

WarningLevel

Warning verbosity level.

type WarningLevel = "all" | "unsupported" | "none";

"all" — Show all warnings
"unsupported" — Only show warnings about unsupported CSS features
"none" — Suppress all warnings

WarningCode

Warning category codes.

type WarningCode =
  | "unsupported-property"
  | "unsupported-selector"
  | "unsupported-unit"
  | "partial-mapping"
  | "type-inference-ambiguous";

CompilerWarning

A single compiler warning.

interface CompilerWarning {
  code: WarningCode;
  message: string;
  file?: string;
  line?: number;
  column?: number;
}

code

WarningCode

Warning category code

message

string

Human-readable warning message

file

string

Source filename (if available)

line

number

Line number in source file (if available)

column

number

Column number in source file (if available)

WarningCollector

Warning collector class for managing compilation diagnostics.

class WarningCollector {
  constructor(level: WarningLevel = "all", strict: boolean = false);
  warn(warning: CompilerWarning): void;
  getWarnings(): readonly CompilerWarning[];
  hasErrors(): boolean;
  format(): string;
}

level

WarningLevel

Warning verbosity level (defaults to "all")

strict

boolean

When true, any warnings are treated as errors (defaults to false)

Methods:

warn(warning) — Add a warning
getWarnings() — Get all collected warnings
hasErrors() — Returns true if strict mode is enabled and warnings exist
format() — Format warnings as a string (one per line)

Manifest types

CSSManifest

Metadata about the compiled stylesheet.

interface CSSManifest {
  classes: Record<string, { overflowScroll: boolean }>;
  elementMap: Record<string, string>;
}

classes

Record<string, { overflowScroll: boolean }>

Map of CSS class names to metadata (e.g., whether they use overflow: scroll)

elementMap

Record<string, string>

Map of HTML element names to Roblox instance class names (e.g., { "div": "Frame" })

compile() — Compile CSS to IR
generateLuau() — Generate Luau code
generateRBXMX() — Generate RBXMX XML

Programmatic API

Compiler types

CompileOptions

CompileResult

LuauOptions

Intermediate representation types

StyleSheetIR

StyleRuleIR

PseudoInstanceIR

PseudoInstanceType

Value types

RobloxValue

TokenValue

Warning types

WarningLevel

WarningCode

CompilerWarning

WarningCollector

Manifest types

CSSManifest

Build docs developers (and LLMs) love

Programmatic API

​Compiler types

​CompileOptions

​CompileResult

​LuauOptions

​Intermediate representation types

​StyleSheetIR

​StyleRuleIR

​PseudoInstanceIR

​PseudoInstanceType

​Value types

​RobloxValue

​TokenValue

​Warning types

​WarningLevel

​WarningCode

​CompilerWarning

​WarningCollector

​Manifest types

​CSSManifest

​Related

Build docs developers (and LLMs) love

Compiler types

CompileOptions

CompileResult

LuauOptions

Intermediate representation types

StyleSheetIR

StyleRuleIR

PseudoInstanceIR

PseudoInstanceType

Value types

RobloxValue

TokenValue

Warning types

WarningLevel

WarningCode

CompilerWarning

WarningCollector

Manifest types

CSSManifest

Related