🥮 mooncakes.io

    respo_css

    Type-safe CSS styling library for Respo framework with comprehensive property definitions, enumeration values, and functional style composition tools. Provides complete CSS support including layout, typography, colors, transforms, and grid systems with MoonBit type safety.

    respo
    CSS
    Download zip
    Author
    Version
    0.1.7
    License
    Apache-2.0
    Repository
    Last updated
    21 days ago
    Downloads
    3K

    #tiye/respo_css

    CSS structs for Respo library

    #Introduction

    respo_css is a MoonBit package that provides type-safe CSS support for the Respo library. It offers complete CSS property type definitions, enumeration values, and style building tools, allowing you to build and manage CSS styles in a functional way.

    #Installation

    Add the dependency to your MoonBit project:

    {
  "deps": {
    "tiye/respo_css": "*"
  }
}

    Or use the moon command line tool:

    moon add tiye/respo_css

    #Usage

    #Basic Usage

    // Create basic styles

    ///|
    let style : RespoStyle = respo_style(
      color=CssColor::Red,
      font_size=16,
      margin=CssSize::Px(10.0),
      display=CssDisplay::Flex,
    )

    // Convert to CSS string

    ///|
    let _css_string : String = style.to_string()
    // Output: "color:red; font-size:16px; margin:10px; display:flex; "

    #Style Composition

    // Create multiple styles

    ///|
    let base_style : RespoStyle = respo_style(color=CssColor::Blue, font_size=14)

    ///|
    let layout_style : RespoStyle = respo_style(
      display=CssDisplay::Grid,
      gap=CssSize::Px(20.0),
    )

    // Merge styles

    ///|
    let combined : RespoStyle = base_style.merge(layout_style)

    // Add custom properties

    ///|
    let _extended : RespoStyle = combined.add("custom-property", "custom-value")

    #Supported CSS Properties

    • Layout: display, position, flex-direction, justify-content, align-items, etc.
    • Sizing: width, height, margin, padding, etc.
    • Colors: color, background-color, border-color, etc.
    • Typography: font-size, font-weight, text-align, text-decoration, etc.
    • Transforms: transform, transition, animation, etc.
    • Grid: grid-template-columns, grid-template-rows, grid-area, etc.
    • Responsive layout: typed flex growth/wrapping, axis-specific overflow, row/column gaps, logical insets, container queries, and modern viewport units.

    #API Documentation

    #Main Types

    • RespoStyle: Style container that stores CSS property key-value pairs
    • CssSize: CSS size values (px, em, rem, %, auto, etc.)
    • CssColor: CSS color values (predefined colors, RGB, HSL, etc.)
    • CssDisplay: display property values (block, flex, grid, etc.)

    #Main Functions

    • respo_style(...): Create new style objects
    • .merge(other): Merge two styles
    • .add(property, value): Add custom CSS properties
    • .to_string(): Convert to CSS string

    #Responsive Layout

    Use typed layout properties for the common cases, while retaining .add() for new or application-specific CSS declarations:

    ///|
    let card = respo_style(
      display=CssDisplay::Flex,
      flex_wrap=CssFlexWrap::Wrap,
      flex_basis=CssSize::Percent(50.0),
      flex_grow=1.0,
      row_gap=CssSize::Px(8.0),
      column_gap=CssSize::Px(16.0),
      min_height=CssSize::Dvh(100.0),
      container_type=CssContainerType::InlineSize,
      color_scheme=CssColorScheme::LightDark,
    )

    CssSize includes dynamic, small, and large viewport units as well as container query units such as Cqw, Cqi, and Cqmax. CssColor supports modern perceptual colors through Oklch and Oklab.

    #Development and Contributing

    #About AI-Assisted Development

    Parts of this project's code and documentation were generated with AI assistance, including:

    • Enum type definitions and documentation
    • Test case generation
    • API documentation improvements

    We believe AI-assisted development can improve code quality and development efficiency while maintaining code consistency and completeness.

    #How to Contribute

    We welcome community contributions! You can participate in the following ways:

    1. Report Issues: Report bugs or feature requests in GitHub Issues
    2. Submit Code:

      • Fork this repository
      • Create a feature branch (git checkout -b feature/amazing-feature)
      • Commit your changes (git commit -m 'Add some amazing feature')
      • Push to the branch (git push origin feature/amazing-feature)
      • Create a Pull Request

    3. Improve Documentation: Help improve API documentation, usage examples, or README
    4. Add Tests: Add more test cases for existing functionality
    5. Performance Optimization: Propose or implement performance improvements

    #Development Environment

    CI verifies against MoonBit 0.1.20260827. The setup action downloads the latest available toolchain and immediately rejects version drift, so upgrading MoonBit requires an explicit workflow update and a fresh validation run.

    # Clone the repository
git clone https://github.com/tiye/respo_css.git
cd respo_css

# Run tests
moon test

# Check code
moon check

# Build project
moon build

    #Code Standards

    • Follow official MoonBit code style
    • Add corresponding test cases for new features
    • Provide complete documentation comments for public APIs
    • Use inspect format to provide usage examples

    #Release Checklist

    1. Merge a reviewed PR that updates moon.mod, CHANGELOG.md, and generated interfaces together.
    2. Run moon update, moon check --target js, moon test, moon info, and moon fmt from a clean checkout; the tree must remain clean afterwards.
    3. Create a GitHub release whose tag exactly matches the module version (for example, 0.1.7 or v0.1.7). The release workflow repeats the verification before publishing.
    4. Verify a clean downstream moon add tiye/respo_css@<version> installation and build before closing the release issue.

    If publication fails after a release is created, do not retag or overwrite the same version. Fix the problem, increment the patch version, and create a new release with clear recovery notes.

    #License

    This project is licensed under the MIT License - see the LICENSE file for details.

    #Related Projects

    • Respo - Main UI framework
    • MoonBit - Programming language official website

    CssAlignItems

    source
    pub(all) enum CssAlignItems {
      Start
      End
      Center
      Stretch
      Baseline
    } derive(Eq)

    CssAnimationDirection

    source
    pub(all) enum CssAnimationDirection {
      Normal
      Reverse
      Alternate
      AlternateReverse
    } derive(Eq)

    CSS Animation Properties Represents CSS animation-direction property values that control animation playback direction.

    The animation-direction property specifies whether an animation should play forward, backward, or alternate between forward and backward on each cycle.

    Examples

    Basic usage with inspect: CssAnimationDirection::Normal |> inspect // Output: "normal" CssAnimationDirection::Reverse |> inspect // Output: "reverse" CssAnimationDirection::Alternate |> inspect // Output: "alternate" CssAnimationDirection::AlternateReverse |> inspect // Output: "alternate-reverse"

    CssAnimationFillMode

    source
    pub(all) enum CssAnimationFillMode {
      None
      Forwards
      Backwards
      Both
    } derive(Eq)

    CssAnimationPlayState

    source
    pub(all) enum CssAnimationPlayState {
      Running
      Paused
    } derive(Eq)

    CssAspectRatio

    source
    pub(all) enum CssAspectRatio {
      Auto
      Ratio(Float, Float)
      Value(Float)
    } derive(Eq)

    CSS Aspect Ratio

    CssBackgroundImage

    source
    pub(all) enum CssBackgroundImage {
      LinearGradient(CssGradient)
      RadialGradient(CssGradient)
      ConicGradient(CssGradient)
      Url(String)
      Multiple(Array[CssBackgroundImage])
      None
      Custom(String)
    } derive(Eq)

    Background Image

    CssBackgroundSize

    source
    pub(all) enum CssBackgroundSize {
      Cover
      Contain
      Wh(UInt, UInt)
    } derive(Eq)

    Represents CSS background-size property values that control how background images are sized.

    The background-size property specifies the size of background images, determining how they scale and fit within their container.

    Examples

    inspect(CssBackgroundSize::Cover, content="cover")
inspect(CssBackgroundSize::Contain, content="contain")
inspect(CssBackgroundSize::Wh(100, 200), content="100px 200px")

    CssBorder

    source
    pub(all) struct CssBorder(Float, CssBorderStyle, CssColor)

    Represents a CSS border with width, style, and color properties.

    The CssBorder struct encapsulates the three essential components of a CSS border: width (in pixels), style (solid, dashed, etc.), and color. This provides a convenient way to define consistent border styling across elements.

    Examples

    Basic border creation: CssBorder(2.0, CssBorderStyle::Solid, CssColor::Black)

    Using the constructor with defaults: CssBorder::new() // 1px solid black border

    Custom border with specific properties: CssBorder::new(width=3.0, style=CssBorderStyle::Dashed, color=CssColor::Hex(255, 0, 0))

    Structure

    • Float - Border width in pixels
    • CssBorderStyle - Border style (solid, dashed, dotted, etc.)
    • CssColor - Border color in any supported color format
    impl Show for CssBorder

    CssBorder::new

    source
    fn CssBorder::new(width? : Float, style? : CssBorderStyle, color? : CssColor) -> CssBorder

    CssBorderRadius

    source
    pub(all) struct CssBorderRadius {
      top_left : CssSize?
      top_right : CssSize?
      bottom_left : CssSize?
      bottom_right : CssSize?
    }

    Border Radius Properties

    CssBorderRadius::new

    source
    fn CssBorderRadius::new(top_left? : CssSize, top_right? : CssSize, bottom_left? : CssSize, bottom_right? : CssSize) -> CssBorderRadius

    CssBorderRadius::to_string

    source
    fn CssBorderRadius::to_string(self : CssBorderRadius) -> String

    CssBorderRadius::to_styles

    source
    fn CssBorderRadius::to_styles(self : CssBorderRadius) -> Array[(String, String)]

    CssBorderStyle

    source
    pub(all) enum CssBorderStyle {
      Solid
      Dashed
      Dotted
    } derive(Eq)

    Represents CSS border-style property values that control the appearance of element borders.

    The border-style property defines the visual style of an element's border, determining how the border line is drawn.

    Examples

    inspect(CssBorderStyle::Solid, content="solid")
inspect(CssBorderStyle::Dashed, content="dashed")
inspect(CssBorderStyle::Dotted, content="dotted")

    CssBoxShadow

    source
    pub(all) struct CssBoxShadow {
      x : CssSize
      y : CssSize
      blur : CssSize
      spread : CssSize?
      color : CssColor
      shadow_type : CssBoxShadowType
    }

    CssBoxShadow::new

    source
    fn CssBoxShadow::new(x? : CssSize, y? : CssSize, blur? : CssSize, spread? : CssSize, color? : CssColor, shadow_type? : CssBoxShadowType) -> CssBoxShadow

    CssBoxShadowType

    source
    pub(all) enum CssBoxShadowType {
      Outer
      Inset
    } derive(Eq)

    Box Shadow Builder

    CssBoxSizing

    source
    pub(all) enum CssBoxSizing {
      BorderBox
      ContentBox
    } derive(Eq)

    Represents CSS box-sizing property values that control how element dimensions are calculated.

    The box-sizing property defines how the total width and height of an element is calculated, determining whether padding and border are included in the element's dimensions.

    Examples

    inspect(CssBoxSizing::BorderBox, content="border-box")
inspect(CssBoxSizing::ContentBox, content="content-box")

    CssClipPath

    source
    pub(all) enum CssClipPath {
      Circle(CssSize, CssSize, CssSize)
      Ellipse(CssSize, CssSize, CssSize, CssSize)
      Inset(CssSize, CssSize, CssSize, CssSize)
      Polygon(Array[String])
      Url(String)
      Custom(String)
    } derive(Eq)

    Clip Path
    impl Show for CssClipPath

    CssColor

    source
    pub(all) enum CssColor {
      Hsla(UInt, UInt, UInt, Float)
      Hsl(UInt, UInt, UInt)
      Hsluva(UInt, UInt, UInt, Float)
      Hsluv(UInt, UInt, UInt)
      Rgba(UInt, UInt, UInt, Float)
      Rgb(UInt, UInt, UInt)
      Hex(UInt, UInt, UInt)
      Lch(Float, Float, Float)
      Lcha(Float, Float, Float, Float)
      Lab(Float, Float, Float)
      Laba(Float, Float, Float, Float)
      Oklch(Float, Float, Float)
      Oklcha(Float, Float, Float, Float)
      Oklab(Float, Float, Float)
      Oklaba(Float, Float, Float, Float)
      Red
      Green
      Blue
      White
      Black
      Gray
      Yellow
      Purple
      Cyan
      Orange
      Pink
      RawString(String)
      Transparent
      Var(String)
      VarWithFallback(String, String)
    } derive(Eq)

    Represents CSS color values in various formats including RGB, HSL, hex, and named colors.

    This enum provides comprehensive support for CSS color specifications, from traditional hex and RGB values to modern HSL and HSLUV color spaces, plus common named colors.

    Examples

    inspect(CssColor::Hex(255, 0, 0), content="#ff0000")
inspect(CssColor::Rgb(0, 255, 0), content="rgb(0, 255, 0)")
inspect(CssColor::Hsl(240, 100, 50), content="hsl(240, 100%, 50%)")
inspect(CssColor::Blue, content="blue")
    impl Show for CssColor

    CssColorScheme

    source
    pub(all) enum CssColorScheme {
      Normal
      Light
      Dark
      LightDark
      OnlyLight
      OnlyDark
    } derive(Eq)

    CSS Container Query Properties

    CssContainerType

    source
    pub(all) enum CssContainerType {
      Normal
      Size
      InlineSize
      BlockSize
    } derive(Eq)

    CSS Container Query Properties

    CssContentVisibility

    source
    pub(all) enum CssContentVisibility {
      Visible
      Hidden
      Auto
    } derive(Eq)

    Represents CSS content-visibility property values that control rendering optimization.

    The content-visibility property allows the user agent to skip an element's rendering work until it is needed, which can significantly improve page load performance.

    Examples

    inspect(CssContentVisibility::Visible, content="visible")
inspect(CssContentVisibility::Hidden, content="hidden")
inspect(CssContentVisibility::Auto, content="auto")

    CssCursor

    source
    pub(all) enum CssCursor {
      Auto
      Default
      None
      Pointer
      ContextMenu
      Help
      Progress
      Wait
      Cell
      Crosshair
      Text
      VerticalText
      Alias
      Copy
      Move
      NoDrop
      NotAllowed
      Grab
      Grabbing
      AllScroll
      ColResize
      RowResize
      NResize
      EResize
      SResize
      WResize
      NeResize
      NwResize
      SeResize
      SwResize
      EwResize
      NsResize
      NeswResize
      NwseResize
      ZoomIn
      ZoomOut
    } derive(Eq)

    Represents CSS cursor property values that control the mouse cursor appearance.

    The cursor property specifies the type of cursor to be displayed when pointing over an element. It provides visual feedback to users about the type of interaction available.

    Examples

    inspect(CssCursor::Auto, content="auto")
inspect(CssCursor::Pointer, content="pointer")
inspect(CssCursor::Text, content="text")
inspect(CssCursor::Move, content="move")
    impl Show for CssCursor

    CssDisplay

    source
    pub(all) enum CssDisplay {
      Block
      Inline
      InlineBlock
      Flex
      InlineFlex
      Grid
      InlineGrid
      None
    } derive(Eq)

    Represents CSS display property values that control element layout behavior.

    The display property is fundamental to CSS layout, determining how an element participates in the document flow and how its children are laid out.

    Examples

    inspect(CssDisplay::Block, content="block")
inspect(CssDisplay::Flex, content="flex")
inspect(CssDisplay::Grid, content="grid")
inspect(CssDisplay::None, content="none")
    impl Show for CssDisplay

    CssDuration

    source
    pub(all) enum CssDuration {
      Ms(Int)
      S(Float)
      Var(String)
      VarWithFallback(String, String)
    }

    impl Show for CssDuration

    CssFilter

    source
    pub(all) enum CssFilter {
      None
      Blur(Float)
      Brightness(Float)
      Contrast(Float)
      Grayscale(Float)
      HueRotate(Float)
      Invert(Float)
      Opacity(Float)
      Saturate(Float)
      Sepia(Float)
      DropShadow(Float, Float, Float, CssColor)
      Url(String)
      Revert
      RevertLayer
    }

    Represents CSS filter property values that apply graphical effects to elements.

    The filter property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

    Examples

    inspect(CssFilter::None, content="none")
inspect(CssFilter::Blur(5.0), content="blur(5px)")
inspect(CssFilter::Brightness(1.2), content="brightness(1.2000000476837158)")
inspect(CssFilter::DropShadow(2.0, 2.0, 4.0, CssColor::Black), content="drop-shadow(2px 2px 4px black)")

    Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
    impl Show for CssFilter

    CssFlexAlignContent

    source
    pub(all) enum CssFlexAlignContent {
      FlexStart
      FlexEnd
      Center
      SpaceBetween
      SpaceAround
      Stretch
    } derive(Eq)

    Represents CSS align-content property values that control alignment of flex lines in multi-line flex containers.

    The align-content property aligns flex lines when there is extra space in the cross axis, similar to how justify-content aligns items within the main axis.

    Examples

    inspect(CssFlexAlignContent::FlexStart, content="flex-start")
inspect(CssFlexAlignContent::Center, content="center")
inspect(CssFlexAlignContent::SpaceBetween, content="space-between")

    CssFlexAlignItems

    source
    pub(all) enum CssFlexAlignItems {
      FlexStart
      FlexEnd
      Center
      Baseline
      Stretch
    } derive(Eq)

    Represents CSS align-items property values that control alignment along the cross axis in flex containers.

    The align-items property defines how flex items are aligned along the cross axis (perpendicular to the main axis) of a flex container.

    Examples

    inspect(CssFlexAlignItems::FlexStart, content="flex-start")
inspect(CssFlexAlignItems::Center, content="center")
inspect(CssFlexAlignItems::Stretch, content="stretch")

    CssFlexDirection

    source
    pub(all) enum CssFlexDirection {
      Row
      RowReverse
      Column
      ColumnReverse
    } derive(Eq)

    Represents CSS flex-direction property values that control the main axis of flex containers.

    The flex-direction property establishes the main axis of a flex container, determining the direction flex items are placed and how they flow.

    Examples

    inspect(CssFlexDirection::Row, content="row")
inspect(CssFlexDirection::Column, content="column")
inspect(CssFlexDirection::RowReverse, content="row-reverse")
inspect(CssFlexDirection::ColumnReverse, content="column-reverse")

    CssFlexJustifyContent

    source
    pub(all) enum CssFlexJustifyContent {
      FlexStart
      FlexEnd
      Center
      SpaceBetween
      SpaceAround
      SpaceEvenly
    } derive(Eq)

    Represents CSS justify-content property values that control alignment along the main axis in flex containers.

    The justify-content property defines how flex items are distributed along the main axis of a flex container, controlling spacing and alignment.

    Examples

    inspect(CssFlexJustifyContent::FlexStart, content="flex-start")
inspect(CssFlexJustifyContent::Center, content="center")
inspect(CssFlexJustifyContent::SpaceBetween, content="space-between")

    CssFlexWrap

    source
    pub(all) enum CssFlexWrap {
      Wrap
      Nowrap
      WrapReverse
    } derive(Eq)

    Represents CSS flex-wrap property values that control how flex items wrap within a flex container.

    The flex-wrap property determines whether flex items are forced onto a single line or can wrap onto multiple lines, and the direction of any new lines.

    Examples

    inspect(CssFlexWrap::Wrap, content="wrap")
inspect(CssFlexWrap::Nowrap, content="nowrap")
inspect(CssFlexWrap::WrapReverse, content="wrap-reverse")
    impl Show for CssFlexWrap

    CssFontStyle

    source
    pub(all) enum CssFontStyle {
      Normal
      Italic
      Oblique(Float?)
    } derive(Eq)

    CSS Typography Enhancements

    CssFontVariant

    source
    pub(all) enum CssFontVariant {
      Normal
      SmallCaps
      AllSmallCaps
      PetiteCaps
      AllPetiteCaps
      Unicase
      TitlingCaps
    } derive(Eq)

    CssFontWeight

    source
    pub(all) enum CssFontWeight {
      Normal
      Bold
      Bolder
      Lighter
      Weight(Int)
    } derive(Eq)

    Represents CSS font-weight property values that control the thickness of font characters.

    The font-weight property specifies how thick or thin characters should be displayed. It supports both keyword values and numeric weights from 100 to 900.

    Examples

    inspect(CssFontWeight::Normal, content="normal")
inspect(CssFontWeight::Bold, content="bold")
inspect(CssFontWeight::Weight(600), content="600")

    CssFunction

    source
    pub(all) enum CssFunction {
      Calc(String)
      Min(Array[CssSize])
      Max(Array[CssSize])
      Clamp(CssSize, CssSize, CssSize)
      Var(String, CssSize?)
    } derive(Eq)

    CSS Functions and Advanced Units Represents CSS mathematical and utility functions for dynamic value calculation.

    CSS functions enable dynamic calculations and responsive design by allowing mathematical operations, comparisons, and variable references in CSS values.

    Examples

    Basic usage with inspect: CssFunction::Calc("100vw - 40px") |> inspect // Output: "calc(100vw - 40px)" CssFunction::Min([CssSize::Px(300.0), CssSize::Vw(80.0)]) |> inspect // Output: "min(300px, 80vw)" CssFunction::Var("primary-color", None) |> inspect // Output: "var(--primary-color)"
    impl Show for CssFunction

    CssGradient

    source
    pub(all) enum CssGradient {
      Linear(CssGradientAngle?, Array[CssGradientStop])
      Radial(Array[CssGradientStop])
      Conic(CssGradientAngle?, Array[CssGradientStop])
    } derive(Eq)

    impl Show for CssGradient

    CssGradientAngle

    source
    pub(all) enum CssGradientAngle {
      Deg(Int)
      Direction(String)
    } derive(Eq)

    Linear Gradient Builder

    CssGradientStop

    source
    pub(all) struct CssGradientStop {
      color : CssColor
      position : CssSize?
    } derive(Eq)

    CssGradientStop::new

    source
    fn CssGradientStop::new(color : CssColor, position? : CssSize) -> CssGradientStop

    CssGridArea

    source
    pub(all) enum CssGridArea {
      Auto
      Span(Int)
      Line(Int)
      Named(String)
      Custom(String)
    } derive(Eq)

    Represents CSS grid-area property values that define how a grid item is positioned within the grid.

    The grid-area property is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end, specifying a grid item's size and location.

    Examples

    inspect(CssGridArea::Auto, content="auto")
inspect(CssGridArea::Span(2), content="span 2")
inspect(CssGridArea::Named("header"), content="header")
    impl Show for CssGridArea

    CssGridTemplateColumns

    source
    pub(all) enum CssGridTemplateColumns {
      None
      Auto
      Repeat(Int, CssSize)
      Fr(Array[Float])
      Sizes(Array[CssSize])
      Custom(String)
    } derive(Eq)

    CSS Grid Layout Properties Represents CSS grid-template-columns property values for defining grid column tracks.

    The grid-template-columns property defines the line names and track sizing functions of the grid columns, establishing the structure of the grid container's column axis.

    Examples

    Basic usage with inspect: CssGridTemplateColumns::None |> inspect // Output: "none" CssGridTemplateColumns::Auto |> inspect // Output: "auto" CssGridTemplateColumns::Repeat(3, CssSize::Px(100.0)) |> inspect // Output: "repeat(3, 100px)" CssGridTemplateColumns::Fr([1.0, 2.0, 1.0]) |> inspect // Output: "1fr 2fr 1fr"

    CssGridTemplateRows

    source
    pub(all) enum CssGridTemplateRows {
      None
      Auto
      Repeat(Int, CssSize)
      Fr(Array[Float])
      Sizes(Array[CssSize])
      Custom(String)
    } derive(Eq)

    Represents CSS grid-template-rows property values that define the sizing of grid rows.

    The grid-template-rows property defines the line names and track sizing functions of the grid rows, controlling how rows are sized in a CSS Grid layout.

    Examples

    inspect(CssGridTemplateRows::Auto, content="auto")
inspect(CssGridTemplateRows::Repeat(3, CssSize::Px(100)), content="repeat(3, 100px)")
inspect(CssGridTemplateRows::Fr([1.0, 2.0]), content="1fr 2fr")

    CssJustifyItems

    source
    pub(all) enum CssJustifyItems {
      Start
      End
      Center
      Stretch
      Baseline
    } derive(Eq)

    CssKeyframe

    source
    pub(all) struct CssKeyframe {
      position : Int
      styles : Array[(String, String)]
    }

    Keyframes Definition

    CssKeyframe::new

    source
    fn CssKeyframe::new(position : Int, styles : Array[(String, String)]) -> CssKeyframe

    CssKeyframes

    source
    pub(all) struct CssKeyframes {
      name : String
      keyframes : Array[CssKeyframe]
    }

    CssKeyframes::new

    source
    fn CssKeyframes::new(name : String, keyframes : Array[CssKeyframe]) -> CssKeyframes

    CssKeyframes::to_css_string

    source
    fn CssKeyframes::to_css_string(self : CssKeyframes) -> String

    CssLetterSpacing

    source
    pub(all) enum CssLetterSpacing {
      Normal
      Value(CssSize)
      Custom(String)
    } derive(Eq)

    Letter Spacing

    CssLineHeight

    source
    pub(all) enum CssLineHeight {
      Em(Float)
      Px(Float)
      Percent(Float)
      Normal
    } derive(Eq)

    CssLogicalProperty

    source
    pub(all) enum CssLogicalProperty {
      InlineStart
      InlineEnd
      BlockStart
      BlockEnd
    } derive(Eq)

    CSS Logical Properties

    CssObjectFit

    source
    pub(all) enum CssObjectFit {
      Fill
      Contain
      Cover
      None
      ScaleDown
    } derive(Eq)

    Represents CSS object-fit property values that control how replaced elements are resized.

    The object-fit property sets how the content of a replaced element, such as an img or video, should be resized to fit its container.

    Examples

    inspect(CssObjectFit::Fill, content="fill")
inspect(CssObjectFit::Contain, content="contain")
inspect(CssObjectFit::Cover, content="cover")
inspect(CssObjectFit::ScaleDown, content="scale-down")

    CssOutline

    source
    pub(all) enum CssOutline {
      None
      Outline(CssSize, CssBorderStyle, CssColor)
    } derive(Eq)

    impl Show for CssOutline

    CssOverflow

    source
    pub(all) enum CssOverflow {
      Visible
      Hidden
      Scroll
      Auto
    } derive(Eq)

    Represents CSS overflow property values that control how content is handled when it overflows its container.

    The overflow property specifies what happens when content is too large to fit in its container. It can be used to add scrollbars or hide overflowing content.

    Examples

    inspect(CssOverflow::Visible, content="visible")
inspect(CssOverflow::Hidden, content="hidden")
inspect(CssOverflow::Scroll, content="scroll")
inspect(CssOverflow::Auto, content="auto")
    impl Show for CssOverflow

    CssOverscrollBehavior

    source
    pub(all) enum CssOverscrollBehavior {
      Auto
      Contain
      None
    }

    Represents CSS overscroll-behavior property values that control scroll chaining behavior.

    The overscroll-behavior property sets what a browser does when reaching the boundary of a scrolling area. It can be used to prevent unwanted scroll chaining.

    Examples

    inspect(CssOverscrollBehavior::Auto, content="auto")
inspect(CssOverscrollBehavior::Contain, content="contain")
inspect(CssOverscrollBehavior::None, content="none")

    CssPointerEvents

    source
    pub(all) enum CssPointerEvents {
      Auto
      None
      Visible
      Painted
      Fill
      Stroke
      All
      Inherit
    } derive(Eq)

    Pointer Events

    CssPosition

    source
    pub(all) enum CssPosition {
      Static
      Relative
      Absolute
      Fixed
      Sticky
    } derive(Eq)

    Represents CSS position property values that control element positioning behavior.

    The position property determines how an element is positioned in the document and affects how the top, right, bottom, and left properties work.

    Examples

    inspect(CssPosition::Static, content="static")
inspect(CssPosition::Relative, content="relative")
inspect(CssPosition::Absolute, content="absolute")
inspect(CssPosition::Fixed, content="fixed")
inspect(CssPosition::Sticky, content="sticky")
    impl Show for CssPosition

    CssResize

    source
    pub(all) enum CssResize {
      None
      Both
      Horizontal
      Vertical
      Block
      Inline
    } derive(Eq)

    CSS Resize Property
    impl Show for CssResize

    CssScrollBehavior

    source
    pub(all) enum CssScrollBehavior {
      Auto
      Smooth
    } derive(Eq)

    CSS Scroll Behavior

    CssSize

    source
    pub(all) enum CssSize {
      Auto
      Px(Float)
      Percent(Float)
      Em(Float)
      Rem(Float)
      Vw(Float)
      Vh(Float)
      Fr(Float)
      Ch(Float)
      Ex(Float)
      Vmin(Float)
      Vmax(Float)
      Dvh(Float)
      Dvw(Float)
      Dvmin(Float)
      Dvmax(Float)
      Dvb(Float)
      Dvi(Float)
      Lvh(Float)
      Lvw(Float)
      Lvmin(Float)
      Lvmax(Float)
      Lvb(Float)
      Lvi(Float)
      Svh(Float)
      Svw(Float)
      Svmin(Float)
      Svmax(Float)
      Svb(Float)
      Svi(Float)
      Vb(Float)
      Vi(Float)
      Cqw(Float)
      Cqh(Float)
      Cqi(Float)
      Cqb(Float)
      Cqmin(Float)
      Cqmax(Float)
      Function(CssFunction)
      Custom(String)
      Var(String)
      VarWithFallback(String, String)
    } derive(Eq)

    Represents CSS size values including absolute units, relative units, viewport units, and functions.

    This enum provides type-safe representations for all CSS length and size values, from traditional pixels and percentages to modern viewport units and CSS functions.

    Examples

    inspect(CssSize::Px(100.0), content="100px")
inspect(CssSize::Percent(50.0), content="50%")
inspect(CssSize::Rem(1.5), content="1.5rem")
inspect(CssSize::Vw(80.0), content="80vw")
    impl Show for CssSize

    CssTextAlign

    source
    pub(all) enum CssTextAlign {
      Left
      Right
      Center
      Justify
    } derive(Eq)

    Represents CSS text-align property values that control horizontal text alignment.

    The text-align property specifies the horizontal alignment of text within its container. It affects how text content is positioned within block-level elements.

    Examples

    inspect(CssTextAlign::Left, content="left")
inspect(CssTextAlign::Right, content="right")
inspect(CssTextAlign::Center, content="center")
inspect(CssTextAlign::Justify, content="justify")

    CssTextDecoration

    source
    pub(all) enum CssTextDecoration {
      None
      Underline
      Overline
      LineThrough
    } derive(Eq)

    Represents CSS text-decoration property values that control text decoration lines.

    The text-decoration property specifies the decoration added to text, such as underlines, overlines, or line-through effects.

    Examples

    inspect(CssTextDecoration::None, content="none")
inspect(CssTextDecoration::Underline, content="underline")
inspect(CssTextDecoration::Overline, content="overline")
inspect(CssTextDecoration::LineThrough, content="line-through")

    CssTextOverflow

    source
    pub(all) enum CssTextOverflow {
      Clip
      Ellipsis
    } derive(Eq)

    Represents CSS text-overflow property values that control how overflowing text is displayed.

    The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user, typically used with white-space: nowrap and overflow: hidden.

    Examples

    inspect(CssTextOverflow::Clip, content="clip")
inspect(CssTextOverflow::Ellipsis, content="ellipsis")

    CssTextShadow

    source
    pub(all) struct CssTextShadow {
      x : CssSize
      y : CssSize
      blur : CssSize
      color : CssColor
    }

    Text Shadow

    CssTextShadow::new

    source
    fn CssTextShadow::new(x? : CssSize, y? : CssSize, blur? : CssSize, color? : CssColor) -> CssTextShadow

    CssTextTransform

    source
    pub(all) enum CssTextTransform {
      None
      Capitalize
      Uppercase
      Lowercase
      FullWidth
      FullSizeKana
    } derive(Eq)

    CssTimingFunction

    source
    pub(all) enum CssTimingFunction {
      Ease
      Linear
      EaseIn
      EaseOut
      EaseInOut
      StepStart
      StepEnd
      Var(String)
      VarWithFallback(String, String)
    } derive(Eq)

    Represents CSS timing function values that control the acceleration curve of animations and transitions.

    Timing functions define how intermediate values are calculated during animations, affecting the pacing and feel of visual transitions.

    Examples

    inspect(CssTimingFunction::Ease, content="ease")
inspect(CssTimingFunction::Linear, content="linear")
inspect(CssTimingFunction::EaseInOut, content="ease-in-out")

    CssTransform

    source
    pub(all) enum CssTransform {
      Translate(Int, Int)
      TranslateX(Int)
      TranslateY(Int)
      Scale(Float)
      Rotate(Int)
      Skew(Int, Int)
      Matrix(Float, Float, Float, Float, Float, Float)
    } derive(Eq)

    Represents CSS transform property values that apply 2D and 3D transformations to elements.

    The transform property allows you to rotate, scale, skew, or translate elements, providing powerful visual effects and animations.

    Examples

    inspect(CssTransform::Translate(10, 20), content="translate(10px, 20px)")
inspect(CssTransform::Scale(1.5), content="scale(1.5)")
inspect(CssTransform::Rotate(45), content="rotate(45deg)")

    CssTransitionProperty

    source
    pub(all) struct CssTransitionProperty {
      property : String
      duration : CssDuration
      timing_function : CssTimingFunction?
      delay : CssDuration?
    }

    Transition Builder

    CssTransitionProperty::new

    source
    fn CssTransitionProperty::new(property : String, duration : CssDuration, timing_function? : CssTimingFunction, delay? : CssDuration) -> CssTransitionProperty

    CssUserSelect

    source
    pub(all) enum CssUserSelect {
      None
      Text
      All
      Auto
    }

    CssVerticalAlign

    source
    pub(all) enum CssVerticalAlign {
      Top
      Middle
      Bottom
    }

    Represents CSS vertical-align property values that control vertical alignment of inline elements.

    The vertical-align property sets the vertical alignment of an inline, inline-block, or table-cell element relative to its parent's baseline or line box.

    Examples

    inspect(CssVerticalAlign::Top, content="top")
inspect(CssVerticalAlign::Middle, content="middle")
inspect(CssVerticalAlign::Bottom, content="bottom")

    CssWordBreak

    source
    pub(all) enum CssWordBreak {
      Normal
      BreakAll
      KeepAll
      BreakWord
    }

    RespoStyle

    source
    pub(all) struct RespoStyle(Array[(String, String)]) derive(Default, Eq)

    A type-safe CSS style container that holds CSS property-value pairs.

    RespoStyle is the main struct for building and managing CSS styles in a functional way. It stores CSS properties as an array of string tuples and provides methods for combining, extending, and converting styles to CSS strings.

    Examples

    // Create a basic style
    let style = respo_style(
      color=CssColor::Red,
      font_size=16,
      margin=CssSize::Px(10.0)
    )

    // Add custom properties
    inspect(style.add("custom-property", "custom-value"), content="color:red; font-size:16px; margin:10px; custom-property:custom-value; ")

    // Merge with another style
    let other = respo_style(background_color=CssColor::Blue)
    inspect(style.merge(other), content="color:red; font-size:16px; margin:10px; custom-property:custom-value; background-color:blue; ")

    // Convert to CSS string
    inspect(style.to_string(), content="color:red; font-size:16px; margin:10px; custom-property:custom-value; background-color:blue; ")

    Usage

    • Use respo_style() function to create new styles with type-safe properties
    • Use .add() method to add custom CSS properties not covered by the type system
    • Use .merge() method to combine multiple styles
    • Use .to_string() to generate the final CSS output

    Internal Structure

    Internally stores CSS properties as Array[(String, String)] where each tuple represents a CSS property name and its corresponding value.
    impl Show for RespoStyle

    RespoStyle::add

    source
    fn RespoStyle::add(self : RespoStyle, property : String, value : String) -> RespoStyle

    for custom styles not defined with enum, use this function to add

    RespoStyle::is_empty

    source
    fn RespoStyle::is_empty(self : RespoStyle) -> Bool

    RespoStyle::length

    source
    fn RespoStyle::length(self : RespoStyle) -> Int

    RespoStyle::merge

    source
    fn RespoStyle::merge(self : RespoStyle, other : RespoStyle) -> RespoStyle

    respo_style

    source
    fn respo_style(color? : CssColor, background_color? : CssColor, font_size? : UInt, font_family? : String, font_weight? : String, text_align? : CssTextAlign, display? : CssDisplay, margin? : CssSize, padding? : CssSize, border? : CssBorder, width? : CssSize, height? : CssSize, position? : CssPosition, top? : CssSize, right? : CssSize, bottom? : CssSize, left? : CssSize, float? : String, clear? : String, overflow? : CssOverflow, overflow_x? : CssOverflow, overflow_y? : CssOverflow, z_index? : Int, flex? : Float, flex_grow? : Float, flex_shrink? : Float, flex_basis? : CssSize, flex_wrap? : CssFlexWrap, flex_direction? : CssFlexDirection, justify_content? : CssFlexJustifyContent, align_items? : CssFlexAlignItems, align_content? : CssFlexAlignContent, align_self? : CssFlexAlignItems, justify_self? : CssJustifyItems, order? : Int, text_decoration? : CssTextDecoration, text_transform? : String, line_height? : CssLineHeight, letter_spacing? : String, white_space? : String, word_break? : CssWordBreak, text_overflow? : CssTextOverflow, opacity? : Float, visibility? : String, box_shadow? : String, transition? : String, box_sizing? : CssBoxSizing, border_radius? : Float, padding_top? : CssSize, padding_bottom? : CssSize, padding_left? : CssSize, padding_right? : CssSize, min_width? : CssSize, max_width? : CssSize, vertical_align? : CssVerticalAlign, border_style? : CssBorderStyle, border_color? : CssColor, border_width? : CssSize, border_top? : CssBorder, border_top_width? : CssSize, border_top_color? : CssColor, border_top_style? : CssBorderStyle, border_bottom? : CssBorder, border_bottom_width? : CssSize, border_bottom_color? : CssColor, border_bottom_style? : CssBorderStyle, border_left? : CssBorder, border_left_width? : CssSize, border_left_color? : CssColor, border_left_style? : CssBorderStyle, border_right? : CssBorder, border_right_width? : CssSize, border_right_color? : CssColor, border_right_style? : CssBorderStyle, cursor? : CssCursor, transition_duration? : CssDuration, transform? : CssTransform, outline? : CssOutline, user_select? : CssUserSelect, margin_top? : CssSize, margin_bottom? : CssSize, margin_left? : CssSize, margin_right? : CssSize, max_height? : CssSize, min_height? : CssSize, transform_property? : Array[String], gap? : CssSize, row_gap? : CssSize, column_gap? : CssSize, inset? : CssSize, inset_inline? : CssSize, inset_block? : CssSize, content? : String, content_visibility? : CssContentVisibility, filter? : CssFilter, object_fit? : CssObjectFit, overscroll_behavior_x? : CssOverscrollBehavior, overscroll_behavior_y? : CssOverscrollBehavior, grid_template_columns? : CssGridTemplateColumns, grid_template_rows? : CssGridTemplateRows, grid_column? : CssGridArea, grid_row? : CssGridArea, grid_area? : String, justify_items? : CssJustifyItems, align_items_grid? : CssAlignItems, animation_direction? : CssAnimationDirection, animation_fill_mode? : CssAnimationFillMode, animation_play_state? : CssAnimationPlayState, animation_name? : String, animation_duration? : CssDuration, animation_timing_function? : CssTimingFunction, animation_delay? : CssDuration, animation_iteration_count? : String, font_style? : CssFontStyle, font_variant? : CssFontVariant, text_transform_enhanced? : CssTextTransform, aspect_ratio? : CssAspectRatio, scroll_behavior? : CssScrollBehavior, resize? : CssResize, container_type? : CssContainerType, container_name? : String, color_scheme? : CssColorScheme, accent_color? : CssColor, width_extended? : CssSize, height_extended? : CssSize, margin_extended? : CssSize, padding_extended? : CssSize, border_radius_obj? : CssBorderRadius, box_shadow_obj? : CssBoxShadow, background_image? : CssBackgroundImage, clip_path? : CssClipPath, text_shadow? : CssTextShadow, letter_spacing_type? : CssLetterSpacing, pointer_events? : CssPointerEvents, transition_prop? : CssTransitionProperty) -> RespoStyle

    Create a new RespoStyle object

    str_spaced

    source
    fn str_spaced(wrap_parens? : Bool, s : Array[&Show]) -> String

    convert a list of strings to a single string with spaces between them, mainly used for concatenating class names

    Source Files

    Powered by MoonBit

    Site sourceReport issuePackagesBuild queueSkillsStatistics

    © 2026 mooncakes.io