tiny.css.property

1/// One longhand the expansion produced.2pub const Expansion = struct {3    id: Id,4    value: Value,5};

1/// The shorthands this engine expands. A shorthand never reaches a computed2/// style: the sheet lowers it into its longhands at parse time.3pub const Shorthand = enum(u8) {4    margin,5    padding,6    border_width,7    border_style,8    border_color,9    inset,10    scroll_margin,11    scroll_padding,12    border_radius,13    gap,14    overflow,15    background_position,16    flex,17    flex_flow,18    border,19    border_top,20    border_right,21    border_bottom,22    border_left,23    outline,24    background,25    text_decoration,26};

1/// Every property this engine computes. Closed, so a declaration carries an2/// integer rather than a byte slice and a computed style is a dense array.3pub const Id = enum(u32) {4    invalid = 0,5    accent_color,6    align_content,7    align_items,8    align_self,9    background_attachment,10    background_clip,11    background_color,12    background_image,13    background_origin,14    background_position_x,15    background_position_y,16    background_repeat,17    background_size,18    border_bottom_color,19    border_bottom_left_radius,20    border_bottom_right_radius,21    border_bottom_style,22    border_bottom_width,23    border_left_color,24    border_left_style,25    border_left_width,26    border_right_color,27    border_right_style,28    border_right_width,29    border_top_color,30    border_top_left_radius,31    border_top_right_radius,32    border_top_style,33    border_top_width,34    bottom,35    box_sizing,36    caret_color,37    color,38    column_gap,39    content,40    cursor,41    direction,42    display,43    flex_basis,44    flex_direction,45    flex_grow,46    flex_shrink,47    flex_wrap,48    font_family,49    font_size,50    font_style,51    font_weight,52    height,53    justify_content,54    justify_items,55    justify_self,56    left,57    letter_spacing,58    line_height,59    list_style_position,60    list_style_type,61    margin_bottom,62    margin_left,63    margin_right,64    margin_top,65    max_height,66    max_width,67    min_height,68    min_width,69    object_fit,70    opacity,71    order,72    outline_color,73    outline_offset,74    outline_style,75    outline_width,76    overflow_wrap,77    overflow_x,78    overflow_y,79    padding_bottom,80    padding_left,81    padding_right,82    padding_top,83    pointer_events,84    position,85    right,86    row_gap,87    scroll_margin_bottom,88    scroll_margin_left,89    scroll_margin_right,90    scroll_margin_top,91    scroll_padding_bottom,92    scroll_padding_left,93    scroll_padding_right,94    scroll_padding_top,95    text_align,96    text_decoration_color,97    text_decoration_line,98    text_decoration_style,99    text_decoration_thickness,100    text_indent,101    text_overflow,102    text_transform,103    text_underline_offset,104    top,105    user_select,106    vertical_align,107    visibility,108    white_space,109    width,110    word_break,111    word_spacing,112    z_index,113};

1/// The initial value, inheritance rule, and value grammar of one property.2pub const Metadata = struct {3    name: []const u8,4    inherited: bool,5    grammar: value.Grammar,6    initial: Value,7};

1/// Splits a value into top level whitespace separated components. Returns a2/// count above `max_components` when the value carries more than fit.3pub fn componentSpans(4    source: []const u8,5    start: u32,6    end: u32,7    out: *[max_components][2]u32,8) usize {9    std.debug.assert(start <= end);10    std.debug.assert(end <= source.len);11    var tokenizer = token.Tokenizer{ .source = source[0..end], .index = start };12    var count: usize = 0;13    var open: ?u32 = null;14    var last: u32 = start;15    var depth: u32 = 0;16    var guard: usize = 0;17    while (guard <= source.len + 1) : (guard += 1) {18        const next = tokenizer.next();19        if (next.kind == .eof) break;20        switch (next.kind) {21            .function, .left_paren => depth += 1,22            .right_paren => depth -|= 1,23            else => {},24        }25        if (next.kind == .whitespace and depth == 0) {26            if (open) |begin| {27                if (count < max_components) out[count] = .{ begin, last };28                count += 1;29                open = null;30            }31            continue;32        }33        if (open == null) open = next.start;34        last = next.end;35    }36    if (open) |begin| {37        if (count < max_components) out[count] = .{ begin, last };38        count += 1;39    }40    return count;41}

1/// Expands `source[start..end]` under `kind` into `out`, returning the number2/// of longhands written. Zero means the value did not parse and the caller3/// records a diagnostic instead.4pub fn expand(5    kind: Shorthand,6    source: []const u8,7    start: u32,8    end: u32,9    out: *[max_expansions]Expansion,10) usize {11    var spans: [max_components][2]u32 = undefined;12    const components = componentSpans(source, start, end, &spans);13    if (components == 0 or components > max_components) return 0;14    const targets = longhands(kind);15    if (wideKeyword(source, spans[0], components)) |word| {16        for (targets, 0..) |id, index| out[index] = .{ .id = id, .value = Value.keyword(word) };17        return targets.len;18    }19    return switch (kind) {20        .margin, .padding, .border_width, .border_style, .border_color => box(targets, source, spans[0..components], out),21        .inset, .scroll_margin, .scroll_padding => box(targets, source, spans[0..components], out),22        .border_radius => corner(targets, source, spans[0..components], out),23        .gap, .overflow, .background_position => pair(targets, source, spans[0..components], out),24        .flex => flex(source, spans[0..components], out),25        .flex_flow => components_any(targets, source, spans[0..components], out),26        .border, .border_top, .border_right, .border_bottom, .border_left => components_any(targets, source, spans[0..components], out),27        .outline, .background, .text_decoration => components_any(targets, source, spans[0..components], out),28    };29}

1/// The longhands a shorthand writes, in the order the expansion fills them.2pub fn longhands(kind: Shorthand) []const Id {3    return switch (kind) {4        .margin => &.{ .margin_top, .margin_right, .margin_bottom, .margin_left },5        .padding => &.{ .padding_top, .padding_right, .padding_bottom, .padding_left },6        .border_width => &.{7            .border_top_width, .border_right_width, .border_bottom_width, .border_left_width,8        },9        .border_style => &.{10            .border_top_style, .border_right_style, .border_bottom_style, .border_left_style,11        },12        .border_color => &.{13            .border_top_color, .border_right_color, .border_bottom_color, .border_left_color,14        },15        .inset => &.{ .top, .right, .bottom, .left },16        .scroll_margin => &.{17            .scroll_margin_top,    .scroll_margin_right,18            .scroll_margin_bottom, .scroll_margin_left,19        },20        .scroll_padding => &.{21            .scroll_padding_top,    .scroll_padding_right,22            .scroll_padding_bottom, .scroll_padding_left,23        },24        .border_radius => &.{25            .border_top_left_radius,     .border_top_right_radius,26            .border_bottom_right_radius, .border_bottom_left_radius,27        },28        .gap => &.{ .row_gap, .column_gap },29        .overflow => &.{ .overflow_x, .overflow_y },30        .background_position => &.{ .background_position_x, .background_position_y },31        .flex => &.{ .flex_grow, .flex_shrink, .flex_basis },32        .flex_flow => &.{ .flex_direction, .flex_wrap },33        .border => &.{ .border_top_width, .border_top_style, .border_top_color },34        .border_top => &.{ .border_top_width, .border_top_style, .border_top_color },35        .border_right => &.{ .border_right_width, .border_right_style, .border_right_color },36        .border_bottom => &.{ .border_bottom_width, .border_bottom_style, .border_bottom_color },37        .border_left => &.{ .border_left_width, .border_left_style, .border_left_color },38        .outline => &.{ .outline_width, .outline_style, .outline_color },39        .background => &.{ .background_color, .background_image },40        .text_decoration => &.{41            .text_decoration_line, .text_decoration_color, .text_decoration_style,42        },43    };44}

1/// The most whitespace separated components one shorthand value may carry.2pub const max_components: usize = 4;

1/// The most longhands one shorthand produces.2pub const max_expansions: usize = 4;

1/// Resolves a shorthand name, ASCII case insensitively.2pub fn shorthandOf(name: []const u8) ?Shorthand {3    inline for (shorthand_names) |entry| {4        if (std.ascii.eqlIgnoreCase(name, entry.name)) return entry.kind;5    }6    return null;7}

1/// The number of slots a dense per property array needs, `invalid` included.2pub const count: usize = entries.len + 1;

1/// The property table, sorted by name so that `lookup` is a binary search.2pub const entries = [_]Metadata{3    .{ .name = "accent-color", .inherited = false, .grammar = .color, .initial = Value.keyword(.currentcolor) },4    .{ .name = "align-content", .inherited = false, .grammar = .justify, .initial = Value.keyword(.normal) },5    .{ .name = "align-items", .inherited = false, .grammar = .@"align", .initial = Value.keyword(.normal) },6    .{ .name = "align-self", .inherited = false, .grammar = .align_self, .initial = Value.keyword(.auto) },7    .{ .name = "background-attachment", .inherited = false, .grammar = .background_attachment, .initial = Value.keyword(.scroll) },8    .{ .name = "background-clip", .inherited = false, .grammar = .background_box, .initial = Value.keyword(.border_box) },9    .{ .name = "background-color", .inherited = false, .grammar = .color, .initial = Value.color(color.transparent) },10    .{ .name = "background-image", .inherited = false, .grammar = .url, .initial = Value.keyword(.none) },11    .{ .name = "background-origin", .inherited = false, .grammar = .background_box, .initial = Value.keyword(.padding_box) },12    .{ .name = "background-position-x", .inherited = false, .grammar = .length_percentage, .initial = Value.percent(0) },13    .{ .name = "background-position-y", .inherited = false, .grammar = .length_percentage, .initial = Value.percent(0) },14    .{ .name = "background-repeat", .inherited = false, .grammar = .background_repeat, .initial = Value.keyword(.repeat) },15    .{ .name = "background-size", .inherited = false, .grammar = .background_size, .initial = Value.keyword(.auto) },16    .{ .name = "border-bottom-color", .inherited = false, .grammar = .color, .initial = Value.keyword(.currentcolor) },17    .{ .name = "border-bottom-left-radius", .inherited = false, .grammar = .length_percentage, .initial = Value.length(0, .px) },18    .{ .name = "border-bottom-right-radius", .inherited = false, .grammar = .length_percentage, .initial = Value.length(0, .px) },19    .{ .name = "border-bottom-style", .inherited = false, .grammar = .border_style, .initial = Value.keyword(.none) },20    .{ .name = "border-bottom-width", .inherited = false, .grammar = .length, .initial = Value.length(3, .px) },21    .{ .name = "border-left-color", .inherited = false, .grammar = .color, .initial = Value.keyword(.currentcolor) },22    .{ .name = "border-left-style", .inherited = false, .grammar = .border_style, .initial = Value.keyword(.none) },23    .{ .name = "border-left-width", .inherited = false, .grammar = .length, .initial = Value.length(3, .px) },24    .{ .name = "border-right-color", .inherited = false, .grammar = .color, .initial = Value.keyword(.currentcolor) },25    .{ .name = "border-right-style", .inherited = false, .grammar = .border_style, .initial = Value.keyword(.none) },26    .{ .name = "border-right-width", .inherited = false, .grammar = .length, .initial = Value.length(3, .px) },27    .{ .name = "border-top-color", .inherited = false, .grammar = .color, .initial = Value.keyword(.currentcolor) },28    .{ .name = "border-top-left-radius", .inherited = false, .grammar = .length_percentage, .initial = Value.length(0, .px) },29    .{ .name = "border-top-right-radius", .inherited = false, .grammar = .length_percentage, .initial = Value.length(0, .px) },30    .{ .name = "border-top-style", .inherited = false, .grammar = .border_style, .initial = Value.keyword(.none) },31    .{ .name = "border-top-width", .inherited = false, .grammar = .length, .initial = Value.length(3, .px) },32    .{ .name = "bottom", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },33    .{ .name = "box-sizing", .inherited = false, .grammar = .box_sizing, .initial = Value.keyword(.content_box) },34    .{ .name = "caret-color", .inherited = false, .grammar = .color, .initial = Value.keyword(.currentcolor) },35    .{ .name = "color", .inherited = true, .grammar = .color, .initial = Value.color(color.pack(0, 0, 0, 255)) },36    .{ .name = "column-gap", .inherited = false, .grammar = .gap, .initial = Value.keyword(.normal) },37    .{ .name = "content", .inherited = false, .grammar = .content, .initial = Value.keyword(.normal) },38    .{ .name = "cursor", .inherited = true, .grammar = .cursor, .initial = Value.keyword(.auto) },39    .{ .name = "direction", .inherited = true, .grammar = .direction, .initial = Value.keyword(.ltr) },40    .{ .name = "display", .inherited = false, .grammar = .display, .initial = Value.keyword(.@"inline") },41    .{ .name = "flex-basis", .inherited = false, .grammar = .flex_basis, .initial = Value.keyword(.auto) },42    .{ .name = "flex-direction", .inherited = false, .grammar = .flex_direction, .initial = Value.keyword(.row) },43    .{ .name = "flex-grow", .inherited = false, .grammar = .number, .initial = Value.number(0) },44    .{ .name = "flex-shrink", .inherited = false, .grammar = .number, .initial = Value.number(1) },45    .{ .name = "flex-wrap", .inherited = false, .grammar = .flex_wrap, .initial = Value.keyword(.nowrap) },46    .{ .name = "font-family", .inherited = true, .grammar = .font_family, .initial = Value.string(0, 0) },47    .{ .name = "font-size", .inherited = true, .grammar = .length_percentage, .initial = Value.length(1, .rem) },48    .{ .name = "font-style", .inherited = true, .grammar = .font_style, .initial = Value.keyword(.normal) },49    .{ .name = "font-weight", .inherited = true, .grammar = .font_weight, .initial = Value.number(400) },50    .{ .name = "height", .inherited = false, .grammar = .size, .initial = Value.keyword(.auto) },51    .{ .name = "justify-content", .inherited = false, .grammar = .justify, .initial = Value.keyword(.flex_start) },52    .{ .name = "justify-items", .inherited = false, .grammar = .justify, .initial = Value.keyword(.normal) },53    .{ .name = "justify-self", .inherited = false, .grammar = .align_self, .initial = Value.keyword(.auto) },54    .{ .name = "left", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },55    .{ .name = "letter-spacing", .inherited = true, .grammar = .length_normal, .initial = Value.keyword(.normal) },56    .{ .name = "line-height", .inherited = true, .grammar = .line_height, .initial = Value.keyword(.normal) },57    .{ .name = "list-style-position", .inherited = true, .grammar = .list_style_position, .initial = Value.keyword(.outside) },58    .{ .name = "list-style-type", .inherited = true, .grammar = .list_style_type, .initial = Value.keyword(.disc) },59    .{ .name = "margin-bottom", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.length(0, .px) },60    .{ .name = "margin-left", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.length(0, .px) },61    .{ .name = "margin-right", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.length(0, .px) },62    .{ .name = "margin-top", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.length(0, .px) },63    .{ .name = "max-height", .inherited = false, .grammar = .size, .initial = Value.keyword(.none) },64    .{ .name = "max-width", .inherited = false, .grammar = .size, .initial = Value.keyword(.none) },65    .{ .name = "min-height", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },66    .{ .name = "min-width", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },67    .{ .name = "object-fit", .inherited = false, .grammar = .object_fit, .initial = Value.keyword(.fill) },68    .{ .name = "opacity", .inherited = false, .grammar = .opacity, .initial = Value.number(1) },69    .{ .name = "order", .inherited = false, .grammar = .integer, .initial = Value.number(0) },70    .{ .name = "outline-color", .inherited = false, .grammar = .color, .initial = Value.keyword(.currentcolor) },71    .{ .name = "outline-offset", .inherited = false, .grammar = .length, .initial = Value.length(0, .px) },72    .{ .name = "outline-style", .inherited = false, .grammar = .border_style, .initial = Value.keyword(.none) },73    .{ .name = "outline-width", .inherited = false, .grammar = .length, .initial = Value.length(3, .px) },74    .{ .name = "overflow-wrap", .inherited = true, .grammar = .overflow_wrap, .initial = Value.keyword(.normal) },75    .{ .name = "overflow-x", .inherited = false, .grammar = .overflow, .initial = Value.keyword(.visible) },76    .{ .name = "overflow-y", .inherited = false, .grammar = .overflow, .initial = Value.keyword(.visible) },77    .{ .name = "padding-bottom", .inherited = false, .grammar = .length_percentage, .initial = Value.length(0, .px) },78    .{ .name = "padding-left", .inherited = false, .grammar = .length_percentage, .initial = Value.length(0, .px) },79    .{ .name = "padding-right", .inherited = false, .grammar = .length_percentage, .initial = Value.length(0, .px) },80    .{ .name = "padding-top", .inherited = false, .grammar = .length_percentage, .initial = Value.length(0, .px) },81    .{ .name = "pointer-events", .inherited = true, .grammar = .pointer_events, .initial = Value.keyword(.auto) },82    .{ .name = "position", .inherited = false, .grammar = .position, .initial = Value.keyword(.static) },83    .{ .name = "right", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },84    .{ .name = "row-gap", .inherited = false, .grammar = .gap, .initial = Value.keyword(.normal) },85    .{ .name = "scroll-margin-bottom", .inherited = false, .grammar = .length, .initial = Value.length(0, .px) },86    .{ .name = "scroll-margin-left", .inherited = false, .grammar = .length, .initial = Value.length(0, .px) },87    .{ .name = "scroll-margin-right", .inherited = false, .grammar = .length, .initial = Value.length(0, .px) },88    .{ .name = "scroll-margin-top", .inherited = false, .grammar = .length, .initial = Value.length(0, .px) },89    .{ .name = "scroll-padding-bottom", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },90    .{ .name = "scroll-padding-left", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },91    .{ .name = "scroll-padding-right", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },92    .{ .name = "scroll-padding-top", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },93    .{ .name = "text-align", .inherited = true, .grammar = .text_align, .initial = Value.keyword(.start) },94    .{ .name = "text-decoration-color", .inherited = false, .grammar = .color, .initial = Value.keyword(.currentcolor) },95    .{ .name = "text-decoration-line", .inherited = false, .grammar = .text_decoration_line, .initial = Value.keyword(.none) },96    .{ .name = "text-decoration-style", .inherited = false, .grammar = .border_style, .initial = Value.keyword(.solid) },97    .{ .name = "text-decoration-thickness", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },98    .{ .name = "text-indent", .inherited = true, .grammar = .length_percentage, .initial = Value.length(0, .px) },99    .{ .name = "text-overflow", .inherited = false, .grammar = .text_overflow, .initial = Value.keyword(.clip) },100    .{ .name = "text-transform", .inherited = true, .grammar = .text_transform, .initial = Value.keyword(.none) },101    .{ .name = "text-underline-offset", .inherited = true, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },102    .{ .name = "top", .inherited = false, .grammar = .length_percentage_auto, .initial = Value.keyword(.auto) },103    .{ .name = "user-select", .inherited = true, .grammar = .user_select, .initial = Value.keyword(.auto) },104    .{ .name = "vertical-align", .inherited = false, .grammar = .vertical_align, .initial = Value.keyword(.baseline) },105    .{ .name = "visibility", .inherited = true, .grammar = .visibility, .initial = Value.keyword(.visible) },106    .{ .name = "white-space", .inherited = true, .grammar = .white_space, .initial = Value.keyword(.normal) },107    .{ .name = "width", .inherited = false, .grammar = .size, .initial = Value.keyword(.auto) },108    .{ .name = "word-break", .inherited = true, .grammar = .word_break, .initial = Value.keyword(.normal) },109    .{ .name = "word-spacing", .inherited = true, .grammar = .gap, .initial = Value.keyword(.normal) },110    .{ .name = "z-index", .inherited = false, .grammar = .z_index, .initial = Value.keyword(.auto) },111};

1/// Whether `name` starts with the two dashes that mark a custom property.2pub fn isCustom(name: []const u8) bool {3    return name.len > 2 and name[0] == '-' and name[1] == '-';4}

1/// Resolves a property name, ASCII case insensitively. Custom properties are2/// not in this table: they keep their author spelling and cascade as tokens.3pub fn lookup(name: []const u8) ?Id {4    if (name.len == 0 or name.len > max_name_bytes) return null;5    var buffer: [max_name_bytes]u8 = undefined;6    for (name, 0..) |byte, index| buffer[index] = std.ascii.toLower(byte);7    const folded = buffer[0..name.len];8    var low: usize = 0;9    var high: usize = entries.len;10    while (low < high) {11        const middle = low + (high - low) / 2;12        switch (std.mem.order(u8, entries[middle].name, folded)) {13            .lt => low = middle + 1,14            .gt => high = middle,15            .eq => return @fromBackingInt(@intCast(middle + 1)),16        }17    }18    return null;19}

1/// The metadata of `id`. Asserts that the identifier names a real property.2pub fn metadata(id: Id) Metadata {3    std.debug.assert(id != .invalid);4    return entries[@backingInt(id) - 1];5}

1//! The closed property set: identifiers, initial values, inheritance, and the2//! value grammar each property accepts.3//!4//! A declaration carries `Id` rather than a byte slice, so the cascade compares5//! integers and a computed style is a dense array indexed by `@intFromEnum`.6//! `count` sizes that array.7//!8//! Shorthands never reach a computed style. `expand` lowers one shorthand into9//! its longhands at parse time, which keeps the cascade free of shorthand10//! precedence rules.1112const expansion = @import("expand.zig");13const table = @import("table.zig");1415pub const Expansion = expansion.Expansion;16pub const Id = table.Id;17pub const Metadata = table.Metadata;18pub const Shorthand = expansion.Shorthand;19pub const componentSpans = expansion.componentSpans;20pub const count = table.count;21pub const entries = table.entries;22pub const expand = expansion.expand;23pub const isCustom = table.isCustom;24pub const longhands = expansion.longhands;25pub const lookup = table.lookup;26pub const max_components = expansion.max_components;27pub const max_expansions = expansion.max_expansions;28pub const metadata = table.metadata;29pub const shorthandOf = expansion.shorthandOf;

1pub const property = @import("property/root.zig");