support interpolated property names

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

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/Syntaxes/LESS.sublime-syntax b/Syntaxes/LESS.sublime-syntax
@@ -633,6 +633,16 @@ contexts:
         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
 
   property-value-wrapper:
     - match: '(\s*)(;)'

diff --git a/Tests/syntax_test_less.less b/Tests/syntax_test_less.less
@@ -260,6 +260,17 @@ http://lesscss.org/features/#variables-feature-variable-interpolation
 //   ^ 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