diff --git a/CSS/CSS (Basic).sublime-syntax b/CSS/CSS (Basic).sublime-syntax new file mode 100644 index 00000000000..d6943f4f7c0 --- /dev/null +++ b/CSS/CSS (Basic).sublime-syntax @@ -0,0 +1,3300 @@ +%YAML 1.2 +--- +# https://www.sublimetext.com/docs/syntax.html +# Derived from https://github.com/i-akhmadullin/Sublime-CSS3 +name: CSS (Basic) +scope: source.css.basic +version: 2 +hidden: true + +############################################################################### + +variables: + # Basic tokens + # https://www.w3.org/TR/css3-selectors/#lex + unicode: \\\h{1,6}[ \t\n\f]? + escape: (?:{{unicode}}|\\[^\n\f\h]) + nmstart: (?:[_[:alpha:][:^ascii:]]|{{escape}}) + nmchar: (?:[-_[:alnum:][:^ascii:]]|{{escape}}) + + # Identifier Break + # The proper pattern would be (?!{{nmchar}}), but its impact on performance + # is just too high, thus several optimizations are applied. + # 1. Use positive lookahead with \Z to handle `eof` + # 2. Breaks are ascii characters other than denoted by {{nmchar}}. + # 3. Assume unicode or escape character if backslash is matched, instead of + # matching (?!{{escape}}) which also effects performance negative. + break: (?=[[^-_[:alnum:]\\]&&[[:ascii:]]]|\Z) + + # Identifiers + # https://www.w3.org/TR/css-syntax-3/#typedef-ident-token + # https://www.w3.org/TR/css3-selectors/#lex + ident: (?:{{custom_ident}}|{{generic_ident}}) + custom_ident: (?:--{{nmchar}}*) + generic_ident: (?:-?{{nmstart}}{{nmchar}}*) + + # Ilegal Custom Identifier Names + # https://www.w3.org/TR/css-values-4/#custom-idents + illegal_custom_ident: |- + \b{{illegal_custom_ident_tokens}}{{break}} + illegal_custom_ident_tokens: |- + (?xi: auto | default | inherit | initial | none | unset ) + + # Types + # https://www.w3.org/TR/css3-values/#numeric-types + # https://www.w3.org/TR/css-syntax-3/#number-token-diagram + integer: ([-+]?)(\d+) + float: ([-+]?)(\d*(\.)\d+(?:[eE][-+]?\d+)?|\d+[eE][-+]?\d+) + + # Units + # https://www.w3.org/TR/css3-values/#lengths + # https://developer.mozilla.org/en-US/docs/Web/CSS/length + units: |- + (?x: + % + | {{absolute_lengths}} + | {{angle_units}} + | {{duration_units}} + | {{font_relative_lengths}} + | {{frequency_units}} + | {{resolution_units}} + | {{viewport_percentage_lengths}} + ) + font_relative_lengths: (?i:cap|ch|em|ex|ic|lh|rem|rlh)\b + viewport_percentage_lengths: (?i:vh|vw|vi|vb|vmin|vmax)\b + absolute_lengths: (?i:cm|mm|q|in|pt|pc|px|fr)\b + angle_units: (?i:deg|grad|rad|turn)\b + duration_units: (?i:s|ms)\b + frequency_units: (?i:Hz|kHz)\b + resolution_units: (?i:dpi|dpcm|dppx)\b + + # Combinators + # https://drafts.csswg.org/selectors-4/#combinators + combinators: (?:>{1,3}|[~+]|\|{2}) + + vendor_prefix: -(?:webkit|moz|ms|o)- + + # Custom Element Names + # https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts + custom_element_tags: \b[a-z]{{custom_element_chars}}*-{{custom_element_chars}}*{{break}} + # Note: Excludes `.` as it is used to identify attribute access + custom_element_chars: |- + (?x: + [-_a-z0-9\x{00B7}] + | [\x{00C0}-\x{00D6}] + | [\x{00D8}-\x{00F6}] + | [\x{00F8}-\x{02FF}] + | [\x{0300}-\x{037D}] + | [\x{037F}-\x{1FFF}] + | [\x{200C}-\x{200D}] + | [\x{203F}-\x{2040}] + | [\x{2070}-\x{218F}] + | [\x{2C00}-\x{2FEF}] + | [\x{3001}-\x{D7FF}] + | [\x{F900}-\x{FDCF}] + | [\x{FDF0}-\x{FFFD}] + | [\x{10000}-\x{EFFFF}] + ) + + # HTML tags + # https://developer.mozilla.org/en-US/docs/Web/HTML/Element + # Note: Sections are sorted by expected frequency. + html_tags: |- + (?x: + {{html_inline_tags}} + | {{html_text_tags}} + | {{html_section_tags}} + | {{html_table_tags}} + | {{html_embedded_tags}} + | {{html_forms_tags}} + | {{html_media_tags}} + | {{html_interactive_tags}} + | {{html_script_tags}} + | {{html_web_tags}} + | {{html_markup_tags}} + | {{html_header_tags}} + | {{html_root_tags}} + | {{html_deprecated_tags}} + ) + + html_root_tags: |- + \b(?xi: html | body ){{break}} + + html_header_tags: |- + \b(?xi: base | head | link | meta | script | style | title ){{break}} + + html_section_tags: |- + \b(?xi: + address | article | aside | footer | header | h1 | h2 | h3 | h4 | h5 | h6 + | hgroup | main | nav | section + ){{break}} + + html_text_tags: |- + \b(?xi: + blockquote | cite | dd | dt | dl | div | figcaption | figure | hr | li + | ol | p | pre | ul + ){{break}} + + html_inline_tags: |- + \b(?xi: + a | abbr | b | bdi | bdo | br | code | data | time | dfn | em | i | kbd + | mark | q | rb | ruby | rp | rt | rtc | s | samp | small | span | strong + | sub | sup | u | var | wbr + ){{break}} + + html_media_tags: |- + \b(?xi: area | audio | source | img | map | track | video ){{break}} + + html_embedded_tags: |- + \b(?xi: embed | iframe | object | param | picture | source ){{break}} + + html_script_tags: |- + \b(?xi: canvas | noscript | script ){{break}} + + html_markup_tags: |- + \b(?xi: del | ins ){{break}} + + html_table_tags: |- + \b(?xi: + caption | col | colgroup | table | tbody | tr | td | tfoot | th | thead + ){{break}} + + html_forms_tags: |- + \b(?xi: + button | datalist | option | fieldset | label | form | input | legend + | meter | optgroup | select | output | progress | textarea + ){{break}} + + html_interactive_tags: |- + \b(?xi: details | dialog | menu | summary ){{break}} + + html_web_tags: |- + \b(?xi: slot | template ){{break}} + + html_deprecated_tags: |- + \b(?xi: + acronym | applet | basefont | bgsound | big | blink | center | command + | content | dir | element | font | frame | frameset | image | isindex + | keygen | listing | marquee | menuitem | multicol | nextid | nobr + | noembed | noframes | plaintext | shadow | spacer | strike | tt | xmp + ){{break}} + + # SVG tag names + # maintained from previous CSS.sublime-syntax + svg_tags: |- + \b(?xi: + circle | clipPath | defs | ellipse | eventsource | filter | foreignObject + | g | glyph | glyphRef | line | linearGradient | marker | mask | path + | pattern | polygon | polyline | radialGradient | rect | stop | svg + | switch | symbol | text | textPath | tref | tspan | use + # custom element like tags reserved for SVG/MathML + | annotation-xml | color-profile | missing-glyph + | font-face(?: -src | -uri | -format | -name )? + ){{break}} + + # Predefined Color Values (Standard Set) + # https://www.w3.org/TR/CSS22/syndata.html#color-units + standard_colors: |- + \b(?xi: + aqua | black | blue | fuchsia | gray | green | lime | maroon | navy + | olive | orange | purple | red | silver | teal | white | yellow + ){{break}} + + # Predefined Color Values (Extended Set) + # https://www.w3.org/TR/css3-color/#svg-color + extended_colors: |- + \b(?xi: + aliceblue | antiquewhite | aquamarine | azure | beige | bisque + | blanchedalmond | blueviolet | brown | burlywood | cadetblue | chartreuse + | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue + | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki + | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred + | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey + | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey + | dodgerblue | firebrick | floralwhite | forestgreen | gainsboro + | ghostwhite | gold | goldenrod | greenyellow | grey | honeydew | hotpink + | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen + | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow + | lightgray | lightgreen | lightgrey | lightpink | lightsalmon + | lightseagreen | lightskyblue | lightslategray | lightslategrey + | lightsteelblue | lightyellow | limegreen | linen | magenta + | mediumaquamarine | mediumblue | mediumorchid | mediumpurple + | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise + | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin + | navajowhite | oldlace | olivedrab | orangered | orchid | palegoldenrod + | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru + | pink | plum | powderblue | rebeccapurple | rosybrown | royalblue + | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna + | skyblue | slateblue | slategray | slategrey | snow | springgreen + | steelblue | tan | thistle | tomato | turquoise | violet | wheat + | whitesmoke | yellowgreen + ){{break}} + + # Illegal Counter Style Definition Names + # https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style-name + counter_style_illegal_names: |- + \b(?xi: decimal | disc | {{illegal_custom_ident_tokens}} ){{break}} + + # Predefined Counter Styles + # https://drafts.csswg.org/css-counter-styles-3/#predefined-counters + counter_style_names: |- + \b(?xi: + none | arabic-indic | armenian | bengali | cambodian | circle + | cjk-decimal | cjk-earthly-branch | cjk-heavenly-stem | decimal-leading-zero + | decimal | devanagari | disclosure-closed | disclosure-open | disc + | ethiopic-numeric | georgian | gujarati | gurmukhi | hebrew + | hiragana-iroha | hiragana | japanese-formal | japanese-informal + | kannada | katakana-iroha | katakana | khmer + | korean-hangul-formal | korean-hanja-formal | korean-hanja-informal | lao + | lower-alpha | lower-armenian | lower-greek | lower-latin | lower-roman + | malayalam | mongolian | myanmar | oriya | persian + | simp-chinese-formal | simp-chinese-informal + | square | tamil | telugu | thai | tibetan + | trad-chinese-formal | trad-chinese-informal + | upper-alpha | upper-armenian | upper-latin | upper-roman + ){{break}} + + # @counter-style Property Names + # https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style + counter_style_property_names: |- + \b(?xi: + additive-symbols | negative | pad | prefix | range + | suffix | symbols (?# | fallback | speak-as | system ) + ){{break}} + + # Predefined Counter Speak As Property Constants + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-speak-as + counter_speak_as_constants: |- + \b(?xi: auto | bullets | numbers | words | spell-out ){{break}} + + # Predefined Counter Style System Constants + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-system + counter_system_constants: |- + \b(?xi: cyclic | numeric | alphabetic | symbolic | additive | fixed ){{break}} + + # @font-face Property Names + # https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face + font_face_property_names: |- + \b(?xi: + ascent-override | descent-override | font-display | (?# font-family | ) src + | font-feature-settings | font-variation-settings | font-stretch | font-style + | font-weight | font-variant | line-gap-override | size-adjust | unicode-range + ){{break}} + + # @page Margin Names + # https://developer.mozilla.org/en-US/docs/Web/CSS/@page + page_margin_names: |- + \b(?xi: + (?: bottom | top ) - (?: left-corner | left | center | right | right-corner ) + | (?: left | right ) - (?: top | middle | bottom ) + ){{break}} + + # @page Property Names + # https://developer.mozilla.org/en-US/docs/Web/CSS/@page + page_property_names: |- + \b(?xi: bleed | margin | marks | size ){{break}} + + # Property names are sorted by popularity in descending order. + # Note: + # 1) Popularity data taken from https://www.chromestatus.com/metrics/css/popularity + # 2) Properties starting with `alias-` or `webkit-` are removed + property_names: |- + \b(?xi: + width | height | display | position | padding | border | margin | top + | left | margin-top | color | font-size | background-color | text-align + | opacity | font-weight | font-family | background | overflow | line-height + | float | box-sizing | text-decoration | z-index | cursor | margin-left + | border-radius | vertical-align | margin-bottom | margin-right | right + | padding-top | padding-left | max-width | box-shadow | bottom | content + | padding-right | transform | white-space | min-height | padding-bottom + | background-image | border-bottom | visibility | outline + | background-position | min-width | transition | border-top | border-color + | background-repeat | text-transform | background-size | max-height + | list-style | clear | font-style | justify-content | border-left + | align-items | border-right | border-width | font | text-overflow + | overflow-y | pointer-events | border-style | flex-direction | animation + | overflow-x | letter-spacing | flex | word-wrap | flex-wrap | fill + | transform-origin | list-style-type | border-collapse + | border-top-left-radius | border-bottom-left-radius | user-select | clip + | text-shadow | border-bottom-right-radius | word-break | flex-grow + | border-top-right-radius | border-bottom-color | border-top-color + | flex-shrink | align-self | text-rendering | animation-timing-function + | direction | background-clip | zoom | border-spacing | text-indent + | outline-offset | border-left-color | transition-property + | border-right-color | animation-name | stroke | touch-action + | animation-duration | transition-delay | filter | overflow-wrap + | animation-delay | border-bottom-width | variable | font-variant + | flex-basis | transition-duration | border-top-width | animation-fill-mode + | object-fit | transition-timing-function | will-change | outline-width + | order | outline-style | stroke-width | border-right-width | align-content + | resize | table-layout | appearance | animation-iteration-count + | border-left-width | flex-flow | stroke-dashoffset | stroke-dasharray + | backface-visibility | unicode-bidi | border-bottom-style + | text-size-adjust | border-top-style | animation-direction | word-spacing + | contain | speak | grid-template-columns | font-feature-settings + | perspective | list-style-position | clip-path | image-rendering + | font-display | transform-style | border-left-style | outline-color + | background-position-x | background-attachment | border-right-style + | margin-block-end | background-origin | animation-play-state | hyphens + | stroke-linecap | font-stretch | object-position | page-break-inside + | column-gap | counter-reset | counter-increment | background-position-y + | margin-block-start | grid-template-rows | column-count | quotes + | padding-inline-end | text-decoration-skip | border-image | all + | page-break-after | fill-opacity | font-variant-ligatures + | scroll-boundary-behavior | empty-cells | list-style-image | justify-self + | overflow-anchor | padding-inline-start | grid-gap | text-decoration-color + | margin-inline-start | caret-color | grid-column-gap | aspect-ratio + | stroke-opacity | margin-inline-end | grid-column | perspective-origin + | caption-side | columns | scroll-behavior | justify-items | line-break + | grid-row-gap | column-width | orphans | widows | backdrop-filter + | mix-blend-mode | tab-size | stop-color | column-rule | grid-area + | stroke-miterlimit | text-align-last | page-break-before + | grid-column-start | border-image-slice | border-image-repeat + | text-decoration-style | border-image-width | grid-column-end | grid-row + | scroll-snap-align | scroll-snap-type | border-image-outset + | text-decoration-line | column-fill | border-inline-end-width + | border-inline-start-width | grid-row-start | stroke-linejoin + | inset-inline-end | inset-inline-start | grid-auto-flow | grid-auto-rows + | grid-template-areas | border-image-source | fill-rule | font-kerning + | grid-row-end | font-variant-numeric | break-inside | shape-outside + | color-scheme | shape-image-threshold | scroll-boundary-behavior-y + | text-decoration-skip-ink | page | isolation | background-blend-mode + | page-orientation | inset | gap | scroll-snap-margin | column-rule-color + | place-items | column-rule-style | shape-rendering | content-visibility + | grid-auto-columns | scroll-boundary-behavior-x | writing-mode | clip-rule + | font-variant-caps | scroll-padding | text-anchor | mask | row-gap + | background-repeat-x | intrinsic-size | text-underline-position + | font-variant-east-asian | column-span | vector-effect | dominant-baseline + | stop-opacity | break-after | grid-template | break-before | mask-type + | scroll-snap-stop | border-inline-start-color | border-inline-end-color | r + | alignment-baseline | text-decoration-thickness | column-rule-width | d + | image-orientation | rx | text-orientation | cx | baseline-shift + | scroll-padding-top | padding-block-start | padding-block-end | cy + | min-inline-size | inline-size | background-repeat-y | shape-margin + | block-size | marker | min-block-size | paint-order | ry + | scroll-snap-margin-top | border-block-end-color | border-block-end-width + | border-inline-start-style | border-inline-end-style + | border-block-end-style | font-variation-settings + | border-block-start-width | border-block-start-color + | border-block-start-style | place-content | y | x | ruby-position + | text-combine-upright | color-interpolation-filters | color-interpolation + | color-rendering | transform-box | marker-end | flood-color | marker-start + | marker-mid | flood-opacity | lighting-color | forced-color-adjust + | buffered-rendering | place-self | offset-path | scroll-padding-left + | offset-distance | offset-rotate | text-underline-offset | max-inline-size + | max-block-size | border-inline-end | scroll-snap-margin-inline-start + | scroll-padding-inline-start | scroll-snap-margin-block-end + | scroll-snap-margin-block-start | scroll-padding-block-end + | scroll-snap-margin-inline-end | scroll-padding-block-start + | scroll-padding-inline-end | font-optical-sizing | grid + | scroll-padding-bottom | scroll-snap-margin-left | inset-block-end + | overscroll-behavior-block | overscroll-behavior-inline | inset-block-start + | scroll-snap-margin-right | scroll-padding-right + | scroll-snap-margin-bottom | border-inline-start | margin-inline + | border-end-start-radius | border-end-end-radius | margin-block + | border-start-start-radius | border-start-end-radius | padding-inline + | counter-set | padding-block | border-block-end | offset + | border-block-start | inset-inline | inset-block | scroll-snap-margin-block + | scroll-padding-inline | scroll-padding-block | scroll-snap-margin-inline + | border-block | offset-rotation | border-inline | border-block-color + | border-inline-width | border-inline-color | border-block-style + | border-block-width | border-inline-style | motion | motion-offset + | motion-path | font-size-adjust | text-justify | scale | scrollbar-gutter + | animation-timeline | rotate | translate | snap-height | math-style + | math-shift | math-depth | offset-anchor | offset-position + | glyph-orientation-vertical | internal-callback | text-line-through + | text-line-through-color | text-line-through-mode | text-line-through-style + | text-line-through-width | text-overline | text-overline-color + | text-overline-mode | text-overline-style | text-overline-width + | text-underline | text-underline-color | text-underline-mode + | text-underline-style | text-underline-width | shape-inside | shape-padding + | enable-background | color-profile | glyph-orientation-horizontal | kerning + | image-resolution | max-zoom | min-zoom | orientation | user-zoom + | mask-source-type | touch-action-delay | scroll-blocks-on | motion-rotation + | scroll-snap-points-x | scroll-snap-points-y | scroll-snap-coordinate + | scroll-snap-destination | apply-at-rule | viewport-fit | overflow-block + | syntax | content-size | intrinsic-block-size | intrinsic-height + | intrinsic-inline-size | intrinsic-width | render-subtree + | origin-trial-test-property | subtree-visibility + | math-superscript-shift-style | start + # END OF QUERY RESULTS + # BEGIN OF legacy properties which existed before the last query + | box-direction | line-box-contain | mask-image | mask-origin | flex-order + | font-synthesis | line-clamp | flex-negative | blend-mode + | font-variant-position | flex-align | column-break-before + | flex-item-align | azimuth | user-drag | mask-repeat | box-flex + | flex-preferred-size | font-language-override | box-align + | text-emphasis-color | box-ordinal-group | mask-composite + | transform-origin-y | pause | tap-highlight-color | text-fill-color + | text-emphasis-style | transform-origin-x | text-emphasis-position + | box-pack | box-decoration-break | box-orient + | text-emphasis | mask-clip | nbsp-mode | pause-after | pitch + | text-height | mask-position | flex-line-pack | perspective-origin-x + | mask-size | font-variant-alternates | perspective-origin-y + | font-smoothing | overflow-scrolling | flex-positive | pitch-range + ){{break}} + + global_property_constants: |- + \b(?xi: inherit | initial | revert | revert-layer | unset ){{break}} + + unsorted_property_constants: |- + \b(?xi: + absolute|active|add + | all(-(petite|small)-caps|-scroll)? + | alpha(betic)? + | alternate(-reverse)? + | always|annotation|antialiased|at + | auto(hiding-scrollbar|-flow)? + | avoid(-column|-page|-region)? + | background(-color|-image|-position|-size)? + | backwards|balance|baseline|below|bevel|bicubic|bidi-override|blink + | block-line-height + | blur + | border(-bottom|-left|-right|-top)?-(color|radius|width|style) + | border-(bottom|top)-(left|right)-radius + | border-image(-outset|-repeat|-slice|-source|-width)? + | border(-bottom|-left|-right|-top|-collapse|-spacing|-box)? + | both|bottom + | box(-shadow)? + | break-(all|word) + | brightness + | butt(on)? + | capitalize + | cent(er|ral) + | char(acter-variant)? + | cjk-ideographic|clip|clone|close-quote + | closest-(corner|side) + | col-resize|collapse + | color(-stop|-burn|-dodge)? + | column((-count|-gap|-reverse|-rule(-color|-width)?|-width)|s)? + | common-ligatures|condensed|consider-shifts|contain + | content(-box|s)? + | contextual|contrast|cover + | crisp(-e|E)dges + | crop + | cross(hair)? + | da(rken|shed) + | default|dense|diagonal-fractions|difference|disabled + | discretionary-ligatures|disregard-shifts + | distribute(-all-lines|-letter|-space)? + | dotted|double|drop-shadow + | (nwse|nesw|ns|ew|sw|se|nw|ne|w|s|e|n)-resize + | ease(-in-out|-in|-out)? + | element|ellipsis|embed|end|EndColorStr|evenodd + | exclu(de(-ruby)?|sion) + | expanded + | (extra|semi|ultra)-(condensed|expanded) + | farthest-(corner|side)? + | fill(-box|-opacity)? + | filter|first|fixed|flat + | fit-content + | flex((-basis|-end|-grow|-shrink|-start)|box)? + | flip|flood-color + | font(-size(-adjust)?|-stretch|-weight)? + | forwards + | from(-image)? + | full-width|geometricPrecision|glyphs|gradient|grayscale + | grid(-height)? + | groove|hand|hanging|hard-light|height|help|hidden|hide + | historical-(forms|ligatures) + | horizontal(-tb)? + | hue + | ideograph(-alpha|-numeric|-parenthesis|-space|ic) + | inactive|include-ruby|infinite + | inline(-block|-box|-flex(box)?|-line-height|-table)? + | inset|inside + | inter(-ideograph|-word|sect) + | invert|isolat(e|ion) + | jis(04|78|83|90) + | justify(-all)? + | keep-all + | landscape|ledger|legal|letter|A[3-5]|(JIS-)?B[4-5]|portrait + | last|left|letter-spacing|legacy + | light(e[nr]|ing-color) + | line(-edge|-height|-through)? + | linear(-gradient|RGB)? + | lining-nums|list-item|local|loose|lowercase|lr-tb|ltr + | lumin(osity|ance)|manual + | margin(-bottom|-box|-left|-right|-top)? + | marker(-offset|s)? + | mathematical + | max-(content|height|lines|size|width) + | medium|middle + | min-(content|height|width) + | miter|mixed|move|multiply|newspaper + | no-(change|clip|(close|open)-quote|(common|discretionary|historical)-ligatures|contextual|drop|repeat) + | none|nonzero|not-allowed|nowrap + | offset(-after|-before|-end|-start)? + | oldstyle-nums|opacity|open-quote + | optimize(Legibility|Precision|Quality|Speed) + | order|ordinal|ornaments + | outline(-color|-offset|-width)? + | outset|outside|over(line|-edge|lay) + | padding(-bottom|-box|-left|-right|-top)? + | page|painted|paused + | perspective-origin + | petite-caps|pixelated|pointer + | pre(-line|-wrap)? + | preserve-3d + | progid:DXImageTransform.Microsoft.(Alpha|Blur|dropshadow|gradient|Shadow) + | progress + | proportional-(nums|width) + | radial-gradient|recto|region|relative + | repeat(-[xy])? + | repeating-(linear|radial)-gradient + | replaced|reset-size|reverse|ridge|right + | round + | row(-resize|-reverse)? + | run-in + | ruby(-base|-text)?(-container)? + | rtl|running|saturat(e|ion)|screen + | safe + | scroll(-position|bar)? + | separate|sepia + | scale-down + | shape-(image-threshold|margin|outside) + | show + | sideways(-lr|-rl)? + | simplified + | slashed-zero|slice + | smooth|snap|solid|soft-light + | space(-around|-between|-evenly)? + | span|sRGB + | stack(ed-fractions)? + | start(ColorStr)? + | static + | step-(end|start) + | sticky + | stop-(color|opacity) + | stretch|strict + | stroke(-box|-dash(array|offset)|-miterlimit|-opacity|-width)? + | style(set)? + | stylistic + | sub(grid|pixel-antialiased|tract)? + | super|swash + | table(-caption|-cell|(-column|-footer|-header|-row)-group|-column|-row)? + | tabular-nums|tb-rl + | text((-bottom|-(decoration|emphasis)-color|-indent|-(over|under|after|before)-edge|-shadow|-size(-adjust)?|-top)|field)? + | thi(ck|n) + | titling-ca(ps|se) + | to[p]? + | touch|traditional + | transform(-origin)? + | under(-edge|line)? + | unicase|unsafe|uppercase|upright + | use-(glyph-orientation|script) + | verso + | vertical(-align|-ideographic|-lr|-rl|-text)? + | view-box + | viewport-fill(-opacity)? + | visibility + | visible(Fill|Painted|Stroke)? + | wait|wavy|weight|whitespace|width|word-spacing + | wrap(-reverse)? + | z-index|zero + | zoom(-in|-out)? + ){{break}} + + # https://www.w3.org/TR/css-fonts-4/#font-display-desc + font_display_constants: |- + \b(?xi: block | swap | fallback | optional ){{break}} + + # Generic Font Families + font_family_constants: |- + \b(?xi: + # CSS 2 fonts + # https://www.w3.org/TR/CSS22/fonts.html#generic-font-families + sans-serif | serif | cursive | monospace | fantasy + # CSS 3 level 4 fonts + # https://www.w3.org/TR/2019/WD-css-fonts-4-20191113/#generic-family-value + | emoji | math | fangsong | system-ui + # https://www.w3.org/TR/2019/WD-css-fonts-4-20191113/#standard-font-families + | ui-sans-serif | ui-serif | ui-monospace | ui-rounded + ){{break}} + + # Generic Font Properties + # https://www.w3.org/TR/CSS22/fonts.html#font-shorthand + # https://developer.mozilla.org/en-US/docs/Web/CSS/font + font_prop_constants: |- + \b(?xi: caption | icon | menu | message-box | small-caption | status-bar ){{break}} + + # https://www.w3.org/TR/CSS22/fonts.html#font-size-props + # https://developer.mozilla.org/en-US/docs/Web/CSS/font-size + font_size_constants: |- + \b(?xi: larger | large | medium | small | smaller | x{1,2}-(?: large | small ) ){{break}} + + # https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch + font_stretch_constants: |- + \b(?xi: (?: normal | (?: extra | semi | ultra ) - )? ( condensed | expanded ) ){{break}} + + # https://www.w3.org/TR/CSS22/fonts.html#font-styling + # https://developer.mozilla.org/en-US/docs/Web/CSS/font-style + font_style_constants: |- + \b(?xi: normal | italic | oblique ){{break}} + + # https://www.w3.org/TR/CSS22/fonts.html#font-boldness + # https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight + font_weight_constants: |- + \b(?xi: normal | bold | bolder | lighter ){{break}} + + # https://developer.mozilla.org/de/docs/Web/CSS/font-variant + font_variant_constants: |- + \b(?xi: (?: all- )? (?: small | petite ) -caps | unicase | titling-cap ){{break}} + +############################################################################### + +contexts: + + main: + - include: comments + - include: selectors + - include: at-rules + - include: property-lists + - include: rule-terminators + - include: illegal-groups + +###[ COMMENTS ]################################################################ + + comments: + # empty block comment + - match: (/\*+)(\*/) + scope: comment.block.css + captures: + 1: punctuation.definition.comment.begin.css + 2: punctuation.definition.comment.end.css + # normal block comment + - match: /\*+ + scope: punctuation.definition.comment.begin.css + push: comments-content + + comments-content: + - meta_scope: comment.block.css + - match: \*+/ + scope: punctuation.definition.comment.end.css + pop: 1 + - match: ^\s*(\*)(?!/) + captures: + 1: punctuation.definition.comment.css + +###[ AT RULES ]################################################################ + + at-rules: + - include: at-charset + - include: at-counter-style + - include: at-custom-media + - include: at-document + - include: at-font-face + - include: at-import + - include: at-keyframes + - include: at-layer + - include: at-media + - include: at-namespace + - include: at-page + - include: at-page-margin + - include: at-supports + - include: at-other + + # @charset + # https://www.w3.org/TR/css-syntax-3/#at-ruledef-charset + at-charset: + - match: (@)(?i:charset){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-charset-content + + at-charset-content: + - meta_scope: meta.at-rule.charset.css + - include: quoted-strings + - include: at-rule-end + + # @counter-style + # https://drafts.csswg.org/css-counter-styles-3/#the-counter-style-rule + at-counter-style: + - match: (@)(?i:counter-style){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-counter-style-content + + at-counter-style-content: + - meta_scope: meta.at-rule.counter-style.css + - match: \{ + scope: punctuation.section.block.begin.css + push: at-counter-style-block-content + - include: at-counter-style-names + - include: at-rule-end + + at-counter-style-block-content: + - meta_scope: meta.property-list.css meta.block.css + - include: block-end2 + - include: comments + - include: at-counter-style-property-names + - include: property-values + - include: rule-terminators + - include: illegal-blocks + - include: illegal-groups + + at-counter-style-names: + - match: '{{counter_style_illegal_names}}' + scope: invalid.illegal.identifier.css + - match: '{{ident}}' + scope: entity.other.counter-style-name.css + + at-counter-style-property-names: + - include: counter-style-fallback-properties + - include: counter-style-system-properties + - include: counter-style-speak-as-properties + - match: '{{counter_style_property_names}}' + scope: meta.property-name.css support.type.property-name.css + + # @custom-media + # https://?? + at-custom-media: + - match: (@)(?i:custom-media){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: + - at-custom-media-content + - at-custom-media-identifier + + at-custom-media-identifier: + - match: '{{custom_ident}}' + scope: entity.other.custom-media.css + pop: 1 + - include: comments + - include: else-pop + + at-custom-media-content: + - meta_scope: meta.at-rule.custom-media.css + - include: media-queries + - include: at-rule-end + + # @document + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document + at-document: + - match: (@)(?i:document){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-document-content + + at-document-content: + - meta_scope: meta.at-rule.document.css + - include: comma-delimiters + - include: url-functions + - include: at-document-functions + - include: at-rule-block + - include: at-rule-end + + # @font-face + # https://www.w3.org/TR/css-fonts-4/#at-font-face-rule + at-font-face: + - match: (@)(?i:font-face){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-font-face-content + + at-font-face-content: + - meta_scope: meta.at-rule.font-face.css + - match: \{ + scope: punctuation.section.block.begin.css + push: at-font-face-block-content + - include: at-rule-end + + at-font-face-block-content: + - meta_scope: meta.property-list.css meta.block.css + - include: block-end2 + - include: comments + - include: at-font-face-property-names + - include: property-values + - include: rule-terminators + - include: illegal-blocks + - include: illegal-groups + + at-font-face-property-names: + - match: \b(?i:font-family){{break}} + scope: meta.property-name.css support.type.property-name.css + push: font-family-value + - match: '{{font_face_property_names}}' + scope: meta.property-name.css support.type.property-name.css + + # @import + # https://www.w3.org/TR/css-cascade-4/#at-ruledef-import + # https://developer.mozilla.org/en-US/docs/Web/CSS/@import + at-import: + - match: (@)(?i:import){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-import-content + + at-import-content: + - meta_scope: meta.at-rule.import.css + - include: quoted-strings + - include: url-functions + - include: media-queries + - include: at-import-functions + - include: at-rule-end + + # @keyframes + # https://www.w3.org/TR/css3-animations/#at-ruledef-keyframes + at-keyframes: + - match: (@)(?i:keyframes){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-keyframe-content + + at-keyframe-content: + - meta_scope: meta.at-rule.keyframe.css + - include: comma-delimiters + - include: at-keyframe-block + - include: at-keyframe-names + - include: at-rule-end + + at-keyframe-names: + - match: '{{illegal_custom_ident}}' + scope: invalid.illegal.identifier.css + - match: '{{ident}}' + scope: entity.other.animation-name.css + - include: quoted-strings + + at-keyframe-block: + - match: \{ + scope: punctuation.section.block.begin.css + push: at-keyframe-block-content + + at-keyframe-block-content: + - meta_scope: meta.block.css + - include: block-end2 + - include: comments + - include: property-lists + - include: at-keyframe-selectors + + at-keyframe-selectors: + - match: (?=[[:alnum:].,%]) + push: at-keyframe-selector-content + + at-keyframe-selector-content: + - meta_scope: meta.selector.css + - include: comma-delimiters + - include: percentage-constants + - match: \b(?i:from|to){{break}} + scope: keyword.other.selector.css + - include: selector-end + + # @layer + # https://developer.mozilla.org/en-US/docs/Web/CSS/@layer + at-layer: + - match: (@)(?i:layer){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-layer-content + + at-layer-content: + - meta_scope: meta.at-rule.layer.css + - include: comma-delimiters + - include: at-layer-names + - include: at-rule-block + - include: at-rule-end + + at-layer-names: + - match: ({{ident}})(\.) + captures: + 1: entity.other.layer.css + 2: punctuation.accessor.dot.css + push: at-layer-qualified-name + - match: '{{ident}}' + scope: entity.other.layer.css + + at-layer-qualified-name: + - meta_scope: meta.path.css + - match: ({{ident}})(\.) + captures: + 1: entity.other.layer.css + 2: punctuation.accessor.dot.css + - match: '{{ident}}' + scope: entity.other.layer.css + pop: 1 + - include: immediately-pop + + # @media + # https://drafts.csswg.org/css-conditional-3/#at-ruledef-media + at-media: + - match: (@)(?i:media){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-media-content + + at-media-content: + - meta_scope: meta.at-rule.media.css + - include: media-queries + - include: at-rule-block + - include: at-rule-end + + # @namespace + # https://www.w3.org/TR/css3-namespace/ + at-namespace: + - match: (@)(?i:namespace){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: + - at-namespace-content + - at-namespace-identifier + + at-namespace-identifier: + - match: '{{ident}}(?!{{nmchar}}|\()' + scope: entity.other.namespace-prefix.css + pop: 1 + - include: comments + - include: else-pop + + at-namespace-content: + - meta_scope: meta.at-rule.namespace.css + - include: var-functions + - include: url-functions + - include: quoted-urls + - include: at-rule-end + + # @page + # https://www.w3.org/TR/css3-page/#at-ruledef-page + # https://developer.mozilla.org/en-US/docs/Web/CSS/@page + at-page: + - match: (@)(?i:page){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-page-content + + at-page-content: + - meta_scope: meta.at-rule.page.css + - include: comma-delimiters + - include: at-page-block + - include: at-page-names + - include: at-rule-end + + at-page-names: + - match: (:)(?i:blank|first|left|right|recto|verso){{break}} + captures: + 0: entity.other.pseudo-class.css + 1: punctuation.definition.entity.css + - match: (:){{nmchar}}* + captures: + # 0: invalid.illegal.pseudo-class.css + 1: punctuation.definition.entity.css + - match: '{{ident}}' + scope: entity.other.page-name.css + + at-page-block: + - match: \{ + scope: punctuation.section.block.begin.css + push: at-page-block-content + + at-page-block-content: + - meta_scope: meta.property-list.css meta.block.css + - include: at-page-margin + - include: at-page-property-list-content + - include: at-other + + at-page-margin: + - match: (@){{page_margin_names}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-page-margin-content + + at-page-margin-content: + - meta_scope: meta.at-rule.margin.css + - include: at-page-property-lists + - include: at-rule-end + + at-page-property-lists: + - match: \{ + scope: punctuation.section.block.begin.css + push: at-page-property-list-content + + at-page-property-list-content: + - meta_scope: meta.property-list.css meta.block.css + - include: block-end2 + - include: comments + - include: at-page-property-names + - include: property-values + - include: rule-terminators + - include: illegal-blocks + - include: illegal-groups + + at-page-property-names: + - match: '{{page_property_names}}' + scope: meta.property-name.css support.type.property-name.css + # Note: Consume unknown identifiers to maintain word boundaries. + - match: '{{generic_ident}}' + + # @supports + # https://drafts.csswg.org/css-conditional-3/#at-supports + at-supports: + - match: (@)(?i:supports){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-supports-content + + at-supports-content: + - meta_scope: meta.at-rule.supports.css + - include: at-supports-groups + - include: at-supports-functions + - include: at-supports-operators + - include: at-rule-block + - include: at-rule-end + + at-supports-operators: + - match: \b(?i:and|or|not){{break}} + scope: keyword.operator.logical.css + + at-supports-groups: + - match: \( + scope: punctuation.section.group.begin.css + push: at-supports-group-content + + at-supports-group-content: + - meta_scope: meta.group.css + - include: group-end + - include: at-rule-end + - include: at-supports-groups + - include: at-supports-functions + - include: at-supports-operators + - include: rule-list-body + + # @ + # Fallback context for incomplete or unknown at-rules. + # https://www.w3.org/TR/css-syntax-3/#at-rule + # https://www.w3.org/TR/CSS22/syndata.html#parsing-errors + at-other: + - match: (@){{ident}} + push: at-other-content + + at-other-content: + - meta_scope: meta.at-rule.other.css + - match: \{ + scope: punctuation.section.block.begin.css + push: at-other-block-content + - include: at-rule-end + + at-other-block-content: + - meta_scope: meta.block.css + - include: block-end2 + + at-rule-block: + - match: \{ + scope: punctuation.section.block.begin.css + push: at-rule-block-content + + at-rule-block-content: + - meta_scope: meta.block.css + - include: block-end2 + - include: main + + at-rule-end: + - match: (?=[;{}]) + pop: 1 + - include: comments + +###[ MEDIA QUERIES ]########################################################### + + # https://drafts.csswg.org/mediaqueries-5/#media + media-queries: + - include: comma-delimiters + - include: media-query-conditions + - include: media-query-media-types + + media-query-conditions: + - match: \( + scope: punctuation.section.group.begin.css + push: media-query-group-content + - match: '[<>]=?|=' + scope: keyword.operator.comparison.css + - match: \b(?i:and|or|not|only){{break}} + scope: keyword.operator.logical.css + + media-query-group-content: + - meta_scope: meta.group.css + - match: (?=[,;{}]) + pop: 1 + - include: group-end + - include: comments + - include: media-query-conditions + - include: media-query-property-names + - include: media-query-property-values + - include: var-functions + - include: calc-functions + - include: scalar-rational-constants + - include: numeric-constants + + media-query-property-names: + - match: |- + (?xi: + ({{vendor_prefix}})? + ( + (?: min- | max- )? + (?: + color (?: -gamut | -index )? + | monochrome | resolution | update + | (?: device- )? (?: height | width | aspect-ratio | pixel-ratio ) + ) + | (?:any-)?(?: pointer | hover ) + | prefers-(?: reduced-motion | color-scheme ) + | display-mode | grid | orientation | scan | scripting + | overflow-(?: block | inline ) + ) + ){{break}} + captures: + 1: support.type.vendor-prefix.css + 2: support.type.property-name.css + + media-query-property-values: + - match: ':' + scope: punctuation.separator.key-value.css + push: media-query-property-value-content + + media-query-property-value-content: + - match: |- + \b(?xi: + # global css constants + all | inherit | initial | none | unset + # color-gamut / color-index: + | srgb | p3 | rec2020 + # display-mode: + | browser | fullscreen | standalone | minimal-ui + # hover: + | hover + # orientation: + | landscape | portrait + # overflow: + | optional-paged | paged | scroll + # pointer: + | coarse | fine + # prefers-color-scheme: + | dark | light + # scan: + | interlace | progressive + # scripting: + | enabled | initial-only + # update: + | fast | normal | slow + ){{break}} + scope: support.constant.property-value.css + pop: 1 + - include: else-pop + + media-query-media-types: + # Media Types: + # https://www.w3.org/TR/CSS21/media.html + # https://drafts.csswg.org/mediaqueries-5/#media-types + - match: |- + \b(?xi: + # global css constants + all | inherit | initial | none | unset + # specs + | print | screen | speech + # deprecated + | aural | braille | embossed | handheld | projection | tty | tv + ){{break}} + scope: support.constant.media.css + +###[ SELECTORS ]############################################################### + + selectors: + - match: (?=[:.*#[:alpha:]\[]|{{combinators}}) + push: selector-content + + selector-content: + - meta_scope: meta.selector.css + - include: selector-end + - include: comma-delimiters + # Html Tags + - match: '{{html_tags}}' + scope: entity.name.tag.html.css + - match: '{{svg_tags}}' + scope: entity.name.tag.svg.css + # Custom Elements + # http://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts + - match: '{{custom_element_tags}}' + scope: entity.name.tag.custom.css + - match: \* + scope: variable.language.wildcard.asterisk.css + # Class and Id Selectors + # https://drafts.csswg.org/selectors-4/#class-html + - match: \. + scope: punctuation.definition.entity.css + push: + - meta_scope: entity.other.attribute-name.class.css + - match: '{{generic_ident}}' + pop: 1 + - include: immediately-pop + # https://drafts.csswg.org/selectors-4/#id-selectors + - match: \# + scope: punctuation.definition.entity.css + push: + - meta_scope: entity.other.attribute-name.id.css + - match: '{{generic_ident}}' + pop: 1 + - include: immediately-pop + # Attribute Selectors + # https://drafts.csswg.org/selectors-4/#attribute-selectors + - match: \[ + scope: punctuation.section.brackets.begin.css + push: + - attribute-selector-meta + - attribute-selector-key + # Pseudo Elements + # https://drafts.csswg.org/selectors-4/#pseudo-elements + - match: '::' + scope: punctuation.definition.pseudo-element.css + push: + - meta_include_prototype: false + - include: vendor-prefixes + - include: pseudo-element-function + - include: pseudo-element-regular + - include: immediately-pop + # Pseudo Classes + # https://drafts.csswg.org/selectors-4/#pseudo-classes + - match: ':' + scope: punctuation.definition.pseudo-class.css + push: + - meta_include_prototype: false + - include: vendor-prefixes + - include: pseudo-element-css2 + - include: pseudo-class-function + - include: pseudo-class-regular + - include: immediately-pop + # Combinators + # https://drafts.csswg.org/selectors-4/#combinators + # https://drafts.csswg.org/css-scoping/#deep-combinator + - match: '{{combinators}}(?![>~+|])' + scope: keyword.operator.combinator.css + - match: '{{combinators}}{2,}|\|{3,}' + scope: invalid.illegal.combinator.css + + selector-end: + - match: (?=[;@(){}]) + pop: 1 + - include: comments + + # Qualified Names + # https://drafts.csswg.org/css-namespaces-3/#css-qnames + namespace-prefixes: + - match: (?:({{ident}})|(\*))?(\|)(?!=) + captures: + 1: entity.other.namespace-prefix.css + 2: variable.language.wildcard.asterisk.css + 3: punctuation.separator.namespace.css + + vendor-prefixes: + - match: '{{vendor_prefix}}' + scope: support.type.vendor-prefix.css + +###[ SELECTORS / ATTRIBUTE SELECTORS ]######################################### + + attribute-selector-meta: + - meta_scope: meta.attribute-selector.css meta.brackets.css + - include: immediately-pop + + attribute-selector-key: + - include: namespace-prefixes + - match: '{{ident}}' + scope: entity.other.attribute-name.css + set: attribute-selector-operator + - match: \* + scope: variable.language.wildcard.asterisk.css + set: attribute-selector-operator + - include: attribute-selector-operator + + attribute-selector-operator: + - match: '[~*|^$]?=' + scope: keyword.operator.logical.css + set: + - attribute-selector-flag + - attribute-selector-value + - include: attribute-selector-flag + + attribute-selector-value: + - include: comments + - include: quoted-string + - match: '[^\s\]\[''"]+' + scope: meta.string.css string.unquoted.css + pop: 1 + - include: else-pop + + attribute-selector-flag: + - match: \b[iI]{{break}} + scope: keyword.other.flag.css + set: attribute-selector-end + - include: attribute-selector-end + + attribute-selector-end: + - match: \] + scope: punctuation.section.brackets.end.css + pop: 1 + - include: selector-end + - match: \S + scope: invalid.illegal.css + +###[ SELECTORS / PSEUDO CLASSES ]############################################## + + # Functional Pseudo Classes + # https://drafts.csswg.org/selectors-4/#functional-pseudo-class + pseudo-class-function: + - include: pseudo-class-function-dir + - include: pseudo-class-function-lang + - include: pseudo-class-function-with-anb-args + - include: pseudo-class-function-with-selector-args + - include: pseudo-class-function-with-generic-args + + # Special :dir() pseudo-class + # https://drafts.csswg.org/selectors-4/#the-dir-pseudo + pseudo-class-function-dir: + - match: (?i:dir)(?=\() + scope: meta.function-call.identifier.css entity.other.pseudo-class.css + set: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: direction-constants + + # Special :lang() pseudo-class + # https://drafts.csswg.org/selectors-4/#the-lang-pseudo + pseudo-class-function-lang: + - match: (?i:lang)(?=\() + scope: meta.function-call.identifier.css entity.other.pseudo-class.css + set: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: quoted-strings + - include: language-ranges + + # Functional Pseudo Classes with `An+B` param + # An+B Notation: https://drafts.csswg.org/css-syntax/#anb + pseudo-class-function-with-anb-args: + - match: |- + (?xi: + # https://drafts.csswg.org/selectors-4/#table-pseudos + nth-last-col + | nth-col + # https://drafts.csswg.org/selectors-4/#typed-child-index + | nth-last-child + | nth-child + | nth-last-of-type + | nth-of-type + )(?=\() + scope: meta.function-call.identifier.css entity.other.pseudo-class.css + set: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: anb-notation-values + - include: scalar-integer-constants + + anb-notation-values: + - match: \b(even|odd){{break}} + scope: support.constant.property-value.css + - match: (([-+]?)(\d*)(n))\s*(([-+])(\s*\d+))? + captures: + 1: meta.number.integer.decimal.css + 2: keyword.operator.arithmetic.css + 3: constant.numeric.value.css + 4: constant.numeric.suffix.css + 5: meta.number.integer.decimal.css + 6: keyword.operator.arithmetic.css + 7: constant.numeric.value.css + - match: '[-+]\s+\d+n?|[-+]?\d+\s+n' + scope: invalid.illegal.numeric.css + + # Functional Pseudo Classes with selector list + pseudo-class-function-with-selector-args: + - match: (?i:matches|is|where|not|has)(?=\() + scope: meta.function-call.identifier.css entity.other.pseudo-class.css + set: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: selectors + + # Functional Pseudo Classes with generic arguments + pseudo-class-function-with-generic-args: + - match: '{{ident}}(?=\()' + scope: meta.function-call.identifier.css entity.other.pseudo-class.css + set: other-functions-arguments + + # Regular Pseudo Classes + # https://drafts.csswg.org/selectors-4/#pseudo-classes + pseudo-class-regular: + - match: '{{ident}}' + scope: entity.other.pseudo-class.css + pop: 1 + + # Legacy Pseudo Elements + # https://drafts.csswg.org/selectors-4/#pseudo-elements + pseudo-element-css2: + # Note: CSS1 & CSS2 compatibility requires those to be matched after `:` + - match: (?i:before|after|first-line|first-letter){{break}} + scope: entity.other.pseudo-element.css + pop: 1 + + # Functional Pseudo Elements + # https://drafts.csswg.org/selectors-4/#pseudo-elements + pseudo-element-function: + - match: '{{ident}}(?=\()' + scope: meta.function-call.identifier.css entity.other.pseudo-element.css + set: other-functions-arguments + + # Pseudo Elements + # https://drafts.csswg.org/selectors-4/#pseudo-elements + pseudo-element-regular: + - match: '{{ident}}' + scope: entity.other.pseudo-element.css + pop: 1 + +###[ PROPERTY LISTS ]########################################################## + + property-lists: + - match: \{ + scope: punctuation.section.block.begin.css + push: property-list-content + + property-list-content: + - meta_scope: meta.property-list.css meta.block.css + - match: \} + scope: punctuation.section.block.end.css + pop: 1 + - include: rule-list-body + + rule-list-body: + # Note: This context is used by HTML.sublime-syntax + - include: comments + - include: property-identifiers + - include: property-values + - include: rule-terminators + - include: illegal-blocks + - include: illegal-groups + +###[ PROPERTY IDENTIFIERS ]#################################################### + + property-identifiers: + - match: (?=[-[:alpha:]]) + push: property-identifier-content + + property-identifier-content: + - meta_scope: meta.property-name.css + - include: vendor-prefixes + # specific properties with special treatment + - include: counter-property + - include: font-family-property + - include: font-property + # common properties + - include: builtin-property + - include: custom-property + - include: deprecated-property + - include: other-property + # bailout + - include: immediately-pop + + builtin-property: + - match: '{{property_names}}' + scope: support.type.property-name.css + pop: 1 + + # Custom Properties + # https://drafts.csswg.org/css-variables/#typedef-custom-property + custom-property: + # custom property definition + - match: '{{custom_ident}}' + scope: entity.other.custom-property.css + pop: 1 + + deprecated-property: + - match: \b(var-)({{ident}}) + scope: invalid.deprecated.custom-property.css + captures: + 1: entity.other.custom-property.prefix.css + 2: entity.other.custom-property.name.css + pop: 1 + + other-property: + # Note: Consume unknown identifiers to maintain word boundaries. + - match: '{{generic_ident}}' + pop: 1 + +###[ PROPERTY VALUES ]######################################################### + + property-values: + - match: ':' + scope: punctuation.separator.key-value.css + push: property-value-content + + property-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: comma-delimiters + - include: common-operators + - include: builtin-values + - include: other-functions + - include: other-constants + + builtin-values: + - include: quoted-strings + - include: builtin-functions + - include: color-values + - include: line-names + - include: unicode-ranges + - include: numeric-constants + - include: common-constants + - include: generic-font-names + - include: vendor-prefixes + + # When including `color-values` and `color-adjuster-functions`, make sure it is + # included after the color adjustors to prevent `color-values` from consuming + # conflicting function names & color constants such as `red`, `green`, or `blue`. + color-values: + - include: color-functions + - include: color-constants + + # Counter Symbol Values + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-system + # https://drafts.csswg.org/css-counter-styles-3/#symbols-function + counter-symbol-values: + - include: image-values + - include: counter-system-constants + - include: scalar-integer-constants + - include: quoted-strings + + # 2D Image Values + # https://drafts.csswg.org/css-images-4/#image-values + image-values: + - include: cross-fade-functions + - include: gradient-functions + - include: image-functions + - include: image-set-functions + - include: url-functions + +###[ COUNTER PROPERTY ]######################################################## + + counter-property: + # https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters + - match: \b(?i:counter-(increment|reset|set)){{break}} + scope: support.type.property-name.css + set: counter-property-value + + counter-property-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: counter-property-value-content + - include: else-pop + + counter-property-value-content: + - include: global-constants + - match: (?i:none){{break}} + scope: constant.language.null.css + - match: '{{ident}}' + scope: entity.other.counter-name.css + - include: property-value-content + +###[ COUNTER STYLE FALLBACK PROPERTY ]######################################### + + # Counter Style Fallback + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-fallback + counter-style-fallback-properties: + - match: \b(?i:fallback){{break}} + scope: meta.property-name.css support.type.property-name.css + push: counter-style-fallback-property-value + + counter-style-fallback-property-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: counter-style-fallback-property-value-content + - include: else-pop + + counter-style-fallback-property-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: var-functions + - include: counter-style-identifiers + + counter-style-identifiers: + - match: '{{counter_style_names}}' + scope: support.constant.counter-style-name.css + - match: '{{ident}}' + scope: entity.other.counter-style-name.css + +###[ COUNTER STYLE SYSTEM PROPERTY ]########################################### + + # Counter Style System + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-system + counter-style-system-properties: + - match: \b(?i:system){{break}} + scope: meta.property-name.css support.type.property-name.css + push: counter-style-system-property-value + + counter-style-system-property-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: counter-style-system-property-value-content + - include: else-pop + + counter-style-system-property-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: var-functions + - include: counter-symbol-values + - match: \b(?i:extends){{break}} + scope: keyword.declaration.extends.css + push: counter-style-identifier + + counter-style-identifier: + - match: '{{counter_style_names}}' + scope: support.constant.counter-style-name.css + pop: 1 + - match: '{{ident}}' + scope: entity.other.counter-style-name.css + pop: 1 + - include: comments + - include: else-pop + +###[ COUNTER STYLE SPEAK AS PROPERTY ]######################################### + + # Counter Style Speak As + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-speak-as + counter-style-speak-as-properties: + - match: \b(?i:speak-as){{break}} + scope: meta.property-name.css support.type.property-name.css + push: counter-style-speak-as-property-value + + counter-style-speak-as-property-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: counter-style-speak-as-property-value-content + - include: else-pop + + counter-style-speak-as-property-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: var-functions + - include: quoted-strings + - include: counter-speak-as-constants + - include: counter-style-identifiers + +###[ FONT FAMILY PROPERTY ]#################################################### + + # Font-Family Property + # https://drafts.csswg.org/css-fonts-3/#font-family-prop + # https://developer.mozilla.org/en-US/docs/Web/CSS/font-family + font-family-property: + - match: \b(?i:font-family){{break}} + scope: support.type.property-name.css + set: font-family-value + + font-family-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: font-family-value-content + - include: else-pop + + font-family-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: comma-delimiters + - include: important-operators + - include: var-functions + - include: quoted-strings + - include: global-constants + - include: generic-font-names + - include: font-family-names + +###[ FONT PROPERTY ]########################################################### + + # Font Property + # https://drafts.csswg.org/css-fonts-3/#font-prop + # https://developer.mozilla.org/en-US/docs/Web/CSS/font + font-property: + - match: \b(?i:font){{break}} + scope: support.type.property-name.css + set: font-property-value + + font-property-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: font-property-value-content + - include: else-pop + + font-property-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: comma-delimiters + - include: arithmetic-operators + - include: important-operators + - include: var-functions + - include: calc-functions + - include: color-values + - include: numeric-constants + - include: quoted-strings + - include: vendor-prefixes + - include: global-constants + - include: generic-font-names + - include: font-display-constants + - include: font-prop-constants + - include: font-size-constants + - include: font-stretch-constants + - include: font-style-constants + - include: font-variant-constants + - include: font-weight-constants + - include: font-family-names + +###[ BUILTIN FUNCTIONS ]####################################################### + + builtin-functions: + - include: at-counter-functions + - include: at-font-functions + - include: attr-functions + - include: calc-functions + - include: color-adjuster-functions + - include: cross-fade-functions + - include: filter-functions + - include: filters-functions + - include: gradient-functions + - include: image-functions + - include: image-set-functions + - include: minmax-functions + - include: repeat-functions + - include: shape-functions + - include: timing-functions + - include: toggle-functions + - include: transform-functions + - include: url-functions + - include: var-functions + + function-arguments-common: + - include: group-end + - include: terminator-pop + - include: comments + - include: var-functions + +###[ BUILTIN AT RULE FUNCTIONS ]############################################### + + at-counter-functions: + # counter() + # https://drafts.csswg.org/css-lists-3/#funcdef-counter + # counters() + # https://drafts.csswg.org/css-lists-3/#funcdef-counters + - match: \b(?i:counters?)(?=\() + scope: meta.function-call.identifier.css support.function.counter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - counter-function-arguments-body + - counter-identifier + + # symbols() + # https://drafts.csswg.org/css-counter-styles-3/#symbols-function + - match: \b(?i:symbols)(?=\() + scope: meta.function-call.identifier.css support.function.counter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: counter-symbol-values + + counter-function-arguments-body: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: counter-style-identifiers + - include: quoted-strings + + counter-identifier: + - match: '{{ident}}' + scope: entity.other.counter-name.css + pop: 1 + - include: comments + - include: else-pop + + at-document-functions: + # url-prefix() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-prefix + - match: \b(?i:url-prefix)(?=\() + scope: meta.function-call.identifier.css support.function.url-prefix.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-urls + - include: unquoted-urls + + # domain() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-domain + - match: \b(?i:domain)(?=\() + scope: meta.function-call.identifier.css support.function.domain.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-urls + - include: unquoted-urls + + # regexp() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-regexp + - match: \b(?i:regexp)(?=\() + scope: meta.function-call.identifier.css support.function.regexp.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-strings + + at-font-functions: + # format() + # https://drafts.csswg.org/css-fonts-3/#descdef-src + # format() is also mentioned in `issue 2` at https://drafts.csswg.org/css-images-3/#issues-index + # but does not seem to be implemented in any manner + - match: \b(?i:format)(?=\() + scope: meta.function-call.identifier.css support.function.font-face.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-strings + + # local() + # https://drafts.csswg.org/css-fonts-3/#descdef-src + - match: \b(?i:local)(?=\() + scope: meta.function-call.identifier.css support.function.font-face.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-strings + - include: generic-font-names + - include: font-family-names + + at-import-functions: + # layer() + # https://developer.mozilla.org/en-US/docs/Web/CSS/@import + - match: \b(?i:layer){{break}} + scope: meta.function-call.identifier.css support.function.layer.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: group-end + - include: at-rule-end + - include: at-layer-names + - include: immediately-pop + # supports() + # https://developer.mozilla.org/en-US/docs/Web/CSS/@import + - match: \b(?i:supports)(?=\() + scope: meta.function-call.identifier.css support.function.supports.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: at-supports-group-content + + at-supports-functions: + # selector() + # https://developer.mozilla.org/en-US/docs/Web/CSS/@supports + - match: \b(?i:selector)(?=\() + scope: meta.function-call.identifier.css support.function.selector.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - meta_content_scope: meta.selector.css + - include: group-end + - include: at-rule-end + - include: selector-content + +###[ BUILTIN COLOR FUNCTIONS ]################################################# + + # Color Functions + # https://drafts.csswg.org/css-color + color-functions: + # rgb(), rgba() + # https://drafts.csswg.org/css-color/#rgb-functions + - match: \b(?i:rgba?)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: percentage-constants + - include: scalar-constants + + # hsl(), hsla() + # https://drafts.csswg.org/css-color/#the-hsl-notation + # hwb() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-hwb + - match: \b(?i:hsla?|hwb)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: angle-constants + - include: percentage-constants + - include: scalar-constants + + # gray() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-gray + - match: \b(?i:gray)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: percentage-constants + - include: scalar-constants + + # device-cmyk() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-device-cmyk + - match: \b(?i:device-cmyk)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: color-adjuster-functions # must be included before `color-values` + - include: color-values + - include: percentage-constants + - include: scalar-constants + + # color-mod() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-color-mod + - match: \b(?i:color)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: color-adjuster-functions # must be included before `color-values` + - include: color-values + - include: angle-constants + - include: scalar-constants + + # Color Adjuster Functions - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#typedef-color-adjuster + color-adjuster-functions: + # red(), green(), blue(), alpha() - Not yet implemented by browsers + - match: \b(?i:red|green|blue|alpha|a)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: color-adjuster-operators + - include: percentage-constants + - include: scalar-constants + + # hue() - Not yet implemented by browsers + - match: \b(?i:hue|h)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: color-adjuster-operators + - include: angle-constants + + # saturation(), lightness(), whiteness(), blackness() - Not yet implemented by browsers + - match: \b(?i:saturation|lightness|whiteness|blackness|[slwb])(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: color-adjuster-operators + - include: percentage-constants + + # tint(), shade(), contrast() - Not yet implemented by browsers + # contrast() interferes with the contrast() filter function; + # therefore, it is not yet implemented here + - match: \b(?i:tint|shade)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: percentage-constants + + # blend(), blenda() - Not yet implemented by browsers + - match: \b(?i:blenda|blend)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: color-values + - include: percentage-constants + - match: \b(?i:rgb|hsl|hwb){{break}} + scope: keyword.other.color-space.css + +###[ BUILTIN FILTER FUNCTIONS ]################################################ + + filter-functions: + # filter() + # https://drafts.fxtf.org/filters/#funcdef-filter + - match: \b(?i:filter)(?=\() + scope: meta.function-call.identifier.css support.function.filter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: filters-functions + - include: image-values + - include: quoted-strings + + # Filter Functions + # https://drafts.fxtf.org/filters/#typedef-filter-function + filters-functions: + # blur() + # https://drafts.fxtf.org/filters/#funcdef-filter-blur + - match: \b(?i:blur)(?=\() + scope: meta.function-call.identifier.css support.function.filter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: length-constants + + # brightness(), contrast(), grayscale(), invert(), opacity(), saturate(), sepia() + # https://drafts.fxtf.org/filters/#funcdef-filter-brightness + - match: \b(?i:brightness|contrast|grayscale|invert|opacity|saturate|sepia)(?=\() + scope: meta.function-call.identifier.css support.function.filter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: percentage-constants + - include: scalar-constants + + # drop-shadow() + # https://drafts.fxtf.org/filters/#funcdef-filter-drop-shadow + - match: \b(?i:drop-shadow)(?=\() + scope: meta.function-call.identifier.css support.function.filter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: color-values + - include: length-constants + + # hue-rotate() + # https://drafts.fxtf.org/filters/#funcdef-filter-hue-rotate + - match: \b(?i:hue-rotate)(?=\() + scope: meta.function-call.identifier.css support.function.filter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: angle-constants + +###[ BUILTIN GRID FUNCTIONS ]################################################## + + # minmax() + # https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax + minmax-functions: + - match: \b(?i:minmax)(?=\() + scope: meta.function-call.identifier.css support.function.grid.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: grid-constants + - include: length-constants + - include: percentage-constants + + # repeat() + # https://drafts.csswg.org/css-grid/#funcdef-repeat + repeat-functions: + - match: \b(?i:repeat)(?=\() + scope: meta.function-call.identifier.css support.function.grid.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: \b(?i:auto-fill|auto-fit){{break}} + scope: keyword.other.grid.css + - include: calc-functions + - include: minmax-functions + - include: grid-constants + - include: length-constants + - include: percentage-constants + - include: scalar-integer-constants + - include: line-names + +###[ BUILTIN IMAGE FUNCTIONS ]################################################# + + # cross-fade() + # https://drafts.csswg.org/css-images-4/#funcdef-cross-fade + cross-fade-functions: + - match: \b(?i:cross-fade)(?=\() + scope: meta.function-call.identifier.css support.function.image.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: color-values + - include: image-values + - include: percentage-constants + - include: quoted-urls + + # image() + # https://drafts.csswg.org/css-images-4/#funcdef-image + image-functions: + - match: \b(?i:image)(?=\() + scope: meta.function-call.identifier.css support.function.image.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: color-values + - include: image-values + - include: quoted-urls + - include: direction-constants + + # image-set() + # https://drafts.csswg.org/css-images-4/#funcdef-image-set + image-set-functions: + - match: \b(?i:image-set)(?=\() + scope: meta.function-call.identifier.css support.function.image.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: color-values + - include: image-values + - include: quoted-urls + - include: resolution-constants + - match: ([0-9]+)(x) + scope: meta.number.integer.decimal.css + captures: + 1: constant.numeric.value.css + 2: constant.numeric.suffix.css + + # Gradient Functions + # https://drafts.csswg.org/css-images-3/#gradients + gradient-functions: + # conic-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient() + # repeating-conic-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-conic-gradient() + - match: \b((?:repeating-)?conic-gradient)(?=\() + scope: meta.function-call.identifier.css support.function.gradient.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: \b(?i:at|from){{break}} + scope: keyword.other.gradient.css + - match: \b(?i:bottom|center|left|right|top){{break}} + scope: support.constant.property-value.css + - include: color-values + - include: angle-constants + - include: length-constants + - include: percentage-constants + + # linear-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient() + # repeating-linear-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient() + - match: \b((?:repeating-)?linear-gradient)(?=\() + scope: meta.function-call.identifier.css support.function.gradient.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: \b(?i:to){{break}} + scope: keyword.other.gradient.css + - match: \b(?i:bottom|left|right|top){{break}} + scope: support.constant.property-value.css + - include: color-values + - include: angle-constants + - include: length-constants + - include: percentage-constants + + # radial-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient() + # repeating-radial-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient() + - match: \b((?:repeating-)?radial-gradient)(?=\() + scope: meta.function-call.identifier.css support.function.gradient.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: \b(?i:at|circle|ellipse){{break}} + scope: keyword.other.gradient.css + - match: \b(?i:bottom|center|left|right|top|(closest|farthest)-(corner|side)){{break}} + scope: support.constant.property-value.css + - include: color-values + - include: length-constants + - include: percentage-constants + +###[ BUILTIN SHAPE FUNCTIONS ]################################################# + + # Shape Functions + # https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape + shape-functions: + # rect() - Deprecated + # https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect + - match: \b(?i:rect)(?=\() + scope: meta.function-call.identifier.css support.function.shape.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - match: \b(?i:auto){{break}} + scope: support.constant.property-value.css + - include: calc-functions + - include: length-constants + + # inset() + # https://www.w3.org/TR/css-shapes-1/#funcdef-inset + - match: \b(?i:inset)(?=\() + scope: meta.function-call.identifier.css support.function.shape.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - match: \b(?i:round){{break}} + scope: keyword.other.shape.css + - include: calc-functions + - include: length-constants + - include: percentage-constants + + # circle() + # https://www.w3.org/TR/css-shapes-1/#funcdef-circle + # ellipse() + # https://www.w3.org/TR/css-shapes-1/#funcdef-ellipse + - match: \b(?i:circle|ellipse)(?=\() + scope: meta.function-call.identifier.css support.function.shape.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - match: \b(?i:at){{break}} + scope: keyword.other.shape.css + - match: \b(?i:top|right|bottom|left|center|closest-side|farthest-side){{break}} + scope: support.constant.property-value.css + - include: calc-functions + - include: length-constants + - include: percentage-constants + + # polygon() + # https://www.w3.org/TR/css-shapes-1/#funcdef-polygon + - match: \b(?i:polygon)(?=\() + scope: meta.function-call.identifier.css support.function.shape.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: \b(?i:nonzero|evenodd){{break}} + scope: support.constant.property-value.css + - include: calc-functions + - include: length-constants + - include: percentage-constants + +###[ BUILTIN TIMING FUNCTIONS ]################################################ + + # Timing Functions + # https://www.w3.org/TR/web-animations-1/#timing-functions + timing-functions: + # cubic-bezier() + # https://www.w3.org/TR/web-animations-1/#cubic-bzier-timing-function + - match: \b(?i:cubic-bezier)(?=\() + scope: meta.function-call.identifier.css support.function.timing.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: scalar-constants + + # steps() + # https://www.w3.org/TR/web-animations-1/#step-timing-function + - match: \b(?i:steps)(?=\() + scope: meta.function-call.identifier.css support.function.timing.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - match: \b(?i:end|middle|start){{break}} + scope: keyword.other.timing.css + - include: scalar-integer-constants + +###[ BUILTIN TRANSFORM FUNCTIONS ]############################################# + + # Transform Functions + # https://www.w3.org/TR/css-transforms-1/#transform-functions + transform-functions: + # transform functions with comma separated types + # matrix(), scale(), matrix3d(), scale3d() + - match: \b(?i:matrix3d|scale3d|matrix|scale)(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: scalar-constants + + # transform functions with comma separated or types + # translate(), translate3d() + - match: \b(?i:translate(3d)?)(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: percentage-constants + - include: length-constants + - include: scalar-constants + + # transform functions with a single or type + # translateX(), translateY() + - match: \b(?i:translate[XY])(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: percentage-constants + - include: length-constants + - include: scalar-constants + + # transform functions with a single type + # rotate(), skewX(), skewY(), rotateX(), rotateY(), rotateZ() + - match: \b(?i:rotate[XYZ]?|skew[XY])(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: angle-constants + + # transform functions with comma separated types + # skew() + - match: \b(?i:skew)(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: angle-constants + + # transform functions with a single type + # translateZ(), perspective() + - match: \b(?i:translateZ|perspective)(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: length-constants + + # transform functions with a comma separated or types + # rotate3d() + - match: \b(?i:rotate3d)(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: angle-constants + - include: scalar-constants + + # transform functions with a single type + # scaleX(), scaleY(), scaleZ() + - match: \b(?i:scale[XYZ])(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: scalar-constants + +###[ BUILTIN VALUE FUNCTIONS ]################################################# + + # attr() + # https://www.w3.org/TR/css3-values/#funcdef-attr + attr-functions: + - match: \b(?i:attr)(?=\() + scope: meta.function-call.identifier.css support.function.attr.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - attr-function-arguments-value + - attr-function-arguments-identifier + + attr-function-arguments-identifier: + - include: namespace-prefixes + - include: quoted-string + - include: var-function + - match: '{{ident}}' + scope: entity.other.attribute-name.css + pop: 1 + - include: comments + - include: else-pop + + attr-function-arguments-value: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: '{{units}}' + scope: keyword.other.unit.css + - include: color-values + - include: common-constants + - include: generic-font-names + - include: numeric-constants + + calc-functions: + # calc() + # https://www.w3.org/TR/css3-values/#funcdef-calc + - match: \b(?i:calc)(?=\() + scope: meta.function-call.identifier.css support.function.calc.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: calc-function-arguments-content + + # clamp() + # https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() + # max() + # https://developer.mozilla.org/en-US/docs/Web/CSS/max() + # min() + # https://developer.mozilla.org/en-US/docs/Web/CSS/min() + - match: \b(?i:clamp|max|min)(?=\() + scope: meta.function-call.identifier.css support.function.calc.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: calc-function-arguments-content + - include: comma-delimiters + + calc-function-arguments-content: + - meta_scope: meta.group.css + - match: \) + scope: punctuation.section.group.end.css + set: maybe-illegal-operator + - match: \( + scope: punctuation.section.group.begin.css + push: calc-function-arguments-content + - include: terminator-pop + - include: comments + - include: attr-functions + - include: calc-functions + - include: var-functions + - match: '{{float}}({{units}})?' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + push: maybe-illegal-operator + - match: '{{integer}}({{units}})?' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + push: maybe-illegal-operator + - match: '[-+*/]' + scope: keyword.operator.arithmetic.css + + toggle-functions: + # toggle() + # https://www.w3.org/TR/css3-values/#toggle-notation + - match: \b(?i:toggle)(?=\() + scope: meta.function-call.identifier.css support.function.toggle.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: vendor-prefixes + - include: color-values + - include: common-constants + - include: numeric-constants + - include: quoted-strings + + # url() + # https://drafts.csswg.org/css-values-3/#urls + url-functions: + - match: \b(?i:url)(?=\() + scope: meta.function-call.identifier.css support.function.url.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-urls + - include: unquoted-urls + + # var() + # https://drafts.csswg.org/css-variables/#funcdef-var + # Note: Match valid groups before `var-functions` context is included. + var-functions: + - match: \b(?i:var)(?=\() + scope: meta.function-call.identifier.css support.function.var.css + push: var-function-arguments + - include: illegal-groups + + var-function: + - match: \b(?i:var)(?=\() + scope: meta.function-call.identifier.css support.function.var.css + set: var-function-arguments + - include: illegal-groups + + var-function-arguments: + - match: \( + scope: punctuation.section.group.begin.css + set: + - var-function-arguments-defaults + - var-function-arguments-identifier + + var-function-arguments-defaults: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: group-end + - include: font-property-value-content + + var-function-arguments-identifier: + - match: '{{custom_ident}}' + scope: variable.other.custom-property.css + pop: 1 + - include: comments + - include: else-pop + +###[ OTHER FUNCTIONS ]######################################################### + + other-functions: + - match: '{{ident}}(?=\()' + scope: meta.function-call.identifier.css variable.function.css + push: other-functions-arguments + + other-functions-arguments: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: quoted-strings + - include: numeric-constants + - include: other-constants + +###[ CONSTANTS ]############################################################### + + color-constants: + # https://www.w3.org/TR/CSS22/syndata.html#color-units + - match: '{{standard_colors}}' + scope: support.constant.color.w3c.standard.css + # https://www.w3.org/TR/css3-color/#svg-color + - match: '{{extended_colors}}' + scope: support.constant.color.w3c.extended.css + # Special Color Keywords + # https://www.w3.org/TR/css3-color/#currentcolor + # https://www.w3.org/TR/css3-color/#transparent-def + - match: \b(?i:currentColor|transparent){{break}} + scope: support.constant.color.w3c.special.css + # Hex Color + - match: (#)(\h{3}|\h{6}){{break}} + scope: constant.other.color.rgb-value.css + captures: + 1: punctuation.definition.constant.css + # RGBA Hexadecimal Colors + # https://en.wikipedia.org/wiki/RGBA_color_space#RGBA_hexadecimal_.28word-order.29 + - match: (#)(\h{4}|\h{8}){{break}} + scope: constant.other.color.rgba-value.css + captures: + 1: punctuation.definition.constant.css + + common-constants: + - include: global-constants + - include: font-display-constants + - include: font-prop-constants + - include: font-size-constants + - include: font-stretch-constants + - include: font-style-constants + - include: font-variant-constants + - include: font-weight-constants + - include: generic-font-names + - include: unsorted-constants + + unsorted-constants: + - match: '{{unsorted_property_constants}}' + scope: support.constant.property-value.css + + counter-speak-as-constants: + - match: '{{counter_speak_as_constants}}' + scope: support.constant.property-value.css + + counter-system-constants: + - match: '{{counter_system_constants}}' + scope: support.constant.symbol-type.css + + direction-constants: + - match: \b(ltr|rtl){{break}} + scope: support.constant.property-value.css + + font-display-constants: + - match: '{{font_display_constants}}' + scope: support.constant.property-value.css + + font-prop-constants: + - match: '{{font_prop_constants}}' + scope: support.constant.property-value.css + + font-size-constants: + - match: '{{font_size_constants}}' + scope: support.constant.property-value.css + + font-stretch-constants: + - match: '{{font_stretch_constants}}' + scope: support.constant.property-value.css + + font-style-constants: + - match: '{{font_style_constants}}' + scope: support.constant.property-value.css + + font-weight-constants: + - match: '{{font_weight_constants}}' + scope: support.constant.property-value.css + + font-variant-constants: + - match: '{{font_variant_constants}}' + scope: support.constant.property-value.css + + # Generic Font Families + # https://drafts.csswg.org/css-fonts-3/#family-name-value + generic-font-names: + - match: '{{font_family_constants}}' + scope: support.constant.property-value.css + + global-constants: + - match: '{{global_property_constants}}' + scope: support.constant.property-value.css + + grid-constants: + - match: \b(?i:auto|max-content|min-content){{break}} + scope: support.constant.property-value.css + + other-constants: + - match: '{{ident}}' + scope: constant.other.css + +###[ NUMERIC CONSTANTS ]####################################################### + + # https://www.w3.org/TR/css3-values/#numeric-constantss + numeric-constants: + - match: '{{float}}({{units}})?' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{units}})?' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + + # Make sure `scalar-constants` is included after any other numeric values + # as `scalar-constants` will consume all numeric values. + scalar-constants: + - include: scalar-float-constants + - include: scalar-integer-constants + + scalar-float-constants: + - match: '{{float}}' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + + scalar-integer-constants: + - match: '{{integer}}' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + + scalar-rational-constants: + - match: \d+(/)\d+ + scope: meta.number.rational.css constant.numeric.value.css + captures: + 1: keyword.operator.arithmetic.css + + angle-constants: + - match: '{{float}}({{angle_units}})' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{angle_units}})' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + - match: \b0\b(?!%) + scope: meta.number.integer.decimal.css constant.numeric.value.css + + frequency-constants: + - match: '{{float}}({{frequency_units}})' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{frequency_units}})' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + + length-constants: + - match: '{{float}}({{font_relative_lengths}}|{{viewport_percentage_lengths}}|{{absolute_lengths}})' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{font_relative_lengths}}|{{viewport_percentage_lengths}}|{{absolute_lengths}})' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + - match: \b0\b(?!%) + scope: meta.number.integer.decimal.css constant.numeric.value.css + + resolution-constants: + - match: '{{float}}({{resolution_units}})' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{resolution_units}})' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + + percentage-constants: + - match: '{{float}}(%)' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}(%)' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + + time-constants: + - match: '{{float}}({{duration_units}})' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{duration_units}})' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + + # Unicode Ranges + # https://www.w3.org/TR/css-syntax-3/#urange + unicode-ranges: + - match: ([Uu]\+)([\h?]{1,6}(?:(-)\h{1,6})?) + scope: meta.number.unicode-range.css + captures: + 1: constant.numeric.prefix.css + 2: constant.numeric.value.css + 3: punctuation.separator.range.css + +###[ STRING CONSTANTS ]######################################################## + + # Font Family Names + # https://drafts.csswg.org/css-fonts-3/#family-name-value + font-family-names: + - match: '{{ident}}(?:\s+{{ident}}(?!\())*' + scope: meta.string.css string.unquoted.css + + # Language Ranges + # https://drafts.csswg.org/selectors-4/#language-range + language-ranges: + - match: (?={{nmstart}}|\*) + push: + - meta_include_prototype: false + - meta_scope: meta.string.css string.unquoted.css + - include: string-content + - match: \* + scope: variable.language.wildcard.asterisk.css + - match: (?!{{nmchar}}) + pop: 1 + + # Named Grid Lines + # https://drafts.csswg.org/css-grid/#named-lines + line-names: + - match: \[ + scope: punctuation.section.brackets.begin.css + push: line-names-content + + line-names-content: + - meta_scope: meta.line-names.css meta.brackets.css + - match: \] + scope: punctuation.section.brackets.end.css + pop: 1 + - match: '{{ident}}' + scope: meta.string.css string.unquoted.line-name.css + - include: terminator-pop + + quoted-strings: + - match: \" + scope: punctuation.definition.string.begin.css + push: double-quoted-string-content + - match: \' + scope: punctuation.definition.string.begin.css + push: single-quoted-string-content + + quoted-string: + - match: \" + scope: punctuation.definition.string.begin.css + set: double-quoted-string-content + - match: \' + scope: punctuation.definition.string.begin.css + set: single-quoted-string-content + + double-quoted-string-content: + - meta_include_prototype: false + - meta_scope: meta.string.css string.quoted.double.css + - match: \" + scope: punctuation.definition.string.end.css + pop: 1 + - include: string-content + + single-quoted-string-content: + - meta_include_prototype: false + - meta_scope: meta.string.css string.quoted.single.css + - match: \' + scope: punctuation.definition.string.end.css + pop: 1 + - include: string-content + + string-content: + - meta_include_prototype: false + - match: \n + scope: invalid.illegal.newline.css + pop: 1 + - match: \\\s*\n + scope: constant.character.escape.newline.css + - match: \\(?:\h{1,6}|.) + scope: constant.character.escape.css + +###[ URL STRING CONSTANTS ]#################################################### + + quoted-urls: + - match: \" + scope: + meta.string.css string.quoted.double.css + punctuation.definition.string.begin.css + push: double-quoted-url-content + - match: \' + scope: + meta.string.css string.quoted.single.css + punctuation.definition.string.begin.css + push: single-quoted-url-content + + double-quoted-url-content: + - meta_include_prototype: false + - meta_content_scope: + meta.path.url.css + meta.string.css string.quoted.double.css + - match: \" + scope: + meta.string.css string.quoted.double.css + punctuation.definition.string.end.css + pop: 1 + - include: string-content + - include: url-content + + single-quoted-url-content: + - meta_include_prototype: false + - meta_content_scope: + meta.path.url.css + meta.string.css string.quoted.single.css + - match: \' + scope: + meta.string.css string.quoted.single.css + punctuation.definition.string.end.css + pop: 1 + - include: string-content + - include: url-content + + # Unquoted URL token + # https://drafts.csswg.org/css-syntax-3/#consume-a-url-token + unquoted-urls: + - match: (?=[[:alnum:]/]) + push: unquoted-url-content + + unquoted-url-content: + - meta_include_prototype: false + - meta_content_scope: + meta.path.url.css + meta.string.css string.unquoted.css + - match: '["''(]' + scope: invalid.illegal.unexpected-token.css + set: + - meta_include_prototype: false + - match: (?=\)) + pop: 1 + - include: string-content + - match: (?=\)) + pop: 1 + - include: url-content + + url-content: + - include: string-content + - match: (%)\h{2} + scope: constant.character.escape.url.css + captures: + 1: punctuation.definition.escape.css + - match: '[/&?#]|://' + scope: punctuation.separator.path.css + +###[ OPERATORS ]############################################################### + + common-operators: + - include: arithmetic-operators + - include: important-operators + + arithmetic-operators: + - match: / + scope: keyword.operator.arithmetic.css + + important-operators: + - match: \!\s*(?i:important){{break}} + scope: keyword.other.important.css + + color-adjuster-operators: + - match: '[-+*](?=\s)' + scope: keyword.operator.arithmetic.css + - match: '[-+*/]' + scope: invalid.illegal.operator.css + + maybe-illegal-operator: + - match: '[-+](?=\s*\d)' + scope: invalid.illegal.operator.css + pop: 1 + - match: \s*([-+])(?=\d) + captures: + 1: invalid.illegal.operator.css + pop: 1 + - include: immediately-pop + +###[ PUNCTUATION ]############################################################# + + comma-delimiters: + - match: ',' + scope: punctuation.separator.sequence.css + + block-end2: + - match: \} + scope: punctuation.section.block.end.css + pop: 2 + + group-end: + - match: \) + scope: punctuation.section.group.end.css + pop: 1 + + rule-terminators: + - match: ; + scope: punctuation.terminator.rule.css + + illegal-blocks: + # https://www.w3.org/TR/CSS22/syndata.html#parsing-errors + - match: \{ + scope: invalid.illegal.unexpected-token.css + push: + - match: \} + scope: invalid.illegal.unexpected-token.css + pop: 1 + - match: \} + scope: invalid.illegal.unexpected-token.css + + illegal-groups: + # https://www.w3.org/TR/CSS22/syndata.html#parsing-errors + - match: \( + scope: invalid.illegal.unexpected-token.css + push: + - match: \) + scope: invalid.illegal.unexpected-token.css + pop: 1 + - match: \) + scope: invalid.illegal.unexpected-token.css + +###[ PROTOTYPES ]############################################################## + + else-pop: + - match: (?=\S) + pop: 1 + + immediately-pop: + - match: '' + pop: 1 + + terminator-pop: + - match: (?=[;){}]) + pop: 1 diff --git a/CSS/CSS.sublime-syntax b/CSS/CSS.sublime-syntax index 9baca2cd588..62e7c283974 100644 --- a/CSS/CSS.sublime-syntax +++ b/CSS/CSS.sublime-syntax @@ -1,3303 +1,10 @@ %YAML 1.2 --- -# https://www.sublimetext.com/docs/syntax.html -# Derived from https://github.com/i-akhmadullin/Sublime-CSS3 name: CSS scope: source.css version: 2 +extends: Packages/CSS/CSS (Basic).sublime-syntax + file_extensions: - css - - css.liquid - -############################################################################### - -variables: - # Basic tokens - # https://www.w3.org/TR/css3-selectors/#lex - unicode: \\\h{1,6}[ \t\n\f]? - escape: (?:{{unicode}}|\\[^\n\f\h]) - nmstart: (?:[_[:alpha:][:^ascii:]]|{{escape}}) - nmchar: (?:[-_[:alnum:][:^ascii:]]|{{escape}}) - - # Identifier Break - # The proper pattern would be (?!{{nmchar}}), but its impact on performance - # is just too high, thus several optimizations are applied. - # 1. Use positive lookahead with \Z to handle `eof` - # 2. Breaks are ascii characters other than denoted by {{nmchar}}. - # 3. Assume unicode or escape character if backslash is matched, instead of - # matching (?!{{escape}}) which also effects performance negative. - break: (?=[[^-_[:alnum:]\\]&&[[:ascii:]]]|\Z) - - # Identifiers - # https://www.w3.org/TR/css-syntax-3/#typedef-ident-token - # https://www.w3.org/TR/css3-selectors/#lex - ident: (?:{{custom_ident}}|{{generic_ident}}) - custom_ident: (?:--{{nmchar}}*) - generic_ident: (?:-?{{nmstart}}{{nmchar}}*) - - # Ilegal Custom Identifier Names - # https://www.w3.org/TR/css-values-4/#custom-idents - illegal_custom_ident: |- - \b{{illegal_custom_ident_tokens}}{{break}} - illegal_custom_ident_tokens: |- - (?xi: auto | default | inherit | initial | none | unset ) - - # Types - # https://www.w3.org/TR/css3-values/#numeric-types - # https://www.w3.org/TR/css-syntax-3/#number-token-diagram - integer: ([-+]?)(\d+) - float: ([-+]?)(\d*(\.)\d+(?:[eE][-+]?\d+)?|\d+[eE][-+]?\d+) - - # Units - # https://www.w3.org/TR/css3-values/#lengths - # https://developer.mozilla.org/en-US/docs/Web/CSS/length - units: |- - (?x: - % - | {{absolute_lengths}} - | {{angle_units}} - | {{duration_units}} - | {{font_relative_lengths}} - | {{frequency_units}} - | {{resolution_units}} - | {{viewport_percentage_lengths}} - ) - font_relative_lengths: (?i:cap|ch|em|ex|ic|lh|rem|rlh)\b - viewport_percentage_lengths: (?i:vh|vw|vi|vb|vmin|vmax)\b - absolute_lengths: (?i:cm|mm|q|in|pt|pc|px|fr)\b - angle_units: (?i:deg|grad|rad|turn)\b - duration_units: (?i:s|ms)\b - frequency_units: (?i:Hz|kHz)\b - resolution_units: (?i:dpi|dpcm|dppx)\b - - # Combinators - # https://drafts.csswg.org/selectors-4/#combinators - combinators: (?:>{1,3}|[~+]|\|{2}) - - vendor_prefix: -(?:webkit|moz|ms|o)- - - # Custom Element Names - # https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts - custom_element_tags: \b[a-z]{{custom_element_chars}}*-{{custom_element_chars}}*{{break}} - # Note: Excludes `.` as it is used to identify attribute access - custom_element_chars: |- - (?x: - [-_a-z0-9\x{00B7}] - | [\x{00C0}-\x{00D6}] - | [\x{00D8}-\x{00F6}] - | [\x{00F8}-\x{02FF}] - | [\x{0300}-\x{037D}] - | [\x{037F}-\x{1FFF}] - | [\x{200C}-\x{200D}] - | [\x{203F}-\x{2040}] - | [\x{2070}-\x{218F}] - | [\x{2C00}-\x{2FEF}] - | [\x{3001}-\x{D7FF}] - | [\x{F900}-\x{FDCF}] - | [\x{FDF0}-\x{FFFD}] - | [\x{10000}-\x{EFFFF}] - ) - - # HTML tags - # https://developer.mozilla.org/en-US/docs/Web/HTML/Element - # Note: Sections are sorted by expected frequency. - html_tags: |- - (?x: - {{html_inline_tags}} - | {{html_text_tags}} - | {{html_section_tags}} - | {{html_table_tags}} - | {{html_embedded_tags}} - | {{html_forms_tags}} - | {{html_media_tags}} - | {{html_interactive_tags}} - | {{html_script_tags}} - | {{html_web_tags}} - | {{html_markup_tags}} - | {{html_header_tags}} - | {{html_root_tags}} - | {{html_deprecated_tags}} - ) - - html_root_tags: |- - \b(?xi: html | body ){{break}} - - html_header_tags: |- - \b(?xi: base | head | link | meta | script | style | title ){{break}} - - html_section_tags: |- - \b(?xi: - address | article | aside | footer | header | h1 | h2 | h3 | h4 | h5 | h6 - | hgroup | main | nav | section - ){{break}} - - html_text_tags: |- - \b(?xi: - blockquote | cite | dd | dt | dl | div | figcaption | figure | hr | li - | ol | p | pre | ul - ){{break}} - - html_inline_tags: |- - \b(?xi: - a | abbr | b | bdi | bdo | br | code | data | time | dfn | em | i | kbd - | mark | q | rb | ruby | rp | rt | rtc | s | samp | small | span | strong - | sub | sup | u | var | wbr - ){{break}} - - html_media_tags: |- - \b(?xi: area | audio | source | img | map | track | video ){{break}} - - html_embedded_tags: |- - \b(?xi: embed | iframe | object | param | picture | source ){{break}} - - html_script_tags: |- - \b(?xi: canvas | noscript | script ){{break}} - - html_markup_tags: |- - \b(?xi: del | ins ){{break}} - - html_table_tags: |- - \b(?xi: - caption | col | colgroup | table | tbody | tr | td | tfoot | th | thead - ){{break}} - - html_forms_tags: |- - \b(?xi: - button | datalist | option | fieldset | label | form | input | legend - | meter | optgroup | select | output | progress | textarea - ){{break}} - - html_interactive_tags: |- - \b(?xi: details | dialog | menu | summary ){{break}} - - html_web_tags: |- - \b(?xi: slot | template ){{break}} - - html_deprecated_tags: |- - \b(?xi: - acronym | applet | basefont | bgsound | big | blink | center | command - | content | dir | element | font | frame | frameset | image | isindex - | keygen | listing | marquee | menuitem | multicol | nextid | nobr - | noembed | noframes | plaintext | shadow | spacer | strike | tt | xmp - ){{break}} - - # SVG tag names - # maintained from previous CSS.sublime-syntax - svg_tags: |- - \b(?xi: - circle | clipPath | defs | ellipse | eventsource | filter | foreignObject - | g | glyph | glyphRef | line | linearGradient | marker | mask | path - | pattern | polygon | polyline | radialGradient | rect | stop | svg - | switch | symbol | text | textPath | tref | tspan | use - # custom element like tags reserved for SVG/MathML - | annotation-xml | color-profile | missing-glyph - | font-face(?: -src | -uri | -format | -name )? - ){{break}} - - # Predefined Color Values (Standard Set) - # https://www.w3.org/TR/CSS22/syndata.html#color-units - standard_colors: |- - \b(?xi: - aqua | black | blue | fuchsia | gray | green | lime | maroon | navy - | olive | orange | purple | red | silver | teal | white | yellow - ){{break}} - - # Predefined Color Values (Extended Set) - # https://www.w3.org/TR/css3-color/#svg-color - extended_colors: |- - \b(?xi: - aliceblue | antiquewhite | aquamarine | azure | beige | bisque - | blanchedalmond | blueviolet | brown | burlywood | cadetblue | chartreuse - | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue - | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki - | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred - | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey - | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey - | dodgerblue | firebrick | floralwhite | forestgreen | gainsboro - | ghostwhite | gold | goldenrod | greenyellow | grey | honeydew | hotpink - | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen - | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow - | lightgray | lightgreen | lightgrey | lightpink | lightsalmon - | lightseagreen | lightskyblue | lightslategray | lightslategrey - | lightsteelblue | lightyellow | limegreen | linen | magenta - | mediumaquamarine | mediumblue | mediumorchid | mediumpurple - | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise - | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin - | navajowhite | oldlace | olivedrab | orangered | orchid | palegoldenrod - | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru - | pink | plum | powderblue | rebeccapurple | rosybrown | royalblue - | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna - | skyblue | slateblue | slategray | slategrey | snow | springgreen - | steelblue | tan | thistle | tomato | turquoise | violet | wheat - | whitesmoke | yellowgreen - ){{break}} - - # Illegal Counter Style Definition Names - # https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style-name - counter_style_illegal_names: |- - \b(?xi: decimal | disc | {{illegal_custom_ident_tokens}} ){{break}} - - # Predefined Counter Styles - # https://drafts.csswg.org/css-counter-styles-3/#predefined-counters - counter_style_names: |- - \b(?xi: - none | arabic-indic | armenian | bengali | cambodian | circle - | cjk-decimal | cjk-earthly-branch | cjk-heavenly-stem | decimal-leading-zero - | decimal | devanagari | disclosure-closed | disclosure-open | disc - | ethiopic-numeric | georgian | gujarati | gurmukhi | hebrew - | hiragana-iroha | hiragana | japanese-formal | japanese-informal - | kannada | katakana-iroha | katakana | khmer - | korean-hangul-formal | korean-hanja-formal | korean-hanja-informal | lao - | lower-alpha | lower-armenian | lower-greek | lower-latin | lower-roman - | malayalam | mongolian | myanmar | oriya | persian - | simp-chinese-formal | simp-chinese-informal - | square | tamil | telugu | thai | tibetan - | trad-chinese-formal | trad-chinese-informal - | upper-alpha | upper-armenian | upper-latin | upper-roman - ){{break}} - - # @counter-style Property Names - # https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style - counter_style_property_names: |- - \b(?xi: - additive-symbols | negative | pad | prefix | range - | suffix | symbols (?# | fallback | speak-as | system ) - ){{break}} - - # Predefined Counter Speak As Property Constants - # https://drafts.csswg.org/css-counter-styles-3/#counter-style-speak-as - counter_speak_as_constants: |- - \b(?xi: auto | bullets | numbers | words | spell-out ){{break}} - - # Predefined Counter Style System Constants - # https://drafts.csswg.org/css-counter-styles-3/#counter-style-system - counter_system_constants: |- - \b(?xi: cyclic | numeric | alphabetic | symbolic | additive | fixed ){{break}} - - # @font-face Property Names - # https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face - font_face_property_names: |- - \b(?xi: - ascent-override | descent-override | font-display | (?# font-family | ) src - | font-feature-settings | font-variation-settings | font-stretch | font-style - | font-weight | font-variant | line-gap-override | size-adjust | unicode-range - ){{break}} - - # @page Margin Names - # https://developer.mozilla.org/en-US/docs/Web/CSS/@page - page_margin_names: |- - \b(?xi: - (?: bottom | top ) - (?: left-corner | left | center | right | right-corner ) - | (?: left | right ) - (?: top | middle | bottom ) - ){{break}} - - # @page Property Names - # https://developer.mozilla.org/en-US/docs/Web/CSS/@page - page_property_names: |- - \b(?xi: bleed | margin | marks | size ){{break}} - - # Property names are sorted by popularity in descending order. - # Note: - # 1) Popularity data taken from https://www.chromestatus.com/metrics/css/popularity - # 2) Properties starting with `alias-` or `webkit-` are removed - property_names: |- - \b(?xi: - width | height | display | position | padding | border | margin | top - | left | margin-top | color | font-size | background-color | text-align - | opacity | font-weight | font-family | background | overflow | line-height - | float | box-sizing | text-decoration | z-index | cursor | margin-left - | border-radius | vertical-align | margin-bottom | margin-right | right - | padding-top | padding-left | max-width | box-shadow | bottom | content - | padding-right | transform | white-space | min-height | padding-bottom - | background-image | border-bottom | visibility | outline - | background-position | min-width | transition | border-top | border-color - | background-repeat | text-transform | background-size | max-height - | list-style | clear | font-style | justify-content | border-left - | align-items | border-right | border-width | font | text-overflow - | overflow-y | pointer-events | border-style | flex-direction | animation - | overflow-x | letter-spacing | flex | word-wrap | flex-wrap | fill - | transform-origin | list-style-type | border-collapse - | border-top-left-radius | border-bottom-left-radius | user-select | clip - | text-shadow | border-bottom-right-radius | word-break | flex-grow - | border-top-right-radius | border-bottom-color | border-top-color - | flex-shrink | align-self | text-rendering | animation-timing-function - | direction | background-clip | zoom | border-spacing | text-indent - | outline-offset | border-left-color | transition-property - | border-right-color | animation-name | stroke | touch-action - | animation-duration | transition-delay | filter | overflow-wrap - | animation-delay | border-bottom-width | variable | font-variant - | flex-basis | transition-duration | border-top-width | animation-fill-mode - | object-fit | transition-timing-function | will-change | outline-width - | order | outline-style | stroke-width | border-right-width | align-content - | resize | table-layout | appearance | animation-iteration-count - | border-left-width | flex-flow | stroke-dashoffset | stroke-dasharray - | backface-visibility | unicode-bidi | border-bottom-style - | text-size-adjust | border-top-style | animation-direction | word-spacing - | contain | speak | grid-template-columns | font-feature-settings - | perspective | list-style-position | clip-path | image-rendering - | font-display | transform-style | border-left-style | outline-color - | background-position-x | background-attachment | border-right-style - | margin-block-end | background-origin | animation-play-state | hyphens - | stroke-linecap | font-stretch | object-position | page-break-inside - | column-gap | counter-reset | counter-increment | background-position-y - | margin-block-start | grid-template-rows | column-count | quotes - | padding-inline-end | text-decoration-skip | border-image | all - | page-break-after | fill-opacity | font-variant-ligatures - | scroll-boundary-behavior | empty-cells | list-style-image | justify-self - | overflow-anchor | padding-inline-start | grid-gap | text-decoration-color - | margin-inline-start | caret-color | grid-column-gap | aspect-ratio - | stroke-opacity | margin-inline-end | grid-column | perspective-origin - | caption-side | columns | scroll-behavior | justify-items | line-break - | grid-row-gap | column-width | orphans | widows | backdrop-filter - | mix-blend-mode | tab-size | stop-color | column-rule | grid-area - | stroke-miterlimit | text-align-last | page-break-before - | grid-column-start | border-image-slice | border-image-repeat - | text-decoration-style | border-image-width | grid-column-end | grid-row - | scroll-snap-align | scroll-snap-type | border-image-outset - | text-decoration-line | column-fill | border-inline-end-width - | border-inline-start-width | grid-row-start | stroke-linejoin - | inset-inline-end | inset-inline-start | grid-auto-flow | grid-auto-rows - | grid-template-areas | border-image-source | fill-rule | font-kerning - | grid-row-end | font-variant-numeric | break-inside | shape-outside - | color-scheme | shape-image-threshold | scroll-boundary-behavior-y - | text-decoration-skip-ink | page | isolation | background-blend-mode - | page-orientation | inset | gap | scroll-snap-margin | column-rule-color - | place-items | column-rule-style | shape-rendering | content-visibility - | grid-auto-columns | scroll-boundary-behavior-x | writing-mode | clip-rule - | font-variant-caps | scroll-padding | text-anchor | mask | row-gap - | background-repeat-x | intrinsic-size | text-underline-position - | font-variant-east-asian | column-span | vector-effect | dominant-baseline - | stop-opacity | break-after | grid-template | break-before | mask-type - | scroll-snap-stop | border-inline-start-color | border-inline-end-color | r - | alignment-baseline | text-decoration-thickness | column-rule-width | d - | image-orientation | rx | text-orientation | cx | baseline-shift - | scroll-padding-top | padding-block-start | padding-block-end | cy - | min-inline-size | inline-size | background-repeat-y | shape-margin - | block-size | marker | min-block-size | paint-order | ry - | scroll-snap-margin-top | border-block-end-color | border-block-end-width - | border-inline-start-style | border-inline-end-style - | border-block-end-style | font-variation-settings - | border-block-start-width | border-block-start-color - | border-block-start-style | place-content | y | x | ruby-position - | text-combine-upright | color-interpolation-filters | color-interpolation - | color-rendering | transform-box | marker-end | flood-color | marker-start - | marker-mid | flood-opacity | lighting-color | forced-color-adjust - | buffered-rendering | place-self | offset-path | scroll-padding-left - | offset-distance | offset-rotate | text-underline-offset | max-inline-size - | max-block-size | border-inline-end | scroll-snap-margin-inline-start - | scroll-padding-inline-start | scroll-snap-margin-block-end - | scroll-snap-margin-block-start | scroll-padding-block-end - | scroll-snap-margin-inline-end | scroll-padding-block-start - | scroll-padding-inline-end | font-optical-sizing | grid - | scroll-padding-bottom | scroll-snap-margin-left | inset-block-end - | overscroll-behavior-block | overscroll-behavior-inline | inset-block-start - | scroll-snap-margin-right | scroll-padding-right - | scroll-snap-margin-bottom | border-inline-start | margin-inline - | border-end-start-radius | border-end-end-radius | margin-block - | border-start-start-radius | border-start-end-radius | padding-inline - | counter-set | padding-block | border-block-end | offset - | border-block-start | inset-inline | inset-block | scroll-snap-margin-block - | scroll-padding-inline | scroll-padding-block | scroll-snap-margin-inline - | border-block | offset-rotation | border-inline | border-block-color - | border-inline-width | border-inline-color | border-block-style - | border-block-width | border-inline-style | motion | motion-offset - | motion-path | font-size-adjust | text-justify | scale | scrollbar-gutter - | animation-timeline | rotate | translate | snap-height | math-style - | math-shift | math-depth | offset-anchor | offset-position - | glyph-orientation-vertical | internal-callback | text-line-through - | text-line-through-color | text-line-through-mode | text-line-through-style - | text-line-through-width | text-overline | text-overline-color - | text-overline-mode | text-overline-style | text-overline-width - | text-underline | text-underline-color | text-underline-mode - | text-underline-style | text-underline-width | shape-inside | shape-padding - | enable-background | color-profile | glyph-orientation-horizontal | kerning - | image-resolution | max-zoom | min-zoom | orientation | user-zoom - | mask-source-type | touch-action-delay | scroll-blocks-on | motion-rotation - | scroll-snap-points-x | scroll-snap-points-y | scroll-snap-coordinate - | scroll-snap-destination | apply-at-rule | viewport-fit | overflow-block - | syntax | content-size | intrinsic-block-size | intrinsic-height - | intrinsic-inline-size | intrinsic-width | render-subtree - | origin-trial-test-property | subtree-visibility - | math-superscript-shift-style | start - # END OF QUERY RESULTS - # BEGIN OF legacy properties which existed before the last query - | box-direction | line-box-contain | mask-image | mask-origin | flex-order - | font-synthesis | line-clamp | flex-negative | blend-mode - | font-variant-position | flex-align | column-break-before - | flex-item-align | azimuth | user-drag | mask-repeat | box-flex - | flex-preferred-size | font-language-override | box-align - | text-emphasis-color | box-ordinal-group | mask-composite - | transform-origin-y | pause | tap-highlight-color | text-fill-color - | text-emphasis-style | transform-origin-x | text-emphasis-position - | box-pack | box-decoration-break | box-orient - | text-emphasis | mask-clip | nbsp-mode | pause-after | pitch - | text-height | mask-position | flex-line-pack | perspective-origin-x - | mask-size | font-variant-alternates | perspective-origin-y - | font-smoothing | overflow-scrolling | flex-positive | pitch-range - ){{break}} - - global_property_constants: |- - \b(?xi: inherit | initial | revert | revert-layer | unset ){{break}} - - unsorted_property_constants: |- - \b(?xi: - absolute|active|add - | all(-(petite|small)-caps|-scroll)? - | alpha(betic)? - | alternate(-reverse)? - | always|annotation|antialiased|at - | auto(hiding-scrollbar|-flow)? - | avoid(-column|-page|-region)? - | background(-color|-image|-position|-size)? - | backwards|balance|baseline|below|bevel|bicubic|bidi-override|blink - | block-line-height - | blur - | border(-bottom|-left|-right|-top)?-(color|radius|width|style) - | border-(bottom|top)-(left|right)-radius - | border-image(-outset|-repeat|-slice|-source|-width)? - | border(-bottom|-left|-right|-top|-collapse|-spacing|-box)? - | both|bottom - | box(-shadow)? - | break-(all|word) - | brightness - | butt(on)? - | capitalize - | cent(er|ral) - | char(acter-variant)? - | cjk-ideographic|clip|clone|close-quote - | closest-(corner|side) - | col-resize|collapse - | color(-stop|-burn|-dodge)? - | column((-count|-gap|-reverse|-rule(-color|-width)?|-width)|s)? - | common-ligatures|condensed|consider-shifts|contain - | content(-box|s)? - | contextual|contrast|cover - | crisp(-e|E)dges - | crop - | cross(hair)? - | da(rken|shed) - | default|dense|diagonal-fractions|difference|disabled - | discretionary-ligatures|disregard-shifts - | distribute(-all-lines|-letter|-space)? - | dotted|double|drop-shadow - | (nwse|nesw|ns|ew|sw|se|nw|ne|w|s|e|n)-resize - | ease(-in-out|-in|-out)? - | element|ellipsis|embed|end|EndColorStr|evenodd - | exclu(de(-ruby)?|sion) - | expanded - | (extra|semi|ultra)-(condensed|expanded) - | farthest-(corner|side)? - | fill(-box|-opacity)? - | filter|first|fixed|flat - | fit-content - | flex((-basis|-end|-grow|-shrink|-start)|box)? - | flip|flood-color - | font(-size(-adjust)?|-stretch|-weight)? - | forwards - | from(-image)? - | full-width|geometricPrecision|glyphs|gradient|grayscale - | grid(-height)? - | groove|hand|hanging|hard-light|height|help|hidden|hide - | historical-(forms|ligatures) - | horizontal(-tb)? - | hue - | ideograph(-alpha|-numeric|-parenthesis|-space|ic) - | inactive|include-ruby|infinite - | inline(-block|-box|-flex(box)?|-line-height|-table)? - | inset|inside - | inter(-ideograph|-word|sect) - | invert|isolat(e|ion) - | jis(04|78|83|90) - | justify(-all)? - | keep-all - | landscape|ledger|legal|letter|A[3-5]|(JIS-)?B[4-5]|portrait - | last|left|letter-spacing|legacy - | light(e[nr]|ing-color) - | line(-edge|-height|-through)? - | linear(-gradient|RGB)? - | lining-nums|list-item|local|loose|lowercase|lr-tb|ltr - | lumin(osity|ance)|manual - | margin(-bottom|-box|-left|-right|-top)? - | marker(-offset|s)? - | mathematical - | max-(content|height|lines|size|width) - | medium|middle - | min-(content|height|width) - | miter|mixed|move|multiply|newspaper - | no-(change|clip|(close|open)-quote|(common|discretionary|historical)-ligatures|contextual|drop|repeat) - | none|nonzero|not-allowed|nowrap - | offset(-after|-before|-end|-start)? - | oldstyle-nums|opacity|open-quote - | optimize(Legibility|Precision|Quality|Speed) - | order|ordinal|ornaments - | outline(-color|-offset|-width)? - | outset|outside|over(line|-edge|lay) - | padding(-bottom|-box|-left|-right|-top)? - | page|painted|paused - | perspective-origin - | petite-caps|pixelated|pointer - | pre(-line|-wrap)? - | preserve-3d - | progid:DXImageTransform.Microsoft.(Alpha|Blur|dropshadow|gradient|Shadow) - | progress - | proportional-(nums|width) - | radial-gradient|recto|region|relative - | repeat(-[xy])? - | repeating-(linear|radial)-gradient - | replaced|reset-size|reverse|ridge|right - | round - | row(-resize|-reverse)? - | run-in - | ruby(-base|-text)?(-container)? - | rtl|running|saturat(e|ion)|screen - | safe - | scroll(-position|bar)? - | separate|sepia - | scale-down - | shape-(image-threshold|margin|outside) - | show - | sideways(-lr|-rl)? - | simplified - | slashed-zero|slice - | smooth|snap|solid|soft-light - | space(-around|-between|-evenly)? - | span|sRGB - | stack(ed-fractions)? - | start(ColorStr)? - | static - | step-(end|start) - | sticky - | stop-(color|opacity) - | stretch|strict - | stroke(-box|-dash(array|offset)|-miterlimit|-opacity|-width)? - | style(set)? - | stylistic - | sub(grid|pixel-antialiased|tract)? - | super|swash - | table(-caption|-cell|(-column|-footer|-header|-row)-group|-column|-row)? - | tabular-nums|tb-rl - | text((-bottom|-(decoration|emphasis)-color|-indent|-(over|under|after|before)-edge|-shadow|-size(-adjust)?|-top)|field)? - | thi(ck|n) - | titling-ca(ps|se) - | to[p]? - | touch|traditional - | transform(-origin)? - | under(-edge|line)? - | unicase|unsafe|uppercase|upright - | use-(glyph-orientation|script) - | verso - | vertical(-align|-ideographic|-lr|-rl|-text)? - | view-box - | viewport-fill(-opacity)? - | visibility - | visible(Fill|Painted|Stroke)? - | wait|wavy|weight|whitespace|width|word-spacing - | wrap(-reverse)? - | z-index|zero - | zoom(-in|-out)? - ){{break}} - - # https://www.w3.org/TR/css-fonts-4/#font-display-desc - font_display_constants: |- - \b(?xi: block | swap | fallback | optional ){{break}} - - # Generic Font Families - font_family_constants: |- - \b(?xi: - # CSS 2 fonts - # https://www.w3.org/TR/CSS22/fonts.html#generic-font-families - sans-serif | serif | cursive | monospace | fantasy - # CSS 3 level 4 fonts - # https://www.w3.org/TR/2019/WD-css-fonts-4-20191113/#generic-family-value - | emoji | math | fangsong | system-ui - # https://www.w3.org/TR/2019/WD-css-fonts-4-20191113/#standard-font-families - | ui-sans-serif | ui-serif | ui-monospace | ui-rounded - ){{break}} - - # Generic Font Properties - # https://www.w3.org/TR/CSS22/fonts.html#font-shorthand - # https://developer.mozilla.org/en-US/docs/Web/CSS/font - font_prop_constants: |- - \b(?xi: caption | icon | menu | message-box | small-caption | status-bar ){{break}} - - # https://www.w3.org/TR/CSS22/fonts.html#font-size-props - # https://developer.mozilla.org/en-US/docs/Web/CSS/font-size - font_size_constants: |- - \b(?xi: larger | large | medium | small | smaller | x{1,2}-(?: large | small ) ){{break}} - - # https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch - font_stretch_constants: |- - \b(?xi: (?: normal | (?: extra | semi | ultra ) - )? ( condensed | expanded ) ){{break}} - - # https://www.w3.org/TR/CSS22/fonts.html#font-styling - # https://developer.mozilla.org/en-US/docs/Web/CSS/font-style - font_style_constants: |- - \b(?xi: normal | italic | oblique ){{break}} - - # https://www.w3.org/TR/CSS22/fonts.html#font-boldness - # https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight - font_weight_constants: |- - \b(?xi: normal | bold | bolder | lighter ){{break}} - - # https://developer.mozilla.org/de/docs/Web/CSS/font-variant - font_variant_constants: |- - \b(?xi: (?: all- )? (?: small | petite ) -caps | unicase | titling-cap ){{break}} - -############################################################################### - -contexts: - - main: - - include: comments - - include: selectors - - include: at-rules - - include: property-lists - - include: rule-terminators - - include: illegal-groups - -###[ COMMENTS ]################################################################ - - comments: - # empty block comment - - match: (/\*+)(\*/) - scope: comment.block.css - captures: - 1: punctuation.definition.comment.begin.css - 2: punctuation.definition.comment.end.css - # normal block comment - - match: /\*+ - scope: punctuation.definition.comment.begin.css - push: comments-content - - comments-content: - - meta_scope: comment.block.css - - match: \*+/ - scope: punctuation.definition.comment.end.css - pop: 1 - - match: ^\s*(\*)(?!/) - captures: - 1: punctuation.definition.comment.css - -###[ AT RULES ]################################################################ - - at-rules: - - include: at-charset - - include: at-counter-style - - include: at-custom-media - - include: at-document - - include: at-font-face - - include: at-import - - include: at-keyframes - - include: at-layer - - include: at-media - - include: at-namespace - - include: at-page - - include: at-page-margin - - include: at-supports - - include: at-other - - # @charset - # https://www.w3.org/TR/css-syntax-3/#at-ruledef-charset - at-charset: - - match: (@)(?i:charset){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-charset-content - - at-charset-content: - - meta_scope: meta.at-rule.charset.css - - include: quoted-strings - - include: at-rule-end - - # @counter-style - # https://drafts.csswg.org/css-counter-styles-3/#the-counter-style-rule - at-counter-style: - - match: (@)(?i:counter-style){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-counter-style-content - - at-counter-style-content: - - meta_scope: meta.at-rule.counter-style.css - - match: \{ - scope: punctuation.section.block.begin.css - push: at-counter-style-block-content - - include: at-counter-style-names - - include: at-rule-end - - at-counter-style-block-content: - - meta_scope: meta.property-list.css meta.block.css - - include: block-end2 - - include: comments - - include: at-counter-style-property-names - - include: property-values - - include: rule-terminators - - include: illegal-blocks - - include: illegal-groups - - at-counter-style-names: - - match: '{{counter_style_illegal_names}}' - scope: invalid.illegal.identifier.css - - match: '{{ident}}' - scope: entity.other.counter-style-name.css - - at-counter-style-property-names: - - include: counter-style-fallback-properties - - include: counter-style-system-properties - - include: counter-style-speak-as-properties - - match: '{{counter_style_property_names}}' - scope: meta.property-name.css support.type.property-name.css - - # @custom-media - # https://?? - at-custom-media: - - match: (@)(?i:custom-media){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: - - at-custom-media-content - - at-custom-media-identifier - - at-custom-media-identifier: - - match: '{{custom_ident}}' - scope: entity.other.custom-media.css - pop: 1 - - include: comments - - include: else-pop - - at-custom-media-content: - - meta_scope: meta.at-rule.custom-media.css - - include: media-queries - - include: at-rule-end - - # @document - # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document - at-document: - - match: (@)(?i:document){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-document-content - - at-document-content: - - meta_scope: meta.at-rule.document.css - - include: comma-delimiters - - include: url-functions - - include: at-document-functions - - include: at-rule-block - - include: at-rule-end - - # @font-face - # https://www.w3.org/TR/css-fonts-4/#at-font-face-rule - at-font-face: - - match: (@)(?i:font-face){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-font-face-content - - at-font-face-content: - - meta_scope: meta.at-rule.font-face.css - - match: \{ - scope: punctuation.section.block.begin.css - push: at-font-face-block-content - - include: at-rule-end - - at-font-face-block-content: - - meta_scope: meta.property-list.css meta.block.css - - include: block-end2 - - include: comments - - include: at-font-face-property-names - - include: property-values - - include: rule-terminators - - include: illegal-blocks - - include: illegal-groups - - at-font-face-property-names: - - match: \b(?i:font-family){{break}} - scope: meta.property-name.css support.type.property-name.css - push: font-family-value - - match: '{{font_face_property_names}}' - scope: meta.property-name.css support.type.property-name.css - - # @import - # https://www.w3.org/TR/css-cascade-4/#at-ruledef-import - # https://developer.mozilla.org/en-US/docs/Web/CSS/@import - at-import: - - match: (@)(?i:import){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-import-content - - at-import-content: - - meta_scope: meta.at-rule.import.css - - include: quoted-strings - - include: url-functions - - include: media-queries - - include: at-import-functions - - include: at-rule-end - - # @keyframes - # https://www.w3.org/TR/css3-animations/#at-ruledef-keyframes - at-keyframes: - - match: (@)(?i:keyframes){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-keyframe-content - - at-keyframe-content: - - meta_scope: meta.at-rule.keyframe.css - - include: comma-delimiters - - include: at-keyframe-block - - include: at-keyframe-names - - include: at-rule-end - - at-keyframe-names: - - match: '{{illegal_custom_ident}}' - scope: invalid.illegal.identifier.css - - match: '{{ident}}' - scope: entity.other.animation-name.css - - include: quoted-strings - - at-keyframe-block: - - match: \{ - scope: punctuation.section.block.begin.css - push: at-keyframe-block-content - - at-keyframe-block-content: - - meta_scope: meta.block.css - - include: block-end2 - - include: comments - - include: property-lists - - include: at-keyframe-selectors - - at-keyframe-selectors: - - match: (?=[[:alnum:].,%]) - push: at-keyframe-selector-content - - at-keyframe-selector-content: - - meta_scope: meta.selector.css - - include: comma-delimiters - - include: percentage-constants - - match: \b(?i:from|to){{break}} - scope: keyword.other.selector.css - - include: selector-end - - # @layer - # https://developer.mozilla.org/en-US/docs/Web/CSS/@layer - at-layer: - - match: (@)(?i:layer){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-layer-content - - at-layer-content: - - meta_scope: meta.at-rule.layer.css - - include: comma-delimiters - - include: at-layer-names - - include: at-rule-block - - include: at-rule-end - - at-layer-names: - - match: ({{ident}})(\.) - captures: - 1: entity.other.layer.css - 2: punctuation.accessor.dot.css - push: at-layer-qualified-name - - match: '{{ident}}' - scope: entity.other.layer.css - - at-layer-qualified-name: - - meta_scope: meta.path.css - - match: ({{ident}})(\.) - captures: - 1: entity.other.layer.css - 2: punctuation.accessor.dot.css - - match: '{{ident}}' - scope: entity.other.layer.css - pop: 1 - - include: immediately-pop - - # @media - # https://drafts.csswg.org/css-conditional-3/#at-ruledef-media - at-media: - - match: (@)(?i:media){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-media-content - - at-media-content: - - meta_scope: meta.at-rule.media.css - - include: media-queries - - include: at-rule-block - - include: at-rule-end - - # @namespace - # https://www.w3.org/TR/css3-namespace/ - at-namespace: - - match: (@)(?i:namespace){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: - - at-namespace-content - - at-namespace-identifier - - at-namespace-identifier: - - match: '{{ident}}(?!{{nmchar}}|\()' - scope: entity.other.namespace-prefix.css - pop: 1 - - include: comments - - include: else-pop - - at-namespace-content: - - meta_scope: meta.at-rule.namespace.css - - include: var-functions - - include: url-functions - - include: quoted-urls - - include: at-rule-end - - # @page - # https://www.w3.org/TR/css3-page/#at-ruledef-page - # https://developer.mozilla.org/en-US/docs/Web/CSS/@page - at-page: - - match: (@)(?i:page){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-page-content - - at-page-content: - - meta_scope: meta.at-rule.page.css - - include: comma-delimiters - - include: at-page-block - - include: at-page-names - - include: at-rule-end - - at-page-names: - - match: (:)(?i:blank|first|left|right|recto|verso){{break}} - captures: - 0: entity.other.pseudo-class.css - 1: punctuation.definition.entity.css - - match: (:){{nmchar}}* - captures: - # 0: invalid.illegal.pseudo-class.css - 1: punctuation.definition.entity.css - - match: '{{ident}}' - scope: entity.other.page-name.css - - at-page-block: - - match: \{ - scope: punctuation.section.block.begin.css - push: at-page-block-content - - at-page-block-content: - - meta_scope: meta.property-list.css meta.block.css - - include: at-page-margin - - include: at-page-property-list-content - - include: at-other - - at-page-margin: - - match: (@){{page_margin_names}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-page-margin-content - - at-page-margin-content: - - meta_scope: meta.at-rule.margin.css - - include: at-page-property-lists - - include: at-rule-end - - at-page-property-lists: - - match: \{ - scope: punctuation.section.block.begin.css - push: at-page-property-list-content - - at-page-property-list-content: - - meta_scope: meta.property-list.css meta.block.css - - include: block-end2 - - include: comments - - include: at-page-property-names - - include: property-values - - include: rule-terminators - - include: illegal-blocks - - include: illegal-groups - - at-page-property-names: - - match: '{{page_property_names}}' - scope: meta.property-name.css support.type.property-name.css - # Note: Consume unknown identifiers to maintain word boundaries. - - match: '{{generic_ident}}' - - # @supports - # https://drafts.csswg.org/css-conditional-3/#at-supports - at-supports: - - match: (@)(?i:supports){{break}} - captures: - 0: keyword.control.directive.css - 1: punctuation.definition.keyword.css - push: at-supports-content - - at-supports-content: - - meta_scope: meta.at-rule.supports.css - - include: at-supports-groups - - include: at-supports-functions - - include: at-supports-operators - - include: at-rule-block - - include: at-rule-end - - at-supports-operators: - - match: \b(?i:and|or|not){{break}} - scope: keyword.operator.logical.css - - at-supports-groups: - - match: \( - scope: punctuation.section.group.begin.css - push: at-supports-group-content - - at-supports-group-content: - - meta_scope: meta.group.css - - include: group-end - - include: at-rule-end - - include: at-supports-groups - - include: at-supports-functions - - include: at-supports-operators - - include: rule-list-body - - # @ - # Fallback context for incomplete or unknown at-rules. - # https://www.w3.org/TR/css-syntax-3/#at-rule - # https://www.w3.org/TR/CSS22/syndata.html#parsing-errors - at-other: - - match: (@){{ident}} - push: at-other-content - - at-other-content: - - meta_scope: meta.at-rule.other.css - - match: \{ - scope: punctuation.section.block.begin.css - push: at-other-block-content - - include: at-rule-end - - at-other-block-content: - - meta_scope: meta.block.css - - include: block-end2 - - at-rule-block: - - match: \{ - scope: punctuation.section.block.begin.css - push: at-rule-block-content - - at-rule-block-content: - - meta_scope: meta.block.css - - include: block-end2 - - include: main - - at-rule-end: - - match: (?=[;{}]) - pop: 1 - - include: comments - -###[ MEDIA QUERIES ]########################################################### - - # https://drafts.csswg.org/mediaqueries-5/#media - media-queries: - - include: comma-delimiters - - include: media-query-conditions - - include: media-query-media-types - - media-query-conditions: - - match: \( - scope: punctuation.section.group.begin.css - push: media-query-group-content - - match: '[<>]=?|=' - scope: keyword.operator.comparison.css - - match: \b(?i:and|or|not|only){{break}} - scope: keyword.operator.logical.css - - media-query-group-content: - - meta_scope: meta.group.css - - match: (?=[,;{}]) - pop: 1 - - include: group-end - - include: comments - - include: media-query-conditions - - include: media-query-property-names - - include: media-query-property-values - - include: var-functions - - include: calc-functions - - include: scalar-rational-constants - - include: numeric-constants - - media-query-property-names: - - match: |- - (?xi: - ({{vendor_prefix}})? - ( - (?: min- | max- )? - (?: - color (?: -gamut | -index )? - | monochrome | resolution | update - | (?: device- )? (?: height | width | aspect-ratio | pixel-ratio ) - ) - | (?:any-)?(?: pointer | hover ) - | prefers-(?: reduced-motion | color-scheme ) - | display-mode | grid | orientation | scan | scripting - | overflow-(?: block | inline ) - ) - ){{break}} - captures: - 1: support.type.vendor-prefix.css - 2: support.type.property-name.css - - media-query-property-values: - - match: ':' - scope: punctuation.separator.key-value.css - push: media-query-property-value-content - - media-query-property-value-content: - - match: |- - \b(?xi: - # global css constants - all | inherit | initial | none | unset - # color-gamut / color-index: - | srgb | p3 | rec2020 - # display-mode: - | browser | fullscreen | standalone | minimal-ui - # hover: - | hover - # orientation: - | landscape | portrait - # overflow: - | optional-paged | paged | scroll - # pointer: - | coarse | fine - # prefers-color-scheme: - | dark | light - # scan: - | interlace | progressive - # scripting: - | enabled | initial-only - # update: - | fast | normal | slow - ){{break}} - scope: support.constant.property-value.css - pop: 1 - - include: else-pop - - media-query-media-types: - # Media Types: - # https://www.w3.org/TR/CSS21/media.html - # https://drafts.csswg.org/mediaqueries-5/#media-types - - match: |- - \b(?xi: - # global css constants - all | inherit | initial | none | unset - # specs - | print | screen | speech - # deprecated - | aural | braille | embossed | handheld | projection | tty | tv - ){{break}} - scope: support.constant.media.css - -###[ SELECTORS ]############################################################### - - selectors: - - match: (?=[:.*#[:alpha:]\[]|{{combinators}}) - push: selector-content - - selector-content: - - meta_scope: meta.selector.css - - include: selector-end - - include: comma-delimiters - # Html Tags - - match: '{{html_tags}}' - scope: entity.name.tag.html.css - - match: '{{svg_tags}}' - scope: entity.name.tag.svg.css - # Custom Elements - # http://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts - - match: '{{custom_element_tags}}' - scope: entity.name.tag.custom.css - - match: \* - scope: variable.language.wildcard.asterisk.css - # Class and Id Selectors - # https://drafts.csswg.org/selectors-4/#class-html - - match: \. - scope: punctuation.definition.entity.css - push: - - meta_scope: entity.other.attribute-name.class.css - - match: '{{generic_ident}}' - pop: 1 - - include: immediately-pop - # https://drafts.csswg.org/selectors-4/#id-selectors - - match: \# - scope: punctuation.definition.entity.css - push: - - meta_scope: entity.other.attribute-name.id.css - - match: '{{generic_ident}}' - pop: 1 - - include: immediately-pop - # Attribute Selectors - # https://drafts.csswg.org/selectors-4/#attribute-selectors - - match: \[ - scope: punctuation.section.brackets.begin.css - push: - - attribute-selector-meta - - attribute-selector-key - # Pseudo Elements - # https://drafts.csswg.org/selectors-4/#pseudo-elements - - match: '::' - scope: punctuation.definition.pseudo-element.css - push: - - meta_include_prototype: false - - include: vendor-prefixes - - include: pseudo-element-function - - include: pseudo-element-regular - - include: immediately-pop - # Pseudo Classes - # https://drafts.csswg.org/selectors-4/#pseudo-classes - - match: ':' - scope: punctuation.definition.pseudo-class.css - push: - - meta_include_prototype: false - - include: vendor-prefixes - - include: pseudo-element-css2 - - include: pseudo-class-function - - include: pseudo-class-regular - - include: immediately-pop - # Combinators - # https://drafts.csswg.org/selectors-4/#combinators - # https://drafts.csswg.org/css-scoping/#deep-combinator - - match: '{{combinators}}(?![>~+|])' - scope: keyword.operator.combinator.css - - match: '{{combinators}}{2,}|\|{3,}' - scope: invalid.illegal.combinator.css - - selector-end: - - match: (?=[;@(){}]) - pop: 1 - - include: comments - - # Qualified Names - # https://drafts.csswg.org/css-namespaces-3/#css-qnames - namespace-prefixes: - - match: (?:({{ident}})|(\*))?(\|)(?!=) - captures: - 1: entity.other.namespace-prefix.css - 2: variable.language.wildcard.asterisk.css - 3: punctuation.separator.namespace.css - - vendor-prefixes: - - match: '{{vendor_prefix}}' - scope: support.type.vendor-prefix.css - -###[ SELECTORS / ATTRIBUTE SELECTORS ]######################################### - - attribute-selector-meta: - - meta_scope: meta.attribute-selector.css meta.brackets.css - - include: immediately-pop - - attribute-selector-key: - - include: namespace-prefixes - - match: '{{ident}}' - scope: entity.other.attribute-name.css - set: attribute-selector-operator - - match: \* - scope: variable.language.wildcard.asterisk.css - set: attribute-selector-operator - - include: attribute-selector-operator - - attribute-selector-operator: - - match: '[~*|^$]?=' - scope: keyword.operator.logical.css - set: - - attribute-selector-flag - - attribute-selector-value - - include: attribute-selector-flag - - attribute-selector-value: - - include: comments - - include: quoted-string - - match: '[^\s\]\[''"]+' - scope: meta.string.css string.unquoted.css - pop: 1 - - include: else-pop - - attribute-selector-flag: - - match: \b[iI]{{break}} - scope: keyword.other.flag.css - set: attribute-selector-end - - include: attribute-selector-end - - attribute-selector-end: - - match: \] - scope: punctuation.section.brackets.end.css - pop: 1 - - include: selector-end - - match: \S - scope: invalid.illegal.css - -###[ SELECTORS / PSEUDO CLASSES ]############################################## - - # Functional Pseudo Classes - # https://drafts.csswg.org/selectors-4/#functional-pseudo-class - pseudo-class-function: - - include: pseudo-class-function-dir - - include: pseudo-class-function-lang - - include: pseudo-class-function-with-anb-args - - include: pseudo-class-function-with-selector-args - - include: pseudo-class-function-with-generic-args - - # Special :dir() pseudo-class - # https://drafts.csswg.org/selectors-4/#the-dir-pseudo - pseudo-class-function-dir: - - match: (?i:dir)(?=\() - scope: meta.function-call.identifier.css entity.other.pseudo-class.css - set: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: direction-constants - - # Special :lang() pseudo-class - # https://drafts.csswg.org/selectors-4/#the-lang-pseudo - pseudo-class-function-lang: - - match: (?i:lang)(?=\() - scope: meta.function-call.identifier.css entity.other.pseudo-class.css - set: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: quoted-strings - - include: language-ranges - - # Functional Pseudo Classes with `An+B` param - # An+B Notation: https://drafts.csswg.org/css-syntax/#anb - pseudo-class-function-with-anb-args: - - match: |- - (?xi: - # https://drafts.csswg.org/selectors-4/#table-pseudos - nth-last-col - | nth-col - # https://drafts.csswg.org/selectors-4/#typed-child-index - | nth-last-child - | nth-child - | nth-last-of-type - | nth-of-type - )(?=\() - scope: meta.function-call.identifier.css entity.other.pseudo-class.css - set: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: anb-notation-values - - include: scalar-integer-constants - - anb-notation-values: - - match: \b(even|odd){{break}} - scope: support.constant.property-value.css - - match: (([-+]?)(\d*)(n))\s*(([-+])(\s*\d+))? - captures: - 1: meta.number.integer.decimal.css - 2: keyword.operator.arithmetic.css - 3: constant.numeric.value.css - 4: constant.numeric.suffix.css - 5: meta.number.integer.decimal.css - 6: keyword.operator.arithmetic.css - 7: constant.numeric.value.css - - match: '[-+]\s+\d+n?|[-+]?\d+\s+n' - scope: invalid.illegal.numeric.css - - # Functional Pseudo Classes with selector list - pseudo-class-function-with-selector-args: - - match: (?i:matches|is|where|not|has)(?=\() - scope: meta.function-call.identifier.css entity.other.pseudo-class.css - set: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: selectors - - # Functional Pseudo Classes with generic arguments - pseudo-class-function-with-generic-args: - - match: '{{ident}}(?=\()' - scope: meta.function-call.identifier.css entity.other.pseudo-class.css - set: other-functions-arguments - - # Regular Pseudo Classes - # https://drafts.csswg.org/selectors-4/#pseudo-classes - pseudo-class-regular: - - match: '{{ident}}' - scope: entity.other.pseudo-class.css - pop: 1 - - # Legacy Pseudo Elements - # https://drafts.csswg.org/selectors-4/#pseudo-elements - pseudo-element-css2: - # Note: CSS1 & CSS2 compatibility requires those to be matched after `:` - - match: (?i:before|after|first-line|first-letter){{break}} - scope: entity.other.pseudo-element.css - pop: 1 - - # Functional Pseudo Elements - # https://drafts.csswg.org/selectors-4/#pseudo-elements - pseudo-element-function: - - match: '{{ident}}(?=\()' - scope: meta.function-call.identifier.css entity.other.pseudo-element.css - set: other-functions-arguments - - # Pseudo Elements - # https://drafts.csswg.org/selectors-4/#pseudo-elements - pseudo-element-regular: - - match: '{{ident}}' - scope: entity.other.pseudo-element.css - pop: 1 - -###[ PROPERTY LISTS ]########################################################## - - property-lists: - - match: \{ - scope: punctuation.section.block.begin.css - push: property-list-content - - property-list-content: - - meta_scope: meta.property-list.css meta.block.css - - match: \} - scope: punctuation.section.block.end.css - pop: 1 - - include: rule-list-body - - rule-list-body: - # Note: This context is used by HTML.sublime-syntax - - include: comments - - include: property-identifiers - - include: property-values - - include: rule-terminators - - include: illegal-blocks - - include: illegal-groups - -###[ PROPERTY IDENTIFIERS ]#################################################### - - property-identifiers: - - match: (?=[-[:alpha:]]) - push: property-identifier-content - - property-identifier-content: - - meta_scope: meta.property-name.css - - include: vendor-prefixes - # specific properties with special treatment - - include: counter-property - - include: font-family-property - - include: font-property - # common properties - - include: builtin-property - - include: custom-property - - include: deprecated-property - - include: other-property - # bailout - - include: immediately-pop - - builtin-property: - - match: '{{property_names}}' - scope: support.type.property-name.css - pop: 1 - - # Custom Properties - # https://drafts.csswg.org/css-variables/#typedef-custom-property - custom-property: - # custom property definition - - match: '{{custom_ident}}' - scope: entity.other.custom-property.css - pop: 1 - - deprecated-property: - - match: \b(var-)({{ident}}) - scope: invalid.deprecated.custom-property.css - captures: - 1: entity.other.custom-property.prefix.css - 2: entity.other.custom-property.name.css - pop: 1 - - other-property: - # Note: Consume unknown identifiers to maintain word boundaries. - - match: '{{generic_ident}}' - pop: 1 - -###[ PROPERTY VALUES ]######################################################### - - property-values: - - match: ':' - scope: punctuation.separator.key-value.css - push: property-value-content - - property-value-content: - - meta_content_scope: meta.property-value.css - - include: terminator-pop - - include: comments - - include: comma-delimiters - - include: common-operators - - include: builtin-values - - include: other-functions - - include: other-constants - - builtin-values: - - include: quoted-strings - - include: builtin-functions - - include: color-values - - include: line-names - - include: unicode-ranges - - include: numeric-constants - - include: common-constants - - include: generic-font-names - - include: vendor-prefixes - - # When including `color-values` and `color-adjuster-functions`, make sure it is - # included after the color adjustors to prevent `color-values` from consuming - # conflicting function names & color constants such as `red`, `green`, or `blue`. - color-values: - - include: color-functions - - include: color-constants - - # Counter Symbol Values - # https://drafts.csswg.org/css-counter-styles-3/#counter-style-system - # https://drafts.csswg.org/css-counter-styles-3/#symbols-function - counter-symbol-values: - - include: image-values - - include: counter-system-constants - - include: scalar-integer-constants - - include: quoted-strings - - # 2D Image Values - # https://drafts.csswg.org/css-images-4/#image-values - image-values: - - include: cross-fade-functions - - include: gradient-functions - - include: image-functions - - include: image-set-functions - - include: url-functions - -###[ COUNTER PROPERTY ]######################################################## - - counter-property: - # https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters - - match: \b(?i:counter-(increment|reset|set)){{break}} - scope: support.type.property-name.css - set: counter-property-value - - counter-property-value: - - match: ':' - scope: punctuation.separator.key-value.css - set: counter-property-value-content - - include: else-pop - - counter-property-value-content: - - include: global-constants - - match: (?i:none){{break}} - scope: constant.language.null.css - - match: '{{ident}}' - scope: entity.other.counter-name.css - - include: property-value-content - -###[ COUNTER STYLE FALLBACK PROPERTY ]######################################### - - # Counter Style Fallback - # https://drafts.csswg.org/css-counter-styles-3/#counter-style-fallback - counter-style-fallback-properties: - - match: \b(?i:fallback){{break}} - scope: meta.property-name.css support.type.property-name.css - push: counter-style-fallback-property-value - - counter-style-fallback-property-value: - - match: ':' - scope: punctuation.separator.key-value.css - set: counter-style-fallback-property-value-content - - include: else-pop - - counter-style-fallback-property-value-content: - - meta_content_scope: meta.property-value.css - - include: terminator-pop - - include: comments - - include: var-functions - - include: counter-style-identifiers - - counter-style-identifiers: - - match: '{{counter_style_names}}' - scope: support.constant.counter-style-name.css - - match: '{{ident}}' - scope: entity.other.counter-style-name.css - -###[ COUNTER STYLE SYSTEM PROPERTY ]########################################### - - # Counter Style System - # https://drafts.csswg.org/css-counter-styles-3/#counter-style-system - counter-style-system-properties: - - match: \b(?i:system){{break}} - scope: meta.property-name.css support.type.property-name.css - push: counter-style-system-property-value - - counter-style-system-property-value: - - match: ':' - scope: punctuation.separator.key-value.css - set: counter-style-system-property-value-content - - include: else-pop - - counter-style-system-property-value-content: - - meta_content_scope: meta.property-value.css - - include: terminator-pop - - include: comments - - include: var-functions - - include: counter-symbol-values - - match: \b(?i:extends){{break}} - scope: keyword.declaration.extends.css - push: counter-style-identifier - - counter-style-identifier: - - match: '{{counter_style_names}}' - scope: support.constant.counter-style-name.css - pop: 1 - - match: '{{ident}}' - scope: entity.other.counter-style-name.css - pop: 1 - - include: comments - - include: else-pop - -###[ COUNTER STYLE SPEAK AS PROPERTY ]######################################### - - # Counter Style Speak As - # https://drafts.csswg.org/css-counter-styles-3/#counter-style-speak-as - counter-style-speak-as-properties: - - match: \b(?i:speak-as){{break}} - scope: meta.property-name.css support.type.property-name.css - push: counter-style-speak-as-property-value - - counter-style-speak-as-property-value: - - match: ':' - scope: punctuation.separator.key-value.css - set: counter-style-speak-as-property-value-content - - include: else-pop - - counter-style-speak-as-property-value-content: - - meta_content_scope: meta.property-value.css - - include: terminator-pop - - include: comments - - include: var-functions - - include: quoted-strings - - include: counter-speak-as-constants - - include: counter-style-identifiers - -###[ FONT FAMILY PROPERTY ]#################################################### - - # Font-Family Property - # https://drafts.csswg.org/css-fonts-3/#font-family-prop - # https://developer.mozilla.org/en-US/docs/Web/CSS/font-family - font-family-property: - - match: \b(?i:font-family){{break}} - scope: support.type.property-name.css - set: font-family-value - - font-family-value: - - match: ':' - scope: punctuation.separator.key-value.css - set: font-family-value-content - - include: else-pop - - font-family-value-content: - - meta_content_scope: meta.property-value.css - - include: terminator-pop - - include: comments - - include: comma-delimiters - - include: important-operators - - include: var-functions - - include: quoted-strings - - include: global-constants - - include: generic-font-names - - include: font-family-names - -###[ FONT PROPERTY ]########################################################### - - # Font Property - # https://drafts.csswg.org/css-fonts-3/#font-prop - # https://developer.mozilla.org/en-US/docs/Web/CSS/font - font-property: - - match: \b(?i:font){{break}} - scope: support.type.property-name.css - set: font-property-value - - font-property-value: - - match: ':' - scope: punctuation.separator.key-value.css - set: font-property-value-content - - include: else-pop - - font-property-value-content: - - meta_content_scope: meta.property-value.css - - include: terminator-pop - - include: comments - - include: comma-delimiters - - include: arithmetic-operators - - include: important-operators - - include: var-functions - - include: calc-functions - - include: color-values - - include: numeric-constants - - include: quoted-strings - - include: vendor-prefixes - - include: global-constants - - include: generic-font-names - - include: font-display-constants - - include: font-prop-constants - - include: font-size-constants - - include: font-stretch-constants - - include: font-style-constants - - include: font-variant-constants - - include: font-weight-constants - - include: font-family-names - -###[ BUILTIN FUNCTIONS ]####################################################### - - builtin-functions: - - include: at-counter-functions - - include: at-font-functions - - include: attr-functions - - include: calc-functions - - include: color-adjuster-functions - - include: cross-fade-functions - - include: filter-functions - - include: filters-functions - - include: gradient-functions - - include: image-functions - - include: image-set-functions - - include: minmax-functions - - include: repeat-functions - - include: shape-functions - - include: timing-functions - - include: toggle-functions - - include: transform-functions - - include: url-functions - - include: var-functions - - function-arguments-common: - - include: group-end - - include: terminator-pop - - include: comments - - include: var-functions - -###[ BUILTIN AT RULE FUNCTIONS ]############################################### - - at-counter-functions: - # counter() - # https://drafts.csswg.org/css-lists-3/#funcdef-counter - # counters() - # https://drafts.csswg.org/css-lists-3/#funcdef-counters - - match: \b(?i:counters?)(?=\() - scope: meta.function-call.identifier.css support.function.counter.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - counter-function-arguments-body - - counter-identifier - - # symbols() - # https://drafts.csswg.org/css-counter-styles-3/#symbols-function - - match: \b(?i:symbols)(?=\() - scope: meta.function-call.identifier.css support.function.counter.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: counter-symbol-values - - counter-function-arguments-body: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: counter-style-identifiers - - include: quoted-strings - - counter-identifier: - - match: '{{ident}}' - scope: entity.other.counter-name.css - pop: 1 - - include: comments - - include: else-pop - - at-document-functions: - # url-prefix() - # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-prefix - - match: \b(?i:url-prefix)(?=\() - scope: meta.function-call.identifier.css support.function.url-prefix.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: quoted-urls - - include: unquoted-urls - - # domain() - # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-domain - - match: \b(?i:domain)(?=\() - scope: meta.function-call.identifier.css support.function.domain.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: quoted-urls - - include: unquoted-urls - - # regexp() - # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-regexp - - match: \b(?i:regexp)(?=\() - scope: meta.function-call.identifier.css support.function.regexp.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: quoted-strings - - at-font-functions: - # format() - # https://drafts.csswg.org/css-fonts-3/#descdef-src - # format() is also mentioned in `issue 2` at https://drafts.csswg.org/css-images-3/#issues-index - # but does not seem to be implemented in any manner - - match: \b(?i:format)(?=\() - scope: meta.function-call.identifier.css support.function.font-face.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: quoted-strings - - # local() - # https://drafts.csswg.org/css-fonts-3/#descdef-src - - match: \b(?i:local)(?=\() - scope: meta.function-call.identifier.css support.function.font-face.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: quoted-strings - - include: generic-font-names - - include: font-family-names - - at-import-functions: - # layer() - # https://developer.mozilla.org/en-US/docs/Web/CSS/@import - - match: \b(?i:layer){{break}} - scope: meta.function-call.identifier.css support.function.layer.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: group-end - - include: at-rule-end - - include: at-layer-names - - include: immediately-pop - # supports() - # https://developer.mozilla.org/en-US/docs/Web/CSS/@import - - match: \b(?i:supports)(?=\() - scope: meta.function-call.identifier.css support.function.supports.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: at-supports-group-content - - at-supports-functions: - # selector() - # https://developer.mozilla.org/en-US/docs/Web/CSS/@supports - - match: \b(?i:selector)(?=\() - scope: meta.function-call.identifier.css support.function.selector.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - meta_content_scope: meta.selector.css - - include: group-end - - include: at-rule-end - - include: selector-content - -###[ BUILTIN COLOR FUNCTIONS ]################################################# - - # Color Functions - # https://drafts.csswg.org/css-color - color-functions: - # rgb(), rgba() - # https://drafts.csswg.org/css-color/#rgb-functions - - match: \b(?i:rgba?)(?=\() - scope: meta.function-call.identifier.css support.function.color.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: percentage-constants - - include: scalar-constants - - # hsl(), hsla() - # https://drafts.csswg.org/css-color/#the-hsl-notation - # hwb() - Not yet implemented by browsers - # https://drafts.csswg.org/css-color/#funcdef-hwb - - match: \b(?i:hsla?|hwb)(?=\() - scope: meta.function-call.identifier.css support.function.color.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: angle-constants - - include: percentage-constants - - include: scalar-constants - - # gray() - Not yet implemented by browsers - # https://drafts.csswg.org/css-color/#funcdef-gray - - match: \b(?i:gray)(?=\() - scope: meta.function-call.identifier.css support.function.color.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: percentage-constants - - include: scalar-constants - - # device-cmyk() - Not yet implemented by browsers - # https://drafts.csswg.org/css-color/#funcdef-device-cmyk - - match: \b(?i:device-cmyk)(?=\() - scope: meta.function-call.identifier.css support.function.color.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: color-adjuster-functions # must be included before `color-values` - - include: color-values - - include: percentage-constants - - include: scalar-constants - - # color-mod() - Not yet implemented by browsers - # https://drafts.csswg.org/css-color/#funcdef-color-mod - - match: \b(?i:color)(?=\() - scope: meta.function-call.identifier.css support.function.color.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: color-adjuster-functions # must be included before `color-values` - - include: color-values - - include: angle-constants - - include: scalar-constants - - # Color Adjuster Functions - Not yet implemented by browsers - # https://drafts.csswg.org/css-color/#typedef-color-adjuster - color-adjuster-functions: - # red(), green(), blue(), alpha() - Not yet implemented by browsers - - match: \b(?i:red|green|blue|alpha|a)(?=\() - scope: meta.function-call.identifier.css support.function.color.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: color-adjuster-operators - - include: percentage-constants - - include: scalar-constants - - # hue() - Not yet implemented by browsers - - match: \b(?i:hue|h)(?=\() - scope: meta.function-call.identifier.css support.function.color.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: color-adjuster-operators - - include: angle-constants - - # saturation(), lightness(), whiteness(), blackness() - Not yet implemented by browsers - - match: \b(?i:saturation|lightness|whiteness|blackness|[slwb])(?=\() - scope: meta.function-call.identifier.css support.function.color.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: color-adjuster-operators - - include: percentage-constants - - # tint(), shade(), contrast() - Not yet implemented by browsers - # contrast() interferes with the contrast() filter function; - # therefore, it is not yet implemented here - - match: \b(?i:tint|shade)(?=\() - scope: meta.function-call.identifier.css support.function.color.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: percentage-constants - - # blend(), blenda() - Not yet implemented by browsers - - match: \b(?i:blenda|blend)(?=\() - scope: meta.function-call.identifier.css support.function.color.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: color-values - - include: percentage-constants - - match: \b(?i:rgb|hsl|hwb){{break}} - scope: keyword.other.color-space.css - -###[ BUILTIN FILTER FUNCTIONS ]################################################ - - filter-functions: - # filter() - # https://drafts.fxtf.org/filters/#funcdef-filter - - match: \b(?i:filter)(?=\() - scope: meta.function-call.identifier.css support.function.filter.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: filters-functions - - include: image-values - - include: quoted-strings - - # Filter Functions - # https://drafts.fxtf.org/filters/#typedef-filter-function - filters-functions: - # blur() - # https://drafts.fxtf.org/filters/#funcdef-filter-blur - - match: \b(?i:blur)(?=\() - scope: meta.function-call.identifier.css support.function.filter.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: length-constants - - # brightness(), contrast(), grayscale(), invert(), opacity(), saturate(), sepia() - # https://drafts.fxtf.org/filters/#funcdef-filter-brightness - - match: \b(?i:brightness|contrast|grayscale|invert|opacity|saturate|sepia)(?=\() - scope: meta.function-call.identifier.css support.function.filter.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: percentage-constants - - include: scalar-constants - - # drop-shadow() - # https://drafts.fxtf.org/filters/#funcdef-filter-drop-shadow - - match: \b(?i:drop-shadow)(?=\() - scope: meta.function-call.identifier.css support.function.filter.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: color-values - - include: length-constants - - # hue-rotate() - # https://drafts.fxtf.org/filters/#funcdef-filter-hue-rotate - - match: \b(?i:hue-rotate)(?=\() - scope: meta.function-call.identifier.css support.function.filter.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: angle-constants - -###[ BUILTIN GRID FUNCTIONS ]################################################## - - # minmax() - # https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax - minmax-functions: - - match: \b(?i:minmax)(?=\() - scope: meta.function-call.identifier.css support.function.grid.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: grid-constants - - include: length-constants - - include: percentage-constants - - # repeat() - # https://drafts.csswg.org/css-grid/#funcdef-repeat - repeat-functions: - - match: \b(?i:repeat)(?=\() - scope: meta.function-call.identifier.css support.function.grid.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - match: \b(?i:auto-fill|auto-fit){{break}} - scope: keyword.other.grid.css - - include: calc-functions - - include: minmax-functions - - include: grid-constants - - include: length-constants - - include: percentage-constants - - include: scalar-integer-constants - - include: line-names - -###[ BUILTIN IMAGE FUNCTIONS ]################################################# - - # cross-fade() - # https://drafts.csswg.org/css-images-4/#funcdef-cross-fade - cross-fade-functions: - - match: \b(?i:cross-fade)(?=\() - scope: meta.function-call.identifier.css support.function.image.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: color-values - - include: image-values - - include: percentage-constants - - include: quoted-urls - - # image() - # https://drafts.csswg.org/css-images-4/#funcdef-image - image-functions: - - match: \b(?i:image)(?=\() - scope: meta.function-call.identifier.css support.function.image.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: color-values - - include: image-values - - include: quoted-urls - - include: direction-constants - - # image-set() - # https://drafts.csswg.org/css-images-4/#funcdef-image-set - image-set-functions: - - match: \b(?i:image-set)(?=\() - scope: meta.function-call.identifier.css support.function.image.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: color-values - - include: image-values - - include: quoted-urls - - include: resolution-constants - - match: ([0-9]+)(x) - scope: meta.number.integer.decimal.css - captures: - 1: constant.numeric.value.css - 2: constant.numeric.suffix.css - - # Gradient Functions - # https://drafts.csswg.org/css-images-3/#gradients - gradient-functions: - # conic-gradient() - # https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient() - # repeating-conic-gradient() - # https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-conic-gradient() - - match: \b((?:repeating-)?conic-gradient)(?=\() - scope: meta.function-call.identifier.css support.function.gradient.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - match: \b(?i:at|from){{break}} - scope: keyword.other.gradient.css - - match: \b(?i:bottom|center|left|right|top){{break}} - scope: support.constant.property-value.css - - include: color-values - - include: angle-constants - - include: length-constants - - include: percentage-constants - - # linear-gradient() - # https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient() - # repeating-linear-gradient() - # https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient() - - match: \b((?:repeating-)?linear-gradient)(?=\() - scope: meta.function-call.identifier.css support.function.gradient.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - match: \b(?i:to){{break}} - scope: keyword.other.gradient.css - - match: \b(?i:bottom|left|right|top){{break}} - scope: support.constant.property-value.css - - include: color-values - - include: angle-constants - - include: length-constants - - include: percentage-constants - - # radial-gradient() - # https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient() - # repeating-radial-gradient() - # https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient() - - match: \b((?:repeating-)?radial-gradient)(?=\() - scope: meta.function-call.identifier.css support.function.gradient.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - match: \b(?i:at|circle|ellipse){{break}} - scope: keyword.other.gradient.css - - match: \b(?i:bottom|center|left|right|top|(closest|farthest)-(corner|side)){{break}} - scope: support.constant.property-value.css - - include: color-values - - include: length-constants - - include: percentage-constants - -###[ BUILTIN SHAPE FUNCTIONS ]################################################# - - # Shape Functions - # https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape - shape-functions: - # rect() - Deprecated - # https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect - - match: \b(?i:rect)(?=\() - scope: meta.function-call.identifier.css support.function.shape.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - match: \b(?i:auto){{break}} - scope: support.constant.property-value.css - - include: calc-functions - - include: length-constants - - # inset() - # https://www.w3.org/TR/css-shapes-1/#funcdef-inset - - match: \b(?i:inset)(?=\() - scope: meta.function-call.identifier.css support.function.shape.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - match: \b(?i:round){{break}} - scope: keyword.other.shape.css - - include: calc-functions - - include: length-constants - - include: percentage-constants - - # circle() - # https://www.w3.org/TR/css-shapes-1/#funcdef-circle - # ellipse() - # https://www.w3.org/TR/css-shapes-1/#funcdef-ellipse - - match: \b(?i:circle|ellipse)(?=\() - scope: meta.function-call.identifier.css support.function.shape.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - match: \b(?i:at){{break}} - scope: keyword.other.shape.css - - match: \b(?i:top|right|bottom|left|center|closest-side|farthest-side){{break}} - scope: support.constant.property-value.css - - include: calc-functions - - include: length-constants - - include: percentage-constants - - # polygon() - # https://www.w3.org/TR/css-shapes-1/#funcdef-polygon - - match: \b(?i:polygon)(?=\() - scope: meta.function-call.identifier.css support.function.shape.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - match: \b(?i:nonzero|evenodd){{break}} - scope: support.constant.property-value.css - - include: calc-functions - - include: length-constants - - include: percentage-constants - -###[ BUILTIN TIMING FUNCTIONS ]################################################ - - # Timing Functions - # https://www.w3.org/TR/web-animations-1/#timing-functions - timing-functions: - # cubic-bezier() - # https://www.w3.org/TR/web-animations-1/#cubic-bzier-timing-function - - match: \b(?i:cubic-bezier)(?=\() - scope: meta.function-call.identifier.css support.function.timing.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: scalar-constants - - # steps() - # https://www.w3.org/TR/web-animations-1/#step-timing-function - - match: \b(?i:steps)(?=\() - scope: meta.function-call.identifier.css support.function.timing.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - match: \b(?i:end|middle|start){{break}} - scope: keyword.other.timing.css - - include: scalar-integer-constants - -###[ BUILTIN TRANSFORM FUNCTIONS ]############################################# - - # Transform Functions - # https://www.w3.org/TR/css-transforms-1/#transform-functions - transform-functions: - # transform functions with comma separated types - # matrix(), scale(), matrix3d(), scale3d() - - match: \b(?i:matrix3d|scale3d|matrix|scale)(?=\() - scope: meta.function-call.identifier.css support.function.transform.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: scalar-constants - - # transform functions with comma separated or types - # translate(), translate3d() - - match: \b(?i:translate(3d)?)(?=\() - scope: meta.function-call.identifier.css support.function.transform.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: percentage-constants - - include: length-constants - - include: scalar-constants - - # transform functions with a single or type - # translateX(), translateY() - - match: \b(?i:translate[XY])(?=\() - scope: meta.function-call.identifier.css support.function.transform.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: percentage-constants - - include: length-constants - - include: scalar-constants - - # transform functions with a single type - # rotate(), skewX(), skewY(), rotateX(), rotateY(), rotateZ() - - match: \b(?i:rotate[XYZ]?|skew[XY])(?=\() - scope: meta.function-call.identifier.css support.function.transform.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: angle-constants - - # transform functions with comma separated types - # skew() - - match: \b(?i:skew)(?=\() - scope: meta.function-call.identifier.css support.function.transform.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: angle-constants - - # transform functions with a single type - # translateZ(), perspective() - - match: \b(?i:translateZ|perspective)(?=\() - scope: meta.function-call.identifier.css support.function.transform.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: calc-functions - - include: length-constants - - # transform functions with a comma separated or types - # rotate3d() - - match: \b(?i:rotate3d)(?=\() - scope: meta.function-call.identifier.css support.function.transform.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: angle-constants - - include: scalar-constants - - # transform functions with a single type - # scaleX(), scaleY(), scaleZ() - - match: \b(?i:scale[XYZ])(?=\() - scope: meta.function-call.identifier.css support.function.transform.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: scalar-constants - -###[ BUILTIN VALUE FUNCTIONS ]################################################# - - # attr() - # https://www.w3.org/TR/css3-values/#funcdef-attr - attr-functions: - - match: \b(?i:attr)(?=\() - scope: meta.function-call.identifier.css support.function.attr.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - attr-function-arguments-value - - attr-function-arguments-identifier - - attr-function-arguments-identifier: - - include: namespace-prefixes - - include: quoted-string - - include: var-function - - match: '{{ident}}' - scope: entity.other.attribute-name.css - pop: 1 - - include: comments - - include: else-pop - - attr-function-arguments-value: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - match: '{{units}}' - scope: keyword.other.unit.css - - include: color-values - - include: common-constants - - include: generic-font-names - - include: numeric-constants - - calc-functions: - # calc() - # https://www.w3.org/TR/css3-values/#funcdef-calc - - match: \b(?i:calc)(?=\() - scope: meta.function-call.identifier.css support.function.calc.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: calc-function-arguments-content - - # clamp() - # https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() - # max() - # https://developer.mozilla.org/en-US/docs/Web/CSS/max() - # min() - # https://developer.mozilla.org/en-US/docs/Web/CSS/min() - - match: \b(?i:clamp|max|min)(?=\() - scope: meta.function-call.identifier.css support.function.calc.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: calc-function-arguments-content - - include: comma-delimiters - - calc-function-arguments-content: - - meta_scope: meta.group.css - - match: \) - scope: punctuation.section.group.end.css - set: maybe-illegal-operator - - match: \( - scope: punctuation.section.group.begin.css - push: calc-function-arguments-content - - include: terminator-pop - - include: comments - - include: attr-functions - - include: calc-functions - - include: var-functions - - match: '{{float}}({{units}})?' - scope: meta.number.float.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: punctuation.separator.decimal.css - 4: constant.numeric.suffix.css - push: maybe-illegal-operator - - match: '{{integer}}({{units}})?' - scope: meta.number.integer.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: constant.numeric.suffix.css - push: maybe-illegal-operator - - match: '[-+*/]' - scope: keyword.operator.arithmetic.css - - toggle-functions: - # toggle() - # https://www.w3.org/TR/css3-values/#toggle-notation - - match: \b(?i:toggle)(?=\() - scope: meta.function-call.identifier.css support.function.toggle.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: vendor-prefixes - - include: color-values - - include: common-constants - - include: numeric-constants - - include: quoted-strings - - # url() - # https://drafts.csswg.org/css-values-3/#urls - url-functions: - - match: \b(?i:url)(?=\() - scope: meta.function-call.identifier.css support.function.url.css - push: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: quoted-urls - - include: unquoted-urls - - # var() - # https://drafts.csswg.org/css-variables/#funcdef-var - # Note: Match valid groups before `var-functions` context is included. - var-functions: - - match: \b(?i:var)(?=\() - scope: meta.function-call.identifier.css support.function.var.css - push: var-function-arguments - - include: illegal-groups - - var-function: - - match: \b(?i:var)(?=\() - scope: meta.function-call.identifier.css support.function.var.css - set: var-function-arguments - - include: illegal-groups - - var-function-arguments: - - match: \( - scope: punctuation.section.group.begin.css - set: - - var-function-arguments-defaults - - var-function-arguments-identifier - - var-function-arguments-defaults: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: group-end - - include: font-property-value-content - - var-function-arguments-identifier: - - match: '{{custom_ident}}' - scope: variable.other.custom-property.css - pop: 1 - - include: comments - - include: else-pop - -###[ OTHER FUNCTIONS ]######################################################### - - other-functions: - - match: '{{ident}}(?=\()' - scope: meta.function-call.identifier.css variable.function.css - push: other-functions-arguments - - other-functions-arguments: - - meta_include_prototype: false - - match: \( - scope: punctuation.section.group.begin.css - set: - - meta_scope: meta.function-call.arguments.css meta.group.css - - include: function-arguments-common - - include: comma-delimiters - - include: calc-functions - - include: quoted-strings - - include: numeric-constants - - include: other-constants - -###[ CONSTANTS ]############################################################### - - color-constants: - # https://www.w3.org/TR/CSS22/syndata.html#color-units - - match: '{{standard_colors}}' - scope: support.constant.color.w3c.standard.css - # https://www.w3.org/TR/css3-color/#svg-color - - match: '{{extended_colors}}' - scope: support.constant.color.w3c.extended.css - # Special Color Keywords - # https://www.w3.org/TR/css3-color/#currentcolor - # https://www.w3.org/TR/css3-color/#transparent-def - - match: \b(?i:currentColor|transparent){{break}} - scope: support.constant.color.w3c.special.css - # Hex Color - - match: (#)(\h{3}|\h{6}){{break}} - scope: constant.other.color.rgb-value.css - captures: - 1: punctuation.definition.constant.css - # RGBA Hexadecimal Colors - # https://en.wikipedia.org/wiki/RGBA_color_space#RGBA_hexadecimal_.28word-order.29 - - match: (#)(\h{4}|\h{8}){{break}} - scope: constant.other.color.rgba-value.css - captures: - 1: punctuation.definition.constant.css - - common-constants: - - include: global-constants - - include: font-display-constants - - include: font-prop-constants - - include: font-size-constants - - include: font-stretch-constants - - include: font-style-constants - - include: font-variant-constants - - include: font-weight-constants - - include: generic-font-names - - include: unsorted-constants - - unsorted-constants: - - match: '{{unsorted_property_constants}}' - scope: support.constant.property-value.css - - counter-speak-as-constants: - - match: '{{counter_speak_as_constants}}' - scope: support.constant.property-value.css - - counter-system-constants: - - match: '{{counter_system_constants}}' - scope: support.constant.symbol-type.css - - direction-constants: - - match: \b(ltr|rtl){{break}} - scope: support.constant.property-value.css - - font-display-constants: - - match: '{{font_display_constants}}' - scope: support.constant.property-value.css - - font-prop-constants: - - match: '{{font_prop_constants}}' - scope: support.constant.property-value.css - - font-size-constants: - - match: '{{font_size_constants}}' - scope: support.constant.property-value.css - - font-stretch-constants: - - match: '{{font_stretch_constants}}' - scope: support.constant.property-value.css - - font-style-constants: - - match: '{{font_style_constants}}' - scope: support.constant.property-value.css - - font-weight-constants: - - match: '{{font_weight_constants}}' - scope: support.constant.property-value.css - - font-variant-constants: - - match: '{{font_variant_constants}}' - scope: support.constant.property-value.css - - # Generic Font Families - # https://drafts.csswg.org/css-fonts-3/#family-name-value - generic-font-names: - - match: '{{font_family_constants}}' - scope: support.constant.property-value.css - - global-constants: - - match: '{{global_property_constants}}' - scope: support.constant.property-value.css - - grid-constants: - - match: \b(?i:auto|max-content|min-content){{break}} - scope: support.constant.property-value.css - - other-constants: - - match: '{{ident}}' - scope: constant.other.css - -###[ NUMERIC CONSTANTS ]####################################################### - - # https://www.w3.org/TR/css3-values/#numeric-constantss - numeric-constants: - - match: '{{float}}({{units}})?' - scope: meta.number.float.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: punctuation.separator.decimal.css - 4: constant.numeric.suffix.css - - match: '{{integer}}({{units}})?' - scope: meta.number.integer.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: constant.numeric.suffix.css - - # Make sure `scalar-constants` is included after any other numeric values - # as `scalar-constants` will consume all numeric values. - scalar-constants: - - include: scalar-float-constants - - include: scalar-integer-constants - - scalar-float-constants: - - match: '{{float}}' - scope: meta.number.float.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: punctuation.separator.decimal.css - - scalar-integer-constants: - - match: '{{integer}}' - scope: meta.number.integer.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - - scalar-rational-constants: - - match: \d+(/)\d+ - scope: meta.number.rational.css constant.numeric.value.css - captures: - 1: keyword.operator.arithmetic.css - - angle-constants: - - match: '{{float}}({{angle_units}})' - scope: meta.number.float.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: punctuation.separator.decimal.css - 4: constant.numeric.suffix.css - - match: '{{integer}}({{angle_units}})' - scope: meta.number.integer.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: constant.numeric.suffix.css - - match: \b0\b(?!%) - scope: meta.number.integer.decimal.css constant.numeric.value.css - - frequency-constants: - - match: '{{float}}({{frequency_units}})' - scope: meta.number.float.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: punctuation.separator.decimal.css - 4: constant.numeric.suffix.css - - match: '{{integer}}({{frequency_units}})' - scope: meta.number.integer.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: constant.numeric.suffix.css - - length-constants: - - match: '{{float}}({{font_relative_lengths}}|{{viewport_percentage_lengths}}|{{absolute_lengths}})' - scope: meta.number.float.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: punctuation.separator.decimal.css - 4: constant.numeric.suffix.css - - match: '{{integer}}({{font_relative_lengths}}|{{viewport_percentage_lengths}}|{{absolute_lengths}})' - scope: meta.number.integer.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: constant.numeric.suffix.css - - match: \b0\b(?!%) - scope: meta.number.integer.decimal.css constant.numeric.value.css - - resolution-constants: - - match: '{{float}}({{resolution_units}})' - scope: meta.number.float.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: punctuation.separator.decimal.css - 4: constant.numeric.suffix.css - - match: '{{integer}}({{resolution_units}})' - scope: meta.number.integer.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: constant.numeric.suffix.css - - percentage-constants: - - match: '{{float}}(%)' - scope: meta.number.float.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: punctuation.separator.decimal.css - 4: constant.numeric.suffix.css - - match: '{{integer}}(%)' - scope: meta.number.integer.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: constant.numeric.suffix.css - - time-constants: - - match: '{{float}}({{duration_units}})' - scope: meta.number.float.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: punctuation.separator.decimal.css - 4: constant.numeric.suffix.css - - match: '{{integer}}({{duration_units}})' - scope: meta.number.integer.decimal.css - captures: - 1: keyword.operator.arithmetic.css - 2: constant.numeric.value.css - 3: constant.numeric.suffix.css - - # Unicode Ranges - # https://www.w3.org/TR/css-syntax-3/#urange - unicode-ranges: - - match: ([Uu]\+)([\h?]{1,6}(?:(-)\h{1,6})?) - scope: meta.number.unicode-range.css - captures: - 1: constant.numeric.prefix.css - 2: constant.numeric.value.css - 3: punctuation.separator.range.css - -###[ STRING CONSTANTS ]######################################################## - - # Font Family Names - # https://drafts.csswg.org/css-fonts-3/#family-name-value - font-family-names: - - match: '{{ident}}(?:\s+{{ident}}(?!\())*' - scope: meta.string.css string.unquoted.css - - # Language Ranges - # https://drafts.csswg.org/selectors-4/#language-range - language-ranges: - - match: (?={{nmstart}}|\*) - push: - - meta_include_prototype: false - - meta_scope: meta.string.css string.unquoted.css - - include: string-content - - match: \* - scope: variable.language.wildcard.asterisk.css - - match: (?!{{nmchar}}) - pop: 1 - - # Named Grid Lines - # https://drafts.csswg.org/css-grid/#named-lines - line-names: - - match: \[ - scope: punctuation.section.brackets.begin.css - push: line-names-content - - line-names-content: - - meta_scope: meta.line-names.css meta.brackets.css - - match: \] - scope: punctuation.section.brackets.end.css - pop: 1 - - match: '{{ident}}' - scope: meta.string.css string.unquoted.line-name.css - - include: terminator-pop - - quoted-strings: - - match: \" - scope: punctuation.definition.string.begin.css - push: double-quoted-string-content - - match: \' - scope: punctuation.definition.string.begin.css - push: single-quoted-string-content - - quoted-string: - - match: \" - scope: punctuation.definition.string.begin.css - set: double-quoted-string-content - - match: \' - scope: punctuation.definition.string.begin.css - set: single-quoted-string-content - - double-quoted-string-content: - - meta_include_prototype: false - - meta_scope: meta.string.css string.quoted.double.css - - match: \" - scope: punctuation.definition.string.end.css - pop: 1 - - include: string-content - - single-quoted-string-content: - - meta_include_prototype: false - - meta_scope: meta.string.css string.quoted.single.css - - match: \' - scope: punctuation.definition.string.end.css - pop: 1 - - include: string-content - - string-content: - - meta_include_prototype: false - - match: \n - scope: invalid.illegal.newline.css - pop: 1 - - match: \\\s*\n - scope: constant.character.escape.newline.css - - match: \\(?:\h{1,6}|.) - scope: constant.character.escape.css - -###[ URL STRING CONSTANTS ]#################################################### - - quoted-urls: - - match: \" - scope: - meta.string.css string.quoted.double.css - punctuation.definition.string.begin.css - push: double-quoted-url-content - - match: \' - scope: - meta.string.css string.quoted.single.css - punctuation.definition.string.begin.css - push: single-quoted-url-content - - double-quoted-url-content: - - meta_include_prototype: false - - meta_content_scope: - meta.path.url.css - meta.string.css string.quoted.double.css - - match: \" - scope: - meta.string.css string.quoted.double.css - punctuation.definition.string.end.css - pop: 1 - - include: string-content - - include: url-content - - single-quoted-url-content: - - meta_include_prototype: false - - meta_content_scope: - meta.path.url.css - meta.string.css string.quoted.single.css - - match: \' - scope: - meta.string.css string.quoted.single.css - punctuation.definition.string.end.css - pop: 1 - - include: string-content - - include: url-content - - # Unquoted URL token - # https://drafts.csswg.org/css-syntax-3/#consume-a-url-token - unquoted-urls: - - match: (?=[[:alnum:]/]) - push: unquoted-url-content - - unquoted-url-content: - - meta_include_prototype: false - - meta_content_scope: - meta.path.url.css - meta.string.css string.unquoted.css - - match: '["''(]' - scope: invalid.illegal.unexpected-token.css - set: - - meta_include_prototype: false - - match: (?=\)) - pop: 1 - - include: string-content - - match: (?=\)) - pop: 1 - - include: url-content - - url-content: - - include: string-content - - match: (%)\h{2} - scope: constant.character.escape.url.css - captures: - 1: punctuation.definition.escape.css - - match: '[/&?#]|://' - scope: punctuation.separator.path.css - -###[ OPERATORS ]############################################################### - - common-operators: - - include: arithmetic-operators - - include: important-operators - - arithmetic-operators: - - match: / - scope: keyword.operator.arithmetic.css - - important-operators: - - match: \!\s*(?i:important){{break}} - scope: keyword.other.important.css - - color-adjuster-operators: - - match: '[-+*](?=\s)' - scope: keyword.operator.arithmetic.css - - match: '[-+*/]' - scope: invalid.illegal.operator.css - - maybe-illegal-operator: - - match: '[-+](?=\s*\d)' - scope: invalid.illegal.operator.css - pop: 1 - - match: \s*([-+])(?=\d) - captures: - 1: invalid.illegal.operator.css - pop: 1 - - include: immediately-pop - -###[ PUNCTUATION ]############################################################# - - comma-delimiters: - - match: ',' - scope: punctuation.separator.sequence.css - - block-end2: - - match: \} - scope: punctuation.section.block.end.css - pop: 2 - - group-end: - - match: \) - scope: punctuation.section.group.end.css - pop: 1 - - rule-terminators: - - match: ; - scope: punctuation.terminator.rule.css - - illegal-blocks: - # https://www.w3.org/TR/CSS22/syndata.html#parsing-errors - - match: \{ - scope: invalid.illegal.unexpected-token.css - push: - - match: \} - scope: invalid.illegal.unexpected-token.css - pop: 1 - - match: \} - scope: invalid.illegal.unexpected-token.css - - illegal-groups: - # https://www.w3.org/TR/CSS22/syndata.html#parsing-errors - - match: \( - scope: invalid.illegal.unexpected-token.css - push: - - match: \) - scope: invalid.illegal.unexpected-token.css - pop: 1 - - match: \) - scope: invalid.illegal.unexpected-token.css - -###[ PROTOTYPES ]############################################################## - - else-pop: - - match: (?=\S) - pop: 1 - - immediately-pop: - - match: '' - pop: 1 - - terminator-pop: - - match: (?=[;){}]) - pop: 1