From ec45fd9ffbdffeb266e84871ace1dab63eb3a95e Mon Sep 17 00:00:00 2001 From: Koen Lagveen Date: Sat, 24 Feb 2024 15:02:13 +0100 Subject: [PATCH] use branching for map or expression --- Syntaxes/SCSS.sublime-syntax | 48 +++++++++++++++++++++--------------- Tests/syntax_test_scss.scss | 17 +++++++++---- 2 files changed, 40 insertions(+), 25 deletions(-) diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax index db460b2f..aed8766e 100644 --- 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 index 8c7d939b..446f2fa1 100644 --- 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 }