GDSS: Godot stylesheets

An experimental CSS-like styling system for Godot 4. This was originally not intended for public use. However, upon further developing it into something more stable and sophisticated I've decided to open source it in case anyone would like to use it or help support the development of it.

Do not expect this plugin to be 100% stable- it is a work in progress.

Some showcase videos

[dev#1] [dev#2] [dev#3] [dev#4] [dev#5]

Example Syntax

Button {
    bg_color: BLACK
    border_color: RED
    border: 5 5 5 5
    corner_radius: 20 0 20 0
    transition_time: 0.4
    transition_func: QUINT
    transition_type: EASE_OUT

    :hover {
        border_color: YELLOW
    }
    :pressed {
        expand: 20 20 20 20
    }
    :normal, :focus {
        skew_y: 0
    }
}

Panel, PanelContainer {
    bg_color: BLACK
}

Features

• Selectors, state blocks, composite shorthand, comma groups
• State transitions
• Easing config (transition_func, transition_type)
• Skew (skew_x, skew_y), corner detail, shadow
• Per-node opt-in
• Classes
• Runtime support + hot-reload
• Hex color parsing
• Variable support
• Some way to preview the node as you're writing in gdss.
• Export variable support (in order to access from GDScript)
• Method support
• Syntax error highlighting

TODO

(not necessarily in order)

• UI polish