PostCSS.sublime-syntax

%YAML 1.2
---
name: PostCSS
scope: source.postcss
version: 2

extends: Packages/CSS/CSS.sublime-syntax

file_extensions:
  - pcss
  - postcss

variables:

  ## CSS

  # Identifiers
  ident_start: (?:{{nmstart}}|{{interpolation_start}})

  # Foreign Tags
  tag_name_begin: (?={{tag_name_start}})
  tag_name_start: (?:[[:alpha:]]|{{interpolation_start}})

  ## PostCSS

  interpolation_start: \$\(

contexts:

###[ CSS ]#####################################################################

  main:
    # keep `source.postcss` main scope for compatibility with other packages
    # but add another `source.css.postcss` scope to share preferences with CSS.
    - meta_prepend: true
    - meta_scope: source.css.postcss

  stylesheet:
    - meta_prepend: true
    - include: postcss-variable-definitions
    - include: postcss-variables

###[ CSS COMMENTS ]############################################################

  comments:
    - meta_append: true
    - include: postcss-line-comments

  block-comment-body:
    - meta_prepend: true
    - include: postcss-interpolations

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

  at-counter-style-definition-list-body:
    - meta_prepend: true
    - include: postcss-variable-definitions
    - include: postcss-variables

  at-other:
    - meta_prepend: true
    - include: postcss-at-apply
    - include: postcss-at-each
    - include: postcss-at-functions
    - include: postcss-at-mixins
    - include: postcss-at-return
    - include: postcss-at-other

  properties-or-selectors:
    # required until (ST4xxx PR #4052)
    - meta_prepend: true
    - include: custom-properties

  selector-tag-content:
    - meta_prepend: true
    - include: postcss-interpolations

  attribute-selector-unquoted-value-content:
    - meta_prepend: true
    - include: postcss-string-interpolations

  property-list-body:
    - meta_prepend: true
    - include: postcss-variable-definitions
    - include: postcss-variables

  function-arguments-prototype:
    - meta_prepend: true
    - include: postcss-variables

  identifier-content:
    - meta_prepend: true
    - include: postcss-interpolations

  line-name-content:
    - meta_prepend: true
    - include: postcss-string-interpolations

  string-content:
    - meta_prepend: true
    - include: postcss-string-interpolations

  value-prototype:
    - meta_prepend: true
    - include: postcss-variables

###[ POSTCSS COMMENTS ]########################################################

  postcss-line-comments:
    - match: /{2}
      scope: punctuation.definition.comment.postcss
      push: postcss-line-comments-body

  postcss-line-comments-body:
    - meta_scope: comment.line.double-slash.postcss
    - match: $\n?
      pop: 1
    - include: postcss-interpolations

###[ POSTCSS APPLY AT RULES ]##################################################

  # https://github.com/pascalduez/postcss-apply
  postcss-at-apply:
    - match: (@)apply{{break}}
      captures:
        0: keyword.control.directive.apply.postcss
        1: punctuation.definition.keyword.postcss
      push: postcss-at-apply-content

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

###[ POSTCSS EACH AT-RULE ]####################################################

  # https://github.com/postcss/postcss-nested
  postcss-at-each:
    - match: (@)each{{break}}
      captures:
        0: keyword.control.loop.each.postcss
        1: punctuation.definition.keyword.postcss
      push: postcss-at-each-content

  postcss-at-each-content:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.each.postcss
    - match: in{{break}}
      scope: keyword.operator.iterator.postcss
    - include: values

###[ POSTCSS DEFINE-FUNCTION AT-RULE ]#########################################

  # https://github.com/mcattx/postcss-define-function
  postcss-at-functions:
    - match: (@)define-function{{break}}
      scope: meta.function.postcss keyword.control.directive.function.postcss
      captures:
        1: punctuation.definition.keyword.postcss
      push:
        - postcss-at-function-meta
        - maybe-property-list
        - postcss-at-function-parameter-list
        - postcss-at-function-name
    - match: (@)callFn{{break}}
      scope: meta.at-rule.function-call.postcss keyword.control.directive.postcss
      captures:
        1: punctuation.definition.keyword.postcss

  postcss-at-function-meta:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.function.postcss
    - include: immediately-pop

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

  postcss-at-function-name-content:
    - meta_scope: entity.name.function.postcss
    - include: identifier-content

  postcss-at-function-parameter-list:
    - meta_include_prototype: false
    - meta_content_scope: meta.function.identifier.postcss
    - match: \(
      scope: punctuation.section.group.begin.postcss
      set: postcss-at-function-parameter-list-body
    - include: comments
    - include: else-pop

  postcss-at-function-parameter-list-body:
    - meta_include_prototype: false
    - meta_scope: meta.function.parameters.postcss meta.group.postcss
    - include: group-end
    - include: comments
    - include: comma-delimiters
    - include: postcss-parameters

###[ POSTCSS MIXIN AT-RULE ]###################################################

  # https://github.com/postcss/postcss-mixins
  postcss-at-mixins:
    - match: (@)define-mixin{{break}}
      scope: keyword.control.directive.mixin.postcss
      captures:
        1: punctuation.definition.keyword.postcss
      push:
        - postcss-at-mixin-parameter-list
        - postcss-at-mixin-name

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

  postcss-at-mixin-name-content:
    - meta_scope: entity.name.trait.mixin.postcss
    - include: identifier-content

  postcss-at-mixin-parameter-list:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.mixin.postcss
    - include: postcss-parameters
    - include: values

  postcss-parameters:
    # mixin parameter definitions
    - match: (\$){{ident}}
      scope: meta.parameter.identifier.postcss variable.parameter.postcss
      captures:
        1: punctuation.definition.variable.postcss
    - match: ':'
      scope: meta.parameter.postcss punctuation.separator.key-value.css
      push: postcss-parameter-value

  postcss-parameter-value:
    - meta_content_scope: meta.parameter.value.postcss
    - match: ','
      scope: punctuation.separator.sequence.css
      pop: 1
    - include: values

###[ POSTCSS RETURN AT-RULE ]##################################################

  # https://github.com/mcattx/postcss-define-function
  postcss-at-return:
    - match: (@)return{{break}}
      scope: keyword.control.flow.return.postcss
      captures:
        1: punctuation.definition.keyword.postcss
      push: postcss-at-return-value

  postcss-at-return-value:
    - meta_scope: meta.at-rule.return.postcss
    - match: '[-+*/]'
      scope: keyword.operator.arithmetic.postcss
    - include: values

###[ POSTCSS OTHER AT-RULE ]###################################################

  postcss-at-other:
    # support identifiers after unknown at-rules
    - match: (@)[A-Za-z][0-9A-Za-z_-]*{{break}}
      scope: keyword.control.directive.postcss
      captures:
        1: punctuation.definition.keyword.postcss
      push:
        - postcss-at-other-body
        - postcss-at-other-name

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

  postcss-at-other-name-content:
    - meta_scope: entity.other.postcss
    - include: identifier-content

  postcss-at-other-body:
    - meta_include_prototype: false
    - meta_scope: meta.at-rule.other.postcss
    - include: values

###[ POSTCSS INTERPOLATIONS ]##################################################

  postcss-interpolations:
    - match: \$\(
      scope: punctuation.section.interpolation.begin.postcss
      push: postcss-interpolation-body

  postcss-interpolation-body:
    - meta_scope: meta.interpolation.postcss
    - match: \)
      scope: punctuation.section.interpolation.end.postcss
      pop: 1
    - match: '{{ident_begin}}'
      push: postcss-variable-content

  postcss-string-interpolations:
    - match: \$\(
      scope: punctuation.section.interpolation.begin.postcss
      push: postcss-string-interpolation-body

  postcss-string-interpolation-body:
    - clear_scopes: 1
    - meta_scope: meta.interpolation.postcss
    - include: postcss-interpolation-body

###[ POSTCSS VARIABLES ]#######################################################

  # https://github.com/postcss/postcss-simple-vars
  postcss-variable-definitions:
    - match: (((\$){{ident}})\s*)(:)
      captures:
        1: meta.variable.identifier.postcss
        2: variable.other.postcss
        3: punctuation.definition.variable.postcss
        4: meta.variable.postcss punctuation.separator.key-value.css
      push: postcss-variable-value

  postcss-variable-value:
    - meta_content_scope: meta.variable.value.postcss
    - include: values

  postcss-variables:
    - match: \${{ident_begin}}
      scope: punctuation.definition.variable.postcss
      push: postcss-variable-content

  postcss-variable-content:
    - meta_scope: variable.other.postcss
    - include: identifier-content