🥮 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.6
License
Apache-2.0
Repository
Last updated
3 months 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.

#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

#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

# 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

#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
}

impl Eq for CssAlignItems

CssAnimationDirection

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

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
}

CssAnimationPlayState

source
pub(all) enum CssAnimationPlayState {
  Running
  Paused
}

CssAspectRatio

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

CSS Aspect Ratio

CssBackgroundSize

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

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

CssBorderStyle

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

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")

CssBoxSizing

source
pub(all) enum CssBoxSizing {
  BorderBox
  ContentBox
}

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")
impl Eq for CssBoxSizing

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
}

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 Eq for CssColor
impl Show for CssColor

CssContainerType

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

CSS Container Query Properties

CssContentVisibility

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

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
}

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 Eq for CssCursor
impl Show for CssCursor

CssDisplay

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

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 Eq for CssDisplay
impl Show for CssDisplay

CssDuration

source
pub(all) enum CssDuration {
  Ms(Int)
  S(Float)
}

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
}

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
}

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
}

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
}

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
}

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 Eq for CssFlexWrap
impl Show for CssFlexWrap

CssFontStyle

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

CSS Typography Enhancements
impl Eq for CssFontStyle

CssFontVariant

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

CssFontWeight

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

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")
impl Eq for CssFontWeight

CssFunction

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

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 Eq for CssFunction
impl Show for CssFunction

CssGridArea

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

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 Eq for CssGridArea
impl Show for CssGridArea

CssGridTemplateColumns

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

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)
}

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
}

CssLineHeight

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

impl Eq for CssLineHeight

CssLogicalProperty

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

CSS Logical Properties

CssObjectFit

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

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")
impl Eq for CssObjectFit

CssOutline

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

impl Eq for CssOutline
impl Show for CssOutline

CssOverflow

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

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 Eq for CssOverflow
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")

CssPosition

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

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 Eq for CssPosition
impl Show for CssPosition

CssResize

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

CSS Resize Property
impl Eq for CssResize
impl Show for CssResize

CssScrollBehavior

source
pub(all) enum CssScrollBehavior {
  Auto
  Smooth
}

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)
  Lvh(Float)
  Lvw(Float)
  Svh(Float)
  Svw(Float)
  Function(CssFunction)
  Custom(String)
}

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 Eq for CssSize
impl Show for CssSize

CssTextAlign

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

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")
impl Eq for CssTextAlign

CssTextDecoration

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

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
}

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")

CssTextTransform

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

CssTimingFunction

source
pub(all) enum CssTimingFunction {
  Ease
  Linear
  EaseIn
  EaseOut
  EaseInOut
  StepStart
  StepEnd
}

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)
}

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)")
impl Eq for CssTransform

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) type RespoStyle Array[(String, String)]

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 Eq for RespoStyle
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::inner

source
#deprecated("Use `struct T(A)` to declare a newtype and use `.0` access the underlying type instead.")
fn RespoStyle::inner(self : RespoStyle) -> Array[(String, String)]
Convert newtype to its underlying type, automatically derived.

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, z_index? : Int, flex? : Float, flex_direction? : CssFlexDirection, justify_content? : CssFlexJustifyContent, align_items? : CssFlexAlignItems, align_content? : CssFlexAlignContent, order? : Int, text_decoration? : CssTextDecoration, text_transform? : String, line_height? : CssLineHeight, letter_spacing? : String, white_space? : String, word_break? : CssWordBreak, 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, 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, transform_property? : Array[String], gap? : 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, width_extended? : CssSize, height_extended? : CssSize, margin_extended? : CssSize, padding_extended? : CssSize) -> 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