(comment) @comment
(js_comment) @comment

; Operators
[
  "~"
  ">"
  "+"
  "-"
  "*"
  "/"
  "="
  "^="
  "|="
  "~="
  "$="
  "*="
] @operator

; Keywords
[
  (to)
  (from)
  (important)
] @keyword

[
  "and"
  "or"
  "not"
  "only"
] @keyword.operator

; At Rules
[
  "@import"
  "@media"
  "@charset"
  "@namespace"
  "@keyframes"
  "@supports"
  (at_keyword)
] @style.at

(keyword_query) @style.value.keyword
(feature_name) @identifier.key

(namespace_name) @identifier.type.declare

(keyframes_statement (keyframes_name) @identifier.type.declare)

; Selectors
(class_selector (class_name) @style.selector.identifier.class)
(class_selector "." @style.selector.identifier.class.prefix)
(id_selector "#" @style.selector.identifier.id.prefix . (id_name) @style.selector.identifier.id)
(pseudo_element_selector . (tag_name) @style.selector.element)
(pseudo_element_selector "::" @style.selector.pseudoelement.prefix . (tag_name) @style.selector.pseudoelement)
(pseudo_class_selector ":" @style.selector.pseudoclass.prefix . (class_name) @style.selector.pseudoclass)
((tag_name) @style.selector.element
  (#not-has-parent? @style.selector.element "pseudo_element_selector"))
(attribute_name) @tag.attribute.name
(nesting_selector) @style.selector.nesting @operator
(universal_selector) @style.selector.universal @operator
(selectors "," @punctuation.delimiter)

; Declarations
(declaration (property_name) @style.attribute.name) @style.attribute

; Values
((plain_value) @style.value.keyword
  (#match? @style.value.keyword "^(?!--)"))
((plain_value) @style.identifier.property
  (#match? @style.identifier.property "^--"))
((plain_value) @_value @style.value.boolean
  (#eq? @_value "true" "false")
  (#set! priority 10))
((plain_value) @_value @style.value.null
  (#eq? @_value "null")
  (#set! priority 10))
(string_value) @string
(string_value
  "'" @string.delimiter.left
  "'" @string.delimiter.right)
(string_value
  "\"" @string.delimiter.left
  "\"" @string.delimiter.right)
(color_value "#" @style.value.color.hex.prefix) @style.value.color.hex
(integer_value) @style.value.number
(float_value) @style.value.number
(unit) @style.value.number.unit

; Function Calls
(function_name) @identifier.function
(call_expression
  (function_name) @_func
  (arguments
    "("
    ")") @var-function.arguments
  (#eq? @_func "var")) @var-function

; Delimiters
[ ":" ";" ] @punctuation.delimiter

; Brackets
[ "{" "}" "(" ")" "[" "]" ] @bracket
