style Module - CSS DSL

Define styles in pure Lua using the Nixi CSS DSL. Automatically converts camelCase to kebab-case.

Setup

local Nixi = require("init")
_G.Nixi = Nixi
local style = require("style")
Nixi.style = style

Functions

Nixi.style.variable(name, value)

Define CSS custom properties (--name: value)

Nixi.style.variable("primary", "#7aa2f7")
Nixi.style.variable("bg", "#1a1b26")
-- Output: :root { --primary: #7aa2f7; --bg: #1a1b26; }

Nixi.style.rule(selector, props)

Define CSS rules

Nixi.style.rule("body", {
    backgroundColor = "#1a1b26",
    color = "#fff",
    fontFamily = "system-ui",
})

Nixi.style.theme(name, props)

Define utility class (.name)

Nixi.style.theme("btn", {
    padding = "10px 20px",
    borderRadius = "8px",
})
-- Output: .btn { padding: 10px 20px; border-radius: 8px; }

Nixi.style.reset(props)

Add CSS reset

Nixi.style.reset({
    boxSizing = "border-box",
    margin = 0,
    padding = 0,
})

Nixi.style.keyframes(name, frames)

Define keyframe animations

Nixi.style.keyframes("fadeIn", {
    { from = { opacity = 0 } },
    { to = { opacity = 1 } },
})

Nixi.style.media(breakpoint, rules)

Define media queries

Nixi.style.media("(max-width: 768px)", {
    [".container"] = { maxWidth = "100%" },
    ["h1"] = { fontSize = "1.5rem" },
})

Nixi.style.applyTheme(theme)

Apply full theme config

Nixi.style.applyTheme({
    colors = {
        background = "#1a1b26",
        primary = "#7aa2f7",
    },
    fonts = {
        sans = "system-ui",
    },
})

Nixi.style.toCSS()

Generate final CSS string

local css = Nixi.style.toCSS()
print(css)

Nixi.style.toStyleTag()

Generate style tag for embedding

local tag = Nixi.style.toStyleTag()
-- <style id="nixi-styles">...</style>

Nixi.style.clear()

Reset all defined styles

Nixi.style.clear()

Property Naming

Built with ❤️ by ijadux2