support interpolated selectors

danro · Dec 8, 2018 · 7581718 · 7581718
1 parent 6a1aa85
commit 7581718
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 1 deletion.
diff --git a/Syntaxes/LESS.sublime-syntax b/Syntaxes/LESS.sublime-syntax
@@ -162,6 +162,7 @@ contexts:
     - include: selectors
     - include: properties
     - include: keyframe-operators
+    - include: interpolated-selectors
     - include: custom-element-selectors
     - include: less-map-values
     - include: at-rules
@@ -278,6 +279,59 @@ contexts:
         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}})'

diff --git a/Tests/syntax_test_less.less b/Tests/syntax_test_less.less
@@ -241,7 +241,25 @@ html::before {
       }
     }
 
-    .@{selector} {
+/*
+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
       animation : progress-fade-in-animation .15s ease-in;
 //                ^ meta.property-value.css
 //                ^ string.unquoted.css