use branching for map or expression

SublimeText · Feb 24, 2024 · ec45fd9 · ec45fd9
1 parent 651563b
commit ec45fd9
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 25 deletions.
diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax
@@ -207,11 +207,11 @@ contexts:
     # for use in CSS contexts
     - include: comments
     - include: important-operators
-    - include: scss-expression-block
     - include: scss-declaration
     - include: scss-variables
     - include: scss-operators
     - include: sass-namespaced-functions
+    - include: scss-expression-or-map
 
   scss-expression:
     # for use in SCSS contexts where we try to "guess" more types of values
@@ -236,17 +236,6 @@ contexts:
     - match: '{{ident}}'
       scope: meta.generic-name.scss
 
-  scss-expression-block:
-    - match: '\((?!.*:)'  # if there is an : in it, assume it's a map
-      captures:
-        0: punctuation.section.group.begin.scss
-      push:
-        - meta_scope: meta.group.scss
-        - include: scss-expression
-        - match: '\)'
-          scope: punctuation.section.group.end.scss
-          pop: 1
-
 ###[ SCSS INTERPOLATION ]######################################################
 
   scss-interpolated-property:
@@ -305,21 +294,38 @@ contexts:
         3: punctuation.separator.namespace.scss
         4: punctuation.definition.variable.scss
     - include: scss-interpolation
-    - include: scss-maps
 
-###[ SCSS MAPS ]###############################################################
+###[ SCSS MAPS OR GROUPS ]#####################################################
 
-  scss-maps:
-    - match: '\((?=.*:)'
+  scss-expression-or-map:
+    - match: '(?=\()'
+      branch_point: expression-or-map
+      branch:
+        - scss-expression-group
+        - scss-map
+
+  scss-expression-group:
+    - match: '\('
       captures:
         0: punctuation.section.group.begin.scss
       push:
-        - meta_scope: meta.group.css meta.map.arguments.scss
-        - include: scss-variables
-        - include: quoted-strings
+        - meta_scope: meta.group.expression.scss
+        - match: '\)'
+          scope: punctuation.section.group.end.scss
+          pop: 2
+        - match: (?=:)
+          fail: expression-or-map
+        - include: scss-expression
+
+  scss-map:
+    - match: '\('
+      captures:
+        0: punctuation.section.group.begin.scss
+      push:
+        - meta_scope: meta.group.scss meta.map.arguments.scss
         - match: '\)'
           scope: punctuation.section.group.end.scss
-          pop: 1
+          pop: 2
         - match: '({{ident}})'
           captures:
             1: variable.parameter.scss
@@ -332,6 +338,8 @@ contexts:
             - include: comments
             - include: terminator-pop
             - include: values
+        - include: scss-variables
+        - include: quoted-strings
 
 ###[ SCSS DECLARATIONS ]#######################################################
 

diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss
@@ -1033,6 +1033,12 @@ $accent: #e1d7d2;
 //=============================================================================
 @mixin inset-divider-offset($offset, $padding) {
   $divider-offset: (2 * $padding) + $offset;
+//                 ^^^^^^^^^^^^^^ meta.declaration.value.scss meta.group.expression.scss
+//                 ^              punctuation
+//                              ^ punctuation
+//                    ^           keyword.operator.arithmetic.scss
+//                      ^^^^^^^^  variable.other
+
   @debug "divider offset: #{$divider-offset}";
 //^^^^^^                     meta.at-rule.scss keyword.control.at-rule.debugger.scss
 //^                          punctuation.definition.keyword.scss
@@ -1164,7 +1170,7 @@ $sizes: 40px, 50px, 80px;
 $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
 // ^^^                                                      meta.declaration.identifier.scss variable.other.scss
 //    ^                                                     punctuation.separator.key-value.css
-//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css meta.map.arguments.scss
+//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.scss meta.map.arguments.scss
 //      ^                                                   punctuation.section.group.begin.scss
 //       ^^^^^                                              meta.string
 //            ^                                             punctuation.separator.key-value.css
@@ -1185,6 +1191,7 @@ $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
 //                  ^^         keyword.operator.scss
 //                     ^^^^^^  variable.other.scss
   .icon-#{$name}:before {
+//               ^^^^^^ entity.other.pseudo-element.css
     display: inline-block;
     font-family: "Icon Font";
     content: $glyph;
@@ -1308,7 +1315,7 @@ $transition-speed: math.div(1s, 50px);
   position: absolute;
   left: $left-start;
   transition: left ($left-stop - $left-start) * $transition-speed;
-//                 ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.scss
+//                 ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.expression.scss
 //                 ^                          punctuation.section.group.begin.scss
 //                  ^^^^^^^^^^                variable.other.scss
 //                             ^              keyword.operator.arithmetic.scss
@@ -1328,7 +1335,7 @@ $transition-speed: math.div(1s, 50px);
 // https://sass-lang.com/documentation/operators/
 //=============================================================================
 @debug 1 + 2 * 3 == 1 + (2 * 3); // true
-//                      ^^^^^^^ meta.group.scss
+//                      ^^^^^^^ meta.group.expression.scss
 //                       ^      constant.numeric
 //                         ^    keyword.operator
 //                           ^  constant.numeric
@@ -1337,7 +1344,7 @@ $transition-speed: math.div(1s, 50px);
 //          ^^                                             keyword.operator.logical.scss
 //             ^^^^^                                       constant.language.boolean.false.scss
 //                    ^^                                   keyword.operator.logical.scss
-//                                        ^^^^^^^^^^^^^^^^ meta.group.scss
+//                                        ^^^^^^^^^^^^^^^^ meta.group.expression.scss
 //                                         ^^^^            constant.language.boolean.false.scss
 //                                               ^^^       keyword.operator.logical.scss
 //                                                   ^^^^^ constant.language.boolean.false.scss
@@ -1359,7 +1366,7 @@ h2 {
 //                           ^^^^^^^^  variable.other.scss
 //                                   ^ punctuation.separator.sequence.css
  font-weight: 20px + ($large * 2);
-//                   ^^^^^^^^^^^^ meta.group.scss
+//                   ^^^^^^^^^^^^ meta.group.expression.scss
 //                    ^^^^^^      variable.other.scss
 //                           ^    keyword.operator
 }