Tailwind CSS.sublime-syntax

%YAML 1.2
---
name: Tailwind CSS
scope: source.css.tailwind
version: 2

extends: Packages/CSS/CSS.sublime-syntax

file_extensions:
  - tailwind.css

contexts:

###[ CSS AT RULES ]############################################################

  at-import-body:
    - meta_prepend: true
    - include: quoted-urls
    - match: (?i:source)(?=\()
      scope: meta.function-call.identifier.css support.function.source.css.tailwind
      push:
        - url-function-arguments-list-body
        - function-arguments-list-begin

  at-other:
    - meta_prepend: true
    - include: tailwind-at-apply
    - include: tailwind-at-config
    - include: tailwind-at-custom-variants
    - include: tailwind-at-plugin
    - include: tailwind-at-responsive
    - include: tailwind-at-screen
    - include: tailwind-at-source
    - include: tailwind-at-tailwind
    - include: tailwind-at-theme
    - include: tailwind-at-utility
    - include: tailwind-at-variants

###[ CSS PROPERTY IDENTIFIERS ]################################################

  custom-property-content:
    - meta_prepend: true
    - match: \*
      scope: constant.other.wildcard.asterisk.css.tailwind

###[ TAILWIND INLINE AT RULES ]################################################

  tailwind-at-apply:
    - match: (@)apply{{break}}
      captures:
        0: keyword.control.directive.apply.css.tailwind
        1: punctuation.definition.keyword.css.tailwind
      push: tailwind-at-apply-content

  tailwind-at-apply-content:
    - meta_scope: meta.at-rule.apply.css.tailwind
    - match: '{{custom_ident_begin}}'
      push: custom-property-variable-content
    - match: \.|{{ident_begin}}
      scope: punctuation.definition.entity.css
      push: selector-class-identifier-content
    - include: values

  tailwind-at-variants:
    - match: (@)variants?{{break}}
      captures:
        0: keyword.control.directive.css.tailwind
        1: punctuation.definition.keyword.css.tailwind
      push:
        - tailwind-at-variants-meta
        - maybe-property-list
        - tailwind-at-variants-name

  tailwind-at-variants-meta:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.variant.css.tailwind
    - include: immediately-pop

  tailwind-at-variants-name:
    - meta_include_prototype: false
    - match: '{{ident_begin}}'
      set: tailwind-at-variant-content
    - include: comments
    - include: else-pop

  tailwind-at-variant-content:
    - meta_scope: entity.other.variant-name.css.tailwind
    - include: identifier-content

###[ TAILWIND TOPLEVEL AT RULES ]##############################################

  # @config "./tailwind.config.js"
  tailwind-at-config:
    - match: (@)(?i:config){{break}}
      captures:
        0: keyword.control.directive.css
        1: punctuation.definition.keyword.css
      push: tailwind-at-config-content

  tailwind-at-config-content:
    - meta_scope: meta.at-rule.config.css.tailwind
    - include: quoted-urls
    - include: url-functions
    - include: at-rule-end

  tailwind-at-custom-variants:
    - match: (@)custom-variant{{break}}
      captures:
        0: keyword.control.directive.css.tailwind
        1: punctuation.definition.keyword.css.tailwind
      push:
        - tailwind-at-custom-variant-meta
        - maybe-stylesheet-block
        - tailwind-at-custom-variant-selector
        - tailwind-at-variants-name
    - match: (@)slot{{break}}
      scope: meta.at-rule.slot.css.tailwind
      captures:
        0: keyword.control.directive.css.tailwind
        1: punctuation.definition.keyword.css.tailwind

  tailwind-at-custom-variant-meta:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.custom-variant.css.tailwind
    - include: immediately-pop

  tailwind-at-custom-variant-selector:
    - meta_include_prototype: false
    - match: \(
      scope: punctuation.section.group.begin.css.tailwind
      set: tailwind-at-custom-variant-selector-body
    - include: else-pop

  tailwind-at-custom-variant-selector-body:
    - meta_include_prototype: false
    - meta_scope: meta.group.css.tailwind
    - match: \)
      scope: punctuation.section.group.end.css.tailwind
      pop: 1
    - include: at-rules
    - include: selectors

  tailwind-at-plugin:
    - match: (@)plugin{{break}}
      captures:
        0: keyword.control.directive.css.tailwind
        1: punctuation.definition.keyword.css.tailwind
      push:
        - tailwind-at-plugin-meta
        - maybe-property-list
        - tailwind-at-plugin-path

  tailwind-at-plugin-meta:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.plugin.css.tailwind
    - include: immediately-pop

  tailwind-at-plugin-path:
    - meta_include_prototype: false
    - include: quoted-urls
    - include: url-functions
    - include: comments
    - include: else-pop

  tailwind-at-responsive:
    - match: (@)responsive{{break}}
      captures:
        0: keyword.control.directive.css.tailwind
        1: punctuation.definition.keyword.css.tailwind
      push:
        - tailwind-at-responsive-meta
        - maybe-stylesheet-block

  tailwind-at-responsive-meta:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.responsive.css.tailwind
    - include: immediately-pop

  tailwind-at-screen:
    - match: (@)screen{{break}}
      captures:
        0: keyword.control.directive.css.tailwind
        1: punctuation.definition.keyword.css.tailwind
      push:
        - tailwind-at-screen-meta
        - maybe-stylesheet-block
        - tailwind-at-screen-name

  tailwind-at-screen-meta:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.screen.css.tailwind
    - include: immediately-pop

  tailwind-at-screen-name:
    - meta_include_prototype: false
    - match: (?:base|components|utilities){{break}}
      scope: entity.other.screen-name.css.tailwind
      pop: 1
    - include: comments
    - include: else-pop

  tailwind-at-source:
    - match: (@)(?:reference|source){{break}}
      captures:
        0: keyword.control.directive.css.tailwind
        1: punctuation.definition.keyword.css.tailwind
      push:
        - tailwind-at-source-meta
        - tailwind-at-source-path

  tailwind-at-source-meta:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.source.css.tailwind
    - include: immediately-pop

  tailwind-at-source-path:
    - meta_include_prototype: false
    - include: quoted-urls
    - include: url-functions
    - include: comments
    - include: else-pop

  tailwind-at-tailwind:
    - match: (@)tailwind{{break}}
      captures:
        0: keyword.control.directive.css.tailwind
        1: punctuation.definition.keyword.css.tailwind
      push:
        - tailwind-at-tailwind-meta
        - tailwind-at-tailwind-name

  tailwind-at-tailwind-meta:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.tailwind.css.tailwind
    - include: immediately-pop

  tailwind-at-tailwind-name:
    - meta_include_prototype: false
    - match: '{{ident_begin}}'
      set: tailwind-at-tailwind-name-content
    - include: comments
    - include: else-pop

  tailwind-at-tailwind-name-content:
    - meta_scope: entity.other.import.css.tailwind
    - include: identifier-content

  tailwind-at-theme:
    - match: (@)theme{{break}}
      captures:
        0: keyword.control.directive.css.tailwind
        1: punctuation.definition.keyword.css.tailwind
      push:
        - tailwind-at-theme-meta
        - maybe-property-list

  tailwind-at-theme-meta:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.theme.css.tailwind
    - include: immediately-pop

  tailwind-at-utility:
    - match: (@)utility{{break}}
      captures:
        0: keyword.control.directive.css.tailwind
        1: punctuation.definition.keyword.css.tailwind
      push:
        - tailwind-at-utility-meta
        - maybe-property-list
        - tailwind-at-utility-name

  tailwind-at-utility-meta:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.utility.css.tailwind
    - include: immediately-pop

  tailwind-at-utility-name:
    - meta_include_prototype: false
    - match: '{{ident_begin}}'
      set: tailwind-at-utility-name-content
    - include: comments
    - include: else-pop

  tailwind-at-utility-name-content:
    - meta_scope: entity.other.utility-name.css.tailwind
    - include: identifier-content