css

package module
v0.0.2 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: May 11, 2026 License: MIT Imports: 1 Imported by: 0

README

tinywasm/css

Typed CSS DSL and design tokens for the tinywasm framework.

This module replaces string-based .css files with a Go-typed DSL. It exposes both RootCSS() and RenderCSS() with strictly separate responsibilities:

  • RootCSS() → vocabulary: design token declarations — brand, source tokens, scales.
  • RenderCSS() → logic: minimal reset + active-token bindings + @media (prefers-color-scheme).

The DSL ensures that every selector, declaration, and token reference is a Go expression, providing compile-time safety and eliminating hex-fallback drift.

Usage

import . "github.com/tinywasm/css"

func MyComponent() {
    // WASM: Use Class or Token.Var()
    btnClass := Class("btn")
    color := ColorPrimary.Var()
}

// SSR: Use the DSL to generate CSS
func Styles() *Stylesheet {
    return New(
        Rule(".btn",
            BackgroundColor(ColorPrimary),
            Color(Hex("#fff")),
            Padding(Space2, Space4),
            BorderRadius(RadiusMd),
        ),
        Rule(Class("btn").Hover(),
            Opacity(0.8),
        ),
    )
}

SSR contract: RootCSS vs RenderCSS

assetmin recognizes two CSS functions with strictly separate roles:

Function Slot Replacement Content
RootCSS() *Stylesheet open Single-winner — app replaces framework :root {} value declarations (vocabulary)
RenderCSS() *Stylesheet middle Additive — every module's contribution is preserved CSS rules that consume tokens via var() (logic)

The split is the key to safe theming: vocabulary is replaceable so apps can rebrand; logic is additive so dark-mode switching cannot be deleted by accident.

App override pattern
// ssr.go at the app root
import "github.com/tinywasm/css"

func RootCSS() *css.Stylesheet {
    return css.New(
        css.RootCSS(), // inherit framework defaults
        css.Root(
            css.Declare(css.ColorPrimary, "#FF6B35"),
            css.Declare(css.ColorBackgroundLight, "#FAFAFA"),
            css.Declare(css.ColorBackgroundDark, "#121212"),
        ),
    )
}

The app does not need to redeclare the active-layer bindings or the @media rule — those live in RenderCSS() and are always present.

Design Tokens

Tokens are the single source of truth for all design decisions.

Group Purpose
Color — Brand Fixed identity colors
Color — Theme Adaptive light/dark colors
Typography — Size Font-size scale (Major Third ratio)
Typography — Extras Line-height, weight, letter-spacing
Spacing Margin/padding/gap scale (4px grid)
Border-radius Consistent corner rounding
Elevation Box-shadow scale
Motion Animation timing + easing curves
Z-index Stacking contract
Breakpoints Viewport widths (container queries / JS)
Container widths Max-width primitives

Design Philosophy

  • Semantic names over values — ColorOnSurface not #ffffff. Names describe intent; values can change.
  • Scales over magic numbers — typography and spacing follow mathematical ratios so all values are proportional and limited.
  • Two-layer color pattern — separates source values (per mode) from active tokens (used by components). @media (prefers-color-scheme) switches modes without JS.
  • Single override point — apps only need to change source-layer or scale variables; the rest cascades automatically.

DSL Reference

The DSL provides type-safe constructors for CSS properties:

  • BackgroundColor(Value), Color(Value), FontSize(Value), etc.
  • Padding(Value...), Margin(Value...)
  • Px(int), Rem(float64), Pct(int), Hex(string), Str(string)
  • Rule(selector, declarations...)
  • Root(declarations...)
  • Media(query, items...)

Keywords like Auto, None, Block, Flex_, Center, Zero are also provided.

Documentation

Index

Constants

This section is empty.

Variables

View Source 
var (
	// Brand colors
	ColorPrimary     = Token{"--color-primary", "#00ADD8"}
	ColorOnPrimary   = Token{"--color-on-primary", "#1C1C1E"}
	ColorSecondary   = Token{"--color-secondary", "#654FF0"}
	ColorOnSecondary = Token{"--color-on-secondary", "#FFFFFF"}
	ColorSuccess     = Token{"--color-success", "#3FB950"}
	ColorError       = Token{"--color-error", "#E34F26"}

	// Theme — active layer (consumed by components)
	ColorBackground = Token{"--color-background", "#FFFFFF"}
	ColorSurface    = Token{"--color-surface", "#F2F2F7"}
	ColorOnSurface  = Token{"--color-on-surface", "#1C1C1E"}
	ColorMuted      = Token{"--color-muted", "#6E6E73"}
	ColorHover      = Token{"--color-hover", "#B8860B"}

	// Theme — source layer (apps redeclare these for rebrand)
	ColorBackgroundLight = Token{"--color-background-light", "#FFFFFF"}
	ColorBackgroundDark  = Token{"--color-background-dark", "#0D1117"}
	ColorSurfaceLight    = Token{"--color-surface-light", "#F2F2F7"}
	ColorSurfaceDark     = Token{"--color-surface-dark", "#161B22"}
	ColorOnSurfaceLight  = Token{"--color-on-surface-light", "#1C1C1E"}
	ColorOnSurfaceDark   = Token{"--color-on-surface-dark", "#E6EDF3"}
	ColorMutedLight      = Token{"--color-muted-light", "#6E6E73"}
	ColorMutedDark       = Token{"--color-muted-dark", "#8B949E"}
	ColorHoverLight      = Token{"--color-hover-light", "#B8860B"}
	ColorHoverDark       = Token{"--color-hover-dark", "#F7DF1E"}

	// Typography size scale
	TextXs   = Token{"--text-xs", "0.75rem"}
	TextSm   = Token{"--text-sm", "0.875rem"}
	TextBase = Token{"--text-base", "1rem"}
	TextLg   = Token{"--text-lg", "1.25rem"}
	TextXl   = Token{"--text-xl", "1.5rem"}
	Text2xl  = Token{"--text-2xl", "2rem"}

	// Line-height / weight / tracking
	LeadingTight      = Token{"--leading-tight", "1.25"}
	LeadingNormal     = Token{"--leading-normal", "1.5"}
	LeadingRelaxed    = Token{"--leading-relaxed", "1.75"}
	FontWeightRegular = Token{"--font-weight-regular", "400"}
	FontWeightMedium  = Token{"--font-weight-medium", "500"}
	FontWeightBold    = Token{"--font-weight-bold", "700"}
	TrackingTight     = Token{"--tracking-tight", "-0.02em"}
	TrackingNormal    = Token{"--tracking-normal", "0"}
	TrackingWide      = Token{"--tracking-wide", "0.05em"}

	// Spacing (4px grid)
	Space1  = Token{"--space-1", "0.25rem"}
	Space2  = Token{"--space-2", "0.5rem"}
	Space3  = Token{"--space-3", "0.75rem"}
	Space4  = Token{"--space-4", "1rem"}
	Space6  = Token{"--space-6", "1.5rem"}
	Space8  = Token{"--space-8", "2rem"}
	Space12 = Token{"--space-12", "3rem"}

	// Border radius
	RadiusSm   = Token{"--radius-sm", "4px"}
	RadiusMd   = Token{"--radius-md", "8px"}
	RadiusLg   = Token{"--radius-lg", "16px"}
	RadiusFull = Token{"--radius-full", "9999px"}

	// Elevation
	ShadowSm = Token{"--shadow-sm", "0 1px 2px rgba(0,0,0,0.05)"}
	ShadowMd = Token{"--shadow-md", "0 4px 6px rgba(0,0,0,0.1)"}
	ShadowLg = Token{"--shadow-lg", "0 10px 15px rgba(0,0,0,0.1)"}
	ShadowXl = Token{"--shadow-xl", "0 20px 25px rgba(0,0,0,0.15)"}

	// Motion
	DurationFast = Token{"--duration-fast", "150ms"}
	DurationBase = Token{"--duration-base", "250ms"}
	DurationSlow = Token{"--duration-slow", "400ms"}
	EaseIn       = Token{"--ease-in", "cubic-bezier(0.4,0,1,1)"}
	EaseOut      = Token{"--ease-out", "cubic-bezier(0,0,0.2,1)"}
	EaseInOut    = Token{"--ease-in-out", "cubic-bezier(0.4,0,0.2,1)"}

	// Z-index
	ZBase     = Token{"--z-base", "0"}
	ZDropdown = Token{"--z-dropdown", "100"}
	ZSticky   = Token{"--z-sticky", "200"}
	ZModal    = Token{"--z-modal", "300"}
	ZToast    = Token{"--z-toast", "400"}
	ZTooltip  = Token{"--z-tooltip", "500"}

	// Breakpoints
	BpSm = Token{"--bp-sm", "640px"}
	BpMd = Token{"--bp-md", "768px"}
	BpLg = Token{"--bp-lg", "1024px"}
	BpXl = Token{"--bp-xl", "1280px"}

	// Container widths
	MaxWProse   = Token{"--max-w-prose", "65ch"}
	MaxWContent = Token{"--max-w-content", "1200px"}
	MaxWScreen  = Token{"--max-w-screen", "1440px"}
)

Token catalog — every token from the legacy theme.css.

Functions

func Media added in v0.0.2 

func Media(query string, items ...item) item

func MediaPrefersDark added in v0.0.2 

func MediaPrefersDark(items ...item) item

func Raw added in v0.0.2 

func Raw(css string) item

func RawRule added in v0.0.2 

func RawRule(s string) rawRule

func Root added in v0.0.2 

func Root(decls ...Decl) item

func Rule added in v0.0.2 

func Rule(sel any, content ...RuleContent) item

Types

type Class added in v0.0.2 

type Class string

Class is a CSS class name. Shared by HTML emission (WASM) and CSS emission (SSR). Only the string identity crosses the WASM boundary; pseudo-class helpers (Hover/Focus/Disabled) live in dsl.go (!wasm) because they only feed Rule().

func (Class) Disabled added in v0.0.2 

func (c Class) Disabled() Selector

func (Class) Focus added in v0.0.2 

func (c Class) Focus() Selector

func (Class) Hover added in v0.0.2 

func (c Class) Hover() Selector

Pseudo-class helpers on Class

func (Class) String added in v0.0.2 

func (c Class) String() string

type Decl added in v0.0.2 

type Decl struct{ Prop, Val string }

func AlignItems added in v0.0.2 

func AlignItems(v Value) Decl

func Animation added in v0.0.2 

func Animation(v ...Value) Decl

func Background added in v0.0.2 

func Background(v Value) Decl

func BackgroundColor added in v0.0.2 

func BackgroundColor(v Value) Decl

func BackgroundImage added in v0.0.2 

func BackgroundImage(v Value) Decl

func Bind added in v0.0.2 

func Bind(active, source Token) Decl

func Border added in v0.0.2 

func Border(v ...Value) Decl

func BorderColor added in v0.0.2 

func BorderColor(v Value) Decl

func BorderRadius added in v0.0.2 

func BorderRadius(v ...Value) Decl

func Bottom added in v0.0.2 

func Bottom(v Value) Decl

func BoxShadow added in v0.0.2 

func BoxShadow(v Value) Decl

func BoxSizing added in v0.0.2 

func BoxSizing(v Value) Decl

func Color added in v0.0.2 

func Color(v Value) Decl

func Cursor added in v0.0.2 

func Cursor(v Value) Decl

func Declare added in v0.0.2 

func Declare(t Token, value string) Decl

func Display added in v0.0.2 

func Display(v Value) Decl

func Flex added in v0.0.2 

func Flex(v ...Value) Decl

func FlexDirection added in v0.0.2 

func FlexDirection(v Value) Decl

func FontFamily added in v0.0.2 

func FontFamily(v Value) Decl

func FontSize added in v0.0.2 

func FontSize(v Value) Decl

func FontWeight added in v0.0.2 

func FontWeight(v Value) Decl

func Gap added in v0.0.2 

func Gap(v Value) Decl

func Height added in v0.0.2 

func Height(v Value) Decl

func JustifyContent added in v0.0.2 

func JustifyContent(v Value) Decl

func Left added in v0.0.2 

func Left(v Value) Decl

func LetterSpacing added in v0.0.2 

func LetterSpacing(v Value) Decl

func LineHeight added in v0.0.2 

func LineHeight(v Value) Decl

func Margin added in v0.0.2 

func Margin(v ...Value) Decl

func MaxWidth added in v0.0.2 

func MaxWidth(v Value) Decl

func MinHeight added in v0.0.2 

func MinHeight(v Value) Decl

func Opacity added in v0.0.2 

func Opacity(v float64) Decl

func Outline added in v0.0.2 

func Outline(v Value) Decl

func OutlineOffset added in v0.0.2 

func OutlineOffset(v Value) Decl

func Padding added in v0.0.2 

func Padding(v ...Value) Decl

func PointerEvents added in v0.0.2 

func PointerEvents(v Value) Decl

func Position added in v0.0.2 

func Position(v Value) Decl
func Right(v Value) Decl

func Top added in v0.0.2 

func Top(v Value) Decl

func Transform added in v0.0.2 

func Transform(v Value) Decl

func Transition added in v0.0.2 

func Transition(v ...Value) Decl

func Width added in v0.0.2 

func Width(v Value) Decl

func ZIndex added in v0.0.2 

func ZIndex(v Value) Decl

type MediaItem added in v0.0.2 

type MediaItem struct {
	// contains filtered or unexported fields
}

type RawItem added in v0.0.2 

type RawItem string

type RuleContent added in v0.0.2 

type RuleContent interface {
	// contains filtered or unexported methods
}

type RuleItem added in v0.0.2 

type RuleItem struct {
	// contains filtered or unexported fields
}

type Selector added in v0.0.2 

type Selector string

Selector is a raw CSS selector string used by the DSL.

type Stylesheet added in v0.0.2 

type Stylesheet struct {
	// contains filtered or unexported fields
}

func New 

func New(items ...item) *Stylesheet

func RenderCSS added in v0.0.2 

func RenderCSS() *Stylesheet

func RootCSS added in v0.0.2 

func RootCSS() *Stylesheet

func (*Stylesheet) String added in v0.0.2 

func (s *Stylesheet) String() string

type Token added in v0.0.2 

type Token struct{ Name, Fallback string }

Token is a design token: a named visual decision with a fallback value. Industry-standard term (W3C Design Tokens CG, Material, Carbon, Primer, Spectrum).

func (Token) Var added in v0.0.2 

func (t Token) Var() string

type Value added in v0.0.2 

type Value interface {
	// contains filtered or unexported methods
}
var (
	Auto    Value = kw("auto")
	None    Value = kw("none")
	Block   Value = kw("block")
	Flex_   Value = kw("flex")
	Grid    Value = kw("grid")
	Inline  Value = kw("inline-block")
	Center  Value = kw("center")
	Zero    Value = kw("0")
	Pointer Value = kw("pointer")
)

func Em added in v0.0.2 

func Em(f float64) Value

func Hex added in v0.0.2 

func Hex(s string) Value

func Pct added in v0.0.2 

func Pct(n int) Value

func Px added in v0.0.2 

func Px(n int) Value

func Rem added in v0.0.2 

func Rem(f float64) Value

func Str added in v0.0.2 

func Str(s string) Value

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.