CSS (Rml).sublime-syntax

%YAML 1.2
---

name: CSS (Rml)
scope: embedding.rcss
extends: Packages/CSS/CSS.sublime-syntax
version: 2

file_extensions:
  - rcss

variables:

  rml_tags: |-
    \b(?xi: datagrid | dataselect | datacombo | tabset | tabs | color ){{break}}

  rml_property_names: |-
    \b(?xi: tab-index | drag | focus | image-color ){{break}}

  rml_units: |-
    (?x:
      %
    | {{rml_resolution_units}}
    )
  rml_resolution_units: (?i:dp)\b

  spritesheet_property_names: |-
    \b(?xi: src | resolution ){{break}}

  decorator_types: |-
    \b(?xi:
      tiled-horizontal | tiled-vertical | tiled-box
    | image | ninepatch | gradient
    ){{break}}

  decorator_property_names: |-
    \b(?xi: decorator ){{break}}

  # Removed inherit.
  rml_notsupported_constants:  |-
    \b(?xi: inherit ){{break}}

contexts:

  # Overwrite to support RmlUi element tags.
  selector-content:
    - meta_prepend: true
    - match: '{{rml_tags}}'
      scope: entity.name.tag.html.rcss

  # Overwrite to support RmlUi CSS properties.
  builtin-property:
    - meta_prepend: true
    - match: '{{rml_property_names}}'
      scope: support.type.property-name.rcss
      pop: 1

  # Overwrite to support RmlUi units.
  numeric-constants:
    - meta_prepend: true
    - match: '{{float}}({{rml_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.rcss
    - match: '{{integer}}({{rml_units}})'
      scope: meta.number.integer.decimal.css
      captures:
        1: keyword.operator.arithmetic.css
        2: constant.numeric.value.css
        3: constant.numeric.suffix.rcss

  # Overwrite to remove non-supported identifiers and constants.
  global-constants:
    - meta_prepend: true
    - match: '{{rml_notsupported_constants}}'
      scope: invalid.not-supported.identifier.rcss
  important-operators:
    - match: \!\s*(?i:important){{break}}
      scope: invalid.not-supported.identifier.rcss

  # Overwritten to support RmlUi @ rules.
  at-rules:
    - meta_prepend: true
    - include: at-spritesheet
    - include: at-decorator

  # decorator starter
  property-identifier-content:
    - meta_prepend: true
    - include: decorator-property

  # decorator properties
  decorator-property:
    - match: '{{decorator_property_names}}'
      scope: support.type.property-name.css
      pop: 1

  # @spritesheet
  # https://mikke89.github.io/RmlUiDoc/pages/rcss/sprite_sheets.html
  at-spritesheet:
    - match: (@)(?i:spritesheet){{break}}
      captures:
        0: keyword.control.directive.rcss
        1: punctuation.definition.keyword.rcss
      push: at-spritesheet-content

  at-spritesheet-content:
    - meta_scope: meta.at-rule.spritesheet.rcss
    - match: \{
      scope: punctuation.section.block.begin.css
      push: at-spritesheet-block-content
    - include: at-spritesheet-name
    - include: at-rule-end

  at-spritesheet-block-content:
    - meta_scope: meta.property-list.css meta.block.css
    - include: block-end2
    - include: comments
    - include: at-spritesheet-property-names
    - include: property-values
    - include: rule-terminators
    - include: illegal-blocks
    - include: illegal-groups

  at-spritesheet-name:
    - match: '{{illegal_custom_ident}}'
      scope: invalid.illegal.identifier.css
    - match: '{{ident}}'
      scope: entity.other.spritesheet-name.css

  at-spritesheet-property-names:
    - include: counter-style-fallback-properties
    - include: counter-style-system-properties
    - include: counter-style-speak-as-properties
    - match: '{{spritesheet_property_names}}'
      scope: meta.property-name.css support.type.property-name.css

  # @decorator
  # https://mikke89.github.io/RmlUiDoc/pages/rcss/decorators.html
  at-decorator:
    - match: (@)(?i:decorator){{break}}
      captures:
        0: keyword.control.directive.rcss
        1: punctuation.definition.keyword.rcss
      push: at-decorator-content

  at-decorator-content:
    - meta_scope: meta.at-rule.decorator.rcss
    - match: \{
      scope: punctuation.section.block.begin.css
      push: at-decorator-block-content
    - include: at-decorator-name
    - include: at-rule-end

  at-decorator-block-content:
    - meta_scope: meta.property-list.css meta.block.css
    - include: block-end2
    - include: comments
    - include: at-decorator-property-names
    - include: property-values
    - include: rule-terminators
    - include: illegal-blocks
    - include: illegal-groups

  at-decorator-name:
    - match: '({{ident}})\s*:'
      captures:
        1: entity.other.decorator-name.css
    - match: '{{decorator_types}}'
      scope: support.type.decorator-type.css
    - match: '{{illegal_custom_ident}}'
      scope: invalid.illegal.identifier.css
    - match: '{{ident}}:'
      scope: entity.other.decorator-name.css

  at-decorator-property-names:
    - include: counter-style-fallback-properties
    - include: counter-style-system-properties
    - include: counter-style-speak-as-properties