Repository: danro/LESS-sublime Branch: master Commit: d076a4dd416b Files: 13 Total size: 212.3 KB Directory structure: gitextract_4c85oa3h/ ├── .gitattributes ├── .github/ │ └── workflows/ │ └── continuous-integration.yml ├── .gitignore ├── .python-version ├── Default.sublime-keymap ├── Preferences/ │ ├── Comments.tmPreferences │ └── Symbol List.tmPreferences ├── README.md ├── Syntaxes/ │ └── LESS.sublime-syntax ├── Tests/ │ └── syntax_test_less.less ├── less_completions.py ├── messages/ │ └── 2.0.0.txt └── messages.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitattributes ================================================ # This file is used to slim down the size of the # Sublime Text package shipped via Package Control # by leveraging gitattributes * text eol=lf .github/ export-ignore Tests/ export-ignore .gitattributes export-ignore .gitignore export-ignore ================================================ FILE: .github/workflows/continuous-integration.yml ================================================ name: continuous-integration on: [push] jobs: build: name: Run syntax_tests runs-on: ubuntu-latest steps: - uses: actions/checkout@master - name: Install OpenGL run: sudo apt-get -y install libgl1-mesa-glx libglu1-mesa - name: Download syntax_tests run: wget --content-disposition https://download.sublimetext.com/st_syntax_tests_build_4073_x64.tar.bz2 - name: Extract syntax_tests run: tar xf "$(ls st_syntax_tests_build_*_x64.tar.bz2)" - name: Move syntax_tests run: mv st_syntax_tests/syntax_tests ./ - name: Cleanup syntax_tests dir run: rm -R st_syntax_tests* - name: Cleanup git dir run: rm -R .git* - name: Setup 'Data/Packages/LESS' run: mkdir -p 'Data/Packages/LESS' - name: Move package into its own subdir within Data dir run: >- find . -maxdepth 1 -mindepth 1 -not -name 'Data' -not -name 'syntax_tests' -exec mv -v '{}' 'Data/Packages/LESS/' \; - name: Run syntax tests run: ./syntax_tests ================================================ FILE: .gitignore ================================================ # Compiled source # ################### *.com *.class *.dll *.exe *.o *.so # Packages # ############ # it's better to unpack these files and commit the raw source # git has its own built in compression methods *.7z *.dmg *.gz *.iso *.jar *.rar *.tar *.zip # Logs and databases # ###################### *.log *.sql *.sqlite # OS generated files # ###################### .DS_Store .DS_Store? ._* .Spotlight-V100 .Trashes ehthumbs.db Thumbs.db # Node installed packages # ########################### node_modules/* ================================================ FILE: .python-version ================================================ 3.8 ================================================ FILE: Default.sublime-keymap ================================================ [ { "keys": [":"], "command": "insert_snippet", "args": {"contents": ":$0;"}, "context": [ { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, { "key": "selector", "operator": "equal", "operand": "source.less - meta.selector.css", "match_all": true }, { "key": "preceding_text", "operator": "not_regex_match", "operand": "(^.*:|^)", "match_all": true }, { "key": "following_text", "operator": "regex_contains", "operand": "^(?:\t| |\\}|$)", "match_all": true } ] }, { "keys": [";"], "command": "move", "args": {"by": "characters", "forward": true}, "context": [ { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, { "key": "selector", "operator": "equal", "operand": "source.less - meta.selector.css", "match_all": true }, { "key": "following_text", "operator": "regex_contains", "operand": "^;", "match_all": true } ] }, { "keys": ["backspace"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Left Right.sublime-macro"}, "context": [ { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, { "key": "selector", "operator": "equal", "operand": "source.less - meta.selector.css", "match_all": true }, { "key": "preceding_text", "operator": "regex_contains", "operand": ":$", "match_all": true }, { "key": "following_text", "operator": "regex_contains", "operand": "^;", "match_all": true } ] }, // Expand {|} to { | } when space is pressed { "keys": [" "], "command": "insert_snippet", "args": {"contents": " $0 "}, "context": [ { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, { "key": "selector", "operator": "equal", "operand": "source.less - meta.selector.css", "match_all": true }, { "key": "preceding_text", "operator": "regex_contains", "operand": "\\{$", "match_all": true }, { "key": "following_text", "operator": "regex_contains", "operand": "^\\}", "match_all": true }, ] }, { "keys": ["backspace"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Left Right.sublime-macro"}, "context": [ { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, { "key": "selector", "operator": "equal", "operand": "source.less - meta.selector.css", "match_all": true }, { "key": "preceding_text", "operator": "regex_contains", "operand": "\\{ $", "match_all": true }, { "key": "following_text", "operator": "regex_contains", "operand": "^ \\}", "match_all": true } ] }, ] ================================================ FILE: Preferences/Comments.tmPreferences ================================================ name Comments scope source.less settings shellVariables name TM_COMMENT_START value // name TM_COMMENT_START_2 value /* name TM_COMMENT_END_2 value */ name TM_COMMENT_DISABLE_INDENT value no ================================================ FILE: Preferences/Symbol List.tmPreferences ================================================ name Symbol List scope source.less meta.selector.css, variable.declaration.less settings showInSymbolList 1 symbolTransformation s/(.*?)/$1/ showInIndexedSymbolList 1 symbolIndexTransformation /[#.]([A-Za-z0-9_~]+)/$1/; ================================================ FILE: README.md ================================================ # Package has been moved The Less package for Sublime Text is currently maintained here: https://github.com/SublimeText/Less. Please go there if you have any issues, questions, or if you want to contribute. ================================================ FILE: Syntaxes/LESS.sublime-syntax ================================================ %YAML 1.2 --- # http://www.sublimetext.com/docs/3/syntax.html name: Less file_extensions: - less - css.less scope: source.less variables: unicode: '\\\h{1,6}[ \t\n\f]?' escape: '(?:{{unicode}}|\\[^\n\f\h])' nonascii: '[\p{L}\p{M}\p{S}\p{N}&&[[:^ascii:]]]' nmstart: '(?:[[_a-zA-Z]{{nonascii}}]|{{escape}})' nmchar: '(?:[[-\w]{{nonascii}}]|{{escape}})' ident: '(?:--{{nmchar}}+|-?{{nmstart}}{{nmchar}}*)' integer: '(?:[-+]?\d+)' exponent: '(?:[eE]{{integer}})' float: |- (?x: [-+]? \d* (\.) \d+ {{exponent}}? | [-+]? \d+ {{exponent}} ) font_relative_lengths: '(?i:em|ex|ch|rem)' viewport_percentage_lengths: '(?i:vw|vh|vmin|vmax)' absolute_lengths: '(?i:cm|mm|q|in|pt|pc|px|fr)' angle_units: '(?i:deg|grad|rad|turn)' duration_units: '(?i:s|ms)' frequency_units: '(?i:Hz|kHz)' resolution_units: '(?i:dpi|dpcm|dppx)' custom_element_chars: |- (?x: [-_a-z0-9\x{00B7}] | \\\. | [\x{00C0}-\x{00D6}] | [\x{00D8}-\x{00F6}] | [\x{00F8}-\x{02FF}] | [\x{0300}-\x{037D}] | [\x{037F}-\x{1FFF}] | [\x{200C}-\x{200D}] | [\x{203F}-\x{2040}] | [\x{2070}-\x{218F}] | [\x{2C00}-\x{2FEF}] | [\x{3001}-\x{D7FF}] | [\x{F900}-\x{FDCF}] | [\x{FDF0}-\x{FFFD}] | [\x{10000}-\x{EFFFF}] ) combinators: '(?:>{1,3}|[~+])' counter_styles: |- (?xi: arabic-indic | armenian | bengali | cambodian | circle | cjk-decimal | cjk-earthly-branch | cjk-heavenly-stem | decimal-leading-zero | decimal | devanagari | disclosure-closed | disclosure-open | disc | ethiopic-numeric | georgian | gujarati | gurmukhi | hebrew | hiragana-iroha | hiragana | japanese-formal | japanese-informal | kannada | katakana-iroha | katakana | khmer | korean-hangul-formal | korean-hanja-formal | korean-hanja-informal | lao | lower-alpha | lower-armenian | lower-greek | lower-latin | lower-roman | malayalam | mongolian | myanmar | oriya | persian | simp-chinese-formal | simp-chinese-informal | square | tamil | telugu | thai | tibetan | trad-chinese-formal | trad-chinese-informal | upper-alpha | upper-armenian | upper-latin | upper-roman ) element_names: '\b(a|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont|bdi|bdo|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|content|data|datalist|dd|del|details|dfn|dir|dialog|div|dl|dt|element|em|embed|eventsource|fieldset|figure|figcaption|footer|form|frame|frameset|h[1-6]|head|header|hgroup|hr|html|i|iframe|img|input|ins|isindex|kbd|keygen|label|legend|li|link|main|map|mark|menu|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|rtc|s|samp|script|section|select|shadow|small|source|span|strike|strong|style|sub|summary|sup|svg|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video|wbr|xmp|circle|clipPath|defs|ellipse|filter|foreignObject|g|glyph|glyphRef|image|line|linearGradient|marker|mask|path|pattern|polygon|polyline|radialGradient|rect|stop|switch|symbol|text|textPath|tref|tspan|use)\b' custom_elements: '\b([a-z](?:{{custom_element_chars}})*-(?:{{custom_element_chars}})*)\b(?!{{ident}})' pseudo_elements: |- (?x: (:{1,2})(?:before|after|first-line|first-letter) # CSS1 & CSS2 require : or :: | (::)(-(?:moz|ms|webkit)-)?(?:{{ident}}) # CSS3 requires :: )\b regular_pseudo_classes: '\b(active|any-link|blank|checked|current|default|defined|disabled|drop|empty|enabled|first|first-child|first-of-type|fullscreen|future|focus|focus-visible|focus-within|host|hover|indeterminate|in-range|invalid|last-child|last-of-type|left|link|local-link|only-child|only-of-type|optional|out-of-range|past|placeholder-shown|read-only|read-write|required|right|root|scope|target|target-within|user-invalid|valid|visited)\b(?![-])' functional_pseudo_classes: '\b(dir|lang|matches|not|has|drop|nth-last-child|nth-child|nth-last-of-type|nth-of-type)\b' property_names: |- \b(?x)( display|width|background-color|height|position|font-family|font-weight | top|opacity|cursor|background-image|right|visibility|box-sizing | user-select|left|float|margin-left|margin-top|line-height | padding-left|z-index|margin-bottom|margin-right|margin | vertical-align|padding-top|white-space|border-radius|padding-bottom | padding-right|padding|bottom|clear|max-width|box-shadow|content | border-color|min-height|min-width|font-style|border-width | border-collapse|background-size|text-overflow|max-height|text-transform | text-shadow|text-indent|border-style|overflow-y|list-style-type | word-wrap|border-spacing|appearance|zoom|overflow-x|border-top-left-radius | border-bottom-left-radius|border-top-color|pointer-events | border-bottom-color|align-items|justify-content|letter-spacing | border-top-right-radius|border-bottom-right-radius|border-right-width | font-smoothing|border-bottom-width|border-right-color|direction | border-top-width|src|border-left-color|border-left-width | tap-highlight-color|table-layout|background-clip|word-break | transform-origin|resize|filter|backdrop-filter|backface-visibility|text-rendering | box-orient|transition-property|transition-duration|word-spacing | quotes|outline-offset|animation-timing-function|animation-duration | animation-name|transition-timing-function|border-bottom-style | border-bottom|transition-delay|transition|unicode-bidi|border-top-style | border-top|unicode-range|list-style-position|orphans|outline-width | line-clamp|order|flex-direction|box-pack|animation-fill-mode | outline-color|list-style-image|list-style|touch-action|flex-grow | border-left-style|border-left|animation-iteration-count | page-break-inside|box-flex|box-align|page-break-after|animation-delay | widows|border-right-style|border-right|flex-align|outline-style | outline|background-origin|animation-direction|fill-opacity | background-attachment|flex-wrap|transform-style|counter-increment | overflow-wrap|counter-reset|animation-play-state|animation | will-change|box-ordinal-group|image-rendering|mask-image|flex-flow | background-position-y|stroke-width|background-position-x|background-position | background-blend-mode|flex-shrink|flex-basis|flex-order|flex-item-align | flex-line-pack|flex-negative|flex-pack|flex-positive|flex-preferred-size | flex|user-drag|font-stretch|column-count|empty-cells|align-self | caption-side|mask-size|column-gap|mask-repeat|box-direction | font-feature-settings|mask-position|align-content|object-fit | columns|text-fill-color|clip-path|stop-color|font-kerning | page-break-before|stroke-dasharray|size|fill-rule|border-image-slice | column-width|break-inside|column-break-before|border-image-width | stroke-dashoffset|border-image-repeat|border-image-outset|line-break | stroke-linejoin|stroke-linecap|stroke-miterlimit|stroke-opacity | stroke|shape-rendering|border-image-source|border-image|border | tab-size|writing-mode|perspective-origin-y|perspective-origin-x | perspective-origin|perspective|text-align-last|text-align|clip-rule | clip|text-anchor|column-rule-color|box-decoration-break|column-fill | fill|column-rule-style|mix-blend-mode|text-emphasis-color | baseline-shift|dominant-baseline|page|alignment-baseline | column-rule-width|column-rule|break-after|font-variant-ligatures | transform-origin-y|transform-origin-x|transform|object-position | break-before|column-span|isolation|shape-outside|all | color-interpolation-filters|marker|marker-end|marker-start | marker-mid|color-rendering|color-interpolation|background-repeat-x | background-repeat-y|background-repeat|background|mask-type | flood-color|flood-opacity|text-orientation|mask-composite | text-emphasis-style|paint-order|lighting-color|shape-margin | text-emphasis-position|text-emphasis|shape-image-threshold | mask-clip|mask-origin|mask|font-variant-caps|font-variant-alternates | font-variant-east-asian|font-variant-numeric|font-variant-position | font-variant|font-size-adjust|font-size|font-language-override | font-display|font-synthesis|font|line-box-contain|text-justify | text-decoration-color|text-decoration-style|text-decoration-line | text-decoration|text-underline-position|grid-template-rows | grid-template-columns|grid-template-areas|grid-template|rotate|scale | translate|scroll-behavior|grid-column-start|grid-column-end | grid-column-gap|grid-row-start|grid-row-end|grid-auto-rows | grid-area|grid-auto-flow|grid-auto-columns|image-orientation | hyphens|overflow-scrolling|overflow|color-profile|kerning | nbsp-mode|color|image-resolution|grid-row-gap|grid-row|grid-column | blend-mode|azimuth|pause-after|pause-before|pause|pitch-range|pitch | text-height|system|negative|prefix|suffix|range|pad|fallback | additive-symbols|symbols|speak-as|speak|grid-gap )\b contexts: main: - include: comment-block - include: comment-line - include: selectors - include: properties - include: keyframe-operators - include: interpolated-selectors - include: custom-element-selectors - include: less-map-values - include: at-rules - include: curly-braces - include: css-modules - match: '\s*(,)\s*' captures: 1: punctuation.separator.css selectors: # wild card - match: '\s*(\*)' captures: 1: entity.name.tag.wildcard.css push: - meta_scope: meta.selector.css - include: selector-parts # ampersand - match: '\s*(&)' captures: 1: keyword.operator.ampersand.less push: - meta_scope: meta.selector.css - match: '[-_]+{{ident}}*' scope: entity.other.attribute-name.css - include: selector-parts # standard elements + pseudo elements - match: '\s*({{element_names}})(?={{pseudo_elements}})' captures: 1: entity.name.tag.css push: - meta_scope: meta.selector.css - include: selector-parts # standard elements + pseudoclasses - match: '\s*({{element_names}})(?=:{{regular_pseudo_classes}})' captures: 1: entity.name.tag.css push: - meta_scope: meta.selector.css - include: selector-parts - match: '\s*({{element_names}})(?=:({{functional_pseudo_classes}})\()' captures: 1: entity.name.tag.css push: - meta_scope: meta.selector.css - include: selector-parts - match: '\s*({{element_names}})(?=:(-(moz|ms|webkit)-){{ident}})' captures: 1: entity.name.tag.css push: - meta_scope: meta.selector.css - include: selector-parts # standard elements - match: '\s*({{element_names}})(?![-:])' # stop this at word break and not -, plus : is for pseudos captures: 1: entity.name.tag.css push: - meta_scope: meta.selector.css - include: selector-parts # classes / mixins - match: '\s*(\.)(?={{ident}}|@)' captures: 1: entity.other.attribute-name.class.css punctuation.definition.entity.css push: - meta_scope: meta.selector.css - match: '{{ident}}' scope: entity.other.attribute-name.class.css - include: less-interpolation - include: less-mixin-params - include: selector-parts # id's / mixins - match: '\s*(\#)(?={{ident}}|@)' captures: 1: entity.other.attribute-name.id.css punctuation.definition.entity.css push: - meta_scope: meta.selector.css - match: '{{ident}}' scope: entity.other.attribute-name.id.css - include: less-interpolation - include: less-mixin-params - include: selector-parts # attributes - match: '\s*(?=\[)' push: - meta_scope: meta.selector.css - match: '\[' scope: punctuation.definition.entity.css push: - meta_scope: meta.attribute-selector.css - match: '\]' scope: punctuation.definition.entity.css pop: true - include: qualified-name - match: '({{ident}})' scope: entity.other.attribute-name.css - match: '\s*([~*|^$]?=)\s*' captures: 1: keyword.operator.attribute-selector.css push: - match: '[^\s\]\[''"]' scope: string.unquoted.css - include: literal-string - match: '(?=(\s|\]))' pop: true - match: '(?:\s+([iI]))?' # case insensitive flag captures: 1: keyword.other.css - include: selector-parts - include: pseudo-elements - include: pseudo-classes - match: '^\s*({{combinators}})(?![>~+])\s*' captures: 0: meta.selector.css 1: punctuation.separator.combinator.css interpolated-selectors: - match: '\s*(@)({)([a-zA-Z0-9_-][\w-]*)(})(?={{pseudo_elements}})' captures: 0: variable.other.less 1: punctuation.definition.variable.less 2: punctuation.definition.string.begin.less 3: string.interpolated.less 4: punctuation.definition.string.end.less push: - meta_scope: meta.selector.css - include: selector-parts - match: '\s*(@)({)([a-zA-Z0-9_-][\w-]*)(})(?=:{{regular_pseudo_classes}})' captures: 0: variable.other.less 1: punctuation.definition.variable.less 2: punctuation.definition.string.begin.less 3: string.interpolated.less 4: punctuation.definition.string.end.less push: - meta_scope: meta.selector.css - include: selector-parts - match: '\s*(@)({)([a-zA-Z0-9_-][\w-]*)(})(?=:({{functional_pseudo_classes}})\()' captures: 0: variable.other.less 1: punctuation.definition.variable.less 2: punctuation.definition.string.begin.less 3: string.interpolated.less 4: punctuation.definition.string.end.less push: - meta_scope: meta.selector.css - include: selector-parts - match: '\s*(@)({)([a-zA-Z0-9_-][\w-]*)(})(?=:(-(moz|ms|webkit)-){{ident}})' captures: 0: variable.other.less 1: punctuation.definition.variable.less 2: punctuation.definition.string.begin.less 3: string.interpolated.less 4: punctuation.definition.string.end.less push: - meta_scope: meta.selector.css - include: selector-parts - match: '\s*(@)({)([a-zA-Z0-9_-][\w-]*)(})(?=(?![-:]))' captures: 0: variable.other.less 1: punctuation.definition.variable.less 2: punctuation.definition.string.begin.less 3: string.interpolated.less 4: punctuation.definition.string.end.less push: - meta_scope: meta.selector.css - include: selector-parts custom-element-selectors: # custom elements + pseudo elements - match: '\s*({{custom_elements}})({{pseudo_elements}})' captures: 1: entity.name.tag.custom.css 3: entity.other.pseudo-element.css 4: punctuation.definition.entity.css 5: punctuation.definition.entity.css 6: support.type.vendor-prefix.css push: - meta_scope: meta.selector.css - include: selector-parts # custom elements + pseudoclasses - match: '\s*({{custom_elements}})((:)({{regular_pseudo_classes}}))' captures: 1: entity.name.tag.custom.css 3: entity.other.pseudo-class.css 4: punctuation.definition.entity.css push: - meta_scope: meta.selector.css - include: selector-parts - match: '\s*({{custom_elements}})((:)(dir|lang))(?=\()' captures: 1: entity.name.tag.custom.css 3: meta.function-call.cssentity.other.pseudo-class.css 4: punctuation.definition.entity.css push: - meta_scope: meta.selector.css - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.function-call.css meta.group.css - match: '(?=\))' pop: true - include: unquoted-string - match: '\)' scope: meta.group.css punctuation.definition.group.end.css - include: selector-parts - match: '\s*({{custom_elements}})((:)(matches|not|has))(?=\()' captures: 1: entity.name.tag.custom.css 3: meta.function-call.css entity.other.pseudo-class.css 4: punctuation.definition.entity.css push: - meta_scope: meta.selector.css - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.function-call.css meta.group.css - match: '(?=\))' pop: true - include: selectors - include: custom-element-selectors - match: '\)' scope: meta.group.css punctuation.definition.group.end.css - include: selector-parts - match: '\s*({{custom_elements}})((:)(drop))(?=\()' captures: 1: entity.name.tag.custom.css 3: meta.function-call.css entity.other.pseudo-class.css 4: punctuation.definition.entity.css push: - meta_scope: meta.selector.css - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.function-call.css meta.group.css - match: '(?=\))' pop: true - match: \b(active|valid|invalid)\b scope: keyword.other.pseudo-class.css - match: '\)' scope: meta.group.css punctuation.definition.group.end.css - include: selector-parts - match: '\s*({{custom_elements}})((:)(nth-last-child|nth-child|nth-last-of-type|nth-of-type))(?=\()' captures: 1: entity.name.tag.custom.css 3: meta.function-call.css entity.other.pseudo-class.css 4: punctuation.definition.entity.css push: - meta_scope: meta.selector.css - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.function-call.css meta.group.css - match: '(?=\))' pop: true - match: \b(even|odd)\b scope: keyword.other.pseudo-class.css - match: '(?:[-+]?(?:\d+)?(n)(\s*[-+]\s*\d+)?|[-+]?\s*\d+)' scope: constant.numeric.css captures: 1: keyword.other.unit.css - match: '\)' scope: meta.group.css punctuation.definition.group.end.css - include: selector-parts - match: '\s*({{custom_elements}})((:)(-(moz|ms|webkit)-){{ident}})' captures: 1: entity.name.tag.css 3: entity.other.pseudo-class.css 4: punctuation.definition.entity.css 5: support.type.vendor-prefix.css push: - meta_scope: meta.selector.css - include: selector-parts # custom elements - match: '\s*({{custom_elements}})(?!-|\s*:)' captures: 1: entity.name.tag.custom.css push: - meta_scope: meta.selector.css - include: selector-parts selector-parts: - match: '\s*(,)\s*' captures: 1: punctuation.separator.css pop: true - match: '\s*({{combinators}})(?![>~+])\s*' captures: 1: punctuation.separator.combinator.css pop: true - match: '\s*(?=\{)' pop: true - match: '(?=[.#\[&])' # look ahead for classes, id's and attr's pop: true - match: '(?=\))' # if passed as a parameter pop: true - match: '(?=;)' # if passed as a parameter default value pop: true - include: comment-block - include: pseudo-elements - include: pseudo-classes - include: less-mixin-params - match: '\s*(?=$|//|/\*)' pop: true - match: '\s*(?=\b)' pop: true pseudo-elements: - match: '\s*{{pseudo_elements}}' scope: entity.other.pseudo-element.css captures: 1: punctuation.definition.entity.css 2: punctuation.definition.entity.css 3: support.type.vendor-prefix.css pseudo-classes: - match: '\s*(:)(dir|lang)(?=\()' scope: entity.other.pseudo-class.css captures: 1: punctuation.definition.entity.css push: - meta_scope: meta.selector.css meta.function-call.css - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '\)' scope: punctuation.definition.group.end.css pop: true - include: unquoted-string - include: selector-parts - match: '\s*(:)(matches|not|has)(?=\()' scope: entity.other.pseudo-class.css captures: 1: punctuation.definition.entity.css push: - meta_scope: meta.selector.css meta.function-call.css - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '\)' scope: punctuation.definition.group.end.css pop: true - include: comma-delimiter - include: selectors - include: custom-element-selectors - match: '' pop: true - include: selector-parts - match: '\s*(:)(drop)(?=\()' scope: entity.other.pseudo-class.css captures: 1: punctuation.definition.entity.css push: - meta_scope: meta.selector.css meta.function-call.css - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '\)' scope: punctuation.definition.group.end.css pop: true - match: \b(active|valid|invalid)\b scope: keyword.other.pseudo-class.css - include: selector-parts - match: '\s*(:)(nth-last-child|nth-child|nth-last-of-type|nth-of-type)(?=\()' scope: entity.other.pseudo-class.css captures: 1: punctuation.definition.entity.css push: - meta_scope: meta.selector.css meta.function-call.css - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '\)' scope: punctuation.definition.group.end.css pop: true - match: \b(even|odd)\b scope: keyword.other.pseudo-class.css - match: '([-+]?\d*(n))\s*([-+]\s*\d+)?' captures: 1: constant.numeric.integer.decimal.css 2: keyword.other.unit.css 3: constant.numeric.integer.decimal.css - match: '[-+]\s+\d+n?|[-+]?\d+\s+n' scope: invalid.illegal.numeric.css - include: integer-type - include: selector-parts - match: '\s*(:)(-(moz|ms|webkit)-){{ident}}' scope: entity.other.pseudo-class.css captures: 1: punctuation.definition.entity.css 2: support.type.vendor-prefix.css push: - meta_scope: meta.selector.css - include: selector-parts - match: '\s*(:)({{regular_pseudo_classes}})' scope: meta.selector.css entity.other.pseudo-class.css captures: 1: punctuation.definition.entity.css - match: '\s*(:)(local|global)(?=\()' scope: meta.selector.css entity.other.pseudo-class.css-modules.css captures: 1: punctuation.definition.entity.css push: - meta_scope: meta.selector.css meta.function-call.css - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '\)' scope: punctuation.definition.group.end.css pop: true - include: selectors - include: literal-string - match: '' pop: true - match: '\s*(:)(local|global)' scope: meta.selector.css entity.other.pseudo-class.css-modules.css captures: 1: punctuation.definition.entity.css properties: - include: comment-line - include: comment-block - match: '\b(font-family|font|family)\b(?=\s*:)' scope: meta.property-name.css support.type.property-name.css push: - match: '(\s*)(;)' pop: true captures: 1: meta.property-value.css 2: punctuation.terminator.rule.css - match: '(?=\s*[;})])' pop: true - match: ':' scope: punctuation.separator.key-value.css push: - meta_content_scope: meta.property-value.css - match: '(?=\s*([;})]))' pop: true - include: comment-line - include: comment-block - include: numeric-values - include: property-value-constants - include: var-function - include: less-variables - include: less-functions - include: literal-string - match: '{{ident}}(\s+{{ident}})*\b(?!:)' scope: string.unquoted.css - include: less-operators - include: less-aliases - include: comma-delimiter - match: '(?={)' pop: true - match: '' pop: true - match: '{{property_names}}' scope: meta.property-name.css support.type.property-name.css push: - include: property-value-wrapper - match: '(-(?:webkit|moz|ms|o)-)({{ident}})(?=\s*:)' captures: 0: meta.property-name.css 1: support.type.vendor-prefix.css 2: support.type.property-name.css push: - include: property-value-wrapper - match: '(@)([a-zA-Z0-9_-][\w-]*)(?=\s*:)' captures: 0: variable.declaration.less 1: punctuation.definition.variable.less push: - include: property-value-wrapper - match: '(--)({{nmchar}}+)' captures: 0: meta.property-name.css support.type.custom-property.css 1: punctuation.definition.custom-property.css 2: support.type.custom-property.name.css push: - include: property-value-wrapper - match: '[a-zA-Z0-9_-]*((@)({)([a-zA-Z0-9_-][\w-]*)(}))[a-zA-Z0-9_-]*' captures: 0: meta.property-name.css support.type.property-name 1: variable.other.less 2: punctuation.definition.variable.less 3: punctuation.definition.string.begin.less 4: string.interpolated.less 5: punctuation.definition.string.end.less push: - include: property-value-wrapper - match: '\b(composes)\b' scope: meta.property-name.css-modules.css support.type.property-name push: - include: property-value-wrapper property-value-wrapper: - match: '(\s*)(;)' pop: true captures: 1: meta.property-value.css 2: punctuation.terminator.rule.css - match: '(?=\s*[;})])' pop: true - match: '\s*(:)' captures: 1: punctuation.separator.key-value.css push: - meta_content_scope: meta.property-value.css - match: '(?=\s*[;})])' pop: true - match: '\bfrom\b' scope: keyword.control.import.from.css-modules.css - include: property-values - match: '(?={)' pop: true - match: '' pop: true property-values: - match: \!\s*important scope: keyword.other.important.css captures: 1: punctuation.definition.keyword.css - include: vendor-prefix - include: comment-line - include: comment-block - include: builtin-functions - include: line-names - include: unicode-range - include: numeric-values - include: color-values - include: property-value-constants - include: literal-string - include: less-variables - include: less-functions - include: less-operators - include: less-aliases - match: '\s*(,)\s*' captures: 1: punctuation.separator.css - match: '{{ident}}' # e.g. animation-name scope: string.unquoted.css at-rules: - match: ((@)(?:-(?:webkit|moz|o)-)?(charset|namespace|font-face)\b) captures: 1: keyword.control.at-rule.css 2: punctuation.definition.keyword.css push: - meta_scope: meta.at-rule.css - match: '\s*(?=[\{;])' pop: true - match: '(url)(\()' captures: 1: meta.function-call.css support.function.url.css 2: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '\)' scope: punctuation.definition.group.end.css pop: true - include: literal-string - include: unquoted-string - include: comment-block - include: literal-string - match: '\s*((@)counter-style\b)\s+(?:(?i:\b(decimal|none)\b)|({{ident}}))?\s*(?=\{|$)' captures: 1: keyword.control.at-rule.counter-style.css 2: punctuation.definition.keyword.css 3: invalid.illegal.counter-style-name.css 4: entity.other.counter-style-name.css push: - meta_scope: meta.at-rule.counter-style.css - include: comment-block - include: comment-line - match: '(?=\{)' pop: true - match: '(?=\s*@custom-media\b)' push: - match: ';' scope: punctuation.terminator.css pop: true - match: '\s*((@)custom-media)' captures: 1: keyword.control.at-rule.custom-media.css 2: punctuation.definition.keyword.css 3: support.constant.custom-media.css push: - meta_scope: meta.at-rule.custom-media.css - match: '\s*(?=;)' pop: true - include: media-query - match: '((@)document)\b' captures: 1: keyword.control.at-rule.document.css 2: punctuation.definition.keyword.css push: - meta_scope: meta.at-rule.document.css - match: '(?=[\{;])' pop: true - include: comment-block - include: comment-line - include: url-function - include: url-prefix-function - include: domain-function - include: regexp-function - include: comma-delimiter - match: '\s*((@)import)\b\s*' captures: 1: keyword.control.at-rule.import.css 2: punctuation.definition.keyword.css push: - meta_scope: meta.at-rule.import.css - match: '(\()(reference|inline|less|css|once|multiple|optional)(\))' captures: 0: meta.at-rule.arguments.less 1: punctuation.definition.group.begin.less 2: constant.other.less 3: punctuation.definition.group.end.less - include: at-rule-punctuation - include: comment-block - include: comment-line - include: literal-string - include: url-function - include: media-query - match: '\s*((@)(-webkit-|-moz-|-o-)?keyframes)\b' captures: 1: keyword.control.at-rule.keyframe.css 2: punctuation.definition.keyword.css push: - meta_scope: meta.at-rule.keyframe.css - match: '\s*(?=[\{;])' pop: true - include: comment-block - include: comment-line - include: less-interpolation - match: '\s*({{ident}})?' captures: 1: entity.other.animation-name.css - match: '\s*(?:(,)|(?=[{;]))' captures: 1: punctuation.definition.arbitrary-repetition.css - match: '\s*((@)media)\b' captures: 1: keyword.control.at-rule.media.css 2: punctuation.definition.keyword.css 3: support.constant.media.css push: - meta_scope: meta.at-rule.media.css - include: media-query - match: '(?=\{)' pop: true - match: '\s*((@)namespace)\b\s+({{ident}}(?!{{nmchar}}|\())?' captures: 1: keyword.control.at-rule.namespace.css 2: punctuation.definition.keyword.css 3: entity.other.namespace-prefix.css push: - meta_scope: meta.at-rule.namespace.css - include: at-rule-punctuation - include: literal-string - include: url-function - include: comment-block - match: '\s*((@)page)\b\s*(?:(:)(first|left|right))?\s*' captures: 1: keyword.control.at-rule.page.css 2: punctuation.definition.keyword.css 3: punctuation.definition.entity.css 4: entity.other.pseudo-class.css push: - meta_scope: meta.at-rule.page.css - include: comment-block - match: '\s*(?=\{)' pop: true - match: '((@)supports)\b' captures: 1: keyword.control.at-rule.supports.css 2: punctuation.definition.keyword.css push: - meta_scope: meta.at-rule.supports.css - match: '(?=\{)' pop: true - include: at-supports-operators - include: at-supports-parens at-supports-operators: - match: '\b(?i:and|or|not)\b' scope: keyword.operator.logic.css at-supports-parens: - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '\)' scope: punctuation.definition.group.end.css pop: true - include: at-supports-operators - include: at-supports-parens - include: comment-block - include: comment-line - include: properties keyframe-operators: - match: \b(from|to)\b scope: keyword.keyframe-selector.css - include: comma-delimiter - include: numeric-values at-rule-punctuation: - match: '\;' scope: punctuation.terminator.rule.css - match: '(?=;|$)' pop: true media-query: - include: comment-block - match: '\b(?i:all|aural|braille|embossed|handheld|print|projection|screen|speech|tty|tv)\b' scope: support.constant.media.css - match: \b(?i:and|or|not|only)\b scope: keyword.operator.logic.media.css - include: comma-delimiter - match: '\(' scope: punctuation.definition.group.begin.css push: - match: '\)' scope: punctuation.definition.group.end.css pop: true - include: comment-block - match: |- (?x) ( (?: (-webkit-|-o-)? (?:min-|max-)? (-moz-)? (?: (?:device-)?(?:height|width|aspect-ratio|pixel-ratio) |color(?:-index)?|monochrome|resolution ) ) |grid|scan|orientation )\s*(:)? captures: 1: support.type.property-name.media.css 2: support.type.vendor-prefix.css 3: support.type.vendor-prefix.css 4: punctuation.separator.key-value.css - match: \b(portrait|landscape|progressive|interlace) scope: support.constant.property-value.css - match: '\s*(\d+)(/)(\d+)' captures: 1: constant.numeric.integer.decimal.css 2: keyword.operator.arithmetic.css 3: constant.numeric.integer.decimal.css - include: less-variables - include: less-functions - include: numeric-values - include: less-aliases less-map-values: - match: '{{ident}}(?=:\s*\b)' scope: variable.declaration.map.less push: - meta_scope: meta.map-value.less - include: property-value-wrapper less-map-lookups: - match: '\[' scope: punctuation.section.brackets.begin.less - match: '\]' scope: meta.brackets.less punctuation.section.brackets.end.less pop: true - include: less-variables - include: less-aliases - match: '{{ident}}' scope: variable.other.less less-mixin-params: - match: '\s*(not|or|and|when)\b' captures: 1: keyword.operator.logic.mixin.less - match: '\s*(\()' captures: 1: punctuation.definition.group.begin.css push: - meta_scope: meta.function.parameters.less - match: ';' scope: punctuation.separator.less - match: ':' scope: punctuation.separator.key-value.less - include: comment-block - include: comment-line - include: less-variables - include: less-functions - include: properties - include: property-values - include: literal-string - include: curly-braces - include: less-operators - include: less-aliases # - include: selectors - match: '{{ident}}' # pretty much everything else scope: string.unquoted.css - match: '\)' scope: punctuation.definition.group.end.css pop: true less-aliases: - match: '((\.){{ident}})(?=[.#])' captures: 1: entity.other.attribute-name.class.less 2: punctuation.definition.entity.less push: - meta_scope: meta.alias.less - include: less-mixin-params - match: '(?=\[)' push: - meta_content_scope: meta.brackets.less - include: less-map-lookups - match: '(?=;|$)' pop: true - match: '(\.){{ident}}' captures: 0: entity.other.attribute-name.class.less 1: punctuation.definition.entity.less - match: '(#){{ident}}' captures: 0: entity.other.attribute-name.id.less 1: punctuation.definition.entity.less - match: '((\#){{ident}})(?=[.#])' captures: 1: entity.other.attribute-name.id.less 2: punctuation.definition.entity.less push: - meta_scope: meta.alias.less - include: less-mixin-params - match: '(?=\[)' push: - meta_content_scope: meta.brackets.less - include: less-map-lookups - match: '(?=;|,|$)' pop: true - match: '(\.){{ident}}' captures: 0: entity.other.attribute-name.class.less 1: punctuation.definition.entity.less - match: '(#){{ident}}' captures: 0: entity.other.attribute-name.id.less 1: punctuation.definition.entity.less less-variables: - include: less-interpolation - match: '(\.){{ident}}(?=\[)' captures: 0: entity.other.attribute-name.class.less 1: punctuation.definition.entity.less push: - meta_content_scope: meta.brackets.less - include: less-map-lookups - match: '(#){{ident}}(?=\[)' captures: 0: entity.other.attribute-name.id.less 1: punctuation.definition.entity.less push: - meta_content_scope: meta.brackets.less - include: less-map-lookups - match: '(@){{ident}}(?=\[)' captures: 0: variable.other.less 1: punctuation.definition.variable.less push: - meta_content_scope: meta.brackets.less - include: less-map-lookups - match: '(@{1,2})([a-zA-Z0-9_-][\w-]*)' captures: 0: variable.other.less 1: punctuation.definition.variable.less - match: '(\$){{property_names}}\b' captures: 0: variable.other.less 1: punctuation.definition.variable.less - match: '(~)(")' captures: 1: keyword.operator.less 2: punctuation.definition.string.begin.less push: - meta_scope: string.quoted.double.css markup.raw.less - match: '"' scope: punctuation.definition.string.end.less pop: true - include: less-interpolation - match: (~)(') captures: 1: keyword.operator.less 2: punctuation.definition.string.begin.less push: - meta_scope: string.quoted.single.css markup.raw.less - match: "'" scope: punctuation.definition.string.end.less pop: true - include: less-interpolation less-functions: - match: \b(unit|tan|sqrt|spin|softlight|sin|screen|saturation|saturate|round|replace|red|pow|pi|percentage|overlay|negation|multiply|mod|mix|min|max|luma|lightness|lighten|length|isnumber|hue|hsvvalue|hsvsaturation|hsvhue|hsva|hsv|hsla|hsl|hardlight|greyscale|green|format|floor|fadeout|fadein|fade|extract|exclusion|escape|e|difference|desaturate|data-uri|darken|cos|convert|convert|contrast|color|ceil|calc|blue|average|atan|asin|argb|alpha|acos|abs)(\() captures: 1: support.function.less 2: meta.group.less punctuation.definition.group.begin.less push: - meta_scope: meta.function-call.less - meta_content_scope: meta.group.less meta.function.parameters.less - match: '\)' scope: meta.group.less punctuation.definition.group.end.less pop: true - match: ':' scope: punctuation.separator.key-value.css - include: comment-block - include: comma-delimiter - include: color-values - include: numeric-values - include: literal-string - include: less-variables - include: less-aliases - include: less-functions - include: less-operators less-interpolation: - match: '(@)({)([a-zA-Z0-9_-][\w-]*)(})' captures: 0: variable.other.less 1: punctuation.definition.variable.less 2: punctuation.definition.string.begin.less 3: string.interpolated.less 4: punctuation.definition.string.end.less less-operators: - match: /|$|%|\*|\-\-|\-|\+\+|\+|~|===|==|=|!=|!==|<=|>=|<<=|>>=|>>>=|<>|<|>|!|&&|\|\||\?\:|%=|\+=|\-=|&=|\bnot\b|\bor\b|\band\b|\bwhen\b scope: keyword.operator.less property-value-constants: - match: |- (?x)\b( absolute|active|add | all(-(petite|small)-caps|-scroll)? | alpha(betic)? | alternate(-reverse)? | always|annotation|antialiased|at | auto(hiding-scrollbar)? | avoid(-column|-page|-region)? | background(-color|-image|-position|-size)? | backwards|balance|baseline|below|bevel|bicubic|bidi-override|blink | block(-line-height)? | blur | bold(er)? | border(-bottom|-left|-right|-top)?-(color|radius|width|style) | border-(bottom|top)-(left|right)-radius | border-image(-outset|-repeat|-slice|-source|-width)? | border(-bottom|-left|-right|-top|-collapse|-spacing|-box)? | both|bottom | box(-shadow)? | break-(all|word) | brightness | butt(on)? | capitalize | cent(er|ral) | char(acter-variant)? | cjk-ideographic|clip|clone|close-quote | closest-(corner|side) | col-resize|collapse | color(-stop|-burn|-dodge)? | column((-count|-gap|-reverse|-rule(-color|-width)?|-width)|s)? | common-ligatures|condensed|consider-shifts|contain | content(-box|s)? | contextual|contrast|cover | crisp(-e|E)dges | crop | cross(hair)? | da(rken|shed) | default|dense|diagonal-fractions|difference|disabled | discretionary-ligatures|disregard-shifts | distribute(-all-lines|-letter|-space)? | dotted|double|drop-shadow | (nwse|nesw|ns|ew|sw|se|nw|ne|w|s|e|n)-resize | ease(-in-out|-in|-out)? | element|ellipsis|embed|end|EndColorStr|evenodd | exclu(de(-ruby)?|sion) | expanded | (extra|semi|ultra)-(condensed|expanded) | farthest-(corner|side)? | fill(-box|-opacity)? | filter|first|fixed|flat | fit-content | flex((-basis|-end|-grow|-shrink|-start)|box)? | flip|flood-color | font(-size(-adjust)?|-stretch|-weight)? | forwards | from(-image)? | full-width|geometricPrecision|glyphs|gradient|grayscale | grid(-height)? | groove|hand|hanging|hard-light|height|help|hidden|hide | historical-(forms|ligatures) | horizontal(-tb)? | hue | ideograph(-alpha|-numeric|-parenthesis|-space|ic) | inactive|include-ruby|infinite|inherit|initial | inline(-block|-box|-flex(box)?|-line-height|-table)? | inset|inside | inter(-ideograph|-word|sect) | invert|isolat(e|ion)|italic | jis(04|78|83|90) | justify(-all)? | keep-all | large[r]? | last|left|letter-spacing | light(e[nr]|ing-color) | line(-edge|-height|-through)? | linear(-gradient|RGB)? | lining-nums|list-item|local|loose|lowercase|lr-tb|ltr | lumin(osity|ance)|manual | margin(-bottom|-box|-left|-right|-top)? | marker(-offset|s)? | mathematical | max-(content|height|lines|size|width) | medium|middle | min-(content|height|width) | miter|mixed|move|multiply|newspaper | no-(change|clip|(close|open)-quote|(common|discretionary|historical)-ligatures|contextual|drop|repeat) | none|nonzero|normal|not-allowed|nowrap|oblique | offset(-after|-before|-end|-start)? | oldstyle-nums|opacity|open-quote | optimize(Legibility|Precision|Quality|Speed) | order|ordinal|ornaments | outline(-color|-offset|-width)? | outset|outside|over(line|-edge|lay) | padding(-bottom|-box|-left|-right|-top)? | page|painted|paused | perspective-origin | petite-caps|pixelated|pointer | pre(-line|-wrap)? | preserve-3d | progid:DXImageTransform.Microsoft.(Alpha|Blur|dropshadow|gradient|Shadow) | progress | proportional-(nums|width) | radial-gradient|recto|region|relative | repeat(-[xy])? | repeating-(linear|radial)-gradient | replaced|reset-size|reverse|ridge|right | round | row(-resize|-reverse)? | run-in | ruby(-base|-text)?(-container)? | rtl|running|saturat(e|ion)|screen | safe | scroll(-position|bar)? | separate|sepia | scale-down | shape-(image-threshold|margin|outside) | show | sideways(-lr|-rl)? | simplified | slashed-zero|slice | small(-caps|er)? | smooth|snap|solid|soft-light | space(-around|-between|-evenly)? | span|sRGB | stack(ed-fractions)? | start(ColorStr)? | static | step-(end|start) | sticky | stop-(color|opacity) | stretch|strict | stroke(-box|-dash(array|offset)|-miterlimit|-opacity|-width)? | style(set)? | stylistic | sub(grid|pixel-antialiased|tract)? | super|swash | table(-caption|-cell|(-column|-footer|-header|-row)-group|-column|-row)? | tabular-nums|tb-rl | text((-bottom|-(decoration|emphasis)-color|-indent|-(over|under|after|before)-edge|-shadow|-size(-adjust)?|-top)|field)? | thi(ck|n) | titling-ca(ps|se) | to[p]? | touch|traditional | transform(-origin)? | under(-edge|line)? | unicase|unsafe|unset|uppercase|upright | use-(glyph-orientation|script) | verso | vertical(-align|-ideographic|-lr|-rl|-text)? | view-box | viewport-fill(-opacity)? | visibility | visible(Fill|Painted|Stroke)? | wait|wavy|weight|whitespace|width|word-spacing | wrap(-reverse)? | x{1,2}-(large|small) | z-index|zero | zoom(-in|-out)? | ({{counter_styles}}) )\b(?=[\s;{)/]) scope: support.constant.property-value.css - match: '\b(?i:sans-serif|serif|monospace|fantasy|cursive|system-ui)\b(?=\s*[;,\n}{])' scope: support.constant.font-name.css builtin-functions: - include: attr-function - include: calc-function - include: cross-fade-function - include: filter-functions - include: gradient-functions - include: image-function - include: image-set-function - include: minmax-function - include: url-function - include: var-function - include: color-adjuster-functions # filter() # https://drafts.fxtf.org/filters/#funcdef-filter - match: '\b(filter)(?=\()' scope: support.function.filter.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: image-type - include: literal-string - include: filter-functions - include: less-variables - include: less-aliases - include: less-functions # counter() # https://drafts.csswg.org/css-lists-3/#funcdef-counter - match: '\b(counter)(?=\()' scope: support.function.counter.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - match: '({{ident}})' scope: entity.other.counter-name.css string.unquoted.css - match: '(?=,)' push: - match: '(?=\))' pop: true - include: comma-delimiter - match: '\b({{counter_styles}}|none)\b' scope: support.constant.property-value.counter-style.css - include: less-variables - include: less-aliases - include: less-functions # counters() # https://drafts.csswg.org/css-lists-3/#funcdef-counters - match: '\b(counters)(?=\()' scope: support.function.counter.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - match: '({{ident}})' scope: entity.other.counter-name.css string.unquoted.css - match: '(?=,)' push: - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: literal-string - include: less-aliases - match: '\b({{counter_styles}}|none)\b' scope: support.constant.property-value.counter-style.css # symbols() # https://drafts.csswg.org/css-counter-styles-3/#symbols-function - match: '\b(symbols)(?=\()' scope: support.function.counter.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - match: '\b(cyclic|numeric|alphabetic|symbolic|fixed)\b' scope: support.constant.symbol-type.css - include: comma-delimiter - include: less-variables - include: less-functions - include: literal-string - include: less-aliases - include: image-type # format() # https://drafts.csswg.org/css-fonts-3/#descdef-src # format() is also mentioned in `issue 2` at https://drafts.csswg.org/css-images-3/#issues-index # but does not seem to be implemented in any manner - match: '\b(format)(?=\()' scope: support.function.font-face.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: literal-string - include: less-aliases # local() # https://drafts.csswg.org/css-fonts-3/#descdef-src - match: '\b(local)(?=\()' scope: support.function.font-face.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: literal-string - include: unquoted-string - include: less-aliases # Transform Functions # https://www.w3.org/TR/css-transforms-1/#transform-functions # transform functions with comma separated types # matrix(), scale(), matrix3d(), scale3d() - match: '\b(matrix3d|scale3d|matrix|scale)(?=\()' scope: support.function.transform.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: number-type - include: var-function - include: less-aliases # transform functions with comma separated or types # translate(), translate3d() - match: '\b(translate(3d)?)(?=\()' scope: support.function.transform.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: percentage-type - include: length-type - include: number-type - include: var-function - include: less-aliases # transform functions with a single or type # translateX(), translateY() - match: '\b(translate[XY])(?=\()' scope: support.function.transform.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: percentage-type - include: length-type - include: number-type - include: less-aliases # transform functions with a single type # rotate(), skewX(), skewY(), rotateX(), rotateY(), rotateZ() - match: '\b(rotate[XYZ]?|skew[XY])(?=\()' scope: support.function.transform.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: angle-type - include: less-aliases # transform functions with comma separated types # skew() - match: '\b(skew)(?=\()' scope: support.function.transform.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: angle-type - include: less-aliases # transform functions with a single type # translateZ(), perspective() - match: '\b(translateZ|perspective)(?=\()' scope: support.function.transform.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: length-type - include: less-aliases # transform functions with a comma separated or types # rotate3d() - match: '\b(rotate3d)(?=\()' scope: support.function.transform.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: angle-type - include: number-type - include: less-aliases # transform functions with a single type # scaleX(), scaleY(), scaleZ() - match: '\b(scale[XYZ])(?=\()' scope: support.function.transform.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: number-type - include: less-aliases # Timing Functions # https://www.w3.org/TR/web-animations-1/#timing-functions # cubic-bezier() # https://www.w3.org/TR/web-animations-1/#cubic-bzier-timing-function - match: '\b(cubic-bezier)(?=\()' scope: support.function.timing.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: number-type - include: less-aliases # steps() # https://www.w3.org/TR/web-animations-1/#step-timing-function - match: '\b(steps)(?=\()' scope: support.function.timing.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: integer-type - include: less-aliases - match: (end|middle|start) scope: support.keyword.timing-direction.css # Shape Functions # https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape # rect() - Deprecated # https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect - match: '\b(rect)(?=\()' scope: support.function.shape.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - match: \bauto\b scope: support.constant.property-value.css - include: less-variables - include: less-functions - include: length-type - include: less-aliases # inset() # https://www.w3.org/TR/css-shapes-1/#funcdef-inset - match: '\b(inset)(?=\()' scope: support.function.shape.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - match: '\bround\b' scope: keyword.other.css - include: less-variables - include: less-functions - include: length-type - include: percentage-type - include: less-aliases # circle() # https://www.w3.org/TR/css-shapes-1/#funcdef-circle # ellipse() # https://www.w3.org/TR/css-shapes-1/#funcdef-ellipse - match: '\b(circle|ellipse)(?=\()' scope: support.function.shape.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - match: '\bat\b' scope: keyword.other.css - match: '\b(top|right|bottom|left|center|closest-side|farthest-side)\b' scope: support.constant.property-value.css - include: less-variables - include: less-functions - include: length-type - include: percentage-type - include: less-aliases # polygon() # https://www.w3.org/TR/css-shapes-1/#funcdef-polygon - match: '\b(polygon)(?=\()' scope: support.function.shape.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - include: comment-block - match: '(?=\))' pop: true - match: '\b(nonzero|evenodd)\b' scope: support.constant.property-value.css - include: length-type - include: percentage-type - include: calc-function - include: comma-delimiter - include: less-variables - include: less-functions - include: less-aliases # toggle() # https://www.w3.org/TR/css3-values/#toggle-notation - match: '\b(toggle)(?=\()' scope: support.function.toggle.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: vendor-prefix - include: less-variables - include: less-functions - include: property-value-constants - include: numeric-values - include: color-values - include: literal-string - include: less-aliases # repeat() # https://drafts.csswg.org/css-grid/#funcdef-repeat - match: '\b(repeat)(?=\()' scope: support.function.grid.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: length-type - include: percentage-type - include: minmax-function - include: integer-type - include: var-function - include: less-aliases - match: \b(auto-fill|auto-fit)\b scope: support.keyword.repetitions.css - match: \b(max-content|min-content|auto)\b scope: support.constant.property-value.css # var() # https://drafts.csswg.org/css-variables/#funcdef-var var-function: - match: '\b(var)(?=\()' scope: support.function.var.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: custom-property-name - include: less-variables - include: less-functions - include: less-aliases # Filter Functions # https://drafts.fxtf.org/filters/#typedef-filter-function filter-functions: # blur() # https://drafts.fxtf.org/filters/#funcdef-filter-blur - match: '\b(blur)(?=\()' scope: support.function.filter.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: length-type - include: less-aliases # brightness(), contrast(), grayscale(), invert(), opacity(), saturate(), sepia() # https://drafts.fxtf.org/filters/#funcdef-filter-brightness - match: '\b(brightness|contrast|grayscale|invert|opacity|saturate|sepia)(?=\()' scope: support.function.filter.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: percentage-type - include: number-type - include: less-aliases # drop-shadow() # https://drafts.fxtf.org/filters/#funcdef-filter-drop-shadow - match: '\b(drop-shadow)(?=\()' scope: support.function.filter.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: length-type - include: color-values - include: less-aliases # hue-rotate() # https://drafts.fxtf.org/filters/#funcdef-filter-hue-rotate - match: '\b(hue-rotate)(?=\()' scope: support.function.filter.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: angle-type - include: less-aliases # calc() # https://www.w3.org/TR/css3-values/#funcdef-calc calc-function: - match: '\b(calc)(?=\()' scope: support.function.calc.css push: - meta_scope: meta.function-call.css - match: '\(' scope: punctuation.definition.group.begin.css push: inside-calc-parens - match: '' pop: true inside-calc-parens: - meta_scope: meta.group.css - match: '(?=\))' set: function-notation-terminator - include: comment-block - include: calc-function - include: var-function - include: numeric-values - include: attr-function - include: less-variables - include: less-functions - include: less-aliases - match: "[-/*+]" scope: keyword.operator.css - match: '\(' scope: punctuation.definition.group.begin.css push: inside-calc-parens # attr() # https://www.w3.org/TR/css3-values/#funcdef-attr attr-function: - match: '\b(attr)(?=\()' scope: support.function.attr.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: qualified-name - include: literal-string - include: less-aliases - match: '({{ident}})' scope: entity.other.attribute-name.css push: - match: |- (?x)\b( {{font_relative_lengths}} | {{viewport_percentage_lengths}} | {{absolute_lengths}} | {{angle_units}} | {{duration_units}} | {{frequency_units}} | {{resolution_units}} )\b scope: keyword.other.unit.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: property-value-constants - include: numeric-values - include: color-values - include: less-aliases # url() # https://drafts.csswg.org/css-images-3/#url-notation url-function: - match: '\b(url)(?=\()' scope: support.function.url.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: literal-string - include: less-variables - include: less-functions - include: unquoted-string - include: less-aliases # url-prefix() # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-prefix url-prefix-function: - match: '\b(url-prefix)(?=\()' scope: support.function.url-prefix.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: literal-string - include: unquoted-string - include: less-aliases # domain() # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-domain domain-function: - match: '\b(domain)(?=\()' scope: support.function.domain.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: literal-string - include: unquoted-string - include: less-aliases # regexp() # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-regexp regexp-function: - match: '\b(regexp)(?=\()' scope: support.function.regexp.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: literal-string - include: less-aliases # image() # https://drafts.csswg.org/css-images-3/#funcdef-image image-function: - match: '\b(image)(?=\()' scope: support.function.image.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: image-type - include: literal-string - include: color-values - include: comma-delimiter - include: unquoted-string - include: less-aliases # image-set() # https://drafts.csswg.org/css-images-3/#funcdef-image-set image-set-function: - match: '\b(image-set)(?=\()' scope: support.function.image.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: literal-string - include: color-values - include: comma-delimiter - include: resolution-type - include: image-type - include: less-aliases - match: '[0-9]+(x)' scope: constant.numeric.integer.decimal.css captures: 1: keyword.other.unit.css - include: unquoted-string # Gradient Functions # https://drafts.csswg.org/css-images-3/#gradients gradient-functions: # linear-gradient() # https://drafts.csswg.org/css-images-3/#linear-gradients # repeating-linear-gradient() # https://drafts.csswg.org/css-images-3/#funcdef-repeating-linear-gradient - match: '\b((?:repeating-)?linear-gradient)(?=\()' scope: support.function.gradient.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: less-functions - include: angle-type - include: comma-delimiter - include: color-values - include: percentage-type - include: length-type - include: less-aliases - match: '\bto\b' scope: keyword.other.css - match: \b(top|right|bottom|left)\b scope: support.constant.property-value.css # radial-gradient() # https://drafts.csswg.org/css-images-3/#radial-gradients # repeating-radial-gradient() # https://drafts.csswg.org/css-images-3/#funcdef-repeating-radial-gradient - match: '\b((?:repeating-)?radial-gradient)(?=\()' scope: support.function.gradient.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: color-values - include: percentage-type - include: length-type - include: less-aliases - match: '\b(at|circle|ellipse)\b' scope: keyword.other.css - match: |- (?x)\b( left | center | right | top | bottom | closest-corner | closest-side | farthest-corner | farthest-side )\b scope: support.constant.property-value.css # cross-fade() # https://drafts.csswg.org/css-images-3/#cross-fade-function cross-fade-function: - match: '\b(cross-fade)(?=\()' scope: support.function.image.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: percentage-type - include: color-values - include: image-type - include: literal-string - include: unquoted-string - include: less-aliases # minmax() # https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax minmax-function: - match: '\b(minmax)(?=\()' scope: support.function.grid.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: less-functions - include: length-type - include: less-aliases - match: \b(auto|max-content|min-content)\b scope: support.constant.property-value.css # Color Functions # https://drafts.csswg.org/css-color color-functions: # rgb(), rgba() # https://drafts.csswg.org/css-color/#rgb-functions - match: '\b(rgba?)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: percentage-type - include: number-type - include: less-functions - include: less-aliases # hsl(), hsla() # https://drafts.csswg.org/css-color/#the-hsl-notation # hwb() - Not yet implemented by browsers # https://drafts.csswg.org/css-color/#funcdef-hwb - match: '\b(hsla?|hwb)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: angle-type - include: percentage-type - include: number-type - include: less-functions - include: less-aliases # gray() - Not yet implemented by browsers # https://drafts.csswg.org/css-color/#funcdef-gray - match: '\b(gray)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: percentage-type - include: number-type - include: less-functions - include: less-aliases # device-cmyk() - Not yet implemented by browsers # https://drafts.csswg.org/css-color/#funcdef-device-cmyk - match: '\b(device-cmyk)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: color-adjuster-functions # must be included before `color-values` - include: color-values - include: percentage-type - include: number-type - include: less-functions - include: less-aliases # color-mod() - Not yet implemented by browsers # https://drafts.csswg.org/css-color/#funcdef-color-mod - match: '\b(color)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: comma-delimiter - include: less-variables - include: color-adjuster-functions # must be included before `color-values` - include: var-function - include: color-values - include: angle-type - include: number-type - include: less-functions - include: less-aliases # Color Adjuster Functions - Not yet implemented by browsers # https://www.w3.org/TR/css-color-4/#typedef-color-adjuster color-adjuster-functions: # red(), green(), blue(), alpha() - Not yet implemented by browsers - match: '\b(red|green|blue|alpha|a)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: color-adjuster-operators - include: percentage-type - include: number-type # hue() - Not yet implemented by browsers - match: '\b(hue|h)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: color-adjuster-operators - include: angle-type - include: less-functions - include: less-aliases # saturation(), lightness(), whiteness(), blackness() - Not yet implemented by browsers - match: '\b(saturation|lightness|whiteness|blackness|[slwb])(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: color-adjuster-operators - include: percentage-type - include: less-functions - include: less-aliases # tint(), shade(), contrast() - Not yet implemented by browsers # contrast() interferes with the contrast() filter function; # therefore, it is not yet implemented here - match: '\b(tint|shade)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - include: less-variables - include: percentage-type - include: less-functions - include: less-aliases # blend(), blenda() - Not yet implemented by browsers - match: '\b(blenda|blend)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '(?=\))' pop: true - match: '\b(rgb|hsl|hwb)\b' scope: keyword.other.color-space.css - include: less-variables - include: color-values - include: percentage-type - include: var-function - include: less-functions - include: less-aliases color-adjuster-operators: - match: '[\-\+*](?=\s+)' scope: keyword.operator.css comma-delimiter: - match: '\s*(,)\s*' captures: 1: punctuation.separator.sequence.css function-notation-terminator: - match: '\)' scope: meta.group.css punctuation.definition.group.end.css pop: true vendor-prefix: - match: "-(?:webkit|moz|ms|o)-" scope: support.type.vendor-prefix.css unicode-range: - match: |- (?xi) (u\+) ([0-9a-f?]{1,6} (?:(-)[0-9a-f]{1,6})?) scope: support.unicode-range.css captures: 1: support.constant.unicode-range.prefix.css 2: constant.codepoint-range.css 3: punctuation.section.range.css qualified-name: - match: '(?:({{ident}})|(\*))?([|])(?!=)' captures: 1: entity.other.namespace-prefix.css 2: entity.name.namespace.wildcard.css 3: punctuation.separator.namespace.css # Custom Properties # https://drafts.csswg.org/css-variables/#typedef-custom-property-name custom-property-name: - match: '(--)({{nmchar}}+)' scope: support.type.custom-property.css captures: 1: punctuation.definition.custom-property.css 2: support.type.custom-property.name.css color-values: - include: color-functions - match: \b(?i:aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)\b scope: support.constant.color.w3c-standard-color-name.css - match: \b(?i:aliceblue|antiquewhite|aquamarine|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|gainsboro|ghostwhite|gold|goldenrod|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|magenta|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olivedrab|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|rebeccapurple|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato|turquoise|violet|wheat|whitesmoke|yellowgreen)\b scope: support.constant.color.w3c-extended-color-keywords.css - match: \b(?i:currentColor|transparent)\b scope: support.constant.color.w3c-special-color-keyword.css - match: '(#)(\h{3}|\h{6})\b' scope: constant.other.color.rgb-value.css captures: 1: punctuation.definition.constant.css - match: '(#)(\h{4}|\h{8})\b' scope: constant.other.color.rgba-value.css captures: 1: punctuation.definition.constant.css numeric-values: - include: angle-type - include: frequency-type - include: length-type - include: resolution-type - include: time-type - include: percentage-type - include: number-type float-type: - match: '{{float}}' scope: constant.numeric.float.decimal.css captures: 1: punctuation.separator.decimal.css integer-type: - match: '{{integer}}' scope: constant.numeric.css number-type: - include: float-type - include: integer-type percentage-type: - match: '{{float}}(%)' scope: constant.numeric.float.decimal.css captures: 1: punctuation.separator.decimal.css 2: keyword.other.unit.css - match: '{{integer}}(%)' scope: constant.numeric.integer.decimal.css captures: 1: keyword.other.unit.css length-type: - match: '{{float}}({{font_relative_lengths}}|{{viewport_percentage_lengths}}|{{absolute_lengths}})\b' scope: constant.numeric.float.decimal.css captures: 1: punctuation.separator.decimal.css 2: keyword.other.unit.css - match: '{{integer}}({{font_relative_lengths}}|{{viewport_percentage_lengths}}|{{absolute_lengths}})\b' scope: constant.numeric.integer.decimal.css captures: 1: keyword.other.unit.css - match: '0\b(?!%)' scope: constant.numeric.integer.decimal.css time-type: - match: '{{float}}({{duration_units}})\b' scope: constant.numeric.float.decimal.css captures: 1: punctuation.separator.decimal.css 2: keyword.other.unit.css - match: '{{integer}}({{duration_units}})\b' scope: constant.numeric.integer.decimal.css captures: 1: keyword.other.unit.css frequency-type: - match: '{{float}}({{frequency_units}})\b' scope: constant.numeric.float.decimal.css captures: 1: punctuation.separator.decimal.css 2: keyword.other.unit.css - match: '{{integer}}({{frequency_units}})\b' scope: constant.numeric.integer.decimal.css captures: 1: keyword.other.unit.css resolution-type: - match: '{{float}}({{resolution_units}})\b' scope: constant.numeric.float.decimal.css captures: 1: punctuation.separator.decimal.css 2: keyword.other.unit.css - match: '{{integer}}({{resolution_units}})\b' scope: constant.numeric.integer.decimal.css captures: 1: keyword.other.unit.css angle-type: - match: '{{float}}({{angle_units}})\b' scope: constant.numeric.float.decimal.css captures: 1: punctuation.separator.decimal.css 2: keyword.other.unit.css - match: '{{integer}}({{angle_units}})\b' scope: constant.numeric.integer.decimal.css captures: 1: keyword.other.unit.css - match: '0\b(?!%)' scope: constant.numeric.integer.decimal.css image-type: - include: cross-fade-function - include: gradient-functions - include: image-function - include: image-set-function - include: url-function # Named Grid Lines # https://drafts.csswg.org/css-grid/#named-lines line-names: - match: '\[' scope: punctuation.section.begin.css push: - match: '{{ident}}' scope: string.unquoted.line-name.css - match: '\]' scope: punctuation.section.end.css pop: true unquoted-string: - match: '[^\s''"]' scope: string.unquoted.css literal-string: - match: \' scope: punctuation.definition.string.begin.css push: - meta_scope: string.quoted.single.css - match: \' scope: punctuation.definition.string.end.css pop: true - include: string-content - match: \" scope: punctuation.definition.string.begin.css push: - meta_scope: string.quoted.double.css - match: \" scope: punctuation.definition.string.end.css pop: true - include: string-content string-content: - match: \n scope: invalid.illegal.newline.css pop: true - match: \\\s*\n scope: constant.character.escape.newline.css - match: \\(?:\h{1,6}|.) scope: constant.character.escape.css - include: less-interpolation curly-braces: - match: '\{' scope: punctuation.section.property-list.begin.css - match: '\}' scope: punctuation.section.property-list.end.css comment-block: - match: /\* scope: punctuation.definition.comment.css push: - meta_scope: comment.block.css - match: \*/ scope: punctuation.definition.comment.css pop: true - match: ^\s*(\*)(?!/) captures: 1: punctuation.definition.comment.css comment-line: - match: // scope: punctuation.definition.comment.css push: - meta_scope: comment.line.double-slash.less - match: \n pop: true css-modules: - match: '\s*(:)(import|export)' scope: meta.selector.css entity.other.pseudo-class.css-modules.css captures: 1: punctuation.definition.entity.css push: - meta_scope: meta.selector.css meta.function-call.css - match: '\(' scope: punctuation.definition.group.begin.css push: - meta_scope: meta.group.css - match: '\)' scope: punctuation.definition.group.end.css pop: true - include: selectors - include: literal-string - match: '\s*(\{)' scope: punctuation.section.property-list.begin.css push: - meta_scope: meta.group.css-modules.css - match: '\}' scope: punctuation.section.property-list.end.css pop: true - include: comment-line - include: comment-block - match: '([a-zA-Z0-9_-]+)\s*(:)' captures: 1: meta.property-name.css-modules.css support.type.property-name.css-modules.css 2: punctuation.separator.key-value.css 3: variable.other.css-modules.css push: - match: '(;|\s*(?=$))' captures: 1: punctuation.terminator.rule.css pop: true - include: literal-string - include: unquoted-string - match: '' pop: true ================================================ FILE: Tests/syntax_test_less.less ================================================ // SYNTAX TEST "Packages/LESS/Syntaxes/LESS.sublime-syntax" /* Correctly differentiate between properties and selectors, especially with pseudo-stuff because of the : */ *, & + h1, &:active #unit h1 + div, &-element + h1, [data-type="text"], span::before[data-type="text"], selector-ish::before[data-type="text"]:not(:first-child), .selector:hover selector-ish.selector::before { *, & + h1, &:active + h1, &-element + h1, [data-type="text"], span::before[data-type="text"], filter::before[data-type="text"], selector-ish::before[data-type="text"]:not(:first-child), #selec-tor:hover, selector-ish::before { color: rgba(100, 120, 12, 95%); background-color: blue; line-height: ~"calc(@{space} + 4px)"; span:hover {} filter:not(.empty) {} filter:drop-shadow(0 0 2px rgba(0, 0, 0, 0.3)); filter:blue; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3)) } color: rgba(100, 120, 12, 95%); background-color: blue; testbackground-color: blue; } /** * /* ^ comment.block.css punctuation.definition.comment.css */ /* Test for ; insertion the caret immediately after a selector should still be in meta.selector */ button , button // perhaps you want to type button:hover // ^ meta.selector , selector-ish /* with comments at the end */ // ^ meta.selector , button: // or maybe button::before (is caught by a regex in the keymap) :root, // <- entity.other.pseudo-class.css punctuation.definition.entity.css // ^^ entity.other.pseudo-class.css .class { // ^^^^ meta.selector // ^ - meta.selector ~, //^ punctuation.separator.combinator ::before, // ^ entity.other.pseudo-element.css punctuation.definition.entity.css // ^^ entity.other.pseudo-element.css .cl-ass { } // ^^^^^^^ meta.selector span:hover { } // ^^^ entity.name.tag.css background: #333; // ^^^^^^^^^ meta.property-name.css // ^^^^^ meta.property-value.css background-color: pink; // ^^^^^^^^^^^^^^^ meta.property-name.css // ^^^^^ meta.property-value.css background: url('../assets/photo1-blue.jpg') center/cover no-repeat; // ^ support.constant.property-value.css // ^ support.constant.property-value.css // ^ support.constant.property-value.css &-bemish { } //^ keyword.operator.ampersand.less // ^^^^^^^ entity.other.attribute-name.css // ^^^^^^^^ meta.selector.css [data-type="text"]:hover, //^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector // ^^^^^^ entity.other.pseudo-class.css // ^ punctuation.definition.entity.css // ^ punctuation.separator.css [data-type="text"]:active {} //^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector // ^^^^^^^ entity.other.pseudo-class.css // ^ punctuation.definition.entity.css #id@{interopol}bla, custom-element@{interopol}test, background: blue // ^ meta.property-name.css } @foreground-color: grayscale(50%); // <- variable.declaration.less punctuation.definition.variable.less // ^ variable.declaration.less // ^ meta.function-call.css support.function.filter.css @background-color: hsl(30,100%,96%); // <- variable.declaration.less punctuation.definition.variable.less // ^ variable.declaration.less @medialist-bg: @body-bg; // ^^^^^^^^^^ variable.declaration.less // <- variable.declaration.less punctuation.definition.variable.less @media-list-bg: @body-bg; // ^^^^^^^^^^ variable.declaration.less // <- variable.declaration.less punctuation.definition.variable.less *, // <- entity.name.tag.wildcard.css filter, // ^^^ meta.selector.css entity.name.tag.css // ^ meta.selector.css punctuation.separator.css filter , .element // <- punctuation.separator.sequence.css filter {} // ^ meta.selector.css // ^ entity.name.tag.css // ^ - entity.name.tag.css filter{} // ^ entity.name.tag.css .use-mixin { // ^^^^^^^ meta.selector.css entity.other.attribute-name.class.css &--bem {} // ^^^^^ meta.selector.css entity.other.attribute-name //^ keyword.operator.ampersand.less &_bem {} // ^^^^ meta.selector.css entity.other.attribute-name // ^ meta.selector.css } .accordion__copy, // ^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css .accordion__copy--open {} // ^^^^^^^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css #main h1+.sub { // <- entity.other.attribute-name.id.css punctuation.definition.entity.css // ^^ entity.other.attribute-name.id.css // ^^ meta.selector.css entity.name.tag.css // ^ meta.selector.css // ^ - constant.numeric // ^ punctuation.section.property-list.begin.css filter:hover {} filter::before {} // ^ entity.name.tag.css // ^^^^^^^^ entity.other.pseudo-element.css // ^^ punctuation.definition.entity.css // ^ punctuation.section.property-list.begin.css // ^ punctuation.section.property-list.end.css html{} // ^ entity.name.tag.css html:after, // ^ entity.other.pseudo-element.css punctuation.definition.entity.css // ^ entity.other.pseudo-element.css html:hover, // ^ entity.name.tag.css // ^ entity.other.pseudo-class.css punctuation.definition.entity.css // ^ entity.other.pseudo-class.css html::before { // ^ entity.name.tag.css, keyword.control.html.elements // ^^ entity.other.pseudo-element.css punctuation.definition.entity.css // ^ entity.other.pseudo-element.css &:not(:first-child, :last-child) { text-decoration: underline; } // ^^^^^^^^^^^^ entity.other.pseudo-class.css // ^ punctuation.definition.entity.css // ^ punctuation.separator.sequence.css // ^^^^^^^^^^^ entity.other.pseudo-class.css // ^ punctuation.definition.entity.css strong:not(:not(.strong)) {} // ^^^^ entity.other.pseudo-class.css // ^^^^^^^ entity.other.attribute-name.class.css &:first-child {} //^^^^^^^^^^^^^^ meta.selector.css // ^^^^^^^^^^^^ entity.other.pseudo-class.css //^ keyword.operator.ampersand.less // ^ punctuation.definition.entity.css & + & {} // ^ punctuation.separator.combinator.css font-family: 'Lucida Grande', Verdana, sans-serif; font-size: 16px; line-height: ~"calc(@{space} + 4px)"; transition: background-color .2s ease-in-out; cursor: pointer !important; // ^ support.type.property-name.css // ^ meta.property-value.css support.constant.property-value.css // ^ meta.property-value.css keyword.other.important.css display: -webkit-flex; // ^ support.type.property-name.css // ^ meta.property-value.css support.type.vendor-prefix.css // ^ meta.property-value.css support.constant.property-value.css align-self : baseline; // ^ support.type.property-name.css -webkit-user-select: none; // ^ support.type.vendor-prefix.css // ^ support.type.property-name.css line-height: 1.5 * 20; // ^ meta.property-value.css keyword.operator.less line-height: (1.5 %= 20); // ^ meta.property-value.css keyword.operator.less color: @foreground-color; // ^^ meta.property-value.css variable.other.less // ^ punctuation.definition.variable.less --custom-background-color: green; // ^ support.type.custom-property.css support.type.custom-property.name.css // ^ punctuation.separator.key-value.css padding-top: var(--custom-background-color, @blue); // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css // ^^^ support.function.var.css // ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css // ^ punctuation.definition.group.begin.css // ^^ support.type.custom-property.css punctuation.definition.custom-property.css // ^ support.type.custom-property.css support.type.custom-property.name.css // ^ punctuation.separator // ^^^^^ variable.other // ^ punctuation.definition.group.end.css // ^ punctuation.terminator.rule.css padding-left: @{background-color}; // ^^^^^^^^^^^^^^^^^^^ meta.property-value.css variable.other.less // ^ punctuation.definition.variable.less // ^ punctuation.definition.string.begin.less // ^ string.interpolated.less // ^ punctuation.definition.string.end.less fill : rebeccapurple; // ^ support.type.property-name.css // ^ meta.property-value.css support.constant.color.w3c-extended-color-keywords.css filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3)); // ^ support.type.property-name.css .fade-in(h1) { @keyframes fade-in-animation { // ^ meta.at-rule.keyframe.css keyword.control.at-rule.keyframe.css punctuation.definition.keyword.css // ^ meta.at-rule.keyframe.css entity.other.animation-name.css to { opacity: 1; } } /* Interpolated selectors http://lesscss.org/features/#variables-feature-variable-interpolation */ .@{selector}:hover + a, // ^^^^^^^^^^^^^^^^^^^^^^ meta.selector // ^ entity.other.attribute-name.class.css punctuation.definition.entity.css // ^^^^^^^^^^^ variable.other.less // ^ punctuation.definition.variable.less // ^ punctuation.definition.string.begin.less // ^ string.interpolated.less // ^ punctuation.definition.string.end.less @{selector}:hover + a { // ^^^^^^^^^^^^^^^^^^^^^^ meta.selector // ^^^^^^^^^^^ variable.other.less // ^ punctuation.definition.variable.less // ^ punctuation.definition.string.begin.less // ^ string.interpolated.less // ^ punctuation.definition.string.end.less @{property}: #0ee; // ^^^^^^^^^^^ meta.property-name // ^^^^^^^^^^^ variable.other background-@{property}: #999; // ^ - variable.other // ^^^^^^^^^^^ variable.other // ^^^^^^^^^^^^^^^^^^^^^^ meta.property-name @{property}-color: #999; // ^^^^^^^^^^^^^^^^^ meta.property-name // ^^^^^^^^^^^ variable.other // ^ - variable.other animation : progress-fade-in-animation .15s ease-in; // ^ meta.property-value.css // ^ string.unquoted.css // ^ meta.property-name.css support.type.property-name.css animation: progress-fade-in-animation .15s ease-in; // ^ source.less punctuation.separator.key-value.css // ^ meta.property-name.css support.type.property-name.css // ^ meta.property-value.css // ^ meta.property-value.css support.constant.property-value.css // ^ punctuation.terminator.rule.css } } } /* CSS Modules Interoperable CSS: https://github.com/css-modules/icss#specification localAlias is basically any string inside a CSS file, that will be replaced with the value stored as keyFromDep keys must be a single term, consisting of only alphanumeric characters, underscores and dashes */ :import("path/to/dep.css") { // ^^^^ entity.other.pseudo-class.css-modules.css // ^ punctuation.definition.group.begin.css // ^^^^ string // ^ punctuation.definition.group.end.css // ^ punctuation.section.property-list.begin.css localAlias: keyFromDep; // ^^^^^^^^^ meta.property-name.css-modules.css // ^^^^^^^^^^ string blababla : "keyFromDep"; // ^^^^^^^^ meta.property-name.css-modules.css // ^ punctuation // ^^^^^^^^^^ string // ^ punctuation } // an exportedKey exposes a specific value (a selector, a value, anything really) :export { // ^^^^ entity.other.pseudo-class.css-modules.css exportedKey: exportedValue; // ^^^^^^^^^ meta.property-name.css-modules.css // ^ punctuation // ^^^^^^^^^^ string // ^ punctuation } /* CSS Modules Composing selectors: https://github.com/css-modules/css-modules#css-modules */ .otherClassName { composes: className from "./style.css"; // from filename composes: classNameA classNameB; // multiple classnames composes: globalClassName from global; // from global classnames // ^^^^^^^ meta.property-name.css-modules.css // ^ punctuation // ^^^^ keyword.control.import.from.css-modules.css // ^ punctuation } /* CSS Modules Global vs. local scope: https://github.com/css-modules/css-modules#exceptions */ .localA :global .global-b .global-c :local(.localD.localE::before) .global-d // ^^^^^^^ entity.other.pseudo-class.css-modules // ^^^^^^ entity.other.pseudo-class.css-modules // ^ meta.function-call.css meta.group.css punctuation.definition.group.begin.css // ^^^^^^^^^^^^^^^^^^^^^^ meta.selector // ^ punctuation.definition.group.end.css :global { // global blocks // ^^^^ entity.other.pseudo-class.css-modules .global-class-name { color: green; } } :local { // local blocks // ^^^ entity.other.pseudo-class.css-modules .global-class-name { color: green; } } /* Support property values after a line break */ .grid { grid-template-areas: "header header" "aside main"; } /* Mixins http://lesscss.org/features/#mixins-feature */ .border-radius(@color: h1; @padding; @margin: 2;) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } /* Guarded Namespaces and Mixins http://lesscss.org/features/#mixins-feature-guarded-namespaces */ #namespace when not (@mode = huge) { // ^ meta.function.parameters.less keyword.operator.less // ^ string.unquoted .a-test-mixin(@color: black; /*@margin: 10px;*/ @padding: 20px) when (lightness(@a) >= 50%) { // ^^^^^^^^^^^^^^^^^^ comment.block.css // ^^ punctuation.definition.comment.css // ^^ punctuation.definition.comment.css // ^^ keyword.operator // ^^ meta.function.parameters.less variable.other.less // ^ punctuation.definition.variable.less .nested { @media screen and (max-width: 100px) { .mixin(@a) when not (isnumber(@a)) and (@a > 0) ... } // ^^ keyword.operator // ^^^^^^^^ meta.function-call.less support.function.less } } color: mix(@grey4, @grey5); // ^ meta.property-value.css meta.function-call.less support.function.less background: mix(@white, mix(@grey4, @grey5)); // ^ meta.property-value.css meta.function-call.less support.function.less background-color: linear-gradient(@white, mix(@grey4, mix(@grey4, @grey5))); // ^ meta.property-value.css meta.function-call.less support.function.less padding: @padding; } .mixin(@a) when not (isnumber(@a)) and (@a > 0) ... } // ^ meta.function.parameters.less keyword.operator.less /* Attribute selectors */ a[data-property="text"] { // ^^^^^^^^^^^^^^^^^^^^^^ meta.attribute-selector.css // ^ punctuation.definition.entity.css // ^ entity.other.attribute-name.css // ^ keyword.operator.attribute-selector.css // ^ string.quoted.double.css punctuation.definition.string.begin.css // ^ string.quoted.double.css // ^ punctuation.definition.string.end.css // ^ punctuation.definition.entity.css a[value^="text"] { // ^ meta.attribute-selector.css entity.other.attribute-name.css // ^ meta.attribute-selector.css keyword.operator.attribute-selector.css a[value="text"], a[value="text"] { } // ^ punctuation.definition.entity.css a[href~="#"] { // ^ meta.attribute-selector.css keyword.operator.attribute-selector.css a[value|='text'] { // ^ meta.attribute-selector.css keyword.operator.attribute-selector.css // ^ meta.attribute-selector.css string.quoted.single.css a[value$=text] { // ^ meta.attribute-selector.css keyword.operator.attribute-selector.css // ^ meta.attribute-selector.css string.unquoted.css a[width*="100%" i] { // ^ meta.attribute-selector.css keyword.operator.attribute-selector.css // ^ meta.attribute-selector.css keyword.other.css a[value*="text" I] { // ^ meta.attribute-selector.css keyword.operator.attribute-selector.css color: @link-color; // ^ punctuation.definition.variable.less color: @@color; // variable variables // ^^ punctuation.definition.variable.less /* Properties as Variables http://lesscss.org/features/#variables-feature-properties-as-variables-new- */ color: $color; // ^^^^^^ variable.other.less // ^ punctuation.definition.variable.less color: $nonproperty; // ^^^^^^^^^^^^ - variable.other.less // ^ - punctuation.definition.variable.less text-decoration: none; & {} //^^ meta.selector.css &:hover { .mixin { /* */ } // ^ punctuation.definition.entity.css // ^^^^^^ meta.selector.css #mixin(@color-param, @position-param) { /* */ } // ^ punctuation.definition.entity.css // ^^^^^^ meta.selector.css .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .message-mixin(success; var(--green); var(--green-dark)); // ^^^ support.function.var.css // ^^ punctuation.definition.custom-property.css // ^ support.type.custom-property.name.css object-fit: scale-down; // ^^^^^^^^^^ support.type.property-name.css // ^^^^^^^^^^ meta.property-value.css support.constant.property-value.css color: lighten(@link-color, 5%); // ^ support.type.property-name.css // ^ meta.property-value.css meta.function-call.less support.function.less // ^ meta.property-value.css meta.function-call.less punctuation.definition.group.begin.less // ^ meta.property-value.css meta.function-call.less meta.function.parameters.less variable.other.less background: linear-gradient(@grey2, @black); // ^ meta.property-value.css meta.function-call.css support.function.gradient.css // ^ meta.property-value.css meta.group.css punctuation.definition.group.begin.css // ^ meta.property-value.css variable.other.less punctuation.definition.variable.less // ^ meta.property-value.css variable.other.less // ^ meta.property-value.css variable.other.less punctuation.definition.variable.less // ^ meta.property-value.css variable.other.less // ^ meta.property-value.css meta.group.css punctuation.definition.group.end.css } } #variables { @variable: 10px; @another-variable: @variable; width: @variable + @another-variable; width: @variable*2; .@{varname}--subclass#another-variable@{variable}id[data-attr="text"] { color: @orangy; } // ^ entity.other.attribute-name.class.css // ^ entity.other.attribute-name.id.css punctuation.definition.entity.css // ^ entity.other.attribute-name.id.css // ^ entity.other.attribute-name.id.css } #@{varname}--subclass { color: @orangy; } // ^ entity.other.attribute-name.id.css @media only tv /*awesome*/ and (-webkit-max-width: @pixels) and (max-pixel-ratio: 1920/1200) and (min-aspect-ratio: portrait) { } // ^ meta.at-rule.media.css keyword.operator.logic.media.css // ^ meta.at-rule.media.css // ^ meta.at-rule.media.css support.constant.media.css // ^ meta.at-rule.media.css comment.block.css // ^ meta.at-rule.media.css punctuation.definition.group.begin.css // ^ meta.at-rule.media.css support.type.vendor-prefix.css // ^ meta.at-rule.media.css support.type.vendor-prefix.css // ^ meta.at-rule.media.css support.type.property-name.media.css // ^ meta.at-rule.media.css punctuation.separator.key-value.css // ^ meta.at-rule.media.css variable.other.less punctuation.definition.variable.less // ^ meta.at-rule.media.css variable.other.less // ^ meta.at-rule.media.css keyword.operator.logic.media.css // ^ meta.at-rule.media.css support.constant.property-value.css .avatar:not(body) {} // ^^^^ entity.name.tag.css .avatar:not(.class) {} // ^ meta.group.css entity.other.attribute-name.class.css // ^ meta.group.css punctuation.definition.group.end.css .class#id:nth-child(2n-1) {} // ^ constant.numeric keyword.other.unit.css // ^ meta.selector.css meta.function-call.css meta.group.css constant.numeric .avatar:nth-child(3) { // ^ entity.other.pseudo-class.css punctuation.definition.entity.css //. ^ entity.other.pseudo-class.css //. ^ entity.other.pseudo-class.css //. ^ meta.group.css punctuation.definition.group.begin.css //. ^ meta.group.css constant.numeric.css //. ^ meta.group.css punctuation.definition.group.end.css //. ^ display: inline-block; width: 48px; height: 48px; border-radius: 50%; background: url(data:@{image}/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7); // ^ support.type.property-name.css // ^ meta.property-value.css meta.group.css punctuation.definition.group.begin.css // ^ meta.property-value.css meta.group.css string.unquoted.css // ^ meta.property-value.css meta.group.css variable.other.less punctuation.definition.string.begin.less // ^ meta.property-value.css meta.group.css punctuation.definition.group.end.css background: url("data:@{image}/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"); // ^ meta.property-value.css meta.group.css punctuation.definition.group.begin.css // ^ meta.property-value.css meta.group.css string.quoted.double.css punctuation.definition.string.begin.css // ^ meta.property-value.css meta.group.css string.quoted.double.css // ^ meta.property-value.css meta.group.css string.quoted.double.css variable.other.less punctuation.definition.variable.less // ^ meta.property-value.css meta.group.css string.quoted.double.css punctuation.definition.string.end.css // ^ meta.property-value.css meta.group.css punctuation.definition.group.end.css background: url('data:@{image}/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'); // ^ meta.property-value.css meta.group.css punctuation.definition.group.begin.css // ^ meta.property-value.css meta.group.css string.quoted.single.css punctuation.definition.string.begin.css // ^ meta.property-value.css meta.group.css string.quoted.single.css // ^ meta.property-value.css meta.group.css string.quoted.single.css variable.other.less punctuation.definition.variable.less // ^ meta.property-value.css meta.group.css string.quoted.single.css punctuation.definition.string.end.css // ^ meta.property-value.css meta.group.css punctuation.definition.group.end.css } @import (reference) "@{themes}/tidal-wave.less"; // ^^^^^^^^^^^ meta.at-rule.import.css meta.at-rule.arguments.less // ^ punctuation.definition.group.begin.less // ^ punctuation.definition.group.end.less // ^ variable.other.less punctuation.definition.variable.less // ^ string.quoted.double.css variable.other.less string.interpolated.less // ^ punctuation.terminator.rule.css @import "mixins"; // <- meta.at-rule.import.css keyword.control.at-rule.import.css punctuation.definition.keyword.css // ^ meta.at-rule.import.css keyword.control.at-rule.import.css // ^^^^^^^^ string.quoted.double.css // ^ punctuation.definition.string.begin.css // ^ punctuation.definition.string.end.css @import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400"); // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.less meta.at-rule.import.css meta.function-call.css meta.group.css string.quoted.double.css // ^ punctuation.definition.string.begin.css // ^ punctuation.definition.string.end.css @import url(somefile); // ^ punctuation.definition.group.begin.css // ^^^ meta.function-call.css support.function.url.css // ^^^^^^^^ meta.group.css string.unquoted.css // ^ punctuation.definition.group.end.css @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500); // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css string.unquoted.css /* Maps http://lesscss.org/#maps http://lesscss.org/features/#maps-feature */ @sizes: { mobile: 320px; //^^^^^^ variable.declaration.map.less // ^^^^^ constant.numeric // ^ punctuation.separator.key-value // ^ punctuation.terminator.rule tablet: 768px; desktop: 1024px; } @config: { @options: { library-on: true // ^^^^^^^^^^ variable.declaration.map.less } } #colors() { primary: blue; // ^^^^^ variable.declaration.map.less // ^ punctuation.separator.key-value secondary: green; } #library() { .colors() { primary: grey; } } .button { color: #colors[primary]; // ^^^^^^^ entity.other.attribute-name.id // ^ punctuation.definition.entity // ^^^^^^^^^ meta.brackets.less // ^ punctuation.section.brackets.begin // ^ punctuation.section.brackets.end // ^^^^^^ variable.other.less border: 1px solid .colors[@secondary]; // ^^^^^^^ entity.other.attribute-name.class // ^ punctuation.definition.entity // ^^^^^^^^^ meta.brackets.less // ^ punctuation.section.brackets.begin // ^ punctuation.section.brackets.end // ^^^^^^ variable.other.less // ^ punctuation.definition.variable } .navbar { display: block; @media (min-width: @sizes[tablet]) { // ^^^^^^^^ meta.brackets.less // ^ punctuation.section.brackets.begin // ^ punctuation.section.brackets.end // ^^^^^^ variable.other.less display: inline-block; background-color: rgba(#ui-colors.dark[background-090],0.7); // ^ - meta.alias } } /* CSS Guards http://lesscss.org/features/#css-guards-feature */ & when (@config[@options][library-on] = true) { // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css // ^ keyword.operator.logic.mixin.less // ^ meta.function.parameters.less punctuation.definition.group.begin .produce-ruleset { prop: val; } } .my-optional-style() when (@my-option = true) { // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css // ^ keyword.operator.logic.mixin.less // ^ meta.function.parameters.less punctuation.definition.group.begin button { color: white; } } button when not (@my-option = true) { // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css // ^ keyword.operator.logic.mixin.less // ^ keyword.operator.logic.mixin.less // ^ meta.function.parameters.less punctuation.definition.group.begin color: white; } /* Aliasing Mixins http://lesscss.org/features/#mixins-feature-mixin-aliasing-feature */ #theme.dark.navbar { .colors(light) { primary: purple; } .colors(dark) { primary: black; secondary: grey; } .box { @alias: #library.rules(); @alias(); } } .navbar { @colors: .theme#dark.navbar.colors(dark); // ^ punctuation.separator.key-value.css // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css meta.alias.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.group.begin // ^ punctuation.definition.group.end // ^ punctuation.terminator.rule.css @colors: .theme.dark.navbar#colors(dark); // ^ punctuation.separator.key-value.css // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css meta.alias.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.group.begin // ^ punctuation.definition.group.end // ^ punctuation.terminator.rule.css @colors: #theme.dark.navbar#colors(dark); // ^ punctuation.separator.key-value.css // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css meta.alias.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.entity.less // ^ punctuation.definition.group.begin // ^ punctuation.definition.group.end // ^ punctuation.terminator.rule.css background: @colors[primary]; border: 1px solid @colors[secondary]; .button { @colors: #library.colors(); color: @colors[primary]; border-color: @colors[secondary]; border-color: #library.colors[secondary]; // ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css meta.alias.less // ^ punctuation.terminator.rule.css - meta.alias.less // ^^^^^^^^^^^ meta.brackets.less // ^ punctuation.section.brackets.begin.less // ^ punctuation.section.brackets.end.less } } /* Detached Rulesets http://lesscss.org/features/#detached-rulesets-feature */ header { background-color: blue; #hover({ // ^ punctuation.section.property-list.begin.css .site-header-info-extra-tooltip { opacity: 1; #transition(~'opacity @{duration-short} @{ease}') // ^ string.quoted.single.css markup.raw.less keyword.operator.less } .site-header-info-extra-tooltip { // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css opacity: 1; #transition(~'opacity @{duration-short} @{ease}') .site-header-info-extra-tooltip { // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css opacity: 1; #transition(~'opacity @{duration-short} @{ease}') } } }) .desktop-and-old-ie({ // ^ punctuation.section.property-list.begin.css background-color: red(color); // ^^^^^^^^^^^^^^^^ meta.property-name.css support.type.property-name.css // ^ punctuation.separator.key-value.css // ^ meta.function-call.css support.function.color.css // ^ punctuation.definition.group.begin.css width: @variable + @another-variable; height: 100px; }); //^ punctuation.section.property-list.end.css } // ensure we don't confuse variables with @-keywords @pageColor: blue; // ^^^^^ - meta.at-rule @namespaceColor: pink; // ^^^^^ - meta.at-rule @documentColor: pink; // ^^^^^ - meta.at-rule @importColor: pink; // ^^^^^ - meta.at-rule @keyframesColor: pink; // ^^^^^ - meta.at-rule @supportsColor: pink; // ^^^^^ - meta.at-rule // ------------ A selection of tests from the default CSS package: ------------- .test-strings { content: "double"; // ^^^^^^^^ string.quoted.double.css // ^ punctuation.definition.string.begin.css // ^ punctuation.definition.string.end.css content: 'single'; // ^^^^^^^^ string.quoted.single.css // ^ punctuation.definition.string.begin.css // ^ punctuation.definition.string.end.css content: 'invalid; // ^ invalid.illegal.newline.css } .test-punctuation { // ^ punctuation.section.property-list top: 1px; // ^ punctuation.separator.key-value.css // ^ punctuation.terminator.rule.css top: cubic-bezier(0.2, 0, 0.13, 2); /* ^^^ constant.numeric.float.decimal.css */ /* ^ punctuation.separator.decimal.css */ /* ^ punctuation.separator.sequence.css*/ /* ^ constant.numeric.integer.decimal.css */ /* ^ punctuation.separator.sequence.css*/ /* ^^^^ constant.numeric.float.decimal.css */ /* ^ punctuation.separator.decimal.css */ top: url("image"); // ^ punctuation.definition.group.begin.css // ^ punctuation.definition.group.end.css } // < punctuation.section.property-list.css .classname {} // ^^^^^^^^^^^ meta.selector.css // ^ punctuation.definition.entity.css // ^^^^^^^^^ entity.other.attribute-name.class.css #id {} // ^ punctuation.definition.entity.css // ^^ entity.other.attribute-name.id.css html {} // ^^^^ entity.name.tag.css @charset "UTF-8"; // ^^^^^^^^^^^^^^^^ meta.at-rule // ^ punctuation.definition.keyword.css // ^^^^^^^ keyword.control.at-rule @import "x" print; // ^^^^^^^^^^^^^^^^^ meta.at-rule // ^ punctuation.definition.keyword.css // ^^^^^^ keyword.control.at-rule // ^^^^^ support.constant.media.css // ^^^^^^^^^^ - meta.at-rule.namespace.css @namespace svg "http://www.w3.org/1999/xhtml"; // ^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css // ^ punctuation.definition.keyword.css // ^^^^^^^^^ keyword.control.at-rule.namespace.css // ^^^ entity.other.namespace-prefix.css @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css // ^^^ support.function.url.css // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css // ^ meta.group.css punctuation.definition.group.begin.css // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css string.quoted.double.css // ^ meta.group.css punctuation.definition.group.end.css @page :left {} // ^^^^^^^^^^^^ meta.at-rule.page.css // ^ punctuation.definition.keyword.css // ^^^^ keyword.control.at-rule.page.css @media only screen {} // ^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css // ^ punctuation.definition.keyword.css // ^^^^^ keyword.control.at-rule.media.css // ^^^^ keyword.operator.logic.media.css // ^^^^^^ support.constant.media.css @media (min-width: 700px) {} /* ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ /* ^ punctuation.definition.keyword.css */ /* ^^^^^ keyword.control.at-rule.media.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^^^^^^^ support.type.property-name.media.css */ /* ^^^^^ constant.numeric.integer.decimal.css */ /* ^ punctuation.definition.group.end.css */ @media (min-width: 700px) and (max-width: 2000px) {} /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ /* ^ punctuation.definition.keyword.css */ /* ^^^^^ keyword.control.at-rule.media.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^^^^^^^ support.type.property-name.media.css */ /* ^^^^^ constant.numeric.integer.decimal.css */ /* ^ punctuation.definition.group.end.css */ /* ^^^ keyword.operator.logic */ /* ^ punctuation.definition.group.begin.css */ /* ^^^^^^^^^ support.type.property-name.media.css */ /* ^^^^^^ constant.numeric.integer.decimal.css */ /* ^ punctuation.definition.group.end.css */ @media only screen and (-webkit-min-device-pixel-ratio: /* comment */ 1.3), /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ /* ^ punctuation.definition.keyword.css */ /* ^^^^^ keyword.control.at-rule.media.css */ /* ^^^^ keyword.operator.logic.media.css */ /* ^^^^^^ support.constant.media.css */ /* ^^^ keyword.operator.logic.media.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ support.type.property-name.media.css */ /* ^ punctuation.separator.key-value.css */ /* ^^^^^^^^^^^^^ comment.block.css */ /* ^^^ constant.numeric.float.decimal.css */ /* ^ punctuation.definition.group.end.css */ /* ^ punctuation.definition.arbitrary-repetition */ only screen and (-o-min-device-pixel-ratio: 13/10), /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ /* ^^^^ keyword.operator.logic.media.css */ /* ^^^^^^ support.constant.media.css */ /* ^^^ keyword.operator.logic.media.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^^^^^^^^^^^^^^^^^^^^^^^ support.type.property-name.media.css */ /* ^ punctuation.separator.key-value.css */ /* ^^ constant.numeric.integer.decimal.css */ /* ^ keyword.operator */ /* ^^ constant.numeric.integer.decimal.css */ /* ^ punctuation.definition.group.end.css */ /* ^ punctuation.definition.arbitrary-repetition */ only screen and (min-resolution: 120dpi) /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ /* ^^^^ keyword.operator.logic.media.css */ /* ^^^^^^ support.constant.media.css */ /* ^^^ keyword.operator.logic.media.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^^^^^^^^^^^^ support.type.property-name.media.css */ /* ^ punctuation.separator.key-value.css */ /* ^^^^^^ constant.numeric.integer.decimal.css */ /* ^ punctuation.definition.group.end.css */ {} @custom-media --a-b (width: 1px); // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.custom-media.css // ^ punctuation.definition.keyword.css // ^^^^^^^^^^^^ keyword.control.at-rule.custom-media.css // ^^^^^ support.type.property-name.media.css @keyframes beat, bounce {} // ^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.keyframe.css // ^ punctuation.definition.keyword.css // ^^^^^^^^^ keyword.control.at-rule.keyframe.css // ^^^^ entity.other.animation-name.css // ^ punctuation.definition.arbitrary-repetition.css // ^^^^^^ entity.other.animation-name.css @keyframes test-keyframes-keywords { from, to {} /* ^^^^ keyword.keyframe-selector.css */ /* ^ punctuation.separator.sequence.css */ /* ^^ keyword.keyframe-selector.css */ 0%, 100% {} /* ^^ constant.numeric.integer.decimal.css */ /* ^ keyword.other.unit.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^ constant.numeric.integer.decimal.css */ /* ^ keyword.other.unit.css */ .99%, 100.99% {} /* ^^^^ constant.numeric.float.decimal.css */ /* ^ punctuation.separator.decimal.css */ /* ^ keyword.other.unit.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^^^^ constant.numeric.float.decimal.css */ /* ^ punctuation.separator.decimal.css */ /* ^ keyword.other.unit.css */ 0%, to {} /* ^^ constant.numeric.integer.decimal.css */ /* ^ keyword.other.unit.css */ /* ^ punctuation.separator.sequence.css */ /* ^^ keyword.keyframe-selector.css */ } @document url(http://) { } /* ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css */ /* ^ punctuation.definition.keyword.css */ /* ^^^^^^^^^ keyword.control.at-rule.document.css */ /* ^^^ meta.block.css */ /* ^ punctuation.definition.block.begin.css */ /* ^ punctuation.definition.block.end.css */ @document url(http://www), /* ^^^ support.function.url.css */ /* ^^^^^^^^^^ string.unquoted.css */ /* ^ punctuation.separator.sequence.css */ url-prefix("http://www"), /* ^^^^^^^^^^ support.function.url-prefix.css */ /* ^^^^^^^^^^^^ string.quoted.double.css */ domain(mozilla.org), /* ^^^^^^ support.function.domain.css */ /* ^^^^^^^^^^^ string.unquoted.css */ regexp("https:.*") /* ^^^^^^ support.function.regexp.css */ /* ^^^^^^^^^^ string.quoted.double.css */ { .class { /* ^^^^^^ meta.at-rule.document.css entity.other.attribute-name.class.css */ display: none; /* ^^^^^^^ meta.at-rule.document.css meta.property-name.css */ } } @font-face { // ^^^^^^^^^^^ meta.at-rule.css // ^ punctuation.definition.keyword.css // ^^^^^^^^^ keyword.control.at-rule.css src: local(Font); /* */ // ^^^^^ comment.block.css } @font-face // ^^^^^^^^^^^ meta.at-rule.css // ^ punctuation.definition.keyword.css // ^^^^^^^^^ keyword.control.at-rule.css { font-family: monospace, // ^^^^^^^^^^^ support.type.property-name.css // ^^^^^^^^^ support.constant.font-name.css /* */ // ^^^^^ comment.block.css } @supports not ( and ( top: 2px ) ) { } /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.supports.css */ /* ^ punctuation.definition.keyword.css */ /* ^^^^^^^^ keyword.control.at-rule.supports.css */ /* ^^^ keyword.operator.logic.css */ /* ^ meta.group.css punctuation.definition.group.begin.css */ /* ^^^ keyword.operator.logic.css */ /* ^ meta.group.css punctuation.definition.group.begin.css */ /* ^^^ support.type.property-name.css */ /* ^ punctuation.separator.key-value.css */ /* ^^ constant.numeric.integer.decimal.css keyword.other.unit.css */ /* ^ meta.group.css punctuation.definition.group.end.css */ /* ^ meta.group.css punctuation.definition.group.end.css */ /* ^^^ meta.block.css */ /* ^ punctuation.definition.block.begin.css */ /* ^ punctuation.definition.block.end.css */ @supports (--foo: green) { /* ^^^^^ support.type.custom-property.css */ .class { /* ^^^^^^ meta.at-rule.supports.css entity.other.attribute-name.class.css */ display: none; /* ^^^^^^^ meta.at-rule.supports.css meta.property-name.css */ } } @counter-style {} // ^ punctuation.definition.keyword.css // ^^^^^^^^^^^^^^ keyword.control.at-rule.counter-style.css @counter-style none {} // ^^^^ invalid.illegal.counter-style-name.css @counter-style decimal {} // ^^^^^^^ invalid.illegal.counter-style-name.css @counter-style name { // ^ punctuation.definition.keyword.css // ^^^^^^^^^^^^^^ keyword.control.at-rule.counter-style.css // ^^^^ entity.other.counter-style-name.css symbols: "‣"; // ^^^^^^^ support.type.property-name.css suffix: " "; // ^^^^^^ support.type.property-name.css // ^^^ string.quoted.double.css } @counter-style blacknwhite // ^^^^^^^^^^^^^^ meta.at-rule.counter-style.css keyword.control.at-rule.counter-style.css // ^^^^^^^^^^^ entity.other.counter-style-name.css { system: cyclic; negative: "(" ")"; prefix: "/"; symbols: ◆ ◇; suffix: "/ "; range: 2 4; speak-as: "bullets"; //^^^^^^^^ support.type.property-name.css } .test-var { --test-var: arial; } // ^^^^^^^^^^ support.type.custom-property.css // ^^ punctuation.definition.custom-property // ^^^^^^^^ support.type.custom-property.name.css .test-types { top: 20; /* ^^ constant.numeric.integer.decimal.css */ top: +.95e-20; /* ^^^^^^^^ constant.numeric.float.decimal.css */ /* ^ punctuation.separator.decimal.css */ top: +1e1e1 .1e1e1; /* ^^^^ constant.numeric.float.decimal.css */ /* ^ - constant.numeric */ /* ^^^^ constant.numeric.float.decimal.css */ /* ^ - constant.numeric */ top: -1.5e+93%; /* ^^^^^^^^^ constant.numeric.float.decimal.css */ /* ^ punctuation.separator.decimal.css */ } .test-units { top: 1px; /* ^^^ constant.numeric.integer.decimal.css */ /* ^^ keyword.other.unit.css */ top: 1.1em; /* ^^^^^ constant.numeric.float.decimal.css */ /* ^ punctuation.separator.decimal.css */ /* ^^ keyword.other.unit.css */ top: -100%; /* ^^^^^ constant.numeric.integer.decimal.css */ /* ^ keyword.other.unit.css */ top: 1.1.1deg; /* ^^^^^^^^ constant.numeric.float.decimal.css */ /* ^ punctuation.separator.decimal.css */ /* ^ punctuation.separator.decimal.css */ /* ^^^ keyword.other.unit.css */ } .test-properties { -webkit-transform: none; // ^^^^^^^^^^^^^^^^^ meta.property-name.css // ^^^^^^^^ support.type.vendor-prefix.css // ^^^^^^^^^ support.type.property-name.css // ^^^^ meta.property-value.css support.constant.property-value.css } .test-operators { top: calc(1px + 1px); /* ^ keyword.operator.css */ top: calc(1px - 1px); /* ^ keyword.operator.css */ top: calc(1px / 1px); /* ^ keyword.operator.css */ top: calc(1px * 1px); /* ^ keyword.operator.css */ top: calc(1px+1px); /* ^ -keyword.operator.css */ top: calc(1px-1px); /* ^ -keyword.operator.css */ top: calc(1px/1px); /* ^ keyword.operator.css */ top: calc(1px*1px); /* ^ keyword.operator.css */ } .test-important { top: 1px !important; // ^^^^^^^^^^ keyword.other.important.css top: 1px!important; // ^^^^^^^^^^ keyword.other.important.css } // Test Functional Pseudo Class Meta Scopes .test:nth-child(even) {} // ^^^^^^^^^^^^^^^^ meta.function-call.css // ^^^^^^ meta.group.css // ^ punctuation.definition.group.begin.css // ^ punctuation.definition.group.end.css .test-pseudo-classes:nth-child(2):hover {} // ^^^^^^^^^ entity.other.pseudo-class.css // ^ constant.numeric.css // ^ punctuation.definition.entity.css // ^^^^^ entity.other.pseudo-class.css .test-pseudo-class-numerics:nth-last-of-type(-n+3) {} /* ^^^^^^^^^^^^^^^^^ entity.other.pseudo-class.css */ /* ^^^^ constant.numeric.integer.decimal.css */ .test-pseudo-class-keywords:nth-of-type(odd) {} /* ^^^^^^^^^^^^ entity.other.pseudo-class.css */ /* ^^^ keyword.other.pseudo-class.css */ .test-pseudo-class-strings:dir(ltr) {} /* ^^^^ entity.other.pseudo-class.css */ /* ^^^ string.unquoted.css */ .test-pseudo-class-tag:not(*) {} /* ^^^^ entity.other.pseudo-class.css */ /* ^ entity.name.tag.wildcard.css */ .test-pseudo-elements::before {} /* ^^ punctuation.definition.entity.css */ /* ^^^^^^^^ entity.other.pseudo-element.css */ .test-pseudo-elements:after {} /* ^ punctuation.definition.entity.css */ /* ^^^^^^ entity.other.pseudo-element.css */ .test-pseudo-elements::-webkit-slider-runnable-track /* ^^ punctuation.definition.entity.css */ /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ entity.other.pseudo-element.css */ .test-unicode { top: "\2764 \273e"; } // ^^^^^ constant.character.escape.css // ^^^^^ constant.character.escape.css .test-unicode-range { unicode-range: U+0025-00FF, U+4??; // ^^^^^^^^^^^ support.unicode-range.css // ^^ support.constant.unicode-range.prefix.css // ^^^^^^^^^ constant.codepoint-range.css // ^ punctuation.section.range.css // ^^^^^ support.unicode-range.css // ^^ support.constant.unicode-range.prefix.css // ^^^ constant.codepoint-range.css } .test-escape-character { top: "\nstring\n"; } // ^^ constant.character.escape.css // ^^ constant.character.escape.css .test-attribute-selectors[disabled][type=button] {} // ^^^^^^^^^^ meta.attribute-selector.css // ^ punctuation.definition.entity.css // ^^^^^^^^ entity.other.attribute-name.css // ^ punctuation.definition.entity.css // ^^^^ entity.other.attribute-name.css // ^^^^^^ string.unquoted.css .test-attribute-selectors-namespaces[n|a=""][*|a=""][|att] {} // ^ entity.other.namespace-prefix.css // ^ punctuation.separator.namespace.css // ^ entity.name.namespace.wildcard.css // ^ punctuation.separator.namespace.css // ^ punctuation.separator.namespace.css .test-attribute-selectors-operators[a=""][a~=""][a|=""][a^=""][a$=""][a*=""] {} // ^ keyword.operator.attribute-selector.css // ^^ keyword.operator.attribute-selector.css // ^^ keyword.operator.attribute-selector.css // ^^ keyword.operator.attribute-selector.css // ^^ keyword.operator.attribute-selector.css // ^^ keyword.operator.attribute-selector.css .test-attribute-selectors-whitespace[a = ""] {} // ^ entity.other.attribute-name.css // ^ keyword.operator.attribute-selector.css .test-attribute-selectors-flags[a="" i] {} // ^ keyword.other.css *.test-universal-selector {} // ^ entity.name.tag.wildcard.css .test-combinators >>> a >> a > a + b ~ a {} // ^^^ punctuation.separator.combinator.css // ^^ punctuation.separator.combinator.css // ^ punctuation.separator.combinator.css // ^ punctuation.separator.combinator.css // ^ punctuation.separator.combinator.css .test-generic-font-families { font: serif; // ^^^^^ support.constant.font-name.css font: sans-serif; // ^^^^^^^^^^ support.constant.font-name.css font: cursive; // ^^^^^^^ support.constant.font-name.css font: fantasy; // ^^^^^^^ support.constant.font-name.css font: monospace; // ^^^^^^^^^ support.constant.font-name.css } .test-unquoted-font-name { font: m700, aria; // ^^^^ string.unquoted // ^ punctuation.separator // ^^ - string // ^^^^ string.unquoted font: inherit; // ^ - string font: initial; // ^ - string font: unset; // ^ - string font: italic; // ^ - string font: small-caps; // ^ - string font: 2em m700, sans-serif; // ^ - string // ^^^^ string.unquoted // ^ punctuation.separator // ^ - string font-weight: bold; // ^^^^^^^^^^^ meta.property-name support.type.property-name } .test-color-values { color: aqua; // ^^^^ support.constant.color.w3c-standard-color-name.css color: aliceblue; // ^^^^^^^^^ support.constant.color.w3c-extended-color-keywords.css color: currentColor; // ^^^^^^^^^^^^ support.constant.color.w3c-special-color-keyword.css color: transparent; // ^^^^^^^^^^^ support.constant.color.w3c-special-color-keyword.css color: #b4da55; // ^ punctuation.definition.constant.css // ^^^^^^^ constant.other.color.rgb-value.css color: #137; // ^^^^ constant.other.color.rgb-value.css color: #0f0a; // ^^^^^ constant.other.color.rgba-value.css color: #a1b2c3d4; // ^^^^^^^^^ constant.other.color.rgba-value.css color: #E5F6A7B8; // ^ punctuation.definition.constant.css // ^^^^^^^^^ constant.other.color.rgba-value.css } .test-function-meta { top: filter(param1, 20px); // ^^^^^^^^^^^^^^^^^^^^ meta.function-call.css // ^^^^^^^^^^^^^^ meta.group.css } .test-color-functions { top: rgb(1, 4.5%); /* ^^^ support.function.color.css */ /* ^ constant.numeric.integer.decimal.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^ constant.numeric.float.decimal.css */ top: rgba(); /* ^^^^ support.function.color.css */ top: hsl(1deg, 4.5%); /* ^^^ support.function.color.css */ /* ^^^^ constant.numeric.integer.decimal.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^ constant.numeric.float.decimal.css */ top: hsla(); /* ^^^^ support.function.color.css */ top: hwb(); /* ^^^ support.function.color.css */ top: gray(1, 4.5%); /* ^^^^ support.function.color.css */ /* ^ constant.numeric.integer.decimal.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^ constant.numeric.float.decimal.css */ top: device-cmyk(0.5, 1%, red()); /* ^^^^^^^^^^^ support.function.color.css */ /* ^^^ constant.numeric.float.decimal.css */ /* ^ punctuation.separator.sequence.css */ /* ^^ constant.numeric.integer.decimal.css */ /* ^^^ support.function.color.css */ top: color(w() s()); /* ^^^^^ support.function.color.css */ /* ^ support.function.color.css */ /* ^ support.function.color.css */ top: alpha(- 1.5%); /* ^^^^^ support.function.color.css */ /* ^ keyword.operator.css */ /* ^^^^ constant.numeric.float.decimal.css */ top: h(+ 1.5deg); /* ^ support.function.color.css */ /* ^ keyword.operator.css */ /* ^^^^^^ constant.numeric.float.decimal.css */ top: w(* 1.5%); /* ^ support.function.color.css */ /* ^ keyword.operator.css */ /* ^^^^ constant.numeric.float.decimal.css */ top: shade(1.5%); /* ^^^^^ support.function.color.css */ /* ^^^^ constant.numeric.float.decimal.css */ top: blenda(red 50% hsl); /* ^^^^^^ support.function.color.css */ /* ^^^ support.constant.color.w3c-standard-color-name.css */ /* ^^^ constant.numeric.integer.decimal.css */ /* ^^^ keyword.other.color-space.css */ background-color: color(var(--background) blend(var(--foreground) 80%)); /* ^^^^^^^^^^^^^^^^ support.type.property-name.css */ /* ^ punctuation.separator.key-value.css */ /* ^^^^^ support.function.color.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^ support.function.var.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^^^^^^^^^^ support.type.custom-property */ /* ^ punctuation.definition.group.end.css */ /* ^^^^^ support.function.color.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^ support.function.var.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^^^^^^^^^^ support.type.custom-property.css */ /* ^ punctuation.definition.group.end.css */ /* ^^^ constant.numeric.integer.decimal.css */ /* ^^ punctuation.definition.group.end.css */ /* ^ punctuation.terminator.rule.css */ } .test-transform-functions { top: rotate(0); /* ^^^^^^ support.function.transform.css */ /* ^ constant.numeric.integer.decimal.css */ top: rotate(1) /* ^^^^^^ support.function.transform.css */ /* ^ - constant.numeric.integer.decimal.css */ top: rotate3d(-1, 2deg); /* ^^^^^^^^ support.function.transform.css */ /* ^^ constant.numeric.integer.decimal.css */ /* ^^^^ constant.numeric.integer.decimal.css */ top: matrix3d(1, 0); /* ^^^^^^^^ support.function.transform.css */ /* ^ constant.numeric.integer.decimal.css */ /* ^ punctuation.separator.sequence.css */ /* ^ constant.numeric.integer.decimal.css */ top: translate3d(1, 2px, 3%); /* ^^^^^^^^^^^ support.function.transform.css */ /* ^ constant.numeric.integer.decimal.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^ constant.numeric.integer.decimal.css */ /* ^^ constant.numeric.integer.decimal.css */ top: translateY(2px); /* ^^^^^^^^^^ support.function.transform.css */ /* ^^^ constant.numeric.integer.decimal.css */ top: translateX(1%); /* ^^^^^^^^^^ support.function.transform */ /* ^^ constant.numeric.integer.decimal.css */ top: translateZ(0); /* ^^^^^^^^^^ support.function.transform */ /* ^ constant.numeric.integer.decimal.css */ top: skewY(1deg); /* ^^^^^ support.function.transform.css */ /* ^^^^ constant.numeric.integer.decimal.css */ top: skew(1deg, 2turn); /* ^^^^ support.function.transform.css */ /* ^^^^ constant.numeric.integer.decimal.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^^ constant.numeric.integer.decimal.css */ top: perspective(17px); /* ^^^^^^^^^^^ support.function.transform.css */ /* ^^^^ constant.numeric.integer.decimal.css */ top: scaleY(2); /* ^^^^^^ support.function.transform.css */ /* ^ constant.numeric.integer.decimal.css */ top: skewY(1rad) rotate(1turn); /* ^^^^^^ support.function.transform.css */ /* ^^^^^ constant.numeric.integer.decimal.css */ transform: translate(var(--center), 0) scale(var(--ripple-scale), 1); /* ^^^^^^^^^ support.function.transform */ /* ^^^ support.function.var */ /* ^^^^^^^^ support.type.custom-property */ /* ^ constant.numeric */ /* ^^^ support.function.var */ } .test-timing-functions { top: cubic-bezier(0.42, 0, 0.58, 1); /* ^^^^^^^^^^^^ support.function.timing.css */ /* ^^^^ constant.numeric.float.decimal.css */ top: steps(020, start); /* ^^^^^ support.function.timing.css */ /* ^^^ constant.numeric.integer.decimal.css */ /* ^^^^^ support.keyword.timing-direction.css */ top: steps(1, end); /* ^^^ support.keyword.timing-direction.css */ top: steps(1, middle); /* ^^^^^^ support.keyword.timing-direction.css */ } .test-shape-functions { top: circle(at top 5.5e20em); /* ^^^^^^ support.function.shape.css */ /* ^^ keyword.other.css */ /* ^^^ support.constant.property-value.css */ /* ^^^^^^^^ constant.numeric.float.decimal.css */ top: ellipse(at 0%); /* ^^^^^^^ support.function.shape.css */ /* ^^ keyword.other.css */ /* ^^ constant.numeric.integer.decimal.css */ top: ellipse(closest-side); /* ^^^^^^^^^^^^ support.constant.property-value.css */ top: inset(1.1px round 50%); /* ^^^^^ support.function.shape.css */ /* ^^^^^ constant.numeric.float.decimal.css */ /* ^^^^^ keyword.other.css */ top: rect(auto); /* ^^^^ support.function.shape.css */ /* ^^^^ support.constant.property-value.css */ top: rect(1px); /* ^^^ constant.numeric.integer.decimal.css */ } .test-calc-function { top: calc(1.1px + 2rad); /* ^^^^ support.function.calc.css */ /* ^^^^^ constant.numeric.float.decimal.css */ /* ^^^^ constant.numeric.integer.decimal.css */ top: calc(attr(start, 1) - 1); /* ^^^^ support.function.attr.css */ top: calc(calc() * calc()); /* ^^^^ support.function.calc.css */ /* ^^^^ support.function.calc.css */ /* ^ keyword.operator.css */ /* ^^^^ support.function.calc.css */ top: calc(100% - (1 * 10px) / 1 - (1 * 10px) / 1 - (1 * 10px) / 1); /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css */ /* ^^^^ support.function.calc.css */ /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^ constant.numeric.integer.decimal.css */ /* ^ keyword.operator.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^^^^^^^^^ meta.group.css meta.group.css */ /* ^ punctuation.definition.group.end.css */ /* ^ keyword.operator.css */ /* ^ punctuation.definition.group.begin.css */ /* ^^ constant.numeric.integer.decimal.css */ /* ^^ keyword.other.unit.css */ /* ^ punctuation.definition.group.end.css */ /* ^ keyword.operator.css */ /* ^ keyword.operator.css */ /* ^ punctuation.definition.group.begin.css */ /* ^ constant.numeric.integer.decimal.css */ /* ^ keyword.operator.css */ /* ^^ constant.numeric.integer.decimal.css */ /* ^ punctuation.definition.group.end.css */ /* ^ keyword.operator.css */ /* ^ constant.numeric.integer.decimal.css */ /* ^ punctuation.definition.group.end.css */ /* ^ punctuation.terminator.rule.css - meta.group */ } .test-toggle-function { top: toggle(5px red preserve-3d); /* ^^^^^^ support.function.toggle.css */ /* ^^^ constant.numeric.integer.decimal.css */ /* ^^^ support.constant.color.w3c-standard-color-name.css */ /* ^^^^^^^^^^^ support.constant.property-value.css */ } .test-attr-function { top: attr(*|c); /* ^^^^ support.function.attr.css */ /* ^ entity.name.namespace.wildcard.css */ /* ^ punctuation.separator.namespace.css */ /* ^ entity.other.attribute-name.css */ top: attr(n|size); /* ^ entity.other.namespace-prefix.css */ /* ^^^^ entity.other.attribute-name.css */ top: attr(size px, auto); /* ^^^^ entity.other.attribute-name.css */ /* ^^ keyword.other.unit.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^ support.constant.property-value.css */ top: attr(preserve-3d); /* ^^^^^^^^^^^ entity.other.attribute-name.css */ } .test-url-function { top: url("a"); /* ^^^ support.function.url.css */ /* ^^^ string.quoted.double.css */ top: url(a); /* ^ string.unquoted.css */ } .test-image-functions { top: image("a"); /* ^^^^^ support.function.image.css */ /* ^^^ string.quoted.double.css */ top: image(a); /* ^ string.unquoted.css */ top: image("a", rgb(0, 0, 0)); /* ^ punctuation.separator.sequence.css */ /* ^ constant.numeric.integer.decimal.css */ top: image-set("a" 1x, a 4dpi); /* ^^^ string.quoted.double.css */ /* ^^ constant.numeric.integer.decimal.css */ /* ^ keyword.other.unit.css */ /* ^ punctuation.separator.sequence.css */ /* ^ string.unquoted.css */ /* ^^^^ constant.numeric.integer.decimal.css */ top: cross-fade(50% "a", b); /* ^^^^^^^^^^ support.function.image.css */ /* ^^^ constant.numeric.integer.decimal.css */ /* ^^^ string.quoted.double.css */ /* ^ punctuation.separator.sequence.css */ /* ^ string.unquoted.css */ } .test-gradient-functions { top: linear-gradient(); /* ^^^^^^^^^^^^^^^ support.function.gradient.css */ top: linear-gradient(45deg, white); /* ^^^^^ constant.numeric.integer.decimal.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^^ support.constant.color.w3c-standard-color-name.css */ top: linear-gradient(to top left); /* ^^ keyword.other.css */ /* ^^^ support.constant.property-value.css */ /* ^^^^ support.constant.property-value.css */ top: linear-gradient(0%, 100%); /* ^^ constant.numeric.integer.decimal.css */ /* ^^^^ constant.numeric.integer.decimal.css */ top: repeating-linear-gradient(); /* ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css */ top: radial-gradient(); /* ^^^^^^^^^^^^^^^ support.function.gradient.css */ top: radial-gradient(circle at top left); /* ^^^^^^ keyword.other.css */ /* ^^ keyword.other.css */ /* ^^^ support.constant.property-value.css */ /* ^^^^ support.constant.property-value.css */ top: radial-gradient(red, blue); /* ^^^ support.constant.color.w3c-standard-color-name.css */ /* ^ punctuation.separator.sequence.css */ top: repeating-radial-gradient(); /* ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css */ } .test-counter-functions { top: counter(name, decimal-leading-zero); /* ^^^^^^^ support.function.counter.css */ /* ^^^^ entity.other.counter-name.css string.unquoted.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^^^^^^^^^^^^^^^^^ support.constant.property-value.counter-style.css */ top: counters(name, "str", none); /* ^^^^^^^^ support.function.counter.css */ /* ^^^^ entity.other.counter-name.css string.unquoted.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^^ string.quoted.double.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^^ support.constant.property-value.counter-style.css */ top: symbols(fixed "\2020" url()); /* ^^^^^^^ support.function.counter.css */ /* ^^^^^ support.constant.symbol-type.css */ /* ^^^^^^^ string.quoted.double.css */ /* ^^^ support.function.url.css */ } .test-grid-functions { grid: repeat(20) / auto-flow 1fr; /* ^^^^^^ support.function.grid.css */ /* ^^ constant.numeric.integer.decimal.css */ /* ^^^^^^^^^ support.constant.property-value.css */ top: repeat(auto-fit, 2fr minmax(auto) 5%); /* ^^^^^^^^ support.keyword.repetitions.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^ constant.numeric.integer.decimal.css */ /* ^^^^^^ support.function.grid.css */ /* ^^^^ support.constant.property-value.css */ /* ^^ constant.numeric.integer.decimal.css */ top: minmax(min-content, 1fr, 10%); /* ^^^^^^ support.function.grid.css */ /* ^^^^^^^^^^^ support.constant.property-value.css */ /* ^ punctuation.separator.sequence.css */ /* ^^^ constant.numeric.integer.decimal.css */ /* ^^^ constant.numeric.integer.decimal.css */ grid-template: repeat(2, var(--size)) / repeat(2, 50%); /* ^^^ support.function.var.css */ /* ^^^^^^ support.type.custom-property.css */ /* ^^ punctuation.definition.group.end.css */ /* ^^^^^^ support.function.grid.css */ grid-template-columns: [a-line-name] auto /* ^ punctuation.section.begin.css */ /* ^^^^^^^^^^^ string.unquoted.line-name.css */ /* ^ punctuation.section.end.css */ [b] minmax(min-content, 1fr) [b c d] repeat(2, [e] 40px) /* ^ punctuation.section.begin.css */ /* ^ string.unquoted.line-name.css */ /* ^ - string.unquoted.line-name.css */ /* ^ string.unquoted.line-name.css */ /* ^ punctuation.section.end.css */ /* ^ punctuation.section.begin.css */ /* ^ string.unquoted.line-name.css */ /* ^ punctuation.section.end.css */ repeat(5, auto); } .test-filter-functions { top: filter(url(), blur()); /* ^^^^^^ support.function.filter.css */ /* ^^^ support.function.url.css */ /* ^^^^ support.function.filter.css */ top: blur(1px); /* ^^^^ support.function.filter.css */ top: sepia(1% 1); /* ^^^^^ support.function.filter.css */ /* ^^ constant.numeric.integer.decimal.css */ /* ^ constant.numeric.integer.decimal.css */ top: drop-shadow(1px rgb()); /* ^^^^^^^^^^^ support.function.filter.css */ /* ^^^ constant.numeric.integer.decimal.css */ /* ^^^ support.function.color.css */ top: hue-rotate(1turn); /* ^^^^^^^^^^ support.function.filter.css */ /* ^^^^^ constant.numeric.integer.decimal.css */ } // Test Font Functions: format() & local() @font-face { src: format("embedded-opentype"); // ^^^^^^ support.function.font-face.css // ^^^^^^^^^^^^^^^^^^^ string.quoted.double.css src: local(Gentium-Bold); // ^^^^^ support.function.font-face.css // ^^^^^^^^^^^^ string.unquoted.css src: local('Gentium-Bold'); /* ^^^^^ support.function.font-face.css */ /* ^^^^^^^^^^^^^^ string.quoted.single.css */ /* ^ punctuation.definition.string.begin.css */ /* ^ punctuation.definition.string.end.css */ src: local("Gentium-Bold"); /* ^^^^^ support.function.font-face.css */ /* ^^^^^^^^^^^^^^ string.quoted.double.css */ /* ^ punctuation.definition.string.begin.css */ /* ^ punctuation.definition.string.end.css */ } @font-face { font-family: m700, aria; // ^^^^ string.unquoted.css // ^^^^ string.unquoted.css } .test-var-function { top: var(--name); // ^^^ support.function.var.css // ^^ punctuation.definition.custom-property.css // ^^^^ support.type.custom-property.name.css } .test-custom-tags > div > span + cust·m-tÀg > div-cøstom-tag ~ form-Çust😀m-tag.classname:last-child:hover {} // ^ -entity.name.tag.custom.css // ^^^ entity.name.tag.css // ^^^^ entity.name.tag.css // ^ -entity.name.tag.custom.css // ^^^^^^^^^^ entity.name.tag.custom.css // ^^^^^^^^^^^^^^ entity.name.tag.custom.css // ^ -entity.name.tag.custom.css // ^^^^^^^^^^^^^^^ entity.name.tag.custom.css // ^^^^^^^^^ entity.other.attribute-name.class.css // ^^^^^^^^^^ -entity.name.tag.custom.css // ^^^^^ -entity.name.tag.custom.css .test-property-name-order-doesnt-prevent-full-matches { grid-template-rows: none; // ^^^^^^^^^^^^^^^^^^ support.type.property-name // ^ punctuation.separator.key-value grid-template-columns: none; // ^^^^^^^^^^^^^^^^^^^^^ support.type.property-name // ^ punctuation.separator.key-value grid-template-areas: auto; // ^^^^^^^^^^^^^^^^^^^ support.type.property-name // ^ punctuation.separator.key-value grid-template: initial; // ^^^^^^^^^^^^^ support.type.property-name // ^ punctuation.separator.key-value grid-row-gap: 3vmin; // ^^^^^^^^^^^^ support.type.property-name // ^ punctuation.separator.key-value grid-row: auto; // ^^^^^^^^ support.type.property-name // ^ punctuation.separator.key-value } .test-meta-scopes-for-completions { top: 5px; // ^^^ meta.property-name // ^^^^ meta.property-value top: ; // ^^^ meta.property-name // ^ meta.property-value top: 0 // ^^^ meta.property-name }/* ^ meta.property-value */ .generic-font-family { font-family: my-serif, serif } // ^^^^^^^^ string.unquoted // ^ - string // ^^^^^ support.constant.font-name .generic-font-family2 { font-family: sans-serif , fantasy , system-ui; } // ^^^^^^^^^^ support.constant.font-name // ^^^^^^^ support.constant.font-name // ^^^^^^^^^ support.constant.font-name .generic-font-family3 { font-family: cursive // ^^^^^^^ support.constant.font-name } .generic-font-family4 { font-family: droid serif; // ^^^^^^^^^^^ string.unquoted } .variable-beginnings { --1x: url(data:image/png;base64,PNG); // ^^^^ support.type.custom-property // ^^ punctuation.definition.custom-property // ^^ support.type.custom-property.name // ^ punctuation.separator.key-value background-image: var(--1x); // ^^^^ support.type.custom-property // ^^ punctuation.definition.custom-property // ^^ support.type.custom-property.name --\ff: 5px; // ^^^^^ support.type.custom-property // ^^ punctuation.definition.custom-property // ^^^ support.type.custom-property.name // ^ punctuation.separator.key-value } ================================================ FILE: less_completions.py ================================================ import re import sublime import sublime_plugin KIND_CSS_PROPERTY = (sublime.KIND_ID_KEYWORD, "p", "property") KIND_CSS_FUNCTION = (sublime.KIND_ID_FUNCTION, "f", "function") KIND_CSS_CONSTANT = (sublime.KIND_ID_VARIABLE, "c", "constant") # Prepare some common property values for when there is more than one way to # specify a certain value type. The color value for example can be specified # by `rgb()` or `hsl()` and so on. Example where `|` denotes the caret: # # color: rg| --> color: rgb(|); # # This is also helpful when multiple properties share the same value types. COMMON_VALUES = { 'animation_direction': [ 'alternate', 'alternate-reverse', 'normal', 'reverse' ], 'absolute_size': [ 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large' ], 'absolute_weight': [ '100', '200', '300', '400', '500', '600', '700', '800', '900' ], 'basic_shape': ['inset($1)', 'circle($1)', 'ellipse($1)', 'polygon($1)'], 'blend_mode': [ 'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ], 'border_style': [ 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset' ], 'border_width': ['thin', 'medium', 'thick'], 'break_before_after': [ 'always', 'left', 'right', 'recto', 'verso', 'page', 'column', 'region' ], 'break_inside': [ 'auto', 'avoid', 'avoid-page', 'avoid-column', 'avoid-region' ], 'color': [ 'currentColor', 'transparent', ['rgb()', 'rgb(${1:0}, ${2:0}, ${3:0})'], ['rgba()', 'rgba(${1:0}, ${2:0}, ${3:0}, ${4:1.0})'], ['hsl()', 'hsl(${1:0}, ${2:100%}, ${3:50%})'], ['hsla()', 'hsla(${1:0}, ${2:100%}, ${3:50%}, ${4:1.0})'], # Named colors 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgrey', 'darkgreen', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'grey', 'green', 'greenyellow', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgrey', 'lightgreen', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen', # LESS color functions 'argb(${1:color})', 'average(${1:color}, ${2:color})' 'color(${1:string})', 'contrast(${1:color}, ${2:dark}, ${3:light}, ${4:threshold}%)', 'darken(${1:color}, ${2:percentage}%)', 'desaturate(${1:color}, ${2:percentage}%)', 'difference(${1:color}, ${2:color})', 'exclusion(${1:color}, ${1:color})', 'fade(${1:color}, ${2:percentage}%)', 'fadein(${1:color}, ${2:percentage}%)', 'fadeout(${1:color}, ${2:percentage}%)', 'greyscale(${1:color})', 'hardlight(${1:color}, ${2:color})', 'hsv($1)', 'hsva($1)', 'lighten(${1:color}, ${2:percentage}%)', 'mix(${1:color}, ${2:color})', 'multiply(${1:color}, ${1:color})', 'negation(${1:color}, ${2:color})', 'overlay(${1:color}, ${2:color})', 'saturate(${1:color}, ${2:percentage}%)', 'screen(${1:color}, ${1:color})', 'softlight(${1:color}, ${1:color})', 'spin(${1:color}, ${2:angle})' ], 'font_variant_alternates': [ 'normal', 'historical-forms', 'stylistic($1)', 'styleset($1)', 'character-variant($1)', 'swash($1)', 'ornaments($1)', 'annotation($1)' ], 'generic_name': [ 'serif', 'sans-serif', 'cursive', 'fantasy', 'monospace' ], 'grid': [ ['repeat()', 'repeat(${1:2}, ${2:1fr})'], ['minmax()', 'minmax(${1:100px}, ${2:1fr})'], ], 'list_style_type': [ 'none', 'inline', 'disc', 'circle', 'square', 'decimal', 'decimal-leading-zero', 'arabic-indic', 'binary', 'bengali', 'cambodian', 'khmer', 'devanagari', 'gujarati', 'gurmukhi', 'kannada', 'lower-hexadecimal', 'lao', 'malayalam', 'mongolian', 'myanmar', 'octal', 'oriya', 'persian', 'urdu', 'telugu', 'tibetan', 'thai', 'upper-hexadecimal', 'lower-roman', 'upper-roman', 'lower-greek', 'lower-alpha', 'lower-latin', 'upper-alpha', 'upper-latin', 'afar', 'ethiopic-halehame-aa-et', 'ethiopic-halehame-aa-er', 'amharic', 'ethiopic-halehame-am-et', 'amharic-abegede', 'ethiopic-abegede-am-et', 'cjk-earthly-branch', 'cjk-heavenly-stem', 'ethiopic', 'ethiopic-halehame-gez', 'ethiopic-abegede', 'ethiopic-abegede-gez', 'hangul-consonant', 'hangul', 'lower-norwegian', 'oromo', 'ethiopic-halehame-om-et', 'sidama', 'ethiopic-halehame-sid-et', 'somali', 'ethiopic-halehame-so-et', 'tigre', 'ethiopic-halehame-tig', 'tigrinya-er', 'ethiopic-halehame-ti-er', 'tigrinya-er-abegede', 'ethiopic-abegede-ti-er', 'tigrinya-et', 'ethiopic-halehame-ti-et', 'tigrinya-et-abegede', 'ethiopic-abegede-ti-et', 'upper-greek', 'upper-norwegian', 'asterisks', 'footnotes', 'hebrew', 'armenian', 'lower-armenian', 'upper-armenian', 'georgian', 'cjk-ideographic', 'hiragana', 'katakana', 'hiragana-iroha', 'katakana-iroha' ], 'number': [ 'abs(${1:number})', 'ceil(${1:number})', 'convert(${1:number}, ${2:units})', 'floor(${1:number})', 'max(${1:number}, ${1:number})', 'min(${1:number}, ${1:number})', 'mod(${1:number}, ${2:number})', 'pi()', 'pow(${1:base}, ${2:exponent})', 'round(${1:number}, ${2:places})', 'sqrt(${1:number})', 'unit(${1:number}, ${2:units})' ], 'percentage': [ 'percentage(${1:number})' ], 'position': ['top', 'right', 'bottom', 'left', 'center'], 'relative_size': ['larger', 'smaller'], 'relative_weight': ['bolder', 'lighter'], 'repeat_style': [ 'repeat', 'repeat-x', 'repeat-y', 'space', 'round', 'no-repeat' ], 'string': [ '\"$1\"', 'e(${1:string})', 'escape(${1:string})', '%(${1:string}, ${2:args...})', 'replace(${1:string}, ${2:...})' ], 'timing_function': [ 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', ['cubic-bezier()', 'cubic-bezier(${1:0.0}, ${2:0.0}, ${3:1.0}, ${4:1.0})'], 'step-start', 'step-end', ['steps()', 'steps(${1:2}, ${2:start})'], ], 'uri': [ 'url($1)', 'data-uri(${1:url})' ], } PROPERTY_DICT = { 'align-content': [ 'center', 'flex-end', 'flex-start', 'space-around', 'space-between', 'stretch' ], 'align-items': ['baseline', 'center', 'flex-end', 'flex-start', 'stretch'], 'align-self': ['auto', 'baseline', 'center', 'flex-end', 'flex-start', 'stretch'], 'alignment-baseline': [ 'baseline', 'middle', 'auto', 'before-edge', 'after-edge', 'central', 'text-before-edge', 'text-after-edge', 'ideographic', 'alphabetic', 'hanging', 'mathematical' ], 'animation': [ 'none', '', 'infinite', '', 'forwards', 'backwards', 'both', 'running', 'paused' ], 'animation-name': ['none', ''], 'animation-duration': ['