Skip to content

Commit

Permalink
Nested function calls in CSS function call argument lists
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@deathaxe
deathaxe committed Mar 9, 2024
1 parent beb4dfb commit ce470cd
Show file tree
Hide file tree
Showing 2 changed files with 253 additions and 0 deletions.
196 changes: 196 additions & 0 deletions Syntaxes/SCSS.sublime-syntax
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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:
Expand Down
57 changes: 57 additions & 0 deletions Tests/syntax_test_scss.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

0 comments on commit ce470cd

Please sign in to comment.