• -webkit-line-clamp/index.json
    -webkit-line-clamp = 
    none |
    <integer [1,∞]>

    -webkit-line-clamp = 
    none |
    <integer [1,∞]>

  • -webkit-text-stroke-width/index.json
    -webkit-text-stroke-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    -webkit-text-stroke-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • -webkit-text-stroke/index.json
    -webkit-text-stroke = 
    <line-width> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    -webkit-text-stroke = 
    <line-width> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • @font-face/ascent-override/index.json
    ascent-override = 
    [ normal | <percentage [0,∞]> ]{1,2}

    ascent-override = 
    normal |
    <percentage [0,∞]>

  • @font-face/descent-override/index.json
    descent-override = 
    [ normal | <percentage [0,∞]> ]{1,2}

    descent-override = 
    normal |
    <percentage [0,∞]>

  • @font-face/font-weight/index.json
    font-weight = 
    auto |
    <font-weight-absolute>{1,2}

    <font-weight-absolute> =
    normal |
    bold |
    <number [1,1000]>

    font-weight = 
    auto |
    <font-weight-absolute>{1,2}

    <font-weight-absolute> =
    normal |
    bold |
    <number [1,1000]>

  • @font-face/line-gap-override/index.json
    line-gap-override = 
    [ normal | <percentage [0,∞]> ]{1,2}

    line-gap-override = 
    normal |
    <percentage [0,∞]>

  • @font-face/size-adjust/index.json
    size-adjust = 
    <percentage [0,∞]>

    size-adjust = 
    <percentage [0,∞]>

  • @page/index.json
    @page = 
    @page <page-selector-list>? { <declaration-rule-list> }

    <page-selector-list> =
    <page-selector>#

    <page-selector> =
    [ <ident-token>? <pseudo-page>* ]!

    <pseudo-page> =
    ':' [ left | right | first | blank ]

    Where the <page-body> includes:

    • page-properties
    • page-margin properties

    and <pseudo-page> represents these pseudo-classes:

    • :blank
    • :first
    • :left
    • :right
    @page = 
    @page <page-selector-list>? { <declaration-rule-list> }

    <page-selector-list> =
    <page-selector>#

    <page-selector> =
    [ <ident-token>? <pseudo-page>* ]!

    <pseudo-page> =
    ':' [ left | right | first | blank ]

    Where the <page-body> includes:

    • page-properties
    • page-margin properties

    and <pseudo-page> represents these pseudo-classes:

    • :blank
    • :first
    • :left
    • :right
  • @page/size/index.json
    size = 
    <length [0,∞]>{1,2} |
    auto |
    [ <page-size> || [ portrait | landscape ] ]

    size = 
    <length [0,∞]>{1,2} |
    auto |
    [ <page-size> || [ portrait | landscape ] ]

  • animation-duration/index.json
    animation-duration = 
    <time [0s,∞]>#

    animation-duration = 
    <time [0s,∞]>#

  • animation-iteration-count/index.json
    animation-iteration-count = 
    <single-animation-iteration-count>#

    <single-animation-iteration-count> =
    infinite |
    <number [0,∞]>

    animation-iteration-count = 
    <single-animation-iteration-count>#

    <single-animation-iteration-count> =
    infinite |
    <number [0,∞]>

  • animation/index.json
    animation = 
    <single-animation>#

    <single-animation> =
    <time [0s,∞]> ||
    <easing-function> ||
    <time> ||
    <single-animation-iteration-count> ||
    <single-animation-direction> ||
    <single-animation-fill-mode> ||
    <single-animation-play-state> ||
    [ none | <keyframes-name> ]

    <easing-function> =
    linear |
    <linear-easing-function> |
    <cubic-bezier-easing-function> |
    <step-easing-function>

    <single-animation-iteration-count> =
    infinite |
    <number [0,∞]>

    <single-animation-direction> =
    normal |
    reverse |
    alternate |
    alternate-reverse

    <single-animation-fill-mode> =
    none |
    forwards |
    backwards |
    both

    <single-animation-play-state> =
    running |
    paused

    <keyframes-name> =
    <custom-ident> |
    <string>

    <linear-easing-function> =
    linear( <linear-stop-list> )

    <cubic-bezier-easing-function> =
    ease |
    ease-in |
    ease-out |
    ease-in-out |
    cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

    <step-easing-function> =
    step-start |
    step-end |
    steps( <integer> , <step-position>? )

    <linear-stop-list> =
    [ <linear-stop> ]#

    <step-position> =
    jump-start |
    jump-end |
    jump-none |
    jump-both |
    start |
    end

    <linear-stop> =
    <number> &&
    <linear-stop-length>?

    <linear-stop-length> =
    <percentage>{1,2}

    animation = 
    <single-animation>#

    <single-animation> =
    <time [0s,∞]> ||
    <easing-function> ||
    <time> ||
    <single-animation-iteration-count> ||
    <single-animation-direction> ||
    <single-animation-fill-mode> ||
    <single-animation-play-state> ||
    [ none | <keyframes-name> ]

    <easing-function> =
    linear |
    <linear-easing-function> |
    <cubic-bezier-easing-function> |
    <step-easing-function>

    <single-animation-iteration-count> =
    infinite |
    <number [0,∞]>

    <single-animation-direction> =
    normal |
    reverse |
    alternate |
    alternate-reverse

    <single-animation-fill-mode> =
    none |
    forwards |
    backwards |
    both

    <single-animation-play-state> =
    running |
    paused

    <keyframes-name> =
    <custom-ident> |
    <string>

    <linear-easing-function> =
    linear( <linear-stop-list> )

    <cubic-bezier-easing-function> =
    ease |
    ease-in |
    ease-out |
    ease-in-out |
    cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

    <step-easing-function> =
    step-start |
    step-end |
    steps( <integer> , <step-position>? )

    <linear-stop-list> =
    [ <linear-stop> ]#

    <step-position> =
    jump-start |
    jump-end |
    jump-none |
    jump-both |
    start |
    end

    <linear-stop> =
    <number> &&
    <linear-stop-length>?

    <linear-stop-length> =
    <percentage>{1,2}

  • aspect-ratio/index.json
    aspect-ratio = 
    auto ||
    <ratio>

    <ratio> =
    <number [0,∞]> [ / <number [0,∞]> ]?

    aspect-ratio = 
    auto ||
    <ratio>

    <ratio> =
    <number [0,∞]> [ / <number [0,∞]> ]?

  • background-position-x/index.json
    background-position-x = 
    [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#

    <length-percentage> =
    <length> |
    <percentage>

    background-position-x = 
    [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#

    <length-percentage> =
    <length> |
    <percentage>

  • background-position-y/index.json
    background-position-y = 
    [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#

    <length-percentage> =
    <length> |
    <percentage>

    background-position-y = 
    [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#

    <length-percentage> =
    <length> |
    <percentage>

  • border-block-end-width/index.json
    border-block-end-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-block-end-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border-block-end/index.json
    border-block-end = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border-block-end = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • border-block-start-width/index.json
    border-block-start-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-block-start-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border-block-start/index.json
    border-block-start = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border-block-start = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • border-block-width/index.json
    border-block-width = 
    <'border-top-width'>{1,2}

    <border-top-width> =
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-block-width = 
    <'border-top-width'>{1,2}

    <border-top-width> =
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border-block/index.json
    border-block = 
    <'border-block-start'>

    <border-block-start> =
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border-block = 
    <'border-block-start'>

    <border-block-start> =
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • border-bottom-width/index.json
    border-bottom-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-bottom-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border-bottom/index.json
    border-bottom = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border-bottom = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • border-image-outset/index.json
    border-image-outset = 
    [ <length [0,∞]> | <number [0,∞]> ]{1,4}

    border-image-outset = 
    [ <length [0,∞]> | <number [0,∞]> ]{1,4}

  • border-image-slice/index.json
    border-image-slice = 
    [ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
    fill?

    border-image-slice = 
    [ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
    fill?

  • border-image-width/index.json
    border-image-width = 
    [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

    <length-percentage> =
    <length> |
    <percentage>

    border-image-width = 
    [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

    <length-percentage> =
    <length> |
    <percentage>

  • border-image/index.json
    border-image = 
    <'border-image-source'> ||
    <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? ||
    <'border-image-repeat'>

    <border-image-source> =
    none |
    <image>

    <border-image-slice> =
    [ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
    fill?

    <border-image-width> =
    [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

    <border-image-outset> =
    [ <length [0,∞]> | <number [0,∞]> ]{1,4}

    <border-image-repeat> =
    [ stretch | repeat | round | space ]{1,2}

    <image> =
    <url> |
    <gradient>

    <length-percentage> =
    <length> |
    <percentage>

    <url> =
    <url()> |
    <src()>

    <url()> =
    url( <string> <url-modifier>* ) |
    <url-token>

    <src()> =
    src( <string> <url-modifier>* )

    border-image = 
    <'border-image-source'> ||
    <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? ||
    <'border-image-repeat'>

    <border-image-source> =
    none |
    <image>

    <border-image-slice> =
    [ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
    fill?

    <border-image-width> =
    [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

    <border-image-outset> =
    [ <length [0,∞]> | <number [0,∞]> ]{1,4}

    <border-image-repeat> =
    [ stretch | repeat | round | space ]{1,2}

    <image> =
    <url> |
    <gradient>

    <length-percentage> =
    <length> |
    <percentage>

    <url> =
    <url()> |
    <src()>

    <url()> =
    url( <string> <url-modifier>* ) |
    <url-token>

    <src()> =
    src( <string> <url-modifier>* )

  • border-inline-end-width/index.json
    border-inline-end-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-inline-end-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border-inline-end/index.json
    border-inline-end = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border-inline-end = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • border-inline-start-width/index.json
    border-inline-start-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-inline-start-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border-inline-start/index.json
    border-inline-start = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border-inline-start = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • border-inline-width/index.json
    border-inline-width = 
    <'border-top-width'>{1,2}

    <border-top-width> =
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-inline-width = 
    <'border-top-width'>{1,2}

    <border-top-width> =
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border-inline/index.json
    border-inline = 
    <'border-block-start'>

    <border-block-start> =
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border-inline = 
    <'border-block-start'>

    <border-block-start> =
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • border-left-width/index.json
    border-left-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-left-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border-left/index.json
    border-left = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border-left = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • border-right-width/index.json
    border-right-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-right-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border-right/index.json
    border-right = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border-right = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • border-top-width/index.json
    border-top-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-top-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border-top/index.json
    border-top = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border-top = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • border-width/index.json
    border-width = 
    <line-width>{1,4}

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    border-width = 
    <line-width>{1,4}

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • border/index.json
    border = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    border = 
    <line-width> ||
    <line-style> ||
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • box-shadow/index.json
    box-shadow = 
    <spread-shadow>#

    <spread-shadow> =
    <'box-shadow-color'>? &&
    [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] &&
    <'box-shadow-position'>?

    <box-shadow-color> =
    <color>#

    <box-shadow-offset> =
    [ none | <length>{2} ]#

    <box-shadow-blur> =
    <length [0,∞]>#

    <box-shadow-spread> =
    <length>#

    <box-shadow-position> =
    [ outset | inset ]#

    box-shadow = 
    <spread-shadow>#

    <spread-shadow> =
    <'box-shadow-color'>? &&
    [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] &&
    <'box-shadow-position'>?

    <box-shadow-color> =
    <color>#

    <box-shadow-offset> =
    [ none | <length>{2} ]#

    <box-shadow-blur> =
    <length [0,∞]>#

    <box-shadow-spread> =
    <length>#

    <box-shadow-position> =
    [ outset | inset ]#

  • color_value/color-mix/index.json
    <color-mix()> = 
    color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )

    <color-interpolation-method> =
    in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

    <rectangular-color-space> =
    srgb |
    srgb-linear |
    display-p3 |
    a98-rgb |
    prophoto-rgb |
    rec2020 |
    lab |
    oklab |
    xyz |
    xyz-d50 |
    xyz-d65

    <polar-color-space> =
    hsl |
    hwb |
    lch |
    oklch

    <hue-interpolation-method> =
    [ shorter | longer | increasing | decreasing ] hue

    <color-mix()> = 
    color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )

    <color-interpolation-method> =
    in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

    <rectangular-color-space> =
    srgb |
    srgb-linear |
    display-p3 |
    a98-rgb |
    prophoto-rgb |
    rec2020 |
    lab |
    oklab |
    xyz |
    xyz-d50 |
    xyz-d65

    <polar-color-space> =
    hsl |
    hwb |
    lch |
    oklch

    <hue-interpolation-method> =
    [ shorter | longer | increasing | decreasing ] hue

  • column-count/index.json
    column-count = 
    auto |
    <integer [1,∞]>

    column-count = 
    auto |
    <integer [1,∞]>

  • column-rule-width/index.json
    column-rule-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    column-rule-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • column-rule/index.json
    column-rule = 
    <'column-rule-width'> ||
    <'column-rule-style'> ||
    <'column-rule-color'>

    <column-rule-width> =
    <line-width>

    <column-rule-style> =
    <line-style>

    <column-rule-color> =
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

    column-rule = 
    <'column-rule-width'> ||
    <'column-rule-style'> ||
    <'column-rule-color'>

    <column-rule-width> =
    <line-width>

    <column-rule-style> =
    <line-style>

    <column-rule-color> =
    <color>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <line-style> =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset

  • column-width/index.json
    column-width = 
    auto |
    <length [0,∞]> |
    min-content |
    max-content |
    fit-content( <length-percentage> )

    <length-percentage> =
    <length> |
    <percentage>

    column-width = 
    auto |
    <length [0,∞]> |
    min-content |
    max-content |
    fit-content( <length-percentage> )

    <length-percentage> =
    <length> |
    <percentage>

  • columns/index.json
    columns = 
    <'column-width'> ||
    <'column-count'>

    <column-width> =
    auto |
    <length [0,∞]> |
    min-content |
    max-content |
    fit-content( <length-percentage> )

    <column-count> =
    auto |
    <integer [1,∞]>

    <length-percentage> =
    <length> |
    <percentage>

    columns = 
    <'column-width'> ||
    <'column-count'>

    <column-width> =
    auto |
    <length [0,∞]> |
    min-content |
    max-content |
    fit-content( <length-percentage> )

    <column-count> =
    auto |
    <integer [1,∞]>

    <length-percentage> =
    <length> |
    <percentage>

  • cross-fade/index.json
    <cross-fade()> = 
    cross-fade( <cf-image># )

    <cf-image> =
    [ <image> | <color> ] &&
    <percentage [0,100]>?

    <image> =
    <url> |
    <gradient>

    <url> =
    <url()> |
    <src()>

    <url()> =
    url( <string> <url-modifier>* ) |
    <url-token>

    <src()> =
    src( <string> <url-modifier>* )

    <cross-fade()> = 
    cross-fade( <cf-image># )

    <cf-image> =
    [ <image> | <color> ] &&
    <percentage [0,100]>?

    <image> =
    <url> |
    <gradient>

    <url> =
    <url()> |
    <src()>

    <url()> =
    url( <string> <url-modifier>* ) |
    <url-token>

    <src()> =
    src( <string> <url-modifier>* )

  • flex-grow/index.json
    flex-grow = 
    <number [0,∞]>

    flex-grow = 
    <number [0,∞]>

  • flex-shrink/index.json
    flex-shrink = 
    <number [0,∞]>

    flex-shrink = 
    <number [0,∞]>

  • flex/index.json
    flex = 
    none |
    [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

    <flex-grow> =
    <number [0,∞]>

    <flex-shrink> =
    <number [0,∞]>

    <flex-basis> =
    content |
    <'width'>

    <width> =
    auto |
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    fit-content( <length-percentage [0,∞]> )

    <length-percentage> =
    <length> |
    <percentage>

    flex = 
    none |
    [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

    <flex-grow> =
    <number [0,∞]>

    <flex-shrink> =
    <number [0,∞]>

    <flex-basis> =
    content |
    <'width'>

    <width> =
    auto |
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    fit-content( <length-percentage [0,∞]> )

    <length-percentage> =
    <length> |
    <percentage>

  • font-palette/index.json
    font-palette = 
    normal |
    light |
    dark |
    <palette-identifier> |
    <palette-mix()>

    <palette-mix()> =
    palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )

    <color-interpolation-method> =
    in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

    <rectangular-color-space> =
    srgb |
    srgb-linear |
    display-p3 |
    a98-rgb |
    prophoto-rgb |
    rec2020 |
    lab |
    oklab |
    xyz |
    xyz-d50 |
    xyz-d65

    <polar-color-space> =
    hsl |
    hwb |
    lch |
    oklch

    <hue-interpolation-method> =
    [ shorter | longer | increasing | decreasing ] hue

    font-palette = 
    normal |
    light |
    dark |
    <palette-identifier> |
    <palette-mix()>

    <palette-mix()> =
    palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )

    <color-interpolation-method> =
    in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

    <rectangular-color-space> =
    srgb |
    srgb-linear |
    display-p3 |
    a98-rgb |
    prophoto-rgb |
    rec2020 |
    lab |
    oklab |
    xyz |
    xyz-d50 |
    xyz-d65

    <polar-color-space> =
    hsl |
    hwb |
    lch |
    oklch

    <hue-interpolation-method> =
    [ shorter | longer | increasing | decreasing ] hue

  • font-size-adjust/index.json
    font-size-adjust = 
    none |
    <number [0,∞]>

    font-size-adjust = 
    none |
    <number [0,∞]>

  • font-weight/index.json
    font-weight = 
    <font-weight-absolute> |
    bolder |
    lighter

    <font-weight-absolute> =
    normal |
    bold |
    <number [1,1000]>

    font-weight = 
    <font-weight-absolute> |
    bolder |
    lighter

    <font-weight-absolute> =
    normal |
    bold |
    <number [1,1000]>

  • font/index.json
    font = 
    [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] |
    <system-family-name>

    <font-style> =
    normal |
    italic |
    oblique <angle [-90deg,90deg]>?

    <font-variant-css2> =
    normal |
    small-caps

    <font-weight> =
    <font-weight-absolute> |
    bolder |
    lighter

    <font-width-css3> =
    normal |
    ultra-condensed |
    extra-condensed |
    condensed |
    semi-condensed |
    semi-expanded |
    expanded |
    extra-expanded |
    ultra-expanded

    <font-size> =
    <absolute-size> |
    <relative-size> |
    <length-percentage [0,∞]> |
    math

    <line-height> =
    normal |
    <number [0,∞]> |
    <length-percentage [0,∞]>

    <font-family> =
    [ <family-name> | <generic-family> ]#

    <system-family-name> =
    caption |
    icon |
    menu |
    message-box |
    small-caption |
    status-bar

    <font-weight-absolute> =
    normal |
    bold |
    <number [1,1000]>

    <length-percentage> =
    <length> |
    <percentage>

    <family-name> =
    <string> |
    <custom-ident>+

    <generic-family> =
    generic( <custom-ident>+ ) |
    <string> |
    <custom-ident>+

    font = 
    [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] |
    <system-family-name>

    <font-style> =
    normal |
    italic |
    oblique <angle [-90deg,90deg]>?

    <font-variant-css2> =
    normal |
    small-caps

    <font-weight> =
    <font-weight-absolute> |
    bolder |
    lighter

    <font-width-css3> =
    normal |
    ultra-condensed |
    extra-condensed |
    condensed |
    semi-condensed |
    semi-expanded |
    expanded |
    extra-expanded |
    ultra-expanded

    <font-size> =
    <absolute-size> |
    <relative-size> |
    <length-percentage [0,∞]> |
    math

    <line-height> =
    normal |
    <number [0,∞]> |
    <length-percentage [0,∞]>

    <font-family> =
    [ <family-name> | <generic-family> ]#

    <system-family-name> =
    caption |
    icon |
    menu |
    message-box |
    small-caption |
    status-bar

    <font-weight-absolute> =
    normal |
    bold |
    <number [1,1000]>

    <length-percentage> =
    <length> |
    <percentage>

    <family-name> =
    <string> |
    <custom-ident>+

    <generic-family> =
    generic( <custom-ident>+ ) |
    <string> |
    <custom-ident>+

  • gradient/index.json
    <gradient> = 
    <linear-gradient()> |
    <repeating-linear-gradient()> |
    <radial-gradient()> |
    <repeating-radial-gradient()>

    <linear-gradient()> =
    linear-gradient( [ <linear-gradient-syntax> ] )

    <repeating-linear-gradient()> =
    repeating-linear-gradient( [ <linear-gradient-syntax> ] )

    <radial-gradient()> =
    radial-gradient( [ <radial-gradient-syntax> ] )

    <repeating-radial-gradient()> =
    repeating-radial-gradient( [ <radial-gradient-syntax> ] )

    <linear-gradient-syntax> =
    [ <angle> | to <side-or-corner> ]? , <color-stop-list>

    <radial-gradient-syntax> =
    [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

    <side-or-corner> =
    [ left | right ] ||
    [ top | bottom ]

    <color-stop-list> =
    <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

    <radial-shape> =
    circle |
    ellipse

    <radial-size> =
    <radial-extent> |
    <length [0,∞]> |
    <length-percentage [0,∞]>{2}

    <position> =
    [ left | center | right | top | bottom | <length-percentage> ] |
    [ left | center | right ] && [ top | center | bottom ] |
    [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
    [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

    <linear-color-stop> =
    <color> <length-percentage>?

    <linear-color-hint> =
    <length-percentage>

    <radial-extent> =
    closest-corner |
    closest-side |
    farthest-corner |
    farthest-side

    <length-percentage> =
    <length> |
    <percentage>

    <gradient> = 
    <linear-gradient()> |
    <repeating-linear-gradient()> |
    <radial-gradient()> |
    <repeating-radial-gradient()>

    <linear-gradient()> =
    linear-gradient( [ <linear-gradient-syntax> ] )

    <repeating-linear-gradient()> =
    repeating-linear-gradient( [ <linear-gradient-syntax> ] )

    <radial-gradient()> =
    radial-gradient( [ <radial-gradient-syntax> ] )

    <repeating-radial-gradient()> =
    repeating-radial-gradient( [ <radial-gradient-syntax> ] )

    <linear-gradient-syntax> =
    [ <angle> | to <side-or-corner> ]? , <color-stop-list>

    <radial-gradient-syntax> =
    [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

    <side-or-corner> =
    [ left | right ] ||
    [ top | bottom ]

    <color-stop-list> =
    <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

    <radial-shape> =
    circle |
    ellipse

    <radial-size> =
    <radial-extent> |
    <length [0,∞]> |
    <length-percentage [0,∞]>{2}

    <position> =
    [ left | center | right | top | bottom | <length-percentage> ] |
    [ left | center | right ] && [ top | center | bottom ] |
    [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
    [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

    <linear-color-stop> =
    <color> <length-percentage>?

    <linear-color-hint> =
    <length-percentage>

    <radial-extent> =
    closest-corner |
    closest-side |
    farthest-corner |
    farthest-side

    <length-percentage> =
    <length> |
    <percentage>

  • gradient/radial-gradient/index.json
    <radial-gradient()> = 
    radial-gradient( [ <radial-gradient-syntax> ] )

    <radial-gradient-syntax> =
    [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

    <radial-shape> =
    circle |
    ellipse

    <radial-size> =
    <radial-extent> |
    <length [0,∞]> |
    <length-percentage [0,∞]>{2}

    <position> =
    [ left | center | right | top | bottom | <length-percentage> ] |
    [ left | center | right ] && [ top | center | bottom ] |
    [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
    [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

    <color-stop-list> =
    <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

    <radial-extent> =
    closest-corner |
    closest-side |
    farthest-corner |
    farthest-side

    <length-percentage> =
    <length> |
    <percentage>

    <linear-color-stop> =
    <color> <length-percentage>?

    <linear-color-hint> =
    <length-percentage>

    <radial-gradient()> = 
    radial-gradient( [ <radial-gradient-syntax> ] )

    <radial-gradient-syntax> =
    [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

    <radial-shape> =
    circle |
    ellipse

    <radial-size> =
    <radial-extent> |
    <length [0,∞]> |
    <length-percentage [0,∞]>{2}

    <position> =
    [ left | center | right | top | bottom | <length-percentage> ] |
    [ left | center | right ] && [ top | center | bottom ] |
    [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
    [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

    <color-stop-list> =
    <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

    <radial-extent> =
    closest-corner |
    closest-side |
    farthest-corner |
    farthest-side

    <length-percentage> =
    <length> |
    <percentage>

    <linear-color-stop> =
    <color> <length-percentage>?

    <linear-color-hint> =
    <length-percentage>

  • gradient/repeating-radial-gradient/index.json
    <repeating-radial-gradient()> = 
    repeating-radial-gradient( [ <radial-gradient-syntax> ] )

    <radial-gradient-syntax> =
    [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

    <radial-shape> =
    circle |
    ellipse

    <radial-size> =
    <radial-extent> |
    <length [0,∞]> |
    <length-percentage [0,∞]>{2}

    <position> =
    [ left | center | right | top | bottom | <length-percentage> ] |
    [ left | center | right ] && [ top | center | bottom ] |
    [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
    [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

    <color-stop-list> =
    <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

    <radial-extent> =
    closest-corner |
    closest-side |
    farthest-corner |
    farthest-side

    <length-percentage> =
    <length> |
    <percentage>

    <linear-color-stop> =
    <color> <length-percentage>?

    <linear-color-hint> =
    <length-percentage>

    <repeating-radial-gradient()> = 
    repeating-radial-gradient( [ <radial-gradient-syntax> ] )

    <radial-gradient-syntax> =
    [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

    <radial-shape> =
    circle |
    ellipse

    <radial-size> =
    <radial-extent> |
    <length [0,∞]> |
    <length-percentage [0,∞]>{2}

    <position> =
    [ left | center | right | top | bottom | <length-percentage> ] |
    [ left | center | right ] && [ top | center | bottom ] |
    [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
    [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

    <color-stop-list> =
    <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

    <radial-extent> =
    closest-corner |
    closest-side |
    farthest-corner |
    farthest-side

    <length-percentage> =
    <length> |
    <percentage>

    <linear-color-stop> =
    <color> <length-percentage>?

    <linear-color-hint> =
    <length-percentage>

  • grid-area/index.json
    grid-area = 
    <grid-line> [ / <grid-line> ]{0,3}

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

    grid-area = 
    <grid-line> [ / <grid-line> ]{0,3}

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

  • grid-auto-columns/index.json
    grid-auto-columns = 
    <track-size>+

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

    grid-auto-columns = 
    <track-size>+

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

  • grid-auto-rows/index.json
    grid-auto-rows = 
    <track-size>+

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

    grid-auto-rows = 
    <track-size>+

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

  • grid-column-end/index.json
    grid-column-end = 
    <grid-line>

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

    grid-column-end = 
    <grid-line>

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

  • grid-column-start/index.json
    grid-column-start = 
    <grid-line>

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

    grid-column-start = 
    <grid-line>

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

  • grid-column/index.json
    grid-column = 
    <grid-line> [ / <grid-line> ]?

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

    grid-column = 
    <grid-line> [ / <grid-line> ]?

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

  • grid-row-end/index.json
    grid-row-end = 
    <grid-line>

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

    grid-row-end = 
    <grid-line>

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

  • grid-row-start/index.json
    grid-row-start = 
    <grid-line>

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

    grid-row-start = 
    <grid-line>

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

  • grid-row/index.json
    grid-row = 
    <grid-line> [ / <grid-line> ]?

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

    grid-row = 
    <grid-line> [ / <grid-line> ]?

    <grid-line> =
    auto |
    <custom-ident> |
    [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
    [ span && [ <integer [1,∞]> || <custom-ident> ] ]

  • grid-template-columns/index.json
    grid-template-columns = 
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <track-list> =
    [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

    <auto-track-list> =
    [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

    <line-name-list> =
    [ <line-names> | <name-repeat> ]+

    <line-names> =
    '[' <custom-ident>* ']'

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <track-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

    <fixed-size> =
    <fixed-breadth> |
    minmax( <fixed-breadth> , <track-breadth> ) |
    minmax( <inflexible-breadth> , <fixed-breadth> )

    <fixed-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <auto-repeat> =
    repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <name-repeat> =
    repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

    <fixed-breadth> =
    <length-percentage [0,∞]>

    grid-template-columns = 
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <track-list> =
    [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

    <auto-track-list> =
    [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

    <line-name-list> =
    [ <line-names> | <name-repeat> ]+

    <line-names> =
    '[' <custom-ident>* ']'

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <track-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

    <fixed-size> =
    <fixed-breadth> |
    minmax( <fixed-breadth> , <track-breadth> ) |
    minmax( <inflexible-breadth> , <fixed-breadth> )

    <fixed-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <auto-repeat> =
    repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <name-repeat> =
    repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

    <fixed-breadth> =
    <length-percentage [0,∞]>

  • grid-template-rows/index.json
    grid-template-rows = 
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <track-list> =
    [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

    <auto-track-list> =
    [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

    <line-name-list> =
    [ <line-names> | <name-repeat> ]+

    <line-names> =
    '[' <custom-ident>* ']'

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <track-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

    <fixed-size> =
    <fixed-breadth> |
    minmax( <fixed-breadth> , <track-breadth> ) |
    minmax( <inflexible-breadth> , <fixed-breadth> )

    <fixed-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <auto-repeat> =
    repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <name-repeat> =
    repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

    <fixed-breadth> =
    <length-percentage [0,∞]>

    grid-template-rows = 
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <track-list> =
    [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

    <auto-track-list> =
    [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

    <line-name-list> =
    [ <line-names> | <name-repeat> ]+

    <line-names> =
    '[' <custom-ident>* ']'

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <track-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

    <fixed-size> =
    <fixed-breadth> |
    minmax( <fixed-breadth> , <track-breadth> ) |
    minmax( <inflexible-breadth> , <fixed-breadth> )

    <fixed-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <auto-repeat> =
    repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <name-repeat> =
    repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

    <fixed-breadth> =
    <length-percentage [0,∞]>

  • grid-template/index.json
    grid-template = 
    none |
    [ <'grid-template-rows'> / <'grid-template-columns'> ] |
    [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

    <grid-template-rows> =
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <grid-template-columns> =
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <line-names> =
    '[' <custom-ident>* ']'

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <explicit-track-list> =
    [ <line-names>? <track-size> ]+ <line-names>?

    <track-list> =
    [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

    <auto-track-list> =
    [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

    <line-name-list> =
    [ <line-names> | <name-repeat> ]+

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

    <track-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

    <fixed-size> =
    <fixed-breadth> |
    minmax( <fixed-breadth> , <track-breadth> ) |
    minmax( <inflexible-breadth> , <fixed-breadth> )

    <fixed-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <auto-repeat> =
    repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <name-repeat> =
    repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

    <fixed-breadth> =
    <length-percentage [0,∞]>

    grid-template = 
    none |
    [ <'grid-template-rows'> / <'grid-template-columns'> ] |
    [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

    <grid-template-rows> =
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <grid-template-columns> =
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <line-names> =
    '[' <custom-ident>* ']'

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <explicit-track-list> =
    [ <line-names>? <track-size> ]+ <line-names>?

    <track-list> =
    [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

    <auto-track-list> =
    [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

    <line-name-list> =
    [ <line-names> | <name-repeat> ]+

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

    <track-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

    <fixed-size> =
    <fixed-breadth> |
    minmax( <fixed-breadth> , <track-breadth> ) |
    minmax( <inflexible-breadth> , <fixed-breadth> )

    <fixed-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <auto-repeat> =
    repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <name-repeat> =
    repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

    <fixed-breadth> =
    <length-percentage [0,∞]>

  • grid/index.json
    grid = 
    <'grid-template'> |
    <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? |
    [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

    <grid-template> =
    none |
    [ <'grid-template-rows'> / <'grid-template-columns'> ] |
    [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

    <grid-template-rows> =
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <grid-auto-columns> =
    <track-size>+

    <grid-auto-rows> =
    <track-size>+

    <grid-template-columns> =
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <line-names> =
    '[' <custom-ident>* ']'

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <explicit-track-list> =
    [ <line-names>? <track-size> ]+ <line-names>?

    <track-list> =
    [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

    <auto-track-list> =
    [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

    <line-name-list> =
    [ <line-names> | <name-repeat> ]+

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

    <track-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

    <fixed-size> =
    <fixed-breadth> |
    minmax( <fixed-breadth> , <track-breadth> ) |
    minmax( <inflexible-breadth> , <fixed-breadth> )

    <fixed-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <auto-repeat> =
    repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <name-repeat> =
    repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

    <fixed-breadth> =
    <length-percentage [0,∞]>

    grid = 
    <'grid-template'> |
    <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? |
    [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

    <grid-template> =
    none |
    [ <'grid-template-rows'> / <'grid-template-columns'> ] |
    [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

    <grid-template-rows> =
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <grid-auto-columns> =
    <track-size>+

    <grid-auto-rows> =
    <track-size>+

    <grid-template-columns> =
    none |
    <track-list> |
    <auto-track-list> |
    subgrid <line-name-list>?

    <line-names> =
    '[' <custom-ident>* ']'

    <track-size> =
    <track-breadth> |
    minmax( <inflexible-breadth> , <track-breadth> ) |
    fit-content( <length-percentage [0,∞]> )

    <explicit-track-list> =
    [ <line-names>? <track-size> ]+ <line-names>?

    <track-list> =
    [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

    <auto-track-list> =
    [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

    <line-name-list> =
    [ <line-names> | <name-repeat> ]+

    <track-breadth> =
    <length-percentage [0,∞]> |
    <flex [0,∞]> |
    min-content |
    max-content |
    auto

    <inflexible-breadth> =
    <length-percentage [0,∞]> |
    min-content |
    max-content |
    auto

    <length-percentage> =
    <length> |
    <percentage>

    <track-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

    <fixed-size> =
    <fixed-breadth> |
    minmax( <fixed-breadth> , <track-breadth> ) |
    minmax( <inflexible-breadth> , <fixed-breadth> )

    <fixed-repeat> =
    repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <auto-repeat> =
    repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

    <name-repeat> =
    repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

    <fixed-breadth> =
    <length-percentage [0,∞]>

  • initial-letter-align/index.json
    initial-letter-align = 
    [ border-box? [ alphabetic | ideographic | hanging | leading ]? ]!

    initial-letter-align = 
    [ border-box? [ alphabetic | ideographic | hanging | leading ]? ]!

  • initial-letter/index.json
    initial-letter = 
    normal |
    <number [1,∞]> <integer [1,∞]> |
    <number [1,∞]> && [ drop | raise ]?

    initial-letter = 
    normal |
    <number [1,∞]> <integer [1,∞]> |
    <number [1,∞]> && [ drop | raise ]?

  • line-height-step/index.json
    line-height-step = 
    <length [0,∞]>

    line-height-step = 
    <length [0,∞]>

  • line-height/index.json
    line-height = 
    normal |
    <number [0,∞]> |
    <length-percentage [0,∞]>

    <length-percentage> =
    <length> |
    <percentage>

    line-height = 
    normal |
    <number [0,∞]> |
    <length-percentage [0,∞]>

    <length-percentage> =
    <length> |
    <percentage>

  • offset/index.json
    offset = 
    [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

    <offset-position> =
    normal |
    auto |
    <position>

    <offset-path> =
    none |
    <offset-path> || <coord-box>

    <offset-distance> =
    <length-percentage>

    <offset-rotate> =
    [ auto | reverse ] ||
    <angle>

    <offset-anchor> =
    auto |
    <position>

    <position> =
    [ left | center | right | top | bottom | <length-percentage> ] |
    [ left | center | right ] && [ top | center | bottom ] |
    [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
    [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

    <offset-path> =
    <ray()> |
    <url> |
    <basic-shape>

    <coord-box> =
    <paint-box> |
    view-box

    <length-percentage> =
    <length> |
    <percentage>

    <ray()> =
    ray( <angle> &&
    <ray-size>? &&
    contain? &&
    [ at <position> ]? )

    <url> =
    <url()> |
    <src()>

    <paint-box> =
    <visual-box> |
    fill-box |
    stroke-box

    <ray-size> =
    closest-side |
    closest-corner |
    farthest-side |
    farthest-corner |
    sides

    <url()> =
    url( <string> <url-modifier>* ) |
    <url-token>

    <src()> =
    src( <string> <url-modifier>* )

    <visual-box> =
    content-box |
    padding-box |
    border-box

    offset = 
    [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

    <offset-position> =
    normal |
    auto |
    <position>

    <offset-path> =
    none |
    <offset-path> || <coord-box>

    <offset-distance> =
    <length-percentage>

    <offset-rotate> =
    [ auto | reverse ] ||
    <angle>

    <offset-anchor> =
    auto |
    <position>

    <position> =
    [ left | center | right | top | bottom | <length-percentage> ] |
    [ left | center | right ] && [ top | center | bottom ] |
    [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
    [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

    <offset-path> =
    <ray()> |
    <url> |
    <basic-shape>

    <coord-box> =
    <paint-box> |
    view-box

    <length-percentage> =
    <length> |
    <percentage>

    <ray()> =
    ray( <angle> &&
    <ray-size>? &&
    contain? &&
    [ at <position> ]? )

    <url> =
    <url()> |
    <src()>

    <paint-box> =
    <visual-box> |
    fill-box |
    stroke-box

    <ray-size> =
    closest-side |
    closest-corner |
    farthest-side |
    farthest-corner |
    sides

    <url()> =
    url( <string> <url-modifier>* ) |
    <url-token>

    <src()> =
    src( <string> <url-modifier>* )

    <visual-box> =
    content-box |
    padding-box |
    border-box

  • orphans/index.json
    orphans = 
    <integer [1,∞]>

    orphans = 
    <integer [1,∞]>

  • outline-width/index.json
    outline-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    outline-width = 
    <line-width>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

  • outline/index.json
    outline = 
    <'outline-color'> ||
    <'outline-style'> ||
    <'outline-width'>

    <outline-color> =
    auto |
    [ <color> | <image-1D> ]

    <outline-style> =
    auto |
    <outline-line-style>

    <outline-width> =
    <line-width>

    <image-1D> =
    <stripes()>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <stripes()> =
    stripes( <color-stripe># )

    <color-stripe> =
    <color> &&
    [ <length-percentage> | <flex> ]?

    <length-percentage> =
    <length> |
    <percentage>

    outline = 
    <'outline-color'> ||
    <'outline-style'> ||
    <'outline-width'>

    <outline-color> =
    auto |
    [ <color> | <image-1D> ]

    <outline-style> =
    auto |
    <outline-line-style>

    <outline-width> =
    <line-width>

    <image-1D> =
    <stripes()>

    <line-width> =
    <length [0,∞]> |
    thin |
    medium |
    thick

    <stripes()> =
    stripes( <color-stripe># )

    <color-stripe> =
    <color> &&
    [ <length-percentage> | <flex> ]?

    <length-percentage> =
    <length> |
    <percentage>

  • overflow-clip-margin/index.json
    overflow-clip-margin = 
    <visual-box> ||
    <length [0,∞]>

    <visual-box> =
    content-box |
    padding-box |
    border-box

    overflow-clip-margin = 
    <visual-box> ||
    <length [0,∞]>

    <visual-box> =
    content-box |
    padding-box |
    border-box

  • perspective/index.json
    perspective = 
    none |
    <length [0,∞]>

    perspective = 
    none |
    <length [0,∞]>

  • ratio/index.json
    <ratio> = 
    <number [0,∞]> [ / <number [0,∞]> ]?

    <ratio> = 
    <number [0,∞]> [ / <number [0,∞]> ]?

  • tab-size/index.json
    tab-size = 
    <number [0,∞]> |
    <length [0,∞]>

    tab-size = 
    <number [0,∞]> |
    <length [0,∞]>

  • text-size-adjust/index.json
    text-size-adjust = 
    auto |
    none |
    <percentage [0,∞]>

    text-size-adjust = 
    auto |
    none |
    <percentage [0,∞]>

  • transition-duration/index.json
    transition-duration = 
    <time [0s,∞]>#

    transition-duration = 
    <time [0s,∞]>#

  • widows/index.json
    widows = 
    <integer [1,∞]>

    widows = 
    <integer [1,∞]>