package cascade

  1. Overview
  2. Docs
CSS generation and manipulation library for OCaml

Install 

dune-project
 Dependency

github.com Readme Changelog Edit opam file Versions (4)

Authors

  1. T
    Thomas Gazagnaire

Maintainers

  1. T
    Thomas Gazagnaire

Sources

cascade-1.2.1.tbz
sha256=1cf5079b3797cd6e70fbced8dc2631074f357d36fcdea8597c7ba17ac2903f6e
sha512=43f5e6a3986f8f43ce948b8f1d59f6f00e1047f5707c5449b6323b683d2ecd51a0fb34793aad9c48904a67b0f7268d7379ab9baf29917c25a962064bfa3ab694

doc/cascade/Cascade/Container/index.html

Module Cascade.ContainerSource

CSS container query condition types

Sourcetype component_values = Values.component_values

Container query condition type

Parsed CSS component values preserved inside style queries.

Sourcetype t =
  1. | Min_width_rem of float
    (*

    Container min-width in rem: @container (min-width:Xrem)

    *)
  2. | Min_width_px of int
    (*

    Container min-width in pixels: @container (min-width:Xpx)

    *)
  3. | Named of string * t
    (*

    Named container with condition: @container name (condition)

    *)
  4. | Style of {
    1. query : style_query;
    2. uppercase : bool;
      (*

      true when the source spelled the function as STYLE(...) (case preserved for round-trip fidelity); false for the canonical lowercase spelling.

      *)
    }
    (*

    Style query: style(--flag), style(property: value), or a custom-property range query, optionally composed with and, or, or not.

    *)
  5. | Scroll_state of {
    1. query : scroll_state_query;
    2. uppercase : bool;
      (*

      true when the source spelled the function as SCROLL-STATE(...).

      *)
    }
    (*

    Scroll-state query: scroll-state(stuck: top).

    *)
  6. | And of t * t
    (*

    (A) and (B)

    *)
  7. | Or of t * t
    (*

    (A) or (B)

    *)
  8. | Not of t
    (*

    not (A)

    *)
  9. | Feature_query of Media.t
    (*

    Container size/range feature query, e.g. (inline-size: 640px) or (inline-size > 30em).

    *)
Sourceand style_query =
  1. | Boolean of string
  2. | Declaration of {
    1. name : string;
    2. value : component_values;
    }
  3. | Range of style_range
  4. | All of style_query * style_query
  5. | Any of style_query * style_query
  6. | Neg of style_query
Sourceand style_range =
  1. | Compare of {
    1. left : component_values;
    2. op : range_operator;
    3. right : component_values;
    }
    (*

    A single comparison, style(--gap = 10px) or style(10px < --gap). Either operand may name the custom property.

    *)
  2. | Interval of {
    1. lower : component_values;
    2. lower_op : range_operator;
    3. name : string;
    4. upper_op : range_operator;
    5. upper : component_values;
    }
    (*

    A two-sided interval, style(10px <= --gap < 20px). Both bounds point the same way.

    *)
Sourceand range_operator =
  1. | Lt
  2. | Lte
  3. | Eq
  4. | Gt
  5. | Gte
Sourceand scroll_state_query =
  1. | State of {
    1. name : string;
    2. value : string;
    }
  2. | Both of scroll_state_query * scroll_state_query
  3. | Either of scroll_state_query * scroll_state_query
  4. | Negated of scroll_state_query
Sourcetype kind =
  1. | Min_width
  2. | Other

Coarse container condition category.

Sourceval kind : t -> kind

kind t classifies min-width-only conditions for compatibility helpers.

Sourceval lower_for_minify : t -> t

lower_for_minify t applies Media.lower_for_minify to every nested feature query, leaving the dedicated Min_width_*, style, and scroll-state forms untouched.

Sourceval to_string : ?minify:bool -> t -> string

to_string t converts a container condition to its CSS string representation. Typed Min_width_* shorthands keep their historical compact form; stylesheet printing uses to_stylesheet_string when pretty spacing is required.

Sourceval to_stylesheet_string : ?minify:bool -> t -> string

to_stylesheet_string t converts a container condition for stylesheet printing. Non-minified output keeps optional whitespace in typed shorthand feature queries.

Sourceval pp : t Pp.t

pp is a composable printer for a container condition.

Sourceval of_string : string -> t

of_string s parses a container condition. Raises Cursor.Parse_error for a malformed condition.

Sourceval read : Cursor.t -> t

read t parses the container condition t holds, consuming nothing. A malformed condition raises Cursor.Parse_error anchored on the slice of the query that failed, so pass a cursor built over the components the prelude was lexed into (Cursor.sub) rather than a re-lex of their text.

Sourceval feature : string -> Media.value -> t

feature name value is the typed container feature query constructed via Media.feature.

Sourceval style : ?value:string -> string -> t

style ?value prop is a style() query. With no value, prop must be a custom property and the query matches the boolean form style(--prop). With a value it matches style(prop: value). Constructs the canonical lowercase form.

Sourceval scroll_state : string -> string -> t

scroll_state prop value is the canonical lowercase Scroll_state query, matching scroll-state(prop: value).

Sourceval normalize : t -> t

normalize t rewrites t into the spelling its equivalence class is compared by. The invariant runs one way: when normalize a and normalize b are equal, a and b select the same query containers.

The converse is neither promised nor intended: two equivalent queries may normalise apart, which costs a merge and never correctness. So every rewrite is one of the spec's own equivalences. A <size-feature> is spelled like a media feature (CSS Conditional Rules 5 sec. 6.1), so it takes Media.normalize: a min- or max- prefix on a range feature becomes the >= or <= comparison, a value-first bound becomes name-first (Media Queries 4 sec. 2.4.4 and sec. 2.4.3), and a descending interval becomes ascending. Min_width_rem and Min_width_px are cascade's compact spelling of (min-width: V) and enter that fold as the feature they spell. A style() or scroll-state() function name loses the case the source wrote it in (CSS Values 4 sec. 9), and a <style-feature-plain> loses the whitespace around its value (CSS Syntax 3 (ED) sec. 5.5.6).

Completeness is a separate property, and it stops there. Equivalences normalize leaves apart: a style() property name spelled in another case; two style() values that compute alike but tokenise apart, such as red against #f00; reassociating or reordering and and or; De Morgan pairs; two bounds on one feature against the written interval; a plain feature against its = comparison; and anything inside a <general-enclosed>, whose text is compared verbatim. Each of those costs a merge, never correctness.

Sourceval queried_names : t -> string list

queried_names t is every property name a style() query in t reads, as written: the name of a plain or boolean query, and a range operand that is a bare identifier (CSS Conditional 5 sec. 6.2).

Sourceval compare : t -> t -> int

compare t1 t2 compares two container conditions. Ordering only needs to be deterministic, so a size feature that ties on every ordinal key reaches Media.compare's serialised tiebreak. That makes compare a b = 0 a different question from equal, which reads structure: each says yes where the other says no. Sort with compare, decide sameness with equal.

Sourceval equal : t -> t -> bool

equal a b is structural equality on normalized conditions, so it is true only when a and b select the same query containers. It gates block merging and therefore never answers on serialised text: an unknown container feature spelled as one escaped ident is not the size feature whose characters it repeats, and a <general-enclosed> equals only the same text.

Sourceval compare_scroll_state_query : scroll_state_query -> scroll_state_query -> int

compare_scroll_state_query a b totally orders scroll-state queries.

Sourceval equal_kind : kind -> kind -> bool

equal_kind a b tests container condition categories for equality.