moonstyle

    MoonStyle — Typed atomic CSS for MoonBit.

    Download zip
    Author
    Version
    0.1.0
    License
    MIT
    Last updated
    10 hours ago
    Downloads
    4

    #MoonStyle

    MoonStyle — Typed atomic CSS for MoonBit.

    为 MoonBit 提供类型安全的原子化 CSS。

    MoonStyle compiles typed MoonBit style registries into deterministic atomic CSS and nominal MoonBit mappings. Applications compose those mappings with last-applied-wins conflict rules and bind checked dynamic values through CSS custom properties. Ordinary static styles are extracted at build time.

    MoonBit is the only supported authoring language. The product ships as a normal MoonBit module with an explicit native extractor. JavaScript tools orchestrate builds and tests; they do not implement CSS semantics or provide a JavaScript authoring API. StyleX is a pinned test-only semantic oracle; its API shape and @stylexjs/atoms authoring form are outside the compatibility target.

    Rabbita is the only Tier-1 framework integration for 0.1.0. The optional Luna adapter is experimental and carries no compatibility promise. The semantic core and runtime remain framework-neutral.

    #Start here

    #Author and apply styles

    Import lampclaw/moonstyle as @moonstyle in your style package:

    pub fn registry() -> @moonstyle.Registry {
    @moonstyle.registry("example/styles", [
    @moonstyle.rule("card")
    .padding(@moonstyle.px(12))
    .color(@moonstyle.rgb(24, 32, 40))
    .opacity(0.8, when=@moonstyle.hover),
    ])
    }

    The native extractor emits CSS, generated mappings, their moon.pkg, and a versioned bundle. Import the mappings as @styles and lampclaw/moonstyle/rabbita as @css in the view:

    let attrs = @css.attrs(@styles.card)

    Compose generated styles, conditions, and checked dynamic accessors with one immutable list:

    let composed = @moonstyle.compose(@styles.card)
    .when(active, @styles.active)
    .add(@styles.meter(progress))

    match @css.try_attrs(composed) {
    Ok(attrs) => render(attrs)
    Err(errors) => render_dynamic_errors(errors)
    }

    The quickstart supplies complete compilable packages. Tested value examples cover typed math, gradients, background layers, and Grid. Additional examples cover common values and effects, CSS coverage, and themes and SVG paint.

    #Current delivery

    The public MoonBit library is available on Mooncakes as lampclaw/moonstyle@0.1.0. Consumers can also use local paths or exact Git commits. The private @lampclaw/moonstyle-tooling package supplies the CLI and Vite adapter and is installed from packed source. Source is hosted at lucavance/moonstyle.

    The current status records implemented capabilities, schema versions, validation commands and remaining delivery gates. Local validation does not establish hosted CI or fourteen observation dates. See distribution and release policy.

    Typed declarations, nominal component contracts, and explicit composition are the main reasons to use MoonStyle in a MoonBit application. Utility classes can suit a project that prefers preset design scales and existing tooling. MoonStyle requires registries, extraction, and generated artifacts; it does not ship a complete preset design system or merge arbitrary utility strings. See the styling-system comparison for these tradeoffs and the limits of StyleX compatibility.

    #Repository development

    The root moon.mod declares lampclaw/moonstyle, with library source in src/. The validation/ submodule contains the Rabbita application, extractor bridge and fixtures. Luna remains an independent optional module under packages/moonstyle-luna/. The private validation Node workspace consumes the root tooling package through workspace:*.

    The pinned environment is defined in toolchain.json. From that environment:

    moon update vp install --frozen-lockfile vp dev

    Run moon update after installing the pinned MoonBit toolchain, before the first .mbtx script. It initializes the registry index on a fresh machine; standalone scripts pin moonbitlang/async to 0.22.5.

    vp run check-docs vp check vp run validate

    validate includes independent consumption of a development snapshot. vp run validate-ci verifies the actual clean commit and also requires the separately installed oracle and all three browsers. Follow CI and observation for the candidate gates and data maintenance for reviewed generation updates.

    #License and provenance

    MoonStyle is MIT licensed and adapts selected StyleX atomic CSS semantics to MoonBit. The hashing implementation and derived semantic behavior retain the upstream Meta copyright and MIT permission notice. See LICENSE and NOTICE for attribution and the pinned reference release. Each independently packaged MoonBit module carries both files.

    AlignmentFallbacks

    AnchorNamesFallbacks

    AnimationDirectionFallbacks

    AnimationDirectionList

    AnimationFillModeFallbacks

    AnimationFillModeList

    AnimationIterations

    AnimationIterationsFallbacks

    AnimationPlayStateFallbacks

    AnimationPlayStateList

    AnimationTimeline

    AnimationTimelines

    AnimationTimelinesFallbacks

    AttributeCase

    AttributeOperator

    BackfaceVisibilityFallbacks

    BackgroundAttachmentFallbacks

    BackgroundBoxFallbacks

    BackgroundLayer

    BackgroundLayers

    BackgroundSize

    BackgroundSizeFallbacks

    BackgroundSizeList

    BackgroundSizeListFallbacks

    BaselineSourceValueFallbacks

    BlendModeFallbacks

    BorderCollapseValueFallbacks

    BorderColorsFallbacks

    BorderImageRepeatValue

    BorderImageRepeatValueFallbacks

    BorderRadiiFallbacks

    BorderSideFallbacks

    BorderStyleFallbacks

    BorderStylesFallbacks

    BorderWidthsFallbacks

    BoxDecorationBreakValue

    BoxDecorationBreakValueFallbacks

    BoxShadowList

    BoxShadowListFallbacks

    BoxSizeFallbacks

    BoxSizeKeyword

    BoxSizingFallbacks

    BreakAfterValueFallbacks

    BreakBeforeValueFallbacks

    BreakInsideValueFallbacks

    CaptionSideValueFallbacks

    ClearModeFallbacks

    ClipPathFallbacks

    ClipRuleValueFallbacks

    ColorInterpolation

    ColorInterpolationFiltersValue

    ColorInterpolationFiltersValueFallbacks

    ColorSchemeFallbacks

    ColorSchemeName

    ColumnFillValueFallbacks

    ColumnSpanValueFallbacks

    Condition

    ConicPosition

    ContainFallbacks

    ContainerFeature

    ContainerNames

    ContainerNamesFallbacks

    ContainerOperator

    ContainerStyleQuery

    ContainerTypeValueFallbacks

    ContentValueFallbacks

    ContentVisibilityFallbacks

    CornerRadiusFallbacks

    CounterChange

    CounterChanges

    CounterChangesFallbacks

    CssWideKeyword

    CursorFallbacks

    DependencyRef

    DirectionValueFallbacks

    DisplayFallbacks

    DoubleFallbacks

    DynamicValueError

    EasingFunction

    EasingFunctionFallbacks

    EasingFunctionList

    EmptyCellsValueFallbacks

    EnvironmentLength

    FieldSizingValueFallbacks

    FillRuleValueFallbacks

    FilterFunction

    FilterListFallbacks

    FlexBasisFallbacks

    FlexDirectionFallbacks

    FlexWrapFallbacks

    FloatModeFallbacks

    FontKerningFallbacks

    FontOpticalSizingFallbacks

    FontSizeFallbacks

    FontSizeKeyword

    FontStretchFallbacks

    FontStyleFallbacks

    FontSynthesisSmallCapsValue

    FontSynthesisSmallCapsValueFallbacks

    FontSynthesisStyleValue

    FontSynthesisStyleValueFallbacks

    FontSynthesisValueFallbacks

    FontSynthesisWeightValue

    FontSynthesisWeightValueFallbacks

    FontVariantCapsFallbacks

    FontVariantEmojiValue

    FontVariantEmojiValueFallbacks

    FontVariantNumeric

    FontVariantNumericFallbacks

    FontVariantNumericPart

    FontVariantPositionValue

    FontVariantPositionValueFallbacks

    ForcedColorAdjustValue

    ForcedColorAdjustValueFallbacks

    GradientDirection

    GradientPosition

    GridAutoFlowFallbacks

    GridLineFallbacks

    GridTemplateAreas

    GridTemplateAreasFallbacks

    GridTrackList

    GridTrackListFallbacks

    HangingPunctuationValue

    HangingPunctuationValueFallbacks

    HueInterpolation

    HyphensFallbacks

    ImageCandidate

    ImageRenderingFallbacks

    IntegerFallbacks

    KeyframeStep

    LayerAttachment

    LengthFallbacks

    LengthPercentage

    LengthPercentageFallbacks

    LineBreakValueFallbacks

    LineHeightFallbacks

    LineStyleFallbacks

    LineWidthFallbacks

    LineWidthKeyword

    ListStylePositionFallbacks

    MarkerDefinition

    MaskBoxFallbacks

    MaskClipFallbacks

    MaskComposite

    MaskCompositeFallbacks

    MaskCompositeList

    MaskImageList

    MaskImageListFallbacks

    MaskModeFallbacks

    MaskTypeValueFallbacks

    MathShiftValueFallbacks

    MathStyleValueFallbacks

    MediaFeature

    MediaFeatureOperator

    MediaQuery

    MediaType

    MotionPathFallbacks

    MotionPreference

    NumberFallbacks

    ObjectFitFallbacks

    OffsetAnchorFallbacks

    OffsetPosition

    OffsetPositionFallbacks

    OffsetRotateFallbacks

    OutlineFallbacks

    OverflowAnchorValueFallbacks

    OverflowFallbacks

    OverflowWrapFallbacks

    OverscrollBehaviorBlockValue

    OverscrollBehaviorBlockValueFallbacks

    OverscrollBehaviorFallbacks

    OverscrollBehaviorInlineValue

    OverscrollBehaviorInlineValueFallbacks

    OverscrollBehaviorValue

    OverscrollBehaviorValueFallbacks

    PageValue

    The auto keyword or a case-sensitive CSS named page.

    PageValueFallbacks

    PaintOrderValueFallbacks

    PathData

    A validated SVG path-data string, shared by clipping and motion paths.

    PercentageFallbacks

    PlaceItemsFallbacks

    PointerEventsFallbacks

    PositionAnchor

    PositionAnchorFallbacks

    PositionAreaFallbacks

    PositionAreaHorizontal

    PositionAreaVertical

    PositionFallbacks

    PositionListFallbacks

    PositionModeFallbacks

    PositionTryFallback

    PositionTryFallbacks

    PositionTryFallbacksFallbacks

    PositionTryOrder

    PositionTryOrderFallbacks

    PositionTryRule

    PositionTryTactic

    PositionTryValue

    PositionTryValueFallbacks

    PositionVisibilityValue

    PositionVisibilityValueFallbacks

    PreferredColorScheme

    PrintColorAdjustValue

    PrintColorAdjustValueFallbacks

    PseudoClass

    PseudoElement

    Registry

    RepeatStyleFallbacks

    RepeatStyleList

    RepeatStyleListFallbacks

    ResizeModeFallbacks

    RubyAlignValueFallbacks

    RubyPositionValueFallbacks

    ScrollBehaviorFallbacks

    ScrollSnapAlignValueFallbacks

    ScrollSnapStopValueFallbacks

    ScrollSnapTypeValueFallbacks

    ScrollTimelineAxisValue

    ScrollTimelineAxisValueFallbacks

    ScrollbarColor

    ScrollbarColorFallbacks

    ScrollbarWidthValueFallbacks

    SelectorMarker

    A generated marker is both a style input (it applies its stable marker class) and a typed selector identity consumable by relational conditions.

    SelectorState

    ShapeRenderingValueFallbacks

    SourceSpan

    SpeakValueFallbacks

    StaticStyleInput

    StringFallbacks

    StrokeLinecapValueFallbacks

    StrokeLinejoinValueFallbacks

    StyleResult

    The result of an operation that can fail: either Ok(value) or Err(error).

    SupportsCondition

    SvgPaint

    The reviewed SVG paint subset: a color expression or none. Resource paints and context paints require a separate reviewed API.

    SvgPaintFallbacks

    TableLayoutValueFallbacks

    TextAlignFallbacks

    TextAnchorValueFallbacks

    TextBoxTrimValueFallbacks

    TextCombineUprightValue

    TextCombineUprightValueFallbacks

    TextDecorationLineFallbacks

    TextDecorationSkipInkValue

    TextDecorationSkipInkValueFallbacks

    TextDecorationStyleFallbacks

    TextJustifyValueFallbacks

    TextOrientationValueFallbacks

    TextOverflowFallbacks

    TextRenderingValueFallbacks

    TextShadowList

    TextShadowListFallbacks

    TextTransformFallbacks

    TextUnderlinePosition

    TextUnderlinePositionFallbacks

    TextWrapModeFallbacks

    TextWrapStyleFallbacks

    TimelineNames

    TimelineNamesFallbacks

    TimelineRange

    TimelineRangeFallbacks

    TimelineRangeName

    TimelineScope

    TimelineScopeFallbacks

    TimelineScroller

    TokenOverride

    TouchActionFallbacks

    TouchActionPart

    TransformBoxValueFallbacks

    TransformFunction

    TransformList

    TransformListFallbacks

    TransformOrigin

    TransformOriginFallbacks

    TransformStyleFallbacks

    TransitionPropertyFallbacks

    TransitionPropertyList

    UnicodeBidiValueFallbacks

    UserSelectFallbacks

    VariableScope

    VariableUse

    Erased variable metadata carried by the authoring builder. It never appears in schema-v5 artifacts; the registry lowers it to the existing VariableSet representation before extraction.

    VariantSelection

    VectorEffectValueFallbacks

    ViewTimelineAxisValue

    ViewTimelineAxisValueFallbacks

    ViewTransitionClass

    ViewTransitionClassDefinition

    ViewTransitionClassFallbacks

    ViewTransitionName

    ViewTransitionNameFallbacks

    ViewportOrientation

    VisibilityFallbacks

    WhiteSpaceCollapseFallbacks

    WordBreakFallbacks

    WritingModeValueFallbacks

    RegistryBuilder

    RegistryBuilder::extra_token

    RegistryBuilder::rules

    fn RegistryBuilder::rules(self : RegistryBuilder, rules : Array[
    Rule
    ], export_name? : String) -> RegistryBuilder

    StyleSheet

    pub struct StyleSheet {
    export_name : String
    rules : Array[
    Rule
    ]
    }

    anchor_name

    fn anchor_name(value : String) ->
    AnchorName

    background_contain

    background_cover

    basis_content

    boolean_variant_is

    fn boolean_variant_is(axis : String, enabled : Bool) ->
    VariantSelection

    color_scheme

    Declares supported schemes in preference order. Empty lists are diagnosed during extraction; repeated schemes are valid CSS and retain their order.

    color_space

    fn color_space(space :
    ColorSpace
    , first : Double, second : Double, third : Double, alpha? : Double) ->
    Color

    contain_none

    contain_strict

    container_name

    fn container_name(value : String) ->
    ContainerName

    container_names

    fn container_names(values : Array[String]) ->
    ContainerNames

    content_text

    fn content_text(value : String) ->
    ContentValue

    counter_change

    The integer is explicit: reset/set usually use zero; increment usually uses one.

    counter_name

    fn counter_name(value : String) ->
    CounterName

    cubic_bezier

    fn cubic_bezier(x1 : Double, y1 : Double, x2 : Double, y2 : Double) ->
    EasingFunction

    define_marker

    define_view_transition_class

    Define optional styles for the four view-transition pseudo-elements.

    test {
    let transition = @builder.define_view_transition_class("card")
    .old(@builder.rule("outgoing").opacity(0.5))
    .new(@builder.rule("incoming").opacity(1.0))
    assert_eq(transition.to_ir().styles.length(), 2)
    }

    deg

    fn deg(value : Double) ->
    Angle

    dependency_ref

    fn dependency_ref(module_name : String, semantic_digest : String) ->
    DependencyRef

    dvh

    fn dvh(value : Double) ->
    Length

    expect_dynamic

    first_child

    first_letter

    first_line

    fit_content_size

    Intrinsic box sizing is distinct from the Grid fit_content constructor.

    focus_visible

    focus_within

    font_variant_numeric_normal

    grid_line

    fn grid_line(value : Int) ->
    GridLine

    grid_span

    fn grid_span(value : Int) ->
    GridLine

    grid_template_areas

    hex_color

    fn hex_color(value : String) ->
    Color

    hsl

    fn hsl(hue : Double, saturation : Double, lightness : Double) ->
    Color

    image_none

    integer

    lab

    fn lab(lightness : Double, a : Double, b : Double, alpha? : Double) ->
    Color

    last_child

    layer

    fn layer(name : String) ->
    When

    lch

    fn lch(lightness : Double, chroma : Double, hue :
    Angle
    , alpha? : Double) ->
    Color

    length_percentage_from_length

    length_percentage_from_percentage

    line_height_normal

    line_width_from_length

    lvh

    fn lvh(value : Double) ->
    Length

    marker_any_sibling

    marker_sibling_after

    marker_sibling_before

    media_feature

    named_color

    fn named_color(name : String) ->
    Color

    Accepts the standard named colors, currentColor, transparent and CSS system colors.

    named_grid_line

    fn named_grid_line(value : String) ->
    GridLine

    named_lines

    fn named_lines(names : Array[String]) ->
    GridTrack

    normal_color_scheme

    number

    fn number(value : Double) ->
    Number

    offset_anchor_auto

    offset_position_auto

    offset_position_normal

    offset_rotation

    fn[A :
    AngleMathInput
    ] offset_rotation(angle : A, automatic? : Bool, reverse? : Bool) ->
    OffsetRotate

    oklab

    fn oklab(lightness : Double, a : Double, b : Double, alpha? : Double) ->
    Color

    oklch

    fn oklch(lightness : Double, chroma : Double, hue :
    Angle
    , alpha? : Double) ->
    Color

    only_child

    outline_auto_color

    outline_color_from_color

    page_name

    fn page_name(value : String) ->
    PageValue

    Names retain their case. CSS-wide keywords and auto are not page names. Invalid names produce extraction diagnostics.

    test {
    assert_eq(@values.page_name("Report").to_css(), "Report")
    assert_eq(@values.page_auto().to_css(), "auto")
    }

    path_data

    fn path_data(value : String) ->
    PathData

    percent

    fn percent(value : Int) ->
    Length

    percentage

    fn percentage(value : Double) ->
    Percentage

    placeholder

    placeholder_shown

    let placeholder_shown :
    When

    position_center

    position_try_named

    position_try_rule

    fn position_try_rule(name : String) ->
    PositionTryRule

    Define a named fallback using CSS positioning descriptors.

    test {
    let fallback = @builder.position_try_rule("tooltip")
    .inset_inline_start(@values.px(8))
    .max_inline_size(@values.percent(90))
    assert_eq(fallback.to_ir().descriptors.length(), 2)
    }

    ratio

    fn ratio(width : Int, height : Int) ->
    Ratio

    ratio_auto

    read_write

    recipe_rule

    registry_builder

    fn registry_builder(module_name : String) -> RegistryBuilder

    rem

    fn rem(value : Double) ->
    Length

    rgb

    fn rgb(red : Int, green : Int, blue : Int) ->
    Color

    rgba

    fn rgba(red : Int, green : Int, blue : Int, alpha : Double) ->
    Color

    rule

    fn rule(name : String) ->
    Rule

    scale_transform

    fn scale_transform(x : Double, y? : Double?) ->
    TransformFunction

    scrollbar_colors

    The first color paints the thumb, the second the track. Both retain nested color Token/Slot references and color expression identities.

    seconds

    fn seconds(value : Double) ->
    Time

    selector_attribute

    selector_attribute_equals

    fn[T :
    MarkerInput
    ] selector_attribute_equals(marker : T, name : String, value : String) ->
    MarkerSelector

    sheet

    fn sheet(export_name : String, rules : Array[
    Rule
    ]) -> StyleSheet

    source_span

    fn source_span(file : String, line : Int, column : Int, end_line? : Int, end_column? : Int, symbol? : String) ->
    SourceSpan

    steps

    fn steps(count : Int, at_start? : Bool) ->
    EasingFunction

    style_contract

    fn style_contract(name : String) ->
    StyleContract

    styles

    #deprecated("Use compose(input) for a non-empty composition or style_list() for an empty composition")
    fn[T :
    StyleInput
    ] styles(initial : Array[T]) ->
    StyleList

    supports_declaration

    fn supports_declaration(property : String, value : String) ->
    SupportsCondition

    supports_property

    fn supports_property(property : String, value : String) ->
    When

    svh

    fn svh(value : Double) ->
    Length

    timeline_name

    fn timeline_name(value : String) ->
    TimelineName

    timeline_names_none

    timeline_range_normal

    timeline_scope_all

    timeline_scope_none

    track_max_content

    track_min_content

    transparent

    turn

    fn turn(value : Double) ->
    Angle

    unsafe_at_rule

    fn unsafe_at_rule(value : String) ->
    When

    unsafe_pseudo

    fn unsafe_pseudo(value : String) ->
    When

    unsafe_pseudo_element

    fn unsafe_pseudo_element(value : String) ->
    When

    url

    fn url(value : String) ->
    Url

    variable_scope

    fn variable_scope(scope : String) ->
    VariableScope

    variant_is

    fn variant_is(axis : String, value : String) ->
    VariantSelection

    view_transition_class

    fn view_transition_class(value : String) ->
    ViewTransitionClass

    view_transition_name

    fn view_transition_name(value : String) ->
    ViewTransitionName

    vmax

    fn vmax(value : Double) ->
    Length

    vmin

    fn vmin(value : Double) ->
    Length

    Powered by MoonBit

    Site sourceReport issueModulesSkillsBuild queueStatistics

    © 2026 mooncakes.io