grammar.yaml

scopeName: "source.tcss"
name: "Textual CSS"
fileTypes:
  - "tcss"
patterns:
  - include: "#comment-block"
  - include: "#comment-line"
  - include: "#combinators"
  - include: "#selector"
  - include: "#rule-list"
  - include: "#variable-definition"


repository:

  color-keywords:
    patterns:
      # ANSI colors, TCSS-specific
      - match: "(?<![\\w-])(ansi_black|ansi_blue|ansi_bright_black|ansi_bright_blue|ansi_bright_cyan|ansi_bright_green|ansi_bright_magenta|ansi_bright_red|ansi_bright_white|ansi_bright_yellow|ansi_cyan|ansi_green|ansi_magenta|ansi_red|ansi_white|ansi_yellow)(?![\\w-])"
        name: "support.constant.color.ansi.tcss"
      # CSS 2.1 colors
      - match: "(?<![\\w-])(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)(?![\\w-])"
        name: "support.constant.color.w3c-standard-color-name.tcss"
      # SVG/CSS3 colors
      - match: "(?<![\\w-])(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|transparent|turquoise|violet|wheat|whitesmoke|yellowgreen)(?![\\w-])"
        name: "support.constant.color.w3c-extended-color-name.tcss"
      # Auto color
      - match: "(?<![\\w-])auto(?![\\w-])"
        name: "support.constant.color.auto.tcss"

  combinators:
    patterns:
      - match: ">"
        name: "keyword.operator.combinator.tcss"

  commas:
    patterns:
      - match: ","
        name: "punctuation.separator.list.comma.tcss"

  comment-block:
    begin: "/\\*"
    beginCaptures:
      0: {name: "punctuation.definition.comment.begin.tcss"}
    end: "\\*/"
    endCaptures:
      0: {name: "punctuation.definition.comment.end.tcss"}
    name: "comment.block.tcss"

  comment-line:
    begin: "\\# "
    beginCaptures:
      0: {name: "punctuation.definition.comment.begin.tcss"}
    end: "$"
    name: "comment.line.tcss"

  functions:
    begin: "(?<![\\w-])(rgba?|hsla?)(\\()"
    beginCaptures:
      "1": {name: "support.function.misc.tcss"}
      "2": {name: "punctuation.section.function.begin.bracket.round.tcss"}
    end: "\\)"
    endCaptures:
      "0": {name: "punctuation.section.function.end.bracket.round.tcss"}
    patterns:
      - include: "#property-values"

  numeric-values:
    patterns:
      # RGB(A) values
      - captures:
          "1": {name: "punctuation.definition.constant.tcss"}
        match: "(#)(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b"
        name: "constant.other.color.rgb-value.hex.tcss"
      # Actual numbers
      ## Leading sign, numerals, possible unit
      - captures:
          "1": {name: "keyword.other.unit.percentage.tcss"}
          "2": {name: "keyword.other.unit.${2:/downcase}.tcss"}
        match: "(?<![\\w-])[-+]?(?:[0-9]+(?:\\.[0-9]+)?|\\.[0-9]+)(?:(%)|(fr|h|vh|vw|w)\\b)?"
        name: "constant.numeric.tcss"

  property-keywords:
    patterns:
      - match: "(?<![\\w-])(?:ascii|auto|blank|block|bold|border-box|both|bottom|center|content-box|dashed|double|end|grid|heavy|hidden|hkey|horizontal|inflect|initial|inner|italic|justify|left|middle|none|outer|panel|reverse|right|round|screen|scroll|solid|stable|start|strike|tall|thick|top|underline|vertical|visible|vkey|wide|x|y)(?![\\w-])"
        name: "support.constant.property-value.tcss"

  property-names:
    patterns:
      - match: "(?<![\\w-])(?:align|align-horizontal|align-vertical|background|border|border-bottom|border-left|border-right|border-subtitle-align|border-subtitle-background|border-subtitle-color|border-subtitle-style|border-title-align|border-title-background|border-title-color|border-title-style|border-top|box-sizing|color|column-span|constrain|content-align|content-align-horizontal|content-align-vertical|display|dock|grid-columns|grid-gutter|grid-rows|grid-size|height|keyline|layer|layers|layout|link-background|link-background-hover|link-color|link-color-hover|link-style|link-style-hover|margin|margin-bottom|margin-left|margin-right|margin-top|max-height|max-width|min-height|min-width|offset|offset-x|offset-y|opacity|outline|outline-bottom|outline-left|outline-right|outline-top|overflow|overflow-x|overflow-y|overlay|padding|padding-bottom|padding-left|padding-right|padding-top|row-span|scrollbar-background|scrollbar-background-active|scrollbar-background-hover|scrollbar-color|scrollbar-color-active|scrollbar-color-hover|scrollbar-corner-color|scrollbar-gutter|scrollbar-size|scrollbar-size-horizontal|scrollbar-size-vertical|text-align|text-opacity|text-style|tint|visibility|width)(?![\\w-])"
        name: "support.type.property-name.tcss"

  property-values:
    patterns:
      - include: "#commas"
      - include: "#comment-block"
      - include: "#variables"
      - include: "#functions"
      - include: "#property-keywords"
      - include: "#numeric-values"
      - include: "#color-keywords"
      - include: "#text"
      - match: "!\\s*important(?![\\w-])"
        name: "keyword.other.important.tcss"

  pseudo-classes:
    match: "(:)(:*)(?:disabled|enabled|focus|focus-within|hover)(?![\\w-]|\\s*[;}])"
    captures:
      1: {name: "punctuation.definition.entity.tcss"}
      2: {name: "invalid.illegal.colon.tcss"}
    name: "entity.other.attribute-name.pseudo-class.tcss"

  rule-list:
    begin: "{"
    beginCaptures:
      "0": {name: "punctuation.section.property-list.begin.bracket.curly.tcss"}
    end: "}"
    endCaptures:
      "0": {name: "punctuation.section.property-list.end.bracket.curly.tcss"}
    name: "meta.property-list.tcss"
    patterns:
      - include: "#rule-list-innards"

  rule-list-innards:
    patterns:
      - include: "#comment-block"
      - include: "#comment-line"

      # Property names (TCSS properties don't start with -.)
      - begin: "(?<![-a-zA-Z])(?=[a-zA-Z])"
        end: "$|(?![-a-zA-Z])"
        name: "meta.property-name.tcss"
        patterns:
          - include: "#property-names"

      - begin: "(:)\\s*"
        beginCaptures:
          "1": {name: "punctuation.separator.key-value.tcss"}
        end: "\\s*(;)|\\s*(?=})"
        endCaptures:
          "1": {name: "punctuation.terminator.rule.tcss"}
        contentName: "meta.property-value.tcss"
        patterns:
          - include: "#comment-block"
          - include: "#property-values"

      - match: ";"
        name: "punctuation.terminator.rule.tcss"

      - include: "#selector"  # For nested CSS.

  selector:
    # We look for something that looks like the beginning of a selector + end of a selector
    begin: "(?=[.*\\#\\&a-zA-Z_])"  # Valid selector character.
    end: "(?=\\s*{)"  # A selector ends when the { begins.
    name: "meta.selector.tcss"
    patterns:
      - include: "#selector-innards"

  selector-innards:
    patterns:
      - include: "#comment-block"
      - include: "#comment-line"
      - include: "#commas"
      - include: "#combinators"

      # The wildcard '*' selector
      - match: "\\*"
        name: "entity.name.tag.wildcard.tcss"

      # The nested TCSS '&' selector
      - match: "\\&"
        name: "entity.name.tag.nesting-selector.tcss"

      # Actively look for invalid names
      ## Look-behind to make sure we're not in the middle of a selector
      ## Consume possible . or # for class/ID entity
      ## Invalid identifiers start with
      ### a digit (possibly preceeded by a hyphen)
      ### or a single hyphen followed by
      #### end of line, another selector, block comment, line comment
      ## Then we mark the remainder of the selector to be invalid
      - captures:
          1: {name: "punctuation.definition.entity.css"}
        match: "([.\\#])(?:-?[0-9]|-(?=$|[\\s,.\\#:{>]|/\\*|# ))(?:[-a-zA-Z_0-9])*"
        name: "invalid.illegal.bad-identifier.tcss"

      # Class names
      ## . followed by valid characters which must be ended by either
      ### End of line, another selector, block comment, line comment
      - captures:
          1: {name: "punctuation.definition.entity.tcss"}
        match: "(\\.)(?:[-a-zA-Z_0-9])+(?=$|[\\s,.\\#:{>]|/\\*|# )"
        name: "entity.other.attribute-name.class.tcss"

      # Valid IDs
      - captures:
          1: {name: "punctuation.definition.entity.tcss"}
        match: "(\\#)(?:[-a-zA-Z0-9])+(?=$|[\\s,.\\#:{>]|/\\*|# )"
        name: "entity.other.attribute-name.id.tcss"

      - include: "#pseudo-classes"

      - match: "(?<![\\w-])(?![0-9])(?:\\w)+(?!\\w)"
        name: "entity.name.tag.widget.tcss"

  text:
    match: "\\w+"
    name: "string.tcss"

  variables:
    captures:
      "1": {name: "punctuation.definition.variable.tcss"}
    match: "(\\$)[a-zA-Z_-][a-zA-Z0-9_-]*"
    name: "variable.tcss"

  variable-definition:
    patterns:
      - include: "#variables"
      - begin: "(:)\\s*"
        beginCaptures:
          "1": {name: "punctuation.separator.key-value.tcss"}
        end: "\\s*(;)"
        endCaptures:
          "1": {name: "punctuation.terminator.rule.tcss"}
        contentName: "meta.property-value.tcss"
        patterns:
          - include: "#comment-block"
          - include: "#property-values"