Showing preview only (220K chars total). Download the full file or copy to clipboard to get everything.
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
================================================
<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
<key>name</key>
<string>Comments</string>
<key>scope</key>
<string>source.less</string>
<key>settings</key>
<dict>
<key>shellVariables</key>
<array>
<dict>
<key>name</key>
<string>TM_COMMENT_START</string>
<key>value</key>
<string>// </string>
</dict>
<dict>
<key>name</key>
<string>TM_COMMENT_START_2</string>
<key>value</key>
<string>/*</string>
</dict>
<dict>
<key>name</key>
<string>TM_COMMENT_END_2</string>
<key>value</key>
<string>*/</string>
</dict>
<dict>
<key>name</key>
<string>TM_COMMENT_DISABLE_INDENT</string>
<key>value</key>
<string>no</string>
</dict>
</array>
</dict>
</dict>
</plist>
================================================
FILE: Preferences/Symbol List.tmPreferences
================================================
<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
<key>name</key>
<string>Symbol List</string>
<key>scope</key>
<string>source.less meta.selector.css, variable.declaration.less</string>
<key>settings</key>
<dict>
<key>showInSymbolList</key>
<integer>1</integer>
<key>symbolTransformation</key>
<string>s/(.*?)/$1/</string>
<key>showInIndexedSymbolList</key>
<integer>1</integer>
<key>symbolIndexTransformation</key>
<string>/[#.]([A-Za-z0-9_~]+)/$1/;</string>
</dict>
</dict>
</plist>
================================================
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 <number> 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 <number> or <length> 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 <number> or <length> 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 <angle> 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 <angle> 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 <length> 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 <number> or <angle> 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 <number> 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', '<timing_function>', 'infinite', '<animation_direction>',
'forwards', 'backwards', 'both', 'running', 'paused'
],
'animation-name': ['none', '<custom-ident>'],
'animation-duration': ['<time>'],
'animation-timing-function': ['<timing_function>'],
'animation-delay': ['<time>'],
'animation-iteration-count': ['infinite', '<number>'],
'animation-direction': ['<animation_direction>'],
'animation-fill-mode': ['none', 'forwards', 'backwards', 'both'],
'animation-play-state': ['running', 'paused'],
'backface-visibility': ['visible', 'hidden'],
'background': [
'<color>', '<uri>', 'repeat', 'repeat-x', 'repeat-y', 'no-repeat',
'scroll', 'fixed', '<position>'
],
'background-attachment': ['fixed', 'local', 'scroll'],
'background-blend-mode': ['<blend_mode>'],
'background-clip': ['border-box', 'padding-box', 'content-box'],
'background-color': ['<color>'],
'backdrop-filter': [
'<uri>', 'url($1)', 'blur($1)', 'brightness($1)', 'contrast($1)',
'drop-shadow($1)', 'grayscale($1)', 'hue-rotate($1)', 'invert($1)',
'opacity($1)', 'saturate($1)', 'sepia($1)'
],
'background-image': ['<uri>', 'none'],
'background-origin': ['border-box', 'padding-box', 'content-box'],
'background-position': ['<position>'],
'background-repeat': ['<repeat_style>'],
'background-size': ['auto', 'cover', 'contain', '<length>', '<percentage>'],
'baseline-shift': ['baseline', 'sub', 'super'],
'border': ['<border_width>', '<border_style>', '<color>'],
'border-width': ['<border_width>'],
'border-style': ['<border_style>'],
'border-color': ['<color>'],
'border-collapse': ['collapse', 'separate'],
'border-radius': ['<length>', '<percentage>'],
'border-spacing': ['<length>'],
'border-image': [
'<border-image-source>', '<border-image-slice>', '<border-image-width>',
'<border-image-outset>', '<border-image-repeat>'
],
'border-image-outset': ['<length>', '<number>'],
'border-image-repeat': ['stretch', 'repeat', 'round', 'space'],
'border-image-slice': ['fill', '<number>', '<percentage>'],
'border-image-source': ['none', '<image>'],
'border-image-width': ['<length>', '<percentage>', '<number>', 'auto'],
'border-top | border-right | border-bottom | border-left': [
'<border_width>', '<border_style>', '<color>'
],
'border-top-color | border-right-color | border-bottom-color | border-left-color': ['<color>'],
'border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius': [
'<length>', '<percentage>'
],
'border-top-style | border-right-style | border-bottom-style | border-left-style': ['<border_style>'],
'border-top-width | border-right-width | border-bottom-width | border-left-width': ['<border_width>'],
'bottom': ['<length>', '<percentage>', 'auto'],
'box-decoration-break': ['slice', 'clone'],
'box-shadow': ['none', 'inset', '<color>'],
'box-sizing': ['content-box', 'border-box'],
'break-after': ['<break_before_after>', '<break_inside>'],
'break-before': ['<break_before_after>',
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
SYMBOL INDEX (9 symbols across 1 files)
FILE: less_completions.py
function completion_sort_key (line 571) | def completion_sort_key(v):
function parse_css_data (line 577) | def parse_css_data():
function match_selector (line 602) | def match_selector(view, pt, scope):
function next_none_whitespace (line 609) | def next_none_whitespace(view, pt):
class CSSCompletions (line 616) | class CSSCompletions(sublime_plugin.EventListener):
method on_query_completions (line 626) | def on_query_completions(self, view, prefix, locations):
method complete_property_name (line 652) | def complete_property_name(self, view, prefix, pt):
method complete_property_value (line 677) | def complete_property_value(self, view, prefix, pt):
method complete_function_argument (line 714) | def complete_function_argument(self, view, prefix, pt):
Condensed preview — 13 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (225K chars).
[
{
"path": ".gitattributes",
"chars": 337,
"preview": "# This file is used to slim down the size of the\n# Sublime Text package shipped via Package Control\n# by leveraging gita"
},
{
"path": ".github/workflows/continuous-integration.yml",
"chars": 1111,
"preview": "name: continuous-integration\n\non: [push]\n\njobs:\n build:\n name: Run syntax_tests\n runs-on: ubuntu-latest\n steps"
},
{
"path": ".gitignore",
"chars": 516,
"preview": "# Compiled source #\n###################\n*.com\n*.class\n*.dll\n*.exe\n*.o\n*.so\n\n# Packages #\n############\n# it's better to u"
},
{
"path": ".python-version",
"chars": 4,
"preview": "3.8\n"
},
{
"path": "Default.sublime-keymap",
"chars": 2994,
"preview": "[\n\t{ \"keys\": [\":\"], \"command\": \"insert_snippet\", \"args\": {\"contents\": \":$0;\"}, \"context\":\n\t\t[\n\t\t\t{ \"key\": \"setting.auto_"
},
{
"path": "Preferences/Comments.tmPreferences",
"chars": 772,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<plist version=\"1.0\">\n<dict>\n\t<key>name</key>\n\t<string>Comments</string>\n\t<key>sc"
},
{
"path": "Preferences/Symbol List.tmPreferences",
"chars": 526,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<plist version=\"1.0\">\n<dict>\n\t<key>name</key>\n\t<string>Symbol List</string>\n\t<key"
},
{
"path": "README.md",
"chars": 208,
"preview": "# Package has been moved\n\nThe Less package for Sublime Text is currently maintained here: https://github.com/SublimeText"
},
{
"path": "Syntaxes/LESS.sublime-syntax",
"chars": 97146,
"preview": "%YAML 1.2\n---\n# http://www.sublimetext.com/docs/3/syntax.html\nname: Less\nfile_extensions:\n - less\n - css.less\nscope: s"
},
{
"path": "Tests/syntax_test_less.less",
"chars": 82795,
"preview": "// SYNTAX TEST \"Packages/LESS/Syntaxes/LESS.sublime-syntax\"\n\n/*\nCorrectly differentiate between properties and selectors"
},
{
"path": "less_completions.py",
"chars": 30566,
"preview": "import re\nimport sublime\nimport sublime_plugin\n\nKIND_CSS_PROPERTY = (sublime.KIND_ID_KEYWORD, \"p\", \"property\")\nKIND_CSS_"
},
{
"path": "messages/2.0.0.txt",
"chars": 321,
"preview": "LESS 2.0.0\n======================\n\nThank you for installing Less for Sublime Text.\n\n2.0 supports things like flex-box sy"
},
{
"path": "messages.json",
"chars": 75,
"preview": "{\n \"install\": \"messages/2.0.0.txt\",\n \"2.0.0\": \"messages/2.0.0.txt\"\n}\n"
}
]
About this extraction
This page contains the full source code of the danro/LESS-sublime GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 13 files (212.3 KB), approximately 51.7k tokens, and a symbol index with 9 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.