Cleanup variable interpolation

This commit... 1. tweaks ident_start pattern to support #{ 2. prepends scss-interpolation to identifier-content context, which makes scss-interpolated-property obsolete and ensures they are supported in all sorts of identifiers. 3. separates scss-interpolation and scss-string-interpolation with only the latter one clearing 1 (string/comment) scope.
SublimeText · Feb 28, 2024 · 65822b4 · 65822b4
1 parent 02ada1c
commit 65822b4
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 60 deletions.
diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax
@@ -16,14 +16,14 @@ variables:
 
   # CSS overrides
 
-  ident_start: (?:{{nmstart}}|@+{)
+  ident_start: (?:{{nmstart}}|#{)
 
   property_or_selector_begin: (?={{ident_begin}}|{{selector_start}})
 
   selector_start: '[[:alpha:].:#%&*\[{{combinator_char}}]'
   selector_end: (?=[;{}])
 
-  tag_name_begin: (?=[[:alpha:]]|@+{)
+  tag_name_begin: (?=[[:alpha:]]|#{)
 
 ###############################################################################
 
@@ -61,7 +61,7 @@ contexts:
 
   block-comment-body:
     - meta_append: true
-    - include: scss-interpolation
+    - include: scss-string-interpolation
 
 ###[ SassDoc COMMENTS ]###########################################################
 
@@ -106,7 +106,6 @@ contexts:
     - include: comments
     - include: property-end
     - include: property-identifiers
-    - include: scss-interpolated-property
 
     # otherwise it is part of a selector
     - match: ''
@@ -178,6 +177,34 @@ contexts:
     - meta_append: true
     - include: scss-expression-basic
 
+###[ CSS IDENTIFIERS ]#########################################################
+
+  identifier-content:
+    - meta_prepend: true
+    - include: scss-interpolation
+
+###[ CSS STRINGS WITH INTERPOLATION ]##########################################
+
+  single-quoted-string-body:
+    - meta_prepend: true
+    - include: scss-string-interpolation
+
+  double-quoted-string-body:
+    - meta_prepend: true
+    - include: scss-string-interpolation
+
+  single-quoted-url-body:
+    - meta_prepend: true
+    - include: scss-string-interpolation
+
+  double-quoted-url-body:
+    - meta_prepend: true
+    - include: scss-string-interpolation
+
+  unquoted-urls:
+    - meta_prepend: true
+    - include: scss-string-interpolation
+
 ###[ SCSS DEFAULT/GLOBAL VALUES ]##############################################
 
   scss-default-operators:
@@ -240,51 +267,34 @@ contexts:
 
 ###[ SCSS INTERPOLATION ]######################################################
 
-  scss-interpolated-property:
-    - match: '-?(?=#{)'
-      push:
-      - match: ''
-        pop: 1
-      - match: '(#)({)'
-        captures:
-          1: punctuation.definition.variable.scss
-          2: punctuation.section.interpolation.begin.scss
-        push:
-          - property-value
-          - scss-interpolation-body
-
   scss-interpolation:
-    - match: '(#)({)'
+    - match: (#)({)
       captures:
         1: punctuation.definition.variable.scss
         2: punctuation.section.interpolation.begin.scss
       push: scss-interpolation-body
 
   scss-interpolation-body:
-    - clear_scopes: true
     - meta_scope: meta.interpolation.scss
-    - include: scss-expression
-    - match: '(})'
+    - match: \}
       scope: punctuation.section.interpolation.end.scss
       pop: 1
+    - include: scss-expression
 
-###[ SCSS STRINGS w/ INTERPOLATION ]###########################################
+  scss-string-interpolation:
+    - match: (#)({)
+      captures:
+        1: punctuation.definition.variable.scss
+        2: punctuation.section.interpolation.begin.scss
+      push: scss-string-interpolation-body
 
-  single-quoted-string-body:
-    - meta_prepend: true
-    - include: scss-interpolation
-  double-quoted-string-body:
-    - meta_prepend: true
-    - include: scss-interpolation
-  single-quoted-url-body:
-    - meta_prepend: true
-    - include: scss-interpolation
-  double-quoted-url-body:
-    - meta_prepend: true
-    - include: scss-interpolation
-  unquoted-urls:
-    - meta_prepend: true
-    - include: scss-interpolation
+  scss-string-interpolation-body:
+    - clear_scopes: 1
+    - meta_scope: meta.interpolation.scss
+    - match: \}
+      scope: punctuation.section.interpolation.end.scss
+      pop: 1
+    - include: scss-expression
 
 ###[ SCSS VARS ]###############################################################
 

diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss
@@ -110,13 +110,22 @@ title: Blogging Like a Hacker
 @font-face {
     // This is parsed as a normal function call that takes a quoted string.
     src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");
-//            ^^^^^^^^^^^^^^^^^^^^ meta.interpolation.scss
-//                                ^ - meta.interpolation.scss
+//       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.font-face.css meta.property-list.css meta.block.css meta.property-value.css
+//       ^^^ meta.function-call.identifier.css support.function.url.css
+//          ^ meta.function-call.arguments.css meta.group.css punctuation.section.group.begin.css
+//           ^ meta.function-call.arguments.css meta.group.css meta.string.css string.quoted.double.css punctuation.definition.string.begin.css - meta.interpolation
+//            ^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css meta.path.url.css meta.string.css meta.interpolation.scss - string
+//                                ^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css meta.string.css string.quoted.double.css - meta.interpolation
+//                                                   ^ meta.function-call.arguments.css meta.group.css punctuation.section.group.end.css - meta.interpolation
+//                                                    ^ meta.property-value.css - meta.function-call - meta.interpolation
+//                                                     ^^^^^^ meta.function-call.identifier.css support.function.font-face.css - meta.interpolation
+//                                                           ^^^^^^^^^ meta.function-call.arguments.css meta.group.css - meta.interpolation
 //              ^^^^^^^^^^^^^^^^^ variable.other.scss
 //              ^ punctuation.definition.variable.scss
-//                                ^ meta.string.css
+
     // This is parsed as a normal function call that takes an arithmetic expression.
     src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");
+
     // This is parsed as an interpolated special function.
 /* TODO: unsure how this should be handled, */
     src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");
@@ -167,26 +176,32 @@ title: Blogging Like a Hacker
 @mixin prefix($property, $value, $prefixes) {
   @each $prefix in $prefixes {
     -#{$prefix}-#{$property}: $value;
+//  ^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-name.css support.type.property-name.css
+//                           ^^^^^^^ meta.property-value.css
+//  ^ - meta.interpolation
 //   ^^^^^^^^^^ meta.interpolation.scss
-//             ^ - meta.interpolation.scss
+//             ^ - meta.interpolation
+//              ^^^^^^^^^^^^ meta.interpolation.scss
+//                          ^ - meta.interpolation
 //   ^ punctuation.definition.variable.scss
 //    ^ punctuation.section.interpolation.begin.scss
-//            ^ punctuation.section.interpolation.end.scss
 //     ^^^^^^^ variable.other.scss
-//              ^^^^^^^^^^^^ meta.interpolation.scss
-//                          ^ - meta.interpolation.scss
+//            ^ punctuation.section.interpolation.end.scss
 //              ^ punctuation.definition.variable.scss
 //               ^ punctuation.section.interpolation.begin.scss
-//                         ^ punctuation.section.interpolation.end.scss
 //                ^^^^^^^^^ variable.other.scss
+//                         ^ punctuation.section.interpolation.end.scss
+//                          ^ punctuation.separator.key-value.css
+//                            ^^^^^^ variable.other.scss
+//                                  ^ punctuation.terminator.rule.css
   }
   #{$property}: $value;
-//^^^^^^^^^^^^ meta.interpolation.scss
-//            ^ - meta.interpolation.scss
+//^^^^^^^^^^^^ meta.property-name.css support.type.property-name.css meta.interpolation.scss
+//            ^ - meta.property-name - meta.interpolation
 //^ punctuation.definition.variable.scss
 // ^ punctuation.section.interpolation.begin.scss
-//           ^ punctuation.section.interpolation.end.scss
 //  ^^^^^^^^^ variable.other.scss
+//           ^ punctuation.section.interpolation.end.scss
 }
 
 .gray {
@@ -228,14 +243,36 @@ $warn: #dfa612;
 :root {
   --primary: #{$primary};
 //^^^^^^^^^ meta.property-name.css entity.other.custom-property.css
-  --accent: #{$accent};
-  --warn: #{$warn};
-//        ^^^^^^^^ meta.interpolation.scss
-//                ^ - meta.interpolation.scss
-//        ^ punctuation.definition.variable.scss
-//         ^ punctuation.section.interpolation.begin.scss
-//               ^ punctuation.section.interpolation.end.scss
-//          ^^^^^ variable.other.scss
+//         ^ - meta.property-name - meta.property-value
+//          ^ meta.property-value.css - meta.interpolation
+//           ^^^^^^^^^^^ meta.property-value.css meta.interpolation.scss
+//                      ^ - meta.property-value - meta.interpolation
+//         ^ punctuation.separator.key-value.css
+//           ^ punctuation.definition.variable.scss
+//            ^ punctuation.section.interpolation.begin.scss
+//             ^^^^^^^^ variable.other.scss
+//                     ^ punctuation.section.interpolation.end.scss
+//                      ^ punctuation.terminator.rule.css
+
+  --#{$accent}: #{$accent};
+//^^^^^^^^^^^^ meta.property-name.css entity.other.custom-property.css
+//^^ - meta.interpolation
+//  ^^^^^^^^^^ meta.interpolation.scss
+//  ^ punctuation.definition.variable.scss
+//   ^ punctuation.section.interpolation.begin.scss
+//    ^^^^^^^ variable.other.scss
+//           ^ punctuation.section.interpolation.end.scss
+//            ^ - meta.property-name - meta.property-value
+//             ^ meta.property-value.css - meta.interpolation
+//              ^^^^^^^^^^ meta.property-value.css meta.interpolation.scss
+//                        ^ - meta.property-value - meta.interpolation
+//            ^ punctuation.separator.key-value.css
+//              ^ punctuation.definition.variable.scss
+//               ^ punctuation.section.interpolation.begin.scss
+//                ^^^^^^^ variable.other.scss
+//                       ^ punctuation.section.interpolation.end.scss
+//                        ^ punctuation.terminator.rule.css
+
   // Even though this looks like a Sass variable, it's valid CSS so it's not
   // evaluated.
   --consumed-by-js: $primary;
@@ -553,13 +590,35 @@ nav ul {
 //                    ^^^^^^^^^^              variable.parameter.scss
 //                              ^             punctuation.separator.sequence.css
   #{$property}: $ltr-value;
-//^^^^^^^^^^^^             meta.interpolation.scss
-//            ^            punctuation.separator.key-value.css
+//^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.block.css
+//^^^^^^^^^^^^ meta.property-name.css support.type.property-name.css meta.interpolation.scss
+//            ^ - meta.property-name - meta.interpolation - meta.property-value
+//             ^^^^^^^^^^^ meta.property-value.css
+//                        ^ - meta.property-value
+//^ punctuation.definition.variable.scss
+// ^ punctuation.section.interpolation.begin.scss
+//  ^^^^^^^^^ variable.other.scss
+//           ^ punctuation.section.interpolation.end.scss
+//            ^ punctuation.separator.key-value.css
 //              ^^^^^^^^^^ variable.other.scss
+//              ^ punctuation.definition.variable.scss
 //                        ^ punctuation.terminator.rule.css
 
   [dir=rtl] & {
     #{$property}: $rtl-value;
+//  ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.block.css
+//  ^^^^^^^^^^^^ meta.property-name.css support.type.property-name.css meta.interpolation.scss
+//              ^ - meta.property-name - meta.interpolation - meta.property-value
+//               ^^^^^^^^^^^ meta.property-value.css
+//                          ^ - meta.property-value
+//  ^ punctuation.definition.variable.scss
+//   ^ punctuation.section.interpolation.begin.scss
+//    ^^^^^^^^^ variable.other.scss
+//             ^ punctuation.section.interpolation.end.scss
+//              ^ punctuation.separator.key-value.css
+//                ^^^^^^^^^^ variable.other.scss
+//                ^ punctuation.definition.variable.scss
+//                          ^ punctuation.terminator.rule.css
   }
 }
 
@@ -673,11 +732,34 @@ nav ul {
 
   @for $i from 0 to length($selectors) {
     #{nth($selectors, $i + 1)} {
-//  ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.scss
-//                            ^ meta.selector
+// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.block.css meta.property-list.css meta.block.css - meta.property-list meta.block meta.property-list meta.block meta.property-list meta.block
+//                             ^^ meta.property-list.css meta.block.css meta.property-list.css meta.block.css meta.property-list.css meta.block.css
+//  ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css meta.interpolation.scss
+//                            ^ meta.selector - meta.interpolation
+//  ^ punctuation.definition.variable.scss
+//   ^ punctuation.section.interpolation.begin.scss
+//    ^^^ meta.function-call.identifier.css variable.function.css support.function.scss
+//       ^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css
+//       ^ punctuation.section.group.begin.css
+//        ^^^^^^^^^^ variable.other.scss
+//                  ^ punctuation.separator.sequence.css
+//                    ^^ variable.other.scss
+//                       ^ keyword.operator.arithmetic.scss
+//                         ^ meta.number.integer.decimal.css constant.numeric.value.css
+//                          ^ punctuation.section.group.end.css
+//                           ^ punctuation.section.interpolation.end.scss
+//                             ^ punctuation.section.block.begin.css
       position: absolute;
       height: $height;
       margin-top: $i * $height;
+//   ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.block.css meta.property-list.css meta.block.css meta.property-list.css meta.block.css
+//    ^^^^^^^^^^ meta.property-name.css support.type.property-name.css
+//              ^ punctuation.separator.key-value.css
+//               ^^^^^^^^^^^^^ meta.property-value.css
+//                ^^ variable.other.scss
+//                   ^ keyword.operator.arithmetic.scss
+//                     ^^^^^^^ variable.other.scss
+//                            ^ punctuation.terminator.rule.css
     }
   }
 }