%YAML 1.2 --- # http://www.sublimetext.com/docs/3/syntax.html name: Stylus file_extensions: - styl - stylus scope: source.stylus contexts: main: - include: comments - match: '^\s*(@(?:import|charset|css|font-face|(?:-webkit-)?keyframes)(?:\s+([\w-]+))?)\b' captures: 1: keyword.control.at-rule.other.stylus 2: variable.other.animation-name.stylus push: - match: '$|;|(?=\{)' pop: true - include: string-quoted - match: ^\s*(@media)\s* captures: 1: keyword.control.at-rule.media.stylus push: - match: '$|(?=\{)' pop: true - include: media-query - match: |- (?x) (?<=^|;|}) \s* (?= [\[\]'".\w$-]+ \s* ([?:]?=) (?![^\[]*\]) ) push: - match: $|; pop: true - include: expression - include: iteration - include: conditionals - include: return - match: |- (?x) # multi-line regex definition mode ^(\s*) # starts at the beginning of line ([\w$-]+) # identifier (name) (\() # start of argument list (?= .*? \)\s*\{ # we see a curly brace afterwards ) # which means this is a function definition captures: 2: entity.name.function.stylus 3: punctuation.definition.parameters.start.stylus push: - meta_scope: meta.function-call.stylus - match: (\)) captures: 1: punctuation.definition.parameters.end.stylus pop: true - include: expression - match: |- (?x) # multi-line regex definition mode ( (^|;) # starts at the beginning of line or at a ; \s* (\+?\s* # for block mixins [\w$-]+) # identifier (name) (\() # start of argument list (?= .*? \)\s*;?\s* # if there are only spaces and semicolons $|; # then this a ) ) captures: 3: entity.other.attribute-name.mixin.stylus 4: punctuation.definition.parameters.start.stylus push: - meta_scope: meta.function-call.stylus - match: (\)) captures: 1: punctuation.definition.parameters.end.stylus pop: true - include: expression - match: |- (?x) # multi-line regex definition mode (^|(?<=\*/|\}))\s* (?= font(?! \s*:\s | - | .*? (?: \/|normal|bold|light(er?)|serif|sans|monospace| \b\d+(?:\b|px|r?em|%)| var\s*\(| ['"][^\]]*$ ) ) | # we need to distinguish between tag and property `cursor` cursor(?! \s*[:;]\s | - | .*? (?: (?:url\s*\()| (?:-moz-|-webkit-|-ms-)? (?:auto|default|none|context-menu|help|pointer|progress| wait|cell|crosshair|text|vertical-text|alias|copy| move|no-drop|not-allowed|e-resize|n-resize|ne-resize| nw-resize|s-resize|se-resize|sw-resize|w-resize| ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize| row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing normal|bold|light(er?)|serif|sans|monospace) ) ) | ( ( altGlyph|altGlyphDef|altGlyphItem|animate|animateColor| animateMotion|animateTransform|circle|clipPath|color-profile| defs|desc|ellipse|feBlend|feColorMatrix| feComponentTransfer|feComposite|feConvolveMatrix| feDiffuseLighting|feDisplacementMap|feDistantLight|feFlood| feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge| feMergeNode|feMorphology|feOffset|fePointLight| feSpecularLighting|feSpotLight|feTile|feTurbulence|filter| font-face|font-face-format|font-face-name|font-face-src| font-face-uri|foreignObject|g|glyph|glyphRef|hkern|image|line| linearGradient|marker|mask|metadata|missing-glyph|mpath|path| pattern|polygon|polyline|radialGradient|rect|set|stop|svg| switch|symbol|text|textPath|tref|tspan|use|view|vkern| a|abbr|acronym|address|applet|area|article|aside|audio|b|base| basefont|bdi|bdo|bgsound|big|blink|blockquote|body|br|button| canvas|caption|center|cite|code|col|colgroup|data| datalist|dd|decorator|del|details|dfn|dir|div|dl|dt|element| em|embed|fieldset|figcaption|figure|footer|form|frame| frameset|h1|h2|h3|h4|h5|h6|head|header|hgroup|hr|html|i|iframe| img|input|ins|isindex|kbd|keygen|label|legend|li|link|listing| main|map|mark|marquee|menu|menuitem|meta|meter|nav|nobr| noframes|noscript|object|ol|optgroup|option|output|p|param| plaintext|pre|progress|q|rp|rt|ruby|s|samp|script|section| select|shadow|small|source|spacer|span|strike|strong|style| sub|summary|sup|table|tbody|td|template|textarea|tfoot|th| thead|time|title|tr|track|tt|u|ul|var|video|wbr|xmp) \s*([\s,.#\[]|:[^\s]|(?=\{|$)) ) | ( [:~>\[*\/] # symbols but they are valid for selector ) | ( \+\s*[\w$-]+\b\s* # are an identifier starting with $ (?!\() # and they can't have anything besides ) | ( # for animtions \d+(\.\d+)?%|(from|to)\b ) | ( # Placeholder selectors \$[\w$-]+\b\s* # are an identifier starting with $ (?=$|\{) # and they can't have anything besides ) | ( # CSS class \.[a-zA-Z0-9_-]+ ) | ( # CSS id \#[a-zA-Z0-9_-]+ ) | ( # Reference to parent ([\w\d_-]+)? # matching any word right before & (&) # & itself, escaped because of plist ([\w\d_-]+)? # matching any word right after & ) ) push: - meta_scope: meta.selector.stylus - match: |- |$|(?=\{\s*\}.*$)|(?=\{.*?[:;])|(?=\{)(?!.+\}.*$) pop: true - include: comma - match: \d+(\.\d+)?%|from|to scope: entity.other.animation-keyframe.stylus - include: selector-components - match: . scope: entity.other.attribute-name.stylus - match: |- (?x) # multi-line regex definition mode (?<=^|;|{)\s* # starts after beginning of line, '{' or ';'' (?= # lookahead for ( [a-zA-Z0-9_-] # then a letter | # or (\{(.*?)\}) # interpolation | # or (/\*.*?\*/) # comment )+ \s*[:\s]\s* # value is separated by colon or space (?!(\s*\{)) # if there are only spaces afterwards (?! [^}]*? # checking for an unclosed curly braces on this \{ # line because if one exists it means that [^}]* # this is a selector and not a property ($|\}) ) ) push: - match: '(?=\}|;)|(?|(?:=|:|\?|\+|-|\*|\/|%|<|>)?=|!=)|\b(?:in|is(?:nt)?|(?]" scope: keyword.operator.selector.stylus - match: |- (?x) # multi-line regex definition mode \b( altGlyph|altGlyphDef|altGlyphItem|animate|animateColor| animateMotion|animateTransform|circle|clipPath|color-profile| defs|desc|ellipse|feBlend|feColorMatrix| feComponentTransfer|feComposite|feConvolveMatrix| feDiffuseLighting|feDisplacementMap|feDistantLight|feFlood| feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge| feMergeNode|feMorphology|feOffset|fePointLight| feSpecularLighting|feSpotLight|feTile|feTurbulence|filter| font-face|font-face-format|font-face-name|font-face-src| font-face-uri|foreignObject|g|glyph|glyphRef|hkern|image|line| linearGradient|marker|mask|metadata|missing-glyph|mpath|path| pattern|polygon|polyline|radialGradient|rect|set|stop|svg| switch|symbol|text|textPath|tref|tspan|use|view|vkern| a|abbr|acronym|address|applet|area|article|aside|audio|b|base| basefont|bdi|bdo|bgsound|big|blink|blockquote|body|br|button| canvas|caption|center|cite|code|col|colgroup|content|data| datalist|dd|decorator|del|details|dfn|dir|div|dl|dt|element| em|embed|fieldset|figcaption|figure|font|footer|form|frame| frameset|h1|h2|h3|h4|h5|h6|head|header|hgroup|hr|html|i|iframe| img|input|ins|isindex|kbd|keygen|label|legend|li|link|listing| main|map|mark|marquee|menu|menuitem|meta|meter|nav|nobr| noframes|noscript|object|ol|optgroup|option|output|p|param| plaintext|pre|progress|q|rp|rt|ruby|s|samp|script|section| select|shadow|small|source|spacer|span|strike|strong|style| sub|summary|sup|table|tbody|td|template|textarea|tfoot|th| thead|time|title|tr|track|tt|u|ul|var|video|wbr|xmp )\b scope: entity.name.tag.stylus - match: '\.[a-zA-Z0-9_-]+' scope: entity.other.attribute-name.class.stylus - match: "#[a-zA-Z0-9_-]+" scope: entity.other.attribute-name.id.stylus - match: |- (?x) # multi-line regex definition mode ([\w\d_-]+)? # matching any word right before & (&) # & itself, escaped because of plist ([\w\d_-]+)? # matching any word right after & captures: 1: entity.other.attribute-name.stylus 2: variable.language.stylus 3: entity.other.attribute-name.stylus single-line-comment: - match: (\/\/).*$ scope: comment.line.stylus captures: 1: punctuation.definition.comment.stylus string-quoted: - match: "'[^']*'" scope: string.quoted.single.stylus - match: '"[^"]*"' scope: string.quoted.double.stylus url: - match: (url)\s*(\() captures: 1: entity.function-name.stylus 2: punctuation.definition.parameters.start.stylus push: - meta_scope: meta.function-call.stylus - match: (\)) captures: 1: punctuation.definition.parameters.end.stylus pop: true - include: string-quoted - include: language-constants - include: language-property-value-constants - include: property-reference - include: variable variable: - match: '([\w$-]+\b)' scope: variable.other.stylus