From 65822b4b5344769b92dce0253bb3ed0db5b421c7 Mon Sep 17 00:00:00 2001 From: deathaxe Date: Wed, 28 Feb 2024 18:57:21 +0100 Subject: [PATCH] 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. --- Syntaxes/SCSS.sublime-syntax | 84 +++++++++++++---------- Tests/syntax_test_scss.scss | 128 ++++++++++++++++++++++++++++------- 2 files changed, 152 insertions(+), 60 deletions(-) diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax index 74aa8820..28d11c07 100644 --- 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 index 53d744f9..b1613864 100644 --- 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 } } }