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

Cloning

I recommend using these commands to clone the repo (if you're using bash):

git clone https://github.com/cruglet/gdss.git
cd gdss
git ls-files 'addons/gdss/db/**/*.tres' | xargs git update-index --skip-worktree
git update-index --skip-worktree addons/gdss/db/db.tres