Skip to main content
The generateLuau() function generates Luau source code from a compiled StyleSheetIR. The output is a module that returns a factory function creating a Roblox StyleSheet instance.

​
Signature

function generateLuau(
  ir: StyleSheetIR,
  options: LuauOptions
): string

​
Parameters

​
ir
StyleSheetIR
required
The compiled intermediate representation from compile(). See types for the full structure
​
options
LuauOptions
required
Code generation options

​
Returns

​
luau
string
Generated Luau source code as a string. The module exports a createStyleSheet() function that returns a configured StyleSheet instance

​
Example

import { compile, generateLuau } from "rbx-css";

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

const luau = generateLuau(result.ir, {
  minify: false,
  sourceFile: "styles.css"
});

console.log(luau);
// -- Auto-generated by rbx-css
// -- Source: styles.css
//
// local function createStyleSheet()
//     local sheet = Instance.new("StyleSheet")
//     sheet.Name = "MyStyleSheet"
//     ...
//     return sheet
// end
//
// return createStyleSheet

​
Output structure

The generated Luau code follows this structure: 
-- Auto-generated by rbx-css
-- Source: <sourceFile>

local function createStyleSheet()
    local sheet = Instance.new("StyleSheet")
    sheet.Name = "<ir.name>"

    -- Tokens from :root
    sheet:SetAttribute("--primary", Color3.fromHex("#335fff"))
    -- ...

    -- Rule: .card
    do
        local rule = Instance.new("StyleRule")
        rule.Selector = ".card"
        rule.Parent = sheet
        rule:SetProperties({
            BackgroundColor3 = Color3.fromRGB(255, 255, 255),
            Size = UDim2.new(1, 0, 0, 200)
        })
    end

    -- Themes (if present)
    local themes = {}
    -- ...
    local function setTheme(themeName: string)
        themeDerive.StyleSheet = themes[themeName]
    end

    return sheet
end

return createStyleSheet

​
Minified output

When minify: true, the output removes all comments and indentation: 
local function createStyleSheet()
local sheet = Instance.new("StyleSheet")
sheet.Name = "MyStyleSheet"
-- ...
return sheet
end
return createStyleSheet

​
Value serialization

Roblox values are serialized as follows:
  • Color3: Color3.fromRGB(r, g, b) for properties, Color3.fromHex("#hex") for tokens
  • UDim2: UDim2.new(xScale, xOffset, yScale, yOffset)
  • UDim: UDim.new(scale, offset)
  • Enum: Enum.<EnumType>.<Value>
  • Font: Font.new("rbxasset://fonts/families/<family>.json", Enum.FontWeight.<weight>, Enum.FontStyle.<style>)
  • Vector2: Vector2.new(x, y)
  • Token reference: "$<tokenName>"
  • ColorSequence: ColorSequence.new(...) with keypoints

Build docs developers (and LLMs) love

Get started for freeTalk to us