Skip to content

Commit

Permalink
complete tests for functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@braver
braver committed Feb 17, 2024
1 parent 207262c commit 946e561
Show file tree
Hide file tree
Showing 2 changed files with 183 additions and 16 deletions.
55 changes: 44 additions & 11 deletions Syntaxes/SCSS.sublime-syntax
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,8 +132,21 @@ contexts:
###[ CSS VALUE EXPRESSIONS ]###################################################

values:
- meta_append: true
- include: scss-expression
- include: value-prototype
- include: comma-delimiters
- include: arithmetic-operators
- include: important-operators
- include: vendor-prefixes
- include: builtin-functions
- include: color-values
- include: line-name-lists
- include: unicode-ranges
- include: numeric-constants
- include: quoted-strings
- include: none-constants
- include: scss-expression ## handle scss expressions before native functions etc.
- include: constants-or-functions
- include: illegal-groups

value-prototype:
- meta_append: true
Expand Down Expand Up @@ -171,8 +184,10 @@ contexts:
###[ SCSS EXPRESSIONS ]########################################################

scss-expression:
- include: scss-declaration
- include: scss-variables
- include: scss-operators
- include: sass-namespaced-functions

###[ SCSS INTERPOLATION ]######################################################

Expand Down Expand Up @@ -236,14 +251,34 @@ contexts:
###[ SCSS DECLARATIONS ]#######################################################

scss-declaration:
- match: '(\$)([a-zA-Z0-9_-][\w-]*)'
- match: '(\$)([a-zA-Z0-9_-][\w-]*)(?=:)'
captures:
0: variable.declaration.scss
1: punctuation.definition.variable.scss
push:
- include: comments
- include: terminator-pop
- include: property-values
- match: ':'
scope: punctuation.separator.key-value.css
push:
- include: comments
- include: terminator-pop
- include: values

###[ SCSS FUNCTIONS ]##########################################################

sass-namespaced-functions:
- match: '\b(?!var)(({{ident}})(\.))?([a-z_-]+)(?=\()'
scope: support.function.scss
captures:
2: entity.name.namespace.scss
3: punctuation.separator.namespace.scss
push:
- meta_scope: meta.function-call.identifier.css variable.function.css
- match: (?=\()
set:
- other-function-arguments-list-body
- function-arguments-list-begin


###[ SCSS OPERATORS ]##########################################################

Expand All @@ -252,6 +287,8 @@ contexts:
scope: keyword.operator.arithmetic.scss
- match: $|%|~|===|==|=|!=|!==|<=|>=|<<=|>>=|>>>=|<>|<|>|!|&&|\|\||\?\:|%=|\+=|\-=|&=|\bnot\b|\bor\b|\band\b|\bwhen\b
scope: keyword.operator.scss
- match: '[.]{3}'
scope: keyword.operator.spread.scss
- match: (?:\s*)\b(not|or|and)(?=\s)
captures:
1: keyword.operator.scss
Expand Down Expand Up @@ -294,7 +331,7 @@ contexts:
push:
- meta_scope: meta.at-rule.scss
- include: terminator-pop
- include: scss-expression
- include: values
- match: '(@)(warn|error){{break}}'
captures:
0: keyword.control.at-rule.warn.scss
Expand All @@ -310,7 +347,7 @@ contexts:
push:
- meta_scope: meta.at-rule.scss
- include: terminator-pop
- include: scss-expression
- include: values
- match: '(@)(at-root){{break}}'
captures:
0: keyword.control.directive.at-root.scss
Expand Down Expand Up @@ -346,8 +383,6 @@ contexts:
push:
- match: '(?=[,\)])'
pop: 1
- match: '[.]{3}'
scope: keyword.operator.spread.scss
- match: ':'
scope: punctuation.separator.key-value.css
- match: '\b(false|true|null)\b'
Expand All @@ -372,8 +407,6 @@ contexts:
pop: 2
- include: comments
- include: comma-delimiters
- match: '[.]{3}'
scope: keyword.operator.spread.scss
- match: ':'
scope: punctuation.separator.key-value.css
- include: values
Expand Down
144 changes: 139 additions & 5 deletions Tests/syntax_test_scss.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ title: Blogging Like a Hacker
//^^^^^ variable.declaration.scss
//^ punctuation.definition.variable.scss
// ^ punctuation.separator.key-value.css
// ^^^^^ meta.property-value.css meta.number.integer.decimal.css
// ^^^^^ meta.number.integer.decimal.css
// ^^^ constant.numeric.value.css
// ^^ constant.numeric.suffix.css
// ^ punctuation.terminator
Expand Down Expand Up @@ -648,7 +648,7 @@ nav ul {
// ^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.scss
// ^^^^^ constant.numeric
// ^ punctuation.separator.sequence.css
// ^^^^^^^ variable.other.scss
// ^^^^^^^ variable.declaration.scss
// ^ punctuation.separator.key-value.css
// ^^^ constant.numeric
// ^ punctuation.section.group.end.scss
Expand Down Expand Up @@ -688,13 +688,13 @@ nav ul {
@include syntax-colors(
$string: #080,
//^^^^^^^^^^^^^^ meta.function-call.arguments.scss
//^^^^^^^ variable.other.scss
//^^^^^^^ variable.declaration.scss
// ^ punctuation.separator.key-value.css
// ^^^^ constant.other.color
// ^ punctuation.separator.sequence
$comment: #800,
//^^^^^^^^^^^^^^ meta.function-call.arguments.scss
//^^^^^^^^ variable.other.scss
//^^^^^^^^ variable.declaration.scss
// ^ punctuation.separator.key-value.css
// ^^^^ constant.other.color
// ^ punctuation.separator.sequence
Expand Down Expand Up @@ -743,7 +743,7 @@ nav ul {
// ^^^^^^^^^^^^^^^^^^^ meta.property-list
// ^^^^^^^^^^^^^^^ meta.at-rule.scss
// ^ punctuation.section.group.begin.scss
// ^ punctuation.section.group.end.scss
// ^ punctuation.section.group.end.scss
// ^^^^^ meta.function-call.arguments
// ^^^^^ variable.other.scss
// ^ - meta.at-rule.scss
Expand Down Expand Up @@ -789,4 +789,138 @@ nav ul {
.sidebar {
float: left;
margin-left: fibonacci(4) * 1px;
// ^^^^^^^^^^^^ meta.property-value.css
// ^^^^^^^^^ meta.function-call.identifier.css variable.function.css
// ^^^ meta.function-call.arguments
// ^ punctuation.section.group.begin
// ^ constant.numeric
// ^ punctuation.section.group.end
}

// https://sass-lang.com/documentation/at-rules/function/#optional-arguments
@function invert($color, $amount: 100%) {
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function.declaration.scss
//^^^^^^^ keyword.control.directive.scss
//<- punctuation.definition.keyword.scss
// ^^^^^^ entity.name.function.scss
// ^^^^^^^^^^^^^^^^^^^^^^^ meta.function.parameters.scss
// ^ punctuation.section.group.begin.scss
// ^^^^^ variable.parameter.scss
// ^ punctuation.definition.variable.scss
// ^ punctuation.separator.sequence
// ^^^^^ variable.parameter.scss
// ^ punctuation.definition.variable.scss
// ^^^^^^^^ meta.function.declaration.scss
// ^ punctuation.separator.key-value.css
// ^^^^ constant.numeric
// ^ punctuation.section.group.end.scss
// ^ punctuation.section.block.begin.css
$inverse: change-color($color, $hue: hue($color) + 180);
@return mix($inverse, $color, $amount);
}

$primary-color: #036;
.header {
background-color: invert($primary-color, 80%);
}

// https://sass-lang.com/documentation/at-rules/function/#keyword-arguments
$primary-color: #036;
.banner {
background-color: $primary-color;
color: scale-color($primary-color, $lightness: +40%);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css
// ^^^^^^^^^^^ meta.function-call.identifier.css variable.function.css
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments
// ^ punctuation.terminator.rule.css
// ^ punctuation.section.group.begin
// ^ punctuation.section.group.end
// ^^^^^^^^^^^^ variable.other.scss
// ^ punctuation.definition.variable.scss
// ^ punctuation.separator.sequence
// ^^^^^^^^^ variable.declaration.scss
// ^ punctuation.definition.variable.scss
// ^ punctuation.separator.key-value.css
// ^^^^ meta.number
// ^ keyword.operator
// ^^^ constant.numeric
}

// https://sass-lang.com/documentation/at-rules/function/#taking-arbitrary-arguments
@function sum($numbers...) {
// ^^^ keyword.operator.spread.scss
$sum: 0;
@each $number in $numbers {
$sum: $sum + $number;
}
@return $sum;
}

.micro {
width: sum(50px, 30px, 100px);
}

// https://sass-lang.com/documentation/at-rules/function/#passing-arbitrary-arguments
$widths: 50px, 30px, 100px;
.micro {
width: min($widths...);
// ^^^ keyword.operator.spread.scss
}

//=============================================================================
// Function: return
// https://sass-lang.com/documentation/at-rules/function/#return
//=============================================================================
@use "sass:string";

@function str-insert($string, $insert, $index) {
// Avoid making new strings if we don't need to.
@if string.length($string) == 0 {
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.scss
// ^ - meta.at-rule.scss
// ^^^^^^^^^^^^^ meta.function-call.identifier.css
// ^^^^^^^^^^^^^ variable.function.css support.function.scss
// ^^^^^^ entity.name.namespace.scss
// ^ punctuation.separator.namespace.scss
// ^ meta.function-call.arguments.css punctuation.section.group.begin.css
// ^^ keyword.operator
// ^ constant.numeric
// ^ punctuation.section.block.begin.css
@return $insert;
// ^^^^^^^ meta.at-rule.scss keyword.control.directive.return.scss
// ^^^^^^^ variable.other.scss
// ^ punctuation.terminator.rule.css
}

$before: string.slice($string, 0, $index);
// ^^^^^^^^^^^^ meta.function-call.identifier.css
// ^^^^^^^^^^^^ variable.function.css support.function.scss
// ^^^^^^ entity.name.namespace.scss
// ^ punctuation.separator.namespace.scss
// ^ meta.function-call.arguments.css punctuation.section.group.begin.css
// ^^^^^^^ variable.other.scss

$after: string.slice($string, $index);
@return $before + $insert + $after;
}


//=============================================================================
// Other Functions
// https://sass-lang.com/documentation/at-rules/function/#other-functions
//=============================================================================
@debug var(--main-bg-color); // var(--main-bg-color)
// ^^^ meta.at-rule.scss keyword.control.at-rule.debugger.scss
//<- punctuation.definition.keyword.scss
// ^^^ support.function.var.css
// ^ punctuation.terminator.rule.css
// ^ comment
$primary: #f2ece4;
$accent: #e1d7d2;
@debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)
// ^^^ meta.at-rule.scss keyword.control.at-rule.debugger.scss
//<- punctuation.definition.keyword.scss
// ^^^^^^^^^^^^^^^ support.function.gradient.css
// ^ punctuation.section.group.begin.css
// ^ punctuation.separator.sequence.css
// ^ punctuation.terminator.rule.css

0 comments on commit 946e561

Please sign in to comment.