Sublime Forum

[Syntax] Trying to figure out how to extend/augment syntax

#1

I’m trying to figure out how exactly to extend (add to or augment) an existing context from my CSS-gf.sublime-syntax file. I might very well be doing this completely wrong. Below is my main attempt that I’ve been playing with that I can’t get to work. All the base syntax appears to be working via the - include: 'scope:source.css' Thanks for any help.

[code]%YAML 1.2

name: ‘CSS [gf]’
scope: source.css.gf
contexts:
main:
- include: vendor-prefix
- include: ‘scope:source.css’

vendor-prefix:
- match: “-(?:(webkit)|(moz)|(ms)|(o)|(khtml))-”
scope: support.type.vendor-prefix.css
captures:
1: support.type.vendor-prefix.webkit.css
2: support.type.vendor-prefix.mozilla.css
3: support.type.vendor-prefix.ms.css
4: support.type.vendor-prefix.opera.css
5: support.type.vendor-prefix.khtml.css[/code]

In the above I’m trying to add vendor specific scope/names so they can be assigned their own colors, as well as adding ‘khtml’ to the list.

Thanks for any help.

0 Likes

#2

The sublime-syntax engine uses a stack of contexts to do matching. You start in the main context, and then the actions push, pop and set are used to move into other contexts. This allows you to match certain patterns only under specific situations.

Your implementation will only match the vendor prefixes if they are included in the global scope of the CSS file. I am presuming you want to match property names that are vendor prefixed. Looking at the default CSS, syntax, you’ll see that as soon as a { is seen, the syntax pushes (https://github.com/sublimehq/Packages/blob/master/CSS/CSS.sublime-syntax#L411-L417) into the rule-list context. That then pushes into the rule-list-body context https://github.com/sublimehq/Packages/blob/master/CSS/CSS.sublime-syntax#L602-L733.

For your syntax rules to work, they would need to be located in that context. There isn’t currently a way to “overlay” contexts from a new syntax over a base syntax. You’d probably need to create a main context where you include https://github.com/sublimehq/Packages/blob/master/CSS/CSS.sublime-syntax#L76-L78, and then create custom versions of property-list, rule-list and rule-list-body. You could add your custom rules to the start of your rule-list-body and then include the Packages/CSS/CSS.sublime-syntax#rule-list-body context to get all of the rules from the default.

In the end, it may make more sense to start a discussion at https://github.com/sublimehq/Packages/issues about adding some more specific scope names to the default CSS syntax so that you may target them with your color scheme.

3 Likes

YAML Macros 2.0: Extend existing syntaxes with new functionality