From ce470cd29a5d82ad6d0d2c1334f0f05eaa1fd6dc Mon Sep 17 00:00:00 2001 From: deathaxe Date: Sat, 9 Mar 2024 19:08:01 +0100 Subject: [PATCH] Nested function calls in CSS function call argument lists Ideally, unknown constants and function calls should be scoped by CSS syntax definition natively. Until that's the case, append unqualified function calls to nearly each function call argument list context - except those, which already support them due to other additions. --- Syntaxes/SCSS.sublime-syntax | 196 +++++++++++++++++++++++++++++++++++ Tests/syntax_test_scss.scss | 57 ++++++++++ 2 files changed, 253 insertions(+) diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax index 6661b0ca..6df6e309 100644 --- a/Syntaxes/SCSS.sublime-syntax +++ b/Syntaxes/SCSS.sublime-syntax @@ -110,6 +110,13 @@ contexts: - include: scss-at-root - include: scss-at-use +###[ CONTAINER QUERIES ]####################################################### + + container-style-queries: + - meta_append: true + - include: scss-interpolations + - include: scss-value-expressions + ###[ CSS MEDIA QUERIES ]####################################################### media-query-conditions: @@ -262,6 +269,195 @@ contexts: - meta_append: true - include: scss-value-expressions + counter-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + font-format-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + format-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + layer-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + local-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + supports-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + symbols-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + color-color-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + hsl-color-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + rgb-color-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + blend-adjust-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + hue-adjust-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + rgba-adjust-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + saturation-adjust-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + tint-adjust-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + filter-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + blur-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + brightness-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + drop-shadow-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + hue-rotate-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + minmax-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + repeat-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + cross-fade-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + image-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + image-set-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + conic-gradient-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + radial-gradient-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + circle-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + inset-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + polygon-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + rect-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + cubic-bezier-timing-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + step-timing-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + transform-function-angles-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + transform-function-angles-scalars-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + transform-function-lengths-percentage-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + transform-function-scalars-percentage-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + transform-function-scalars-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + transform-function-angle-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + transform-function-length-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + transform-function-length-percentage-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + transform-function-scalar-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + url-function-arguments-list-body: + - meta_content_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-prototype + - include: scss-unqualified-functions + - include: quoted-urls + - include: unquoted-urls + + url-regexp-function-arguments-list-body: + - meta_content_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-prototype + - include: scss-unqualified-functions + - include: quoted-strings + + calc-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + + toggle-function-arguments-list-body: + - meta_append: true + - include: scss-identifiers-or-functions + ###[ CSS IDENTIFIERS ]######################################################### identifier-content: diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss index e9f6a54b..4141136d 100644 --- a/Tests/syntax_test_scss.scss +++ b/Tests/syntax_test_scss.scss @@ -2206,3 +2206,60 @@ $color2 : #f00; // ^^^^ meta.declaration.identifier.scss $color3 : #f00; // ^^^^ meta.declaration.identifier.scss + +//============================================================================= +// Nested SCSS function calls +// Handling nexted functions is a bit tricky due to many unique function +// argument contexts in CSS. +//============================================================================= + +@document regexp(scss_func($arg)) {} +// ^^^^^^ meta.function-call.identifier.css support.function.regexp.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^^^^^^^^^ meta.function-call.arguments.css meta.function-call.identifier.css variable.function.css +// ^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^ - meta.function-call + +.test-nested-function-calls { + + prop: blend(scss_func($arg)); +// ^^^^^ meta.function-call.identifier.css support.function.color.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^^^^^^^^^ meta.function-call.arguments.css meta.function-call.identifier.css variable.function.css +// ^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^ - meta.function-call + + prop: calc(scss_func($arg)); +// ^^^^ meta.function-call.identifier.css support.function.calc.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^^^^^^^^^ meta.function-call.arguments.css meta.function-call.identifier.css variable.function.css +// ^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^ - meta.function-call + + prop: color(scss_func($arg)); +// ^^^^^ meta.function-call.identifier.css support.function.color.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^^^^^^^^^ meta.function-call.arguments.css meta.function-call.identifier.css variable.function.css +// ^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^ - meta.function-call + + prop: hsla(scss_func($arg)); +// ^^^^ meta.function-call.identifier.css support.function.color.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^^^^^^^^^ meta.function-call.arguments.css meta.function-call.identifier.css variable.function.css +// ^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^ - meta.function-call + + prop: url(scss_func($arg)); +// ^^^ meta.function-call.identifier.css support.function.url.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^^^^^^^^^ meta.function-call.arguments.css meta.function-call.identifier.css variable.function.css +// ^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css +// ^ meta.function-call.arguments.css - meta.function-call meta.function-call +// ^ - meta.function-call +} \ No newline at end of file