compile()

​

Signature

function compile(
  sources: Array<{ filename: string; content: string }>,
  options: CompileOptions
): CompileResult

​

Parameters

​

Returns

​

Example

import { compile } from "rbx-css";

const result = compile(
  [
    {
      filename: "styles.css",
      content: "div { background-color: red; }"
    }
  ],
  {
    name: "MyStyleSheet",
    warnLevel: "all",
    strict: false
  }
);

// Access the IR
console.log(result.ir.name); // "MyStyleSheet"
console.log(result.ir.rules.length); // 1

// Check for warnings
if (result.warnings.getWarnings().length > 0) {
  console.log(result.warnings.format());
}

​

Compilation process

1. Parse CSS — All source files are parsed using lightningcss
2. Extract tokens — CSS custom properties from :root are extracted as tokens
3. Extract themes — Theme-specific tokens from [data-theme] or @media (prefers-color-scheme) are identified
4. Map selectors — CSS selectors are mapped to Roblox selector syntax (e.g., div → Frame)
5. Map properties — CSS properties are mapped to Roblox properties and pseudo-instances
6. Generate base rules — Default element rules are prepended (unless includeBaseRules: false)
7. Generate compound selectors — Width/height combinations are merged to fix Roblox’s single Size property

​

Related

• generateLuau() — Generate Luau code from the IR
• generateRBXMX() — Generate RBXMX XML from the IR
• Types reference — Full type definitions