From 917d2691e33e1a073d60e49d7b60575947d412e2 Mon Sep 17 00:00:00 2001 From: Koen Lageveen Date: Mon, 3 Dec 2018 12:12:50 +0100 Subject: [PATCH] return of the specific built-in functions --- Syntaxes/SCSS.sublime-syntax | 910 ++++++++++++++++++++++--- Syntaxes/Sass.sublime-syntax | 911 ++++++++++++++++++++++--- Tests/syntax_test_scss.scss | 1248 ++++++++++++++++++---------------- 3 files changed, 2271 insertions(+), 798 deletions(-) diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax index b4a285b1..20a3aa99 100644 --- a/Syntaxes/SCSS.sublime-syntax +++ b/Syntaxes/SCSS.sublime-syntax @@ -1383,47 +1383,16 @@ contexts: - include: comma-delimiter - match: ':' scope: punctuation.separator.css - - match: '[0-9]+(x)' - scope: constant.numeric.css - captures: - 1: keyword.other.unit.css - include: var-function - include: minmax-function - include: color-adjuster-operators - include: color-adjuster-functions # must be included before `color-values` + - include: color-functions + - include: color-hex-values - include: numeric-values - include: integer-type - - include: color-values - include: image-type - include: literal-string - - match: "-(?:webkit|moz|ms|o)-" - scope: support.type.vendor-prefix.css - - match: '\b(cyclic|numeric|alphabetic|symbolic|fixed)\b' - scope: support.constant.symbol-type.css - - match: '(end|middle|start)' - scope: support.keyword.timing-direction.css - - match: '\b(auto-fill|auto-fit)\b' - scope: support.keyword.repetitions.css - - match: '\b(top|right|bottom|left|center|closest-side|farthest-side|nonzero|evenodd|max-content|min-content|auto)\b' - scope: support.constant.property-value.css - - match: '\b(round|to|at|circle|ellipse)\b' - scope: keyword.other.css - - match: '\b(rgb|hsl|hwb)\b' - scope: keyword.other.color-space.css - - match: |- - (?x)\b( - left - | center - | right - | top - | bottom - | closest-corner - | closest-side - | farthest-corner - | farthest-side - )\b - scope: support.constant.property-value.css - - include: property-value-constants - include: sass-variables - include: sass-functions - include: sass-custom-functions @@ -1435,6 +1404,7 @@ contexts: - include: attr-function - include: calc-function - include: cross-fade-function + - include: filter-functions - include: gradient-functions - include: image-function - include: image-set-function @@ -1443,12 +1413,27 @@ contexts: - include: var-function - include: color-adjuster-functions - - match: '\b(hue-rotate|drop-shadow|blur|brightness|contrast|grayscale|invert|opacity|saturate|sepia|filter|symbols|format|local|matrix3d|scale3d|matrix|scale|translate(3d)?|translate[XYZ]|rotate[XYZ]?|skew[XY]?|perspective|rotate3d|scale[XYZ]|cubic-bezier|steps|rect|inset|circle|ellipse|polygon|toggle|repeat)(?=\()' - scope: support.function.css + # filter() + # https://drafts.fxtf.org/filters/#funcdef-filter + - match: '\b(filter)(?=\()' + scope: support.function.filter.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: image-type + - include: literal-string + - include: filter-functions + - include: sass-value-expression + # counter() + # https://drafts.csswg.org/css-lists-3/#funcdef-counter - match: '\b(counter)(?=\()' scope: support.function.counter.css push: @@ -1471,6 +1456,8 @@ contexts: scope: support.constant.property-value.counter-style.css - include: sass-value-expression + # counters() + # https://drafts.csswg.org/css-lists-3/#funcdef-counters - match: '\b(counters)(?=\()' scope: support.function.counter.css push: @@ -1494,10 +1481,449 @@ contexts: scope: support.constant.property-value.counter-style.css - include: sass-value-expression + # symbols() + # https://drafts.csswg.org/css-counter-styles-3/#symbols-function + - match: '\b(symbols)(?=\()' + scope: support.function.counter.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - match: '\b(cyclic|numeric|alphabetic|symbolic|fixed)\b' + scope: support.constant.symbol-type.css + - include: comma-delimiter + - include: literal-string + - include: image-type + - include: sass-value-expression + + # format() + # https://drafts.csswg.org/css-fonts-3/#descdef-src + # format() is also mentioned in `issue 2` at https://drafts.csswg.org/css-images-3/#issues-index + # but does not seem to be implemented in any manner + - match: '\b(format)(?=\()' + scope: support.function.font-face.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: literal-string + - include: sass-value-expression + + # local() + # https://drafts.csswg.org/css-fonts-3/#descdef-src + - match: '\b(local)(?=\()' + scope: support.function.font-face.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: sass-value-expression + - include: unquoted-string + + # Transform Functions + # https://www.w3.org/TR/css-transforms-1/#transform-functions + + # transform functions with comma separated types + # matrix(), scale(), matrix3d(), scale3d() + - match: '\b(matrix3d|scale3d|matrix|scale)(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: number-type + - include: var-function + - include: sass-value-expression + + # transform functions with comma separated or types + # translate(), translate3d() + - match: '\b(translate(3d)?)(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: percentage-type + - include: length-type + - include: number-type + - include: var-function + - include: sass-value-expression + + # transform functions with a single or type + # translateX(), translateY() + - match: '\b(translate[XY])(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: percentage-type + - include: length-type + - include: number-type + - include: sass-value-expression + + # transform functions with a single type + # rotate(), skewX(), skewY(), rotateX(), rotateY(), rotateZ() + - match: '\b(rotate[XYZ]?|skew[XY])(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: angle-type + - include: sass-value-expression + + # transform functions with comma separated types + # skew() + - match: '\b(skew)(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: angle-type + - include: sass-value-expression + + # transform functions with a single type + # translateZ(), perspective() + - match: '\b(translateZ|perspective)(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: length-type + - include: sass-value-expression + + # transform functions with a comma separated or types + # rotate3d() + - match: '\b(rotate3d)(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: angle-type + - include: number-type + - include: sass-value-expression + + # transform functions with a single type + # scaleX(), scaleY(), scaleZ() + - match: '\b(scale[XYZ])(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: number-type + - include: sass-value-expression + + # Timing Functions + # https://www.w3.org/TR/web-animations-1/#timing-functions + + # cubic-bezier() + # https://www.w3.org/TR/web-animations-1/#cubic-bzier-timing-function + - match: '\b(cubic-bezier)(?=\()' + scope: support.function.timing.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: number-type + - include: sass-value-expression + + # steps() + # https://www.w3.org/TR/web-animations-1/#step-timing-function + - match: '\b(steps)(?=\()' + scope: support.function.timing.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: integer-type + - match: (end|middle|start) + scope: support.keyword.timing-direction.css + - include: sass-value-expression + + # Shape Functions + # https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape + + # rect() - Deprecated + # https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect + - match: '\b(rect)(?=\()' + scope: support.function.shape.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - match: \bauto\b + scope: support.constant.property-value.css + - include: length-type + - include: sass-value-expression + + # inset() + # https://www.w3.org/TR/css-shapes-1/#funcdef-inset + - match: '\b(inset)(?=\()' + scope: support.function.shape.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - match: '\bround\b' + scope: keyword.other.css + - include: length-type + - include: percentage-type + - include: sass-value-expression + + # circle() + # https://www.w3.org/TR/css-shapes-1/#funcdef-circle + # ellipse() + # https://www.w3.org/TR/css-shapes-1/#funcdef-ellipse + - match: '\b(circle|ellipse)(?=\()' + scope: support.function.shape.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - match: '\bat\b' + scope: keyword.other.css + - match: '\b(top|right|bottom|left|center|closest-side|farthest-side)\b' + scope: support.constant.property-value.css + - include: length-type + - include: percentage-type + - include: sass-value-expression + + # polygon() + # https://www.w3.org/TR/css-shapes-1/#funcdef-polygon + - match: '\b(polygon)(?=\()' + scope: support.function.shape.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - include: comment-block + - match: '(?=\))' + pop: true + - match: '\b(nonzero|evenodd)\b' + scope: support.constant.property-value.css + - include: length-type + - include: percentage-type + - include: calc-function + - match: ',' + scope: punctuation.separator.sequence.css + - include: sass-value-expression + + # toggle() + # https://www.w3.org/TR/css3-values/#toggle-notation + - match: '\b(toggle)(?=\()' + scope: support.function.toggle.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: vendor-prefix + - include: property-value-constants + - include: numeric-values + - include: color-values + - include: literal-string + - include: sass-value-expression + + # repeat() + # https://drafts.csswg.org/css-grid/#funcdef-repeat + - match: '\b(repeat)(?=\()' + scope: support.function.grid.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: length-type + - include: percentage-type + - include: minmax-function + - include: integer-type + - include: var-function + - match: \b(auto-fill|auto-fit)\b + scope: support.keyword.repetitions.css + - match: \b(max-content|min-content|auto)\b + scope: support.constant.property-value.css + - include: sass-value-expression + + # var() + # https://drafts.csswg.org/css-variables/#funcdef-var + var-function: + - match: '\b(var)(?=\()' + scope: support.function.var.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: custom-property-name + - include: sass-value-expression + + # Filter Functions + # https://drafts.fxtf.org/filters/#typedef-filter-function + filter-functions: + # blur() + # https://drafts.fxtf.org/filters/#funcdef-filter-blur + - match: '\b(blur)(?=\()' + scope: support.function.filter.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: length-type + - include: sass-value-expression + + # brightness(), contrast(), grayscale(), invert(), opacity(), saturate(), sepia() + # https://drafts.fxtf.org/filters/#funcdef-filter-brightness + - match: '\b(brightness|contrast|grayscale|invert|opacity|saturate|sepia)(?=\()' + scope: support.function.filter.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: percentage-type + - include: number-type + - include: sass-value-expression + + # drop-shadow() + # https://drafts.fxtf.org/filters/#funcdef-filter-drop-shadow + - match: '\b(drop-shadow)(?=\()' + scope: support.function.filter.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: length-type + - include: color-values + - include: sass-value-expression - var-function: - - match: '\b(var)(?=\()' - scope: support.function.var.css + # hue-rotate() + # https://drafts.fxtf.org/filters/#funcdef-filter-hue-rotate + - match: '\b(hue-rotate)(?=\()' + scope: support.function.filter.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator @@ -1507,22 +1933,40 @@ contexts: - meta_scope: meta.group.css - match: '(?=\))' pop: true - - match: '(--)({{nmchar}}+)' - captures: - 0: meta.property-name.css support.type.custom-property.css - 1: punctuation.definition.custom-property.css - 2: support.type.custom-property.name.css - - include: comma-delimiter - - include: property-values - - include: sass-script-expression + - include: angle-type + - include: sass-value-expression + # calc() + # https://www.w3.org/TR/css3-values/#funcdef-calc calc-function: - match: '\b(calc)(?=\()' scope: support.function.calc.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - match: '\(' + scope: punctuation.definition.group.begin.css + push: inside-calc-parens + - match: '' + pop: true + + inside-calc-parens: + - meta_scope: meta.group.css + - match: '(?=\))' + set: function-notation-terminator + - include: comment-block + - include: calc-function + - include: var-function + - include: numeric-values + - include: attr-function + - match: "[-/*+]" + scope: keyword.operator.css + - include: sass-value-expression + - match: '\(' + scope: punctuation.definition.group.begin.css + push: inside-calc-parens + # attr() + # https://www.w3.org/TR/css3-values/#funcdef-attr attr-function: - match: '\b(attr)(?=\()' scope: support.function.attr.css @@ -1560,6 +2004,8 @@ contexts: - include: color-values - include: sass-value-expression + # url() + # https://drafts.csswg.org/css-images-3/#url-notation url-function: - match: '\b(url)(?=\()' scope: support.function.url.css @@ -1573,15 +2019,11 @@ contexts: - match: '(?=\))' pop: true - include: literal-string - - include: comment-block - - include: var-function - - include: sass-variables - - include: sass-functions - - include: sass-custom-functions - - include: sass-interpolation + - include: sass-value-expression - include: unquoted-string - - include: sass-operators + # url-prefix() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-prefix url-prefix-function: - match: '\b(url-prefix)(?=\()' scope: support.function.url-prefix.css @@ -1595,15 +2037,11 @@ contexts: - match: '(?=\))' pop: true - include: literal-string - - include: comment-block - - include: var-function - - include: sass-variables - - include: sass-functions - - include: sass-custom-functions - - include: sass-interpolation + - include: sass-value-expression - include: unquoted-string - - include: sass-operators + # domain() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-domain domain-function: - match: '\b(domain)(?=\()' scope: support.function.domain.css @@ -1617,29 +2055,49 @@ contexts: - match: '(?=\))' pop: true - include: literal-string - - include: comment-block - - include: var-function - - include: sass-variables - - include: sass-functions - - include: sass-custom-functions - - include: sass-interpolation + - include: sass-value-expression - include: unquoted-string - - include: sass-operators + # regexp() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-regexp regexp-function: - match: '\b(regexp)(?=\()' scope: support.function.regexp.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: literal-string + - include: sass-value-expression + # image() + # https://drafts.csswg.org/css-images-3/#funcdef-image image-function: - match: '\b(image)(?=\()' scope: support.function.image.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: image-type + - include: literal-string + - include: color-values + - include: comma-delimiter + - include: sass-value-expression + - include: unquoted-string + # image-set() + # https://drafts.csswg.org/css-images-3/#funcdef-image-set image-set-function: - match: '\b(image-set)(?=\()' scope: support.function.image.css @@ -1661,27 +2119,76 @@ contexts: scope: constant.numeric.css captures: 1: keyword.other.unit.css - - include: comment-block - - include: var-function - - include: sass-variables - - include: sass-functions - - include: sass-custom-functions - - include: sass-interpolation + - include: sass-value-expression - include: unquoted-string - - include: sass-operators + # Gradient Functions + # https://drafts.csswg.org/css-images-3/#gradients gradient-functions: + # linear-gradient() + # https://drafts.csswg.org/css-images-3/#linear-gradients + # repeating-linear-gradient() + # https://drafts.csswg.org/css-images-3/#funcdef-repeating-linear-gradient - match: '\b((?:repeating-)?linear-gradient)(?=\()' scope: support.function.gradient.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: angle-type + - include: comma-delimiter + - include: color-values + - include: percentage-type + - include: length-type + - match: '\bto\b' + scope: keyword.other.css + - match: \b(top|right|bottom|left)\b + scope: support.constant.property-value.css + - include: sass-value-expression + + # radial-gradient() + # https://drafts.csswg.org/css-images-3/#radial-gradients + # repeating-radial-gradient() + # https://drafts.csswg.org/css-images-3/#funcdef-repeating-radial-gradient - match: '\b((?:repeating-)?radial-gradient)(?=\()' scope: support.function.gradient.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: color-values + - include: percentage-type + - include: length-type + - match: '\b(at|circle|ellipse)\b' + scope: keyword.other.css + - match: |- + (?x)\b( + left + | center + | right + | top + | bottom + | closest-corner + | closest-side + | farthest-corner + | farthest-side + )\b + scope: support.constant.property-value.css + - include: sass-value-expression + # cross-fade() + # https://drafts.csswg.org/css-images-3/#cross-fade-function cross-fade-function: - match: '\b(cross-fade)(?=\()' scope: support.function.image.css @@ -1699,40 +2206,237 @@ contexts: - include: color-values - include: image-type - include: literal-string - - include: comment-block - - include: var-function - - include: sass-variables - - include: sass-functions - - include: sass-custom-functions - - include: sass-interpolation + - include: sass-value-expression - include: unquoted-string - - include: sass-operators + # minmax() + # https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax minmax-function: - match: '\b(minmax)(?=\()' scope: support.function.grid.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: length-type + - match: \b(max-content|min-content)\b + scope: support.constant.property-value.css + - include: sass-value-expression + # Color Functions + # https://drafts.csswg.org/css-color color-functions: - - match: '\b(rgba?|hsla?|hwb|gray|device-cmyk|color)(?=\()' + # rgb(), rgba() + # https://drafts.csswg.org/css-color/#rgb-functions + - match: '\b(rgba?)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: percentage-type + - include: number-type + # scss add overloads: + # https://sass-lang.com/documentation/Sass/Script/Functions.html#rgba-instance_method + - include: color-values + - include: sass-value-expression + + # hsl(), hsla() + # https://drafts.csswg.org/css-color/#the-hsl-notation + # hwb() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-hwb + - match: '\b(hsla?|hwb)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: angle-type + - include: percentage-type + - include: number-type + - include: sass-value-expression + + # gray() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-gray + - match: '\b(gray)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: percentage-type + - include: number-type + - include: sass-value-expression + + # device-cmyk() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-device-cmyk + - match: '\b(device-cmyk)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: color-adjuster-functions # must be included before `color-values` + - include: color-values + - include: percentage-type + - include: number-type + - include: sass-value-expression + + # color-mod() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-color-mod + - match: '\b(color)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: color-adjuster-functions # must be included before `color-values` + - include: var-function + - include: color-values + - include: angle-type + - include: number-type + - include: sass-value-expression + # Color Adjuster Functions - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#typedef-color-adjuster color-adjuster-functions: - - match: '\b(blenda|blend|tint|shade|red|green|blue|alpha|a|hue|h|saturation|lightness|whiteness|blackness|[slwb])(?=\()' + # red(), green(), blue(), alpha() - Not yet implemented by browsers + - match: '\b(red|green|blue|alpha|a)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: color-adjuster-operators + - include: percentage-type + - include: number-type + - include: sass-value-expression + + # hue() - Not yet implemented by browsers + - match: '\b(hue|h)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: color-adjuster-operators + - include: angle-type + - include: sass-value-expression + + # saturation(), lightness(), whiteness(), blackness() - Not yet implemented by browsers + - match: '\b(saturation|lightness|whiteness|blackness|[slwb])(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: color-adjuster-operators + - include: percentage-type + - include: sass-value-expression + + # tint(), shade(), contrast() - Not yet implemented by browsers + # contrast() interferes with the contrast() filter function; + # therefore, it is not yet implemented here + - match: '\b(tint|shade)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: percentage-type + - include: sass-value-expression + + # blend(), blenda() - Not yet implemented by browsers + - match: '\b(blenda|blend)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - match: '\b(rgb|hsl|hwb)\b' + scope: keyword.other.color-space.css + - include: color-values + - include: percentage-type + - include: var-function + - include: sass-value-expression + + color-adjuster-operators: - match: '[\-\+*](?=\s+)' scope: keyword.operator.css + color-hex-values: + - match: '(#)(\h{3}|\h{6})\b' + scope: constant.other.color.rgb-value.css + captures: + 1: punctuation.definition.constant.css + - match: '(#)(\h{4}|\h{8})\b' + scope: constant.other.color.rgba-value.css + captures: + 1: punctuation.definition.constant.css + function-notation-terminator: - match: '\)' scope: meta.group.css punctuation.definition.group.end.css @@ -1743,6 +2447,9 @@ contexts: captures: 1: punctuation.separator.css + vendor-prefix: + - match: "-(?:webkit|moz|ms|o)-" + scope: support.type.vendor-prefix.css unicode-range: - match: |- @@ -1763,23 +2470,24 @@ contexts: 2: entity.name.namespace.wildcard.css 3: punctuation.separator.namespace.css + # Custom Properties + # https://drafts.csswg.org/css-variables/#typedef-custom-property-name + custom-property-name: + - match: '(--)({{nmchar}}+)' + scope: support.type.custom-property.css + captures: + 1: punctuation.definition.custom-property.css + 2: support.type.custom-property.name.css color-values: - include: color-functions + - include: color-hex-values - match: \b(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)\b scope: support.constant.color.w3c-standard-color-name.css - match: \b(aliceblue|antiquewhite|aquamarine|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|gainsboro|ghostwhite|gold|goldenrod|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|magenta|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olivedrab|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|rebeccapurple|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato|turquoise|violet|wheat|whitesmoke|yellowgreen)\b scope: support.constant.color.w3c-extended-color-keywords.css - match: \b((?i)currentColor|transparent)\b scope: support.constant.color.w3c-special-color-keyword.css - - match: '(#)(\h{3}|\h{6})\b' - scope: constant.other.color.rgb-value.css - captures: - 1: punctuation.definition.constant.css - - match: '(#)(\h{4}|\h{8})\b' - scope: constant.other.color.rgba-value.css - captures: - 1: punctuation.definition.constant.css numeric-values: - include: angle-type @@ -1846,7 +2554,7 @@ contexts: unquoted-string: - - match: '[^\s''"]' + - match: '\b[^\s''"]+\b' scope: string.unquoted.css unquoted-concatenated-string: diff --git a/Syntaxes/Sass.sublime-syntax b/Syntaxes/Sass.sublime-syntax index 5950861b..fc5bf831 100644 --- a/Syntaxes/Sass.sublime-syntax +++ b/Syntaxes/Sass.sublime-syntax @@ -1416,47 +1416,16 @@ contexts: - include: comma-delimiter - match: ':' scope: punctuation.separator.css - - match: '[0-9]+(x)' - scope: constant.numeric.css - captures: - 1: keyword.other.unit.css - include: var-function - include: minmax-function - include: color-adjuster-operators - include: color-adjuster-functions # must be included before `color-values` + - include: color-functions + - include: color-hex-values - include: numeric-values - include: integer-type - - include: color-values - include: image-type - include: literal-string - - match: "-(?:webkit|moz|ms|o)-" - scope: support.type.vendor-prefix.css - - match: '\b(cyclic|numeric|alphabetic|symbolic|fixed)\b' - scope: support.constant.symbol-type.css - - match: '(end|middle|start)' - scope: support.keyword.timing-direction.css - - match: '\b(auto-fill|auto-fit)\b' - scope: support.keyword.repetitions.css - - match: '\b(top|right|bottom|left|center|closest-side|farthest-side|nonzero|evenodd|max-content|min-content|auto)\b' - scope: support.constant.property-value.css - - match: '\b(round|to|at|circle|ellipse)\b' - scope: keyword.other.css - - match: '\b(rgb|hsl|hwb)\b' - scope: keyword.other.color-space.css - - match: |- - (?x)\b( - left - | center - | right - | top - | bottom - | closest-corner - | closest-side - | farthest-corner - | farthest-side - )\b - scope: support.constant.property-value.css - - include: property-value-constants - include: sass-variables - include: sass-functions - include: sass-custom-functions @@ -1468,6 +1437,7 @@ contexts: - include: attr-function - include: calc-function - include: cross-fade-function + - include: filter-functions - include: gradient-functions - include: image-function - include: image-set-function @@ -1476,12 +1446,27 @@ contexts: - include: var-function - include: color-adjuster-functions - - match: '\b(hue-rotate|drop-shadow|blur|brightness|contrast|grayscale|invert|opacity|saturate|sepia|filter|symbols|format|local|matrix3d|scale3d|matrix|scale|translate(3d)?|translate[XYZ]|rotate[XYZ]?|skew[XY]?|perspective|rotate3d|scale[XYZ]|cubic-bezier|steps|rect|inset|circle|ellipse|polygon|toggle|repeat)(?=\()' - scope: support.function.css + # filter() + # https://drafts.fxtf.org/filters/#funcdef-filter + - match: '\b(filter)(?=\()' + scope: support.function.filter.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: image-type + - include: literal-string + - include: filter-functions + - include: sass-value-expression + # counter() + # https://drafts.csswg.org/css-lists-3/#funcdef-counter - match: '\b(counter)(?=\()' scope: support.function.counter.css push: @@ -1504,6 +1489,8 @@ contexts: scope: support.constant.property-value.counter-style.css - include: sass-value-expression + # counters() + # https://drafts.csswg.org/css-lists-3/#funcdef-counters - match: '\b(counters)(?=\()' scope: support.function.counter.css push: @@ -1527,9 +1514,449 @@ contexts: scope: support.constant.property-value.counter-style.css - include: sass-value-expression - var-function: - - match: '\b(var)(?=\()' - scope: support.function.var.css + # symbols() + # https://drafts.csswg.org/css-counter-styles-3/#symbols-function + - match: '\b(symbols)(?=\()' + scope: support.function.counter.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - match: '\b(cyclic|numeric|alphabetic|symbolic|fixed)\b' + scope: support.constant.symbol-type.css + - include: comma-delimiter + - include: literal-string + - include: image-type + - include: sass-value-expression + + # format() + # https://drafts.csswg.org/css-fonts-3/#descdef-src + # format() is also mentioned in `issue 2` at https://drafts.csswg.org/css-images-3/#issues-index + # but does not seem to be implemented in any manner + - match: '\b(format)(?=\()' + scope: support.function.font-face.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: literal-string + - include: sass-value-expression + + # local() + # https://drafts.csswg.org/css-fonts-3/#descdef-src + - match: '\b(local)(?=\()' + scope: support.function.font-face.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: sass-value-expression + - include: unquoted-string + + # Transform Functions + # https://www.w3.org/TR/css-transforms-1/#transform-functions + + # transform functions with comma separated types + # matrix(), scale(), matrix3d(), scale3d() + - match: '\b(matrix3d|scale3d|matrix|scale)(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: number-type + - include: var-function + - include: sass-value-expression + + # transform functions with comma separated or types + # translate(), translate3d() + - match: '\b(translate(3d)?)(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: percentage-type + - include: length-type + - include: number-type + - include: var-function + - include: sass-value-expression + + # transform functions with a single or type + # translateX(), translateY() + - match: '\b(translate[XY])(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: percentage-type + - include: length-type + - include: number-type + - include: sass-value-expression + + # transform functions with a single type + # rotate(), skewX(), skewY(), rotateX(), rotateY(), rotateZ() + - match: '\b(rotate[XYZ]?|skew[XY])(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: angle-type + - include: sass-value-expression + + # transform functions with comma separated types + # skew() + - match: '\b(skew)(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: angle-type + - include: sass-value-expression + + # transform functions with a single type + # translateZ(), perspective() + - match: '\b(translateZ|perspective)(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: length-type + - include: sass-value-expression + + # transform functions with a comma separated or types + # rotate3d() + - match: '\b(rotate3d)(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: angle-type + - include: number-type + - include: sass-value-expression + + # transform functions with a single type + # scaleX(), scaleY(), scaleZ() + - match: '\b(scale[XYZ])(?=\()' + scope: support.function.transform.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: number-type + - include: sass-value-expression + + # Timing Functions + # https://www.w3.org/TR/web-animations-1/#timing-functions + + # cubic-bezier() + # https://www.w3.org/TR/web-animations-1/#cubic-bzier-timing-function + - match: '\b(cubic-bezier)(?=\()' + scope: support.function.timing.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: number-type + - include: sass-value-expression + + # steps() + # https://www.w3.org/TR/web-animations-1/#step-timing-function + - match: '\b(steps)(?=\()' + scope: support.function.timing.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: integer-type + - match: (end|middle|start) + scope: support.keyword.timing-direction.css + - include: sass-value-expression + + # Shape Functions + # https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape + + # rect() - Deprecated + # https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect + - match: '\b(rect)(?=\()' + scope: support.function.shape.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - match: \bauto\b + scope: support.constant.property-value.css + - include: length-type + - include: sass-value-expression + + # inset() + # https://www.w3.org/TR/css-shapes-1/#funcdef-inset + - match: '\b(inset)(?=\()' + scope: support.function.shape.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - match: '\bround\b' + scope: keyword.other.css + - include: length-type + - include: percentage-type + - include: sass-value-expression + + # circle() + # https://www.w3.org/TR/css-shapes-1/#funcdef-circle + # ellipse() + # https://www.w3.org/TR/css-shapes-1/#funcdef-ellipse + - match: '\b(circle|ellipse)(?=\()' + scope: support.function.shape.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - match: '\bat\b' + scope: keyword.other.css + - match: '\b(top|right|bottom|left|center|closest-side|farthest-side)\b' + scope: support.constant.property-value.css + - include: length-type + - include: percentage-type + - include: sass-value-expression + + # polygon() + # https://www.w3.org/TR/css-shapes-1/#funcdef-polygon + - match: '\b(polygon)(?=\()' + scope: support.function.shape.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - include: comment-block + - match: '(?=\))' + pop: true + - match: '\b(nonzero|evenodd)\b' + scope: support.constant.property-value.css + - include: length-type + - include: percentage-type + - include: calc-function + - match: ',' + scope: punctuation.separator.sequence.css + - include: sass-value-expression + + # toggle() + # https://www.w3.org/TR/css3-values/#toggle-notation + - match: '\b(toggle)(?=\()' + scope: support.function.toggle.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: vendor-prefix + - include: property-value-constants + - include: numeric-values + - include: color-values + - include: literal-string + - include: sass-value-expression + + # repeat() + # https://drafts.csswg.org/css-grid/#funcdef-repeat + - match: '\b(repeat)(?=\()' + scope: support.function.grid.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: length-type + - include: percentage-type + - include: minmax-function + - include: integer-type + - include: var-function + - match: \b(auto-fill|auto-fit)\b + scope: support.keyword.repetitions.css + - match: \b(max-content|min-content|auto)\b + scope: support.constant.property-value.css + - include: sass-value-expression + + # var() + # https://drafts.csswg.org/css-variables/#funcdef-var + var-function: + - match: '\b(var)(?=\()' + scope: support.function.var.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: custom-property-name + - include: sass-value-expression + + # Filter Functions + # https://drafts.fxtf.org/filters/#typedef-filter-function + filter-functions: + # blur() + # https://drafts.fxtf.org/filters/#funcdef-filter-blur + - match: '\b(blur)(?=\()' + scope: support.function.filter.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: length-type + - include: sass-value-expression + + # brightness(), contrast(), grayscale(), invert(), opacity(), saturate(), sepia() + # https://drafts.fxtf.org/filters/#funcdef-filter-brightness + - match: '\b(brightness|contrast|grayscale|invert|opacity|saturate|sepia)(?=\()' + scope: support.function.filter.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: percentage-type + - include: number-type + - include: sass-value-expression + + # drop-shadow() + # https://drafts.fxtf.org/filters/#funcdef-filter-drop-shadow + - match: '\b(drop-shadow)(?=\()' + scope: support.function.filter.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: length-type + - include: color-values + - include: sass-value-expression + + # hue-rotate() + # https://drafts.fxtf.org/filters/#funcdef-filter-hue-rotate + - match: '\b(hue-rotate)(?=\()' + scope: support.function.filter.css push: - meta_scope: meta.function-call.css - include: function-notation-terminator @@ -1539,22 +1966,40 @@ contexts: - meta_scope: meta.group.css - match: '(?=\))' pop: true - - match: '(--)({{nmchar}}+)' - captures: - 0: meta.property-name.css support.type.custom-property.css - 1: punctuation.definition.custom-property.css - 2: support.type.custom-property.name.css - - include: comma-delimiter - - include: property-values - - include: sass-script-expression + - include: angle-type + - include: sass-value-expression + # calc() + # https://www.w3.org/TR/css3-values/#funcdef-calc calc-function: - match: '\b(calc)(?=\()' scope: support.function.calc.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - match: '\(' + scope: punctuation.definition.group.begin.css + push: inside-calc-parens + - match: '' + pop: true + + inside-calc-parens: + - meta_scope: meta.group.css + - match: '(?=\))' + set: function-notation-terminator + - include: comment-block + - include: calc-function + - include: var-function + - include: numeric-values + - include: attr-function + - match: "[-/*+]" + scope: keyword.operator.css + - include: sass-value-expression + - match: '\(' + scope: punctuation.definition.group.begin.css + push: inside-calc-parens + # attr() + # https://www.w3.org/TR/css3-values/#funcdef-attr attr-function: - match: '\b(attr)(?=\()' scope: support.function.attr.css @@ -1592,6 +2037,8 @@ contexts: - include: color-values - include: sass-value-expression + # url() + # https://drafts.csswg.org/css-images-3/#url-notation url-function: - match: '\b(url)(?=\()' scope: support.function.url.css @@ -1605,15 +2052,11 @@ contexts: - match: '(?=\))' pop: true - include: literal-string - - include: comment-block - - include: var-function - - include: sass-variables - - include: sass-functions - - include: sass-custom-functions - - include: sass-interpolation + - include: sass-value-expression - include: unquoted-string - - include: sass-operators + # url-prefix() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-prefix url-prefix-function: - match: '\b(url-prefix)(?=\()' scope: support.function.url-prefix.css @@ -1627,15 +2070,11 @@ contexts: - match: '(?=\))' pop: true - include: literal-string - - include: comment-block - - include: var-function - - include: sass-variables - - include: sass-functions - - include: sass-custom-functions - - include: sass-interpolation + - include: sass-value-expression - include: unquoted-string - - include: sass-operators + # domain() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-domain domain-function: - match: '\b(domain)(?=\()' scope: support.function.domain.css @@ -1649,29 +2088,49 @@ contexts: - match: '(?=\))' pop: true - include: literal-string - - include: comment-block - - include: var-function - - include: sass-variables - - include: sass-functions - - include: sass-custom-functions - - include: sass-interpolation + - include: sass-value-expression - include: unquoted-string - - include: sass-operators + # regexp() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-regexp regexp-function: - match: '\b(regexp)(?=\()' scope: support.function.regexp.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: literal-string + - include: sass-value-expression + # image() + # https://drafts.csswg.org/css-images-3/#funcdef-image image-function: - match: '\b(image)(?=\()' scope: support.function.image.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: image-type + - include: literal-string + - include: color-values + - include: comma-delimiter + - include: sass-value-expression + - include: unquoted-string + # image-set() + # https://drafts.csswg.org/css-images-3/#funcdef-image-set image-set-function: - match: '\b(image-set)(?=\()' scope: support.function.image.css @@ -1693,27 +2152,76 @@ contexts: scope: constant.numeric.css captures: 1: keyword.other.unit.css - - include: comment-block - - include: var-function - - include: sass-variables - - include: sass-functions - - include: sass-custom-functions - - include: sass-interpolation + - include: sass-value-expression - include: unquoted-string - - include: sass-operators + # Gradient Functions + # https://drafts.csswg.org/css-images-3/#gradients gradient-functions: + # linear-gradient() + # https://drafts.csswg.org/css-images-3/#linear-gradients + # repeating-linear-gradient() + # https://drafts.csswg.org/css-images-3/#funcdef-repeating-linear-gradient - match: '\b((?:repeating-)?linear-gradient)(?=\()' scope: support.function.gradient.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: angle-type + - include: comma-delimiter + - include: color-values + - include: percentage-type + - include: length-type + - match: '\bto\b' + scope: keyword.other.css + - match: \b(top|right|bottom|left)\b + scope: support.constant.property-value.css + - include: sass-value-expression + + # radial-gradient() + # https://drafts.csswg.org/css-images-3/#radial-gradients + # repeating-radial-gradient() + # https://drafts.csswg.org/css-images-3/#funcdef-repeating-radial-gradient - match: '\b((?:repeating-)?radial-gradient)(?=\()' scope: support.function.gradient.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: color-values + - include: percentage-type + - include: length-type + - match: '\b(at|circle|ellipse)\b' + scope: keyword.other.css + - match: |- + (?x)\b( + left + | center + | right + | top + | bottom + | closest-corner + | closest-side + | farthest-corner + | farthest-side + )\b + scope: support.constant.property-value.css + - include: sass-value-expression + # cross-fade() + # https://drafts.csswg.org/css-images-3/#cross-fade-function cross-fade-function: - match: '\b(cross-fade)(?=\()' scope: support.function.image.css @@ -1731,40 +2239,237 @@ contexts: - include: color-values - include: image-type - include: literal-string - - include: comment-block - - include: var-function - - include: sass-variables - - include: sass-functions - - include: sass-custom-functions - - include: sass-interpolation + - include: sass-value-expression - include: unquoted-string - - include: sass-operators + # minmax() + # https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax minmax-function: - match: '\b(minmax)(?=\()' scope: support.function.grid.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: length-type + - match: \b(max-content|min-content)\b + scope: support.constant.property-value.css + - include: sass-value-expression + # Color Functions + # https://drafts.csswg.org/css-color color-functions: - - match: '\b(rgba?|hsla?|hwb|gray|device-cmyk|color)(?=\()' + # rgb(), rgba() + # https://drafts.csswg.org/css-color/#rgb-functions + - match: '\b(rgba?)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: percentage-type + - include: number-type + # scss add overloads: + # https://sass-lang.com/documentation/Sass/Script/Functions.html#rgba-instance_method + - include: color-values + - include: sass-value-expression + + # hsl(), hsla() + # https://drafts.csswg.org/css-color/#the-hsl-notation + # hwb() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-hwb + - match: '\b(hsla?|hwb)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: angle-type + - include: percentage-type + - include: number-type + - include: sass-value-expression + + # gray() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-gray + - match: '\b(gray)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: percentage-type + - include: number-type + - include: sass-value-expression + + # device-cmyk() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-device-cmyk + - match: '\b(device-cmyk)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: color-adjuster-functions # must be included before `color-values` + - include: color-values + - include: percentage-type + - include: number-type + - include: sass-value-expression + + # color-mod() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-color-mod + - match: '\b(color)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: comma-delimiter + - include: color-adjuster-functions # must be included before `color-values` + - include: var-function + - include: color-values + - include: angle-type + - include: number-type + - include: sass-value-expression + # Color Adjuster Functions - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#typedef-color-adjuster color-adjuster-functions: - - match: '\b(blenda|blend|tint|shade|red|green|blue|alpha|a|hue|h|saturation|lightness|whiteness|blackness|[slwb])(?=\()' + # red(), green(), blue(), alpha() - Not yet implemented by browsers + - match: '\b(red|green|blue|alpha|a)(?=\()' scope: support.function.color.css push: - meta_scope: meta.function-call.css - - include: function-arguments + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: color-adjuster-operators + - include: percentage-type + - include: number-type + - include: sass-value-expression + + # hue() - Not yet implemented by browsers + - match: '\b(hue|h)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: color-adjuster-operators + - include: angle-type + - include: sass-value-expression + + # saturation(), lightness(), whiteness(), blackness() - Not yet implemented by browsers + - match: '\b(saturation|lightness|whiteness|blackness|[slwb])(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: color-adjuster-operators + - include: percentage-type + - include: sass-value-expression + + # tint(), shade(), contrast() - Not yet implemented by browsers + # contrast() interferes with the contrast() filter function; + # therefore, it is not yet implemented here + - match: '\b(tint|shade)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - include: percentage-type + - include: sass-value-expression + + # blend(), blenda() - Not yet implemented by browsers + - match: '\b(blenda|blend)(?=\()' + scope: support.function.color.css + push: + - meta_scope: meta.function-call.css + - include: function-notation-terminator + - match: '\(' + scope: punctuation.definition.group.begin.css + push: + - meta_scope: meta.group.css + - match: '(?=\))' + pop: true + - match: '\b(rgb|hsl|hwb)\b' + scope: keyword.other.color-space.css + - include: color-values + - include: percentage-type + - include: var-function + - include: sass-value-expression + + color-adjuster-operators: - match: '[\-\+*](?=\s+)' scope: keyword.operator.css + color-hex-values: + - match: '(#)(\h{3}|\h{6})\b' + scope: constant.other.color.rgb-value.css + captures: + 1: punctuation.definition.constant.css + - match: '(#)(\h{4}|\h{8})\b' + scope: constant.other.color.rgba-value.css + captures: + 1: punctuation.definition.constant.css + function-notation-terminator: - match: '\)' scope: meta.group.css punctuation.definition.group.end.css @@ -1775,6 +2480,9 @@ contexts: captures: 1: punctuation.separator.css + vendor-prefix: + - match: "-(?:webkit|moz|ms|o)-" + scope: support.type.vendor-prefix.css unicode-range: - match: |- @@ -1795,23 +2503,24 @@ contexts: 2: entity.name.namespace.wildcard.css 3: punctuation.separator.namespace.css + # Custom Properties + # https://drafts.csswg.org/css-variables/#typedef-custom-property-name + custom-property-name: + - match: '(--)({{nmchar}}+)' + scope: support.type.custom-property.css + captures: + 1: punctuation.definition.custom-property.css + 2: support.type.custom-property.name.css color-values: - include: color-functions + - include: color-hex-values - match: \b(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)\b scope: support.constant.color.w3c-standard-color-name.css - match: \b(aliceblue|antiquewhite|aquamarine|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|gainsboro|ghostwhite|gold|goldenrod|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|magenta|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olivedrab|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|rebeccapurple|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato|turquoise|violet|wheat|whitesmoke|yellowgreen)\b scope: support.constant.color.w3c-extended-color-keywords.css - match: \b((?i)currentColor|transparent)\b scope: support.constant.color.w3c-special-color-keyword.css - - match: '(#)(\h{3}|\h{6})\b' - scope: constant.other.color.rgb-value.css - captures: - 1: punctuation.definition.constant.css - - match: '(#)(\h{4}|\h{8})\b' - scope: constant.other.color.rgba-value.css - captures: - 1: punctuation.definition.constant.css numeric-values: - include: angle-type @@ -1878,7 +2587,7 @@ contexts: unquoted-string: - - match: '[^\s''"]' + - match: '\b[^\s''"]+\b' scope: string.unquoted.css unquoted-concatenated-string: diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss index de4297b8..d6b94b7d 100644 --- a/Tests/syntax_test_scss.scss +++ b/Tests/syntax_test_scss.scss @@ -53,13 +53,28 @@ selector-ish::before[data-type="text"]:not(:first-child), filter: translate3d(0 0 2px rgba(0, 0, 0, 0.3)) } } - color: rgba(100, 120, 12, 95%); + color: rgba(100, #aaa, 12deg, 95%); background: url($blue); testbackground-color: blue; } - +.test { + content: var(--progress); + content: url(var(--input)); + content: url(var(--progress)); + content: calc(var(--progress)); + content: translateX(calc(var(--x))); + content: translateX(calc(var(--text))); + content: translateX(calc(var(--input))); + content: translateX(calc(var(--progress))); + content: fn(height-$width); + content: fn(width-height); + content: fn(dark-at); + content: fn(grey-grey); + content: fn(dark-dark); + content: fn(grey); +} /* Nested selectors and & @@ -122,7 +137,7 @@ selector-ish::before[data-type="text"]:not(:first-child), // ^ entity.name .redbox:hover { background-color: #ff0000; - background: url(data:@{image}/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7); + background: url(data:@{image}/gif;base64,R0-lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7); // ^ support.type.property-name.css color: #000000 // ^^^^^^^ meta.property-value.css constant.other.color.rgb-value.css @@ -522,7 +537,7 @@ $translucent-red: rgba(#E82C0C, 0.5); // ^^^^ support.function.color.css // ^^^ constant.other.color.rgb-value.css // ^ punctuation.separator.css -$translucent-red: hsla(red, 0.5); +$translucent-red: rgba(red, 0.5); // ^^^^ support.function.color.css // ^^^ support.constant.color.w3c-standard-color-name.css // ^ punctuation.separator.css @@ -670,277 +685,284 @@ $gutter-width: 10px; // ------------ A selection of tests from the default CSS package: ------------- + .test-strings { content: "double"; -// ^^^^^^^^ string.quoted.double.css -// ^ punctuation.definition.string.begin.css -// ^ punctuation.definition.string.end.css +/* ^^^^^^^^ string.quoted.double.css */ +/* ^ punctuation.definition.string.begin.css */ +/* ^ punctuation.definition.string.end.css */ content: 'single'; -// ^^^^^^^^ string.quoted.single.css -// ^ punctuation.definition.string.begin.css -// ^ punctuation.definition.string.end.css +/* ^^^^^^^^ string.quoted.single.css */ +/* ^ punctuation.definition.string.begin.css */ +/* ^ punctuation.definition.string.end.css */ content: 'invalid; -// ^ invalid.illegal.newline.css +/* ^ invalid.illegal.newline.css */ } .test-punctuation { -// ^ punctuation.section.property-list +/* ^ punctuation.section.property-list.css */ top: 1px; -// ^ punctuation.separator.key-value.css -// ^ punctuation.terminator.rule.css +/* ^ punctuation.separator.key-value.css */ +/* ^ punctuation.terminator.rule.css */ top: cubic-bezier(0.2, 0, 0.13, 2); -// ^ punctuation.separator.css +/* ^ punctuation.separator.css*/ top: url("image"); -// ^ punctuation.definition.group.begin.css -// ^ punctuation.definition.group.end.css +/* ^ punctuation.definition.group.begin.css */ +/* ^ punctuation.definition.group.end.css */ } -// < punctuation.section.property-list.css +/* < punctuation.section.property-list.css */ .classname {} -// ^^^^^^^^^^^ meta.selector.css -// ^ punctuation.definition.entity.css -// ^^^^^^^^^ entity.other.attribute-name.class.css +/* ^^^^^^^^^^^ meta.selector.css */ +/* ^ punctuation.definition.entity.css */ +/* ^^^^^^^^^ entity.other.attribute-name.class.css */ #id {} -// ^ punctuation.definition.entity.css -// ^^ entity.other.attribute-name.id.css +/* ^ punctuation.definition.entity.css */ +/* ^^ entity.other.attribute-name.id.css */ html {} -// ^^^^ entity.name.tag.css +/* ^^^^ entity.name.tag.css */ @charset "UTF-8"; -// ^^^^^^^^^^^^^^^^ meta.at-rule -// ^ punctuation.definition.keyword.css -// ^^^^^^^ keyword.control.at-rule -// ^ punctuation.terminator.rule +/* ^^^^^^^^^^^^^^^^ meta.at-rule.charset.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^ keyword.control.at-rule.charset.css */ + @import "x" print; -// ^^^^^^^^^^^^^^^^^ meta.at-rule -// ^ punctuation.definition.keyword.css -// ^^^^^^ keyword.control.at-rule -// ^^^^^ support.constant.media.css +/* ^^^^^^^^^^^^^^^^^ meta.at-rule.import.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^ keyword.control.at-rule.import.css */ +/* ^^^^^ support.constant.media.css */ @namespace svg "http://www.w3.org/1999/xhtml"; -// ^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css -// ^ punctuation.definition.keyword.css -// ^^^^^^^^^ keyword.control.at-rule.namespace.css -// ^^^ entity.other.namespace-prefix.css +/* ^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.at-rule.namespace.css */ +/* ^^^ entity.other.namespace-prefix.css */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css -// ^^^ support.function.url.css -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css -// ^ meta.group.css punctuation.definition.group.begin.css -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css string.quoted.double.css -// ^ meta.group.css punctuation.definition.group.end.css +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css */ +/* ^^^ support.function.url.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css */ +/* ^ meta.group.css punctuation.definition.group.begin.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css string.quoted.double.css */ +/* ^ meta.group.css punctuation.definition.group.end.css */ @page :left {} -// ^^^^^^^^^^^^ meta.at-rule.page.css -// ^ punctuation.definition.keyword.css -// ^^^^ keyword.control.at-rule.page.css +/* ^^^^^^^^^^^^^^ meta.at-rule.page.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^ keyword.control.at-rule.page.css */ @media only screen {} -// ^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css -// ^ punctuation.definition.keyword.css -// ^^^^^ keyword.control.at-rule.media.css -// ^^^^ keyword.operator.logic.media.css -// ^^^^^^ support.constant.media.css - - @media(min-width: 700px) {} -// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css -// ^ punctuation.definition.keyword.css -// ^^^^^ keyword.control.at-rule.media.css -// ^ punctuation.definition.group.begin.css -// ^^^^^^^^^ support.type.property-name.media.css -// ^^^^^ constant.numeric.css -// ^ punctuation.definition.group.end.css +/* ^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.at-rule.media.css */ +/* ^^^^ keyword.operator.logic.media.css */ +/* ^^^^^^ support.constant.media.css */ + + @media (min-width: 700px) {} +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.at-rule.media.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^^^^^^^ support.type.property-name.media.css */ +/* ^^^^^ constant.numeric.css */ +/* ^ punctuation.definition.group.end.css */ @media (min-width: 700px) and (max-width: 2000px) {} -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css -// ^ punctuation.definition.keyword.css -// ^^^^^ keyword.control.at-rule.media.css -// ^ punctuation.definition.group.begin.css -// ^^^^^^^^^ support.type.property-name.media.css -// ^^^^^ constant.numeric.css -// ^ punctuation.definition.group.end.css -// ^^^ keyword.operator.logic -// ^ punctuation.definition.group.begin.css -// ^^^^^^^^^ support.type.property-name.media.css -// ^^^^^^ constant.numeric.css -// ^ punctuation.definition.group.end.css +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.at-rule.media.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^^^^^^^ support.type.property-name.media.css */ +/* ^^^^^ constant.numeric.css */ +/* ^ punctuation.definition.group.end.css */ +/* ^^^ keyword.operator.logic */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^^^^^^^ support.type.property-name.media.css */ +/* ^^^^^^ constant.numeric.css */ +/* ^ punctuation.definition.group.end.css */ @media only screen and (-webkit-min-device-pixel-ratio: /* comment */ 1.3), -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css -// ^ punctuation.definition.keyword.css -// ^^^^^ keyword.control.at-rule.media.css -// ^^^^ keyword.operator.logic.media.css -// ^^^^^^ support.constant.media.css -// ^^^ keyword.operator.logic.media.css -// ^ punctuation.definition.group.begin.css -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ support.type.property-name.media.css -// ^ punctuation.separator.key-value.css -// ^^^^^^^^^^^^^ comment.block.css -// ^^^ constant.numeric.css -// ^ punctuation.definition.group.end.css -// ^ punctuation.definition.arbitrary-repetition +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.at-rule.media.css */ +/* ^^^^ keyword.operator.logic.media.css */ +/* ^^^^^^ support.constant.media.css */ +/* ^^^ keyword.operator.logic.media.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ support.type.property-name.media.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^^^^^^^ comment.block.css */ +/* ^^^ constant.numeric.css */ +/* ^ punctuation.definition.group.end.css */ +/* ^ punctuation.definition.arbitrary-repetition */ only screen and (-o-min-device-pixel-ratio: 13/10), -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css -// ^^^^ keyword.operator.logic.media.css -// ^^^^^^ support.constant.media.css -// ^^^ keyword.operator.logic.media.css -// ^ punctuation.definition.group.begin.css -// ^^^^^^^^^^^^^^^^^^^^^^^^^ support.type.property-name.media.css -// ^ punctuation.separator.key-value.css -// ^^ constant.numeric.css -// ^ keyword.operator -// ^^ constant.numeric.css -// ^ punctuation.definition.group.end.css -// ^ punctuation.definition.arbitrary-repetition +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ +/* ^^^^ keyword.operator.logic.media.css */ +/* ^^^^^^ support.constant.media.css */ +/* ^^^ keyword.operator.logic.media.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^ support.type.property-name.media.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^ constant.numeric.css */ +/* ^ keyword.operator */ +/* ^^ constant.numeric.css */ +/* ^ punctuation.definition.group.end.css */ +/* ^ punctuation.definition.arbitrary-repetition */ only screen and (min-resolution: 120dpi) -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css -// ^^^^ keyword.operator.logic.media.css -// ^^^^^^ support.constant.media.css -// ^^^ keyword.operator.logic.media.css -// ^ punctuation.definition.group.begin.css -// ^^^^^^^^^^^^^^ support.type.property-name.media.css -// ^ punctuation.separator.key-value.css -// ^^^^^^ constant.numeric.css -// ^ punctuation.definition.group.end.css +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */ +/* ^^^^ keyword.operator.logic.media.css */ +/* ^^^^^^ support.constant.media.css */ +/* ^^^ keyword.operator.logic.media.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^^^^^^^^^^^^ support.type.property-name.media.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^ constant.numeric.css */ +/* ^ punctuation.definition.group.end.css */ {} @custom-media --a-b (width: 1px); -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.custom-media.css -// ^ punctuation.definition.keyword.css -// ^^^^^^^^^^^^ keyword.control.at-rule.custom-media.css -// ^^^^^ support.type.property-name.media.css +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.custom-media.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^ keyword.control.at-rule.custom-media.css */ +/* ^^^^^ support.type.property-name.media.css */ @keyframes beat, bounce {} -// ^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.keyframe.css -// ^ punctuation.definition.keyword.css -// ^^^^^^^^^ keyword.control.at-rule.keyframe.css -// ^^^^ entity.other.animation-name.css -// ^ punctuation.definition.arbitrary-repetition.css -// ^^^^^^ entity.other.animation-name.css - -@keyframes #{$animation + '-' + $direction} { -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.interpolation +/* ^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.keyframe.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.at-rule.keyframe.css */ +/* ^^^^ entity.other.animation-name.css */ +/* ^ punctuation.definition.arbitrary-repetition.css */ +/* ^^^^^^ entity.other.animation-name.css */ + +@keyframes test-keyframes-keywords { from, to {} -// ^^^^ keyword.keyframe-selector.css -// ^^ keyword.keyframe-selector.css +/* ^^^^ keyword.keyframe-selector.css */ +/* ^^ keyword.keyframe-selector.css */ 0%, 100% {} -// ^^ constant.numeric.css -// ^^^^ constant.numeric.css +/* ^^ constant.numeric.css */ +/* ^^^^ constant.numeric.css */ .99%, 100.99% {} -// ^^^^ constant.numeric.css -// ^^^^^^^ constant.numeric.css +/* ^^^^ constant.numeric.css */ +/* ^^^^^^^ constant.numeric.css */ 0%, to {} -// ^^ constant.numeric.css -// ^^ keyword.keyframe-selector.css +/* ^^ constant.numeric.css */ +/* ^^ keyword.keyframe-selector.css */ } @document url(http://) { } -// ^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css -// ^ punctuation.definition.keyword.css -// ^^^^^^^^^ keyword.control.at-rule.document.css +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.at-rule.document.css */ +/* ^^^ meta.block.css */ +/* ^ punctuation.definition.block.begin.css */ +/* ^ punctuation.definition.block.end.css */ @document url(http://www), -// ^^^ support.function.url.css -// ^^^^^^^^^^ string.unquoted.css -// ^ punctuation.separator.css +/* ^^^ support.function.url.css */ +/* ^^^^^^^^^^ string.unquoted.css */ +/* ^ punctuation.separator.css */ url-prefix("http://www"), -// ^^^^^^^^^^ support.function.url-prefix.css -// ^^^^^^^^^^^^ string.quoted.double.css +/* ^^^^^^^^^^ support.function.url-prefix.css */ +/* ^^^^^^^^^^^^ string.quoted.double.css */ domain(mozilla.org), -// ^^^^^^ support.function.domain.css -// ^^^^^^^^^^^ string.unquoted.css +/* ^^^^^^ support.function.domain.css */ +/* ^^^^^^^^^^^ string.unquoted.css */ regexp("https:.*") -// ^^^^^^ support.function.regexp.css -// ^^^^^^^^^^ string.quoted.double.css +/* ^^^^^^ support.function.regexp.css */ +/* ^^^^^^^^^^ string.quoted.double.css */ { .class { -// entity.other.attribute-name.class.css +/* ^^^^^^ meta.at-rule.document.css entity.other.attribute-name.class.css */ display: none; -// meta.property-name.css +/* ^^^^^^^ meta.at-rule.document.css meta.property-name.css */ } } @font-face { -// ^^^^^^^^^^^ meta.at-rule.css -// ^ punctuation.definition.keyword.css -// ^^^^^^^^^ keyword.control.at-rule.css +/* ^^^^^^^^^^^ meta.at-rule.font-face.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.at-rule.font-face.css */ - src: local(Font); + src: local(Font), /* */ -// ^^^^^ comment.block.css +/* ^^^^^ comment.block.css */ } @font-face -// ^^^^^^^^^^^ meta.at-rule.css -// ^ punctuation.definition.keyword.css -// ^^^^^^^^^ keyword.control.at-rule.css +/* ^^^^^^^^^^^ meta.at-rule.font-face.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.at-rule.font-face.css */ { font-family: monospace, -// ^^^^^^^^^^^ support.type.property-name.css -// ^^^^^^^^^ support.constant.font-name.css +/* ^^^^^^^^^^^ support.type.property-name.css */ +/* ^^^^^^^^^ support.constant.font-name.css */ /* */ -// ^^^^^ comment.block.css +/* ^^^^^ comment.block.css */ } @supports not ( and ( top: 2px ) ) { } -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.supports.css -// ^ punctuation.definition.keyword.css -// ^^^^^^^^ keyword.control.at-rule.supports.css -// ^^^ keyword.operator.logic.css -// ^ meta.group.css punctuation.definition.group.begin.css -// ^^^ keyword.operator.logic.css -// ^ meta.group.css punctuation.definition.group.begin.css -// ^^^ support.type.property-name.css -// ^ punctuation.separator.key-value.css -// ^^ constant.numeric.css keyword.other.unit.css -// ^ meta.group.css punctuation.definition.group.end.css -// ^ meta.group.css punctuation.definition.group.end.css -// ^ punctuation -// ^ punctuation +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.supports.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^ keyword.control.at-rule.supports.css */ +/* ^^^ keyword.operator.logic.css */ +/* ^ meta.group.css punctuation.definition.group.begin.css */ +/* ^^^ keyword.operator.logic.css */ +/* ^ meta.group.css punctuation.definition.group.begin.css */ +/* ^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^ constant.numeric.css keyword.other.unit.css */ +/* ^ meta.group.css punctuation.definition.group.end.css */ +/* ^ meta.group.css punctuation.definition.group.end.css */ +/* ^^^ meta.block.css */ +/* ^ punctuation.definition.block.begin.css */ +/* ^ punctuation.definition.block.end.css */ @supports (--foo: green) { -// ^^^^^ support.type.custom-property.css +/* ^^^^^ support.type.custom-property.css */ .class { -// ^^^^^^ entity.other.attribute-name.class.css +/* ^^^^^^ meta.at-rule.supports.css entity.other.attribute-name.class.css */ display: none; -// ^^^^^^^ meta.property-name.css +/* ^^^^^^^ meta.at-rule.supports.css meta.property-name.css */ } } +@supports (display: grid) {span { display: grid; }} +/* ^^^^ meta.at-rule.supports.css meta.selector.css */ + @counter-style {} -// ^ punctuation.definition.keyword.css -// ^^^^^^^^^^^^^^ keyword.control.at-rule.counter-style.css +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^^ keyword.control.at-rule.counter-style.css */ @counter-style none {} -// ^^^^ invalid.illegal.counter-style-name.css +/* ^^^^ invalid.illegal.counter-style-name.css */ @counter-style decimal {} -// ^^^^^^^ invalid.illegal.counter-style-name.css +/* ^^^^^^^ invalid.illegal.counter-style-name.css */ @counter-style name { -// ^ punctuation.definition.keyword.css -// ^^^^^^^^^^^^^^ keyword.control.at-rule.counter-style.css -// ^^^^ entity.other.counter-style-name.css +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^^ keyword.control.at-rule.counter-style.css */ +/* ^^^^ entity.other.counter-style-name.css */ symbols: "‣"; -// ^^^^^^^ support.type.property-name.css +/* ^^^^^^^ meta.at-rule.counter-style.css support.type.property-name.css */ suffix: " "; -// ^^^^^^ support.type.property-name.css -// ^^^ string.quoted.double.css +/* ^^^^^^ meta.at-rule.counter-style.css support.type.property-name.css */ +/* ^^^ string.quoted.double.css */ } @counter-style blacknwhite -// ^^^^^^^^^^^^^^ meta.at-rule.counter-style.css keyword.control.at-rule.counter-style.css -// ^^^^^^^^^^^ entity.other.counter-style-name.css +/* ^^^^^^^^^^^^^^ meta.at-rule.counter-style.css keyword.control.at-rule.counter-style.css */ +/* ^^^^^^^^^^^ entity.other.counter-style-name.css */ { system: cyclic; negative: "(" ")"; @@ -949,754 +971,788 @@ $gutter-width: 10px; suffix: "/ "; range: 2 4; speak-as: "bullets"; -//^^^^^^^^ support.type.property-name.css +/*^^^^^^^^ support.type.property-name.css */ } .test-var { --test-var: arial; } -// ^^^^^^^^^^ support.type.custom-property.css -// ^^ punctuation.definition.custom-property -// ^^^^^^^^ support.type.custom-property.name.css +/* ^^^^^^^^^^ support.type.custom-property.css */ +/* ^^ punctuation.definition.custom-property */ +/* ^^^^^^^^ support.type.custom-property.name.css */ + +.test-deprecated-var { var-deprecated- } +/* ^^^^^^^^^^^^^^^ invalid.deprecated.custom-property.css */ +/* ^^^^ keyword.other.custom-property.prefix.css */ .test-types { top: 20; -// ^^ constant.numeric.css +/* ^^ constant.numeric.css */ top: +.95e-20; -// ^^^^^^^^ constant.numeric.css +/* ^^^^^^^^ constant.numeric.css */ top: -1.5e+93%; -// ^^^^^^^^^ constant.numeric.css +/* ^^^^^^^^^ constant.numeric.css */ } .test-units { top: 1px; -// ^^ keyword.other.unit.css +/* ^^ keyword.other.unit.css */ top: 1.1em; -// ^^ keyword.other.unit.css +/* ^^ keyword.other.unit.css */ top: -100%; -// ^ keyword.other.unit.css +/* ^ keyword.other.unit.css */ top: 1.1.1deg; -// ^^^ keyword.other.unit.css +/* ^^^ keyword.other.unit.css */ } .test-properties { +/* ^ meta.property-list.css */ + -webkit-transform: none; -// ^^^^^^^^^^^^^^^^^ meta.property-name.css -// ^^^^^^^^ support.type.vendor-prefix.css -// ^^^^^^^^^ support.type.property-name.css -// ^^^^ meta.property-value.css support.constant.property-value.css +/* ^^^^^^^^^^^^^^^^^ meta.property-name.css */ +/* ^^^^^^^^ support.type.vendor-prefix.css */ +/* ^^^^^^^^^ support.type.property-name.css */ +/* ^^^^ meta.property-value.css support.constant.property-value.css */ } .test-operators { top: calc(1px + 1px); - /* ^ keyword.operator */ + /* ^ keyword.operator.css */ top: calc(1px - 1px); - /* ^ keyword.operator */ + /* ^ keyword.operator.css */ top: calc(1px / 1px); - /* ^ keyword.operator */ + /* ^ keyword.operator.css */ top: calc(1px * 1px); - /* ^ keyword.operator */ + /* ^ keyword.operator.css */ top: calc(1px+1px); - /* ^ -keyword.operator */ + /* ^ -keyword.operator.css */ top: calc(1px-1px); - /* ^ -keyword.operator */ + /* ^ -keyword.operator.css */ top: calc(1px/1px); - /* ^ keyword.operator */ + /* ^ keyword.operator.css */ top: calc(1px*1px); - /* ^ keyword.operator */ + /* ^ keyword.operator.css */ } .test-important { top: 1px !important; -// ^^^^^^^^^^ keyword.other.important.css +/* ^^^^^^^^^^ keyword.other.important.css */ top: 1px!important; -// ^^^^^^^^^^ keyword.other.important.css +/* ^^^^^^^^^^ keyword.other.important.css */ } -// Test Functional Pseudo Class Meta Scopes +/* Test Functional Pseudo Class Meta Scopes */ .test:nth-child(even) {} -// ^^^^^^^^^^^^^^^^ meta.function-call.css -// ^^^^^^ meta.group.css -// ^ punctuation.definition.group.begin.css -// ^ punctuation.definition.group.end.css +/* ^^^^^^^^^^^^^^^^ meta.function-call.css */ +/* ^^^^^^ meta.group.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^ punctuation.definition.group.end.css */ .test-pseudo-classes:nth-child(2):hover {} -// ^^^^^^^^^ entity.other.pseudo-class.css -// ^ constant.numeric.css -// ^ punctuation.definition.entity.css -// ^^^^^ entity.other.pseudo-class.css +/* ^^^^^^^^^ entity.other.pseudo-class.css */ +/* ^ constant.numeric.css */ +/* ^ punctuation.definition.entity.css */ +/* ^^^^^ entity.other.pseudo-class.css */ .test-pseudo-class-numerics:nth-last-of-type(-n+3) {} -// ^^^^^^^^^^^^^^^^^ entity.other.pseudo-class.css -// ^^^^ constant.numeric.css +/* ^^^^^^^^^^^^^^^^^ entity.other.pseudo-class.css */ +/* ^^^^ constant.numeric.css */ .test-pseudo-class-keywords:nth-of-type(odd) {} -// ^^^^^^^^^^^^ entity.other.pseudo-class.css -// ^^^ keyword.other.pseudo-class.css +/* ^^^^^^^^^^^^ entity.other.pseudo-class.css */ +/* ^^^ keyword.other.pseudo-class.css */ .test-pseudo-class-strings:dir(ltr) {} -// ^^^^ entity.other.pseudo-class.css -// ^^^ string.unquoted.css +/* ^^^^ entity.other.pseudo-class.css */ +/* ^^^ string.unquoted.css */ .test-pseudo-class-tag:not(*) {} -// ^^^^ entity.other.pseudo-class.css -// ^ entity.name.tag.wildcard.css +/* ^^^^ entity.other.pseudo-class.css */ +/* ^ entity.name.tag.wildcard.css */ .test-pseudo-elements::before {} -// ^^ punctuation.definition.entity.css -// ^^^^^^^^ entity.other.pseudo-element.css +/* ^^ punctuation.definition.entity.css */ +/* ^^^^^^^^ entity.other.pseudo-element.css */ .test-pseudo-elements:after {} -// ^ punctuation.definition.entity.css -// ^^^^^^ entity.other.pseudo-element.css +/* ^ punctuation.definition.entity.css */ +/* ^^^^^^ entity.other.pseudo-element.css */ .test-pseudo-elements::-webkit-slider-runnable-track -// ^^ punctuation.definition.entity.css -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ entity.other.pseudo-element.css +/* ^^ punctuation.definition.entity.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ entity.other.pseudo-element.css */ .test-unicode { top: "\2764 \273e"; } -// ^^^^^ constant.character.escape.css -// ^^^^^ constant.character.escape.css +/* ^^^^^ constant.character.escape.css */ +/* ^^^^^ constant.character.escape.css */ .test-unicode-range { unicode-range: U+0025-00FF, U+4??; -// ^^^^^^^^^^^ support.unicode-range.css -// ^^ support.constant.unicode-range.prefix.css -// ^^^^^^^^^ constant.codepoint-range.css -// ^ punctuation.section.range.css -// ^^^^^ support.unicode-range.css -// ^^ support.constant.unicode-range.prefix.css -// ^^^ constant.codepoint-range.css +/* ^^^^^^^^^^^ support.unicode-range.css */ +/* ^^ support.constant.unicode-range.prefix.css */ +/* ^^^^^^^^^ constant.codepoint-range.css */ +/* ^ punctuation.section.range.css */ +/* ^^^^^ support.unicode-range.css */ +/* ^^ support.constant.unicode-range.prefix.css */ +/* ^^^ constant.codepoint-range.css */ } .test-escape-character { top: "\nstring\n"; } -// ^^ constant.character.escape.css -// ^^ constant.character.escape.css +/* ^^ constant.character.escape.css */ +/* ^^ constant.character.escape.css */ .test-attribute-selectors[disabled][type=button] {} -// ^^^^^^^^^^ meta.attribute-selector.css -// ^ punctuation.definition.entity.css -// ^^^^^^^^ entity.other.attribute-name.css -// ^ punctuation.definition.entity.css -// ^^^^ entity.other.attribute-name.css -// ^^^^^^ string.unquoted.css +/* ^^^^^^^^^^ meta.attribute-selector.css */ +/* ^ punctuation.definition.entity.css */ +/* ^^^^^^^^ entity.other.attribute-name.css */ +/* ^ punctuation.definition.entity.css */ +/* ^^^^ entity.other.attribute-name.css */ +/* ^^^^^^ string.unquoted.css */ .test-attribute-selectors-namespaces[n|a=""][*|a=""][|att] {} -// ^ entity.other.namespace-prefix.css -// ^ punctuation.separator.namespace.css -// ^ entity.name.namespace.wildcard.css -// ^ punctuation.separator.namespace.css -// ^ punctuation.separator.namespace.css +/* ^ entity.other.namespace-prefix.css */ +/* ^ punctuation.separator.namespace.css */ +/* ^ entity.name.namespace.wildcard.css */ +/* ^ punctuation.separator.namespace.css */ +/* ^ punctuation.separator.namespace.css */ .test-attribute-selectors-operators[a=""][a~=""][a|=""][a^=""][a$=""][a*=""] {} -// ^ keyword.operator.attribute-selector.css -// ^^ keyword.operator.attribute-selector.css -// ^^ keyword.operator.attribute-selector.css -// ^^ keyword.operator.attribute-selector.css -// ^^ keyword.operator.attribute-selector.css -// ^^ keyword.operator.attribute-selector.css +/* ^ keyword.operator.attribute-selector.css */ +/* ^^ keyword.operator.attribute-selector.css */ +/* ^^ keyword.operator.attribute-selector.css */ +/* ^^ keyword.operator.attribute-selector.css */ +/* ^^ keyword.operator.attribute-selector.css */ +/* ^^ keyword.operator.attribute-selector.css */ .test-attribute-selectors-whitespace[a = ""] {} -// ^ entity.other.attribute-name.css -// ^ keyword.operator.attribute-selector.css +/* ^ entity.other.attribute-name.css */ +/* ^ keyword.operator.attribute-selector.css */ .test-attribute-selectors-flags[a="" i] {} -// ^ keyword.other.css +/* ^ keyword.other.css */ *.test-universal-selector {} -// ^ entity.name.tag.wildcard.css +/* ^ entity.name.tag.wildcard.css */ .test-combinators >>> a >> a > a + b ~ a {} -// ^^^ punctuation.separator.combinator.css -// ^^ punctuation.separator.combinator.css -// ^ punctuation.separator.combinator.css -// ^ punctuation.separator.combinator.css -// ^ punctuation.separator.combinator.css +/* ^^^ punctuation.separator.combinator.css */ +/* ^^ punctuation.separator.combinator.css */ +/* ^ punctuation.separator.combinator.css */ +/* ^ punctuation.separator.combinator.css */ +/* ^ punctuation.separator.combinator.css */ + +.test-invalid-combinators +>> a +++ a ~+> {} +/* ^^^ invalid.illegal.combinator.css */ +/* ^^^ invalid.illegal.combinator.css */ +/* ^^^ invalid.illegal.combinator.css */ .test-generic-font-families { font: serif; -// ^^^^^ support.constant.font-name.css +/* ^^^^^ support.constant.font-name.css */ font: sans-serif; -// ^^^^^^^^^^ support.constant.font-name.css +/* ^^^^^^^^^^ support.constant.font-name.css */ font: cursive; -// ^^^^^^^ support.constant.font-name.css +/* ^^^^^^^ support.constant.font-name.css */ font: fantasy; -// ^^^^^^^ support.constant.font-name.css +/* ^^^^^^^ support.constant.font-name.css */ font: monospace; -// ^^^^^^^^^ support.constant.font-name.css +/* ^^^^^^^^^ support.constant.font-name.css */ } .test-unquoted-font-name { font: m700, aria; -// ^^^^ string.unquoted -// ^ punctuation.separator -// ^^ - string -// ^^^^ string.unquoted +/* ^^^^ string.unquoted */ +/* ^ punctuation.separator */ +/* ^^ - string */ +/* ^^^^ string.unquoted */ font: inherit; -// ^ - string +/* ^ - string */ font: initial; -// ^ - string +/* ^ - string */ font: unset; -// ^ - string +/* ^ - string */ font: italic; -// ^ - string +/* ^ - string */ font: small-caps; -// ^ - string +/* ^ - string */ font: 2em m700, sans-serif; -// ^ - string -// ^^^^ string.unquoted -// ^ punctuation.separator -// ^ - string +/* ^ - string */ +/* ^^^^ string.unquoted */ +/* ^ punctuation.separator */ +/* ^ - string */ font-weight: bold; -// ^^^^^^^^^^^ meta.property-name support.type.property-name +/* ^^^^^^^^^^^ meta.property-name support.type.property-name */ } .test-color-values { color: aqua; -// ^^^^ support.constant.color.w3c-standard-color-name.css +/* ^^^^ support.constant.color.w3c-standard-color-name.css */ color: aliceblue; -// ^^^^^^^^^ support.constant.color.w3c-extended-color-keywords.css +/* ^^^^^^^^^ support.constant.color.w3c-extended-color-keywords.css */ color: currentColor; -// ^^^^^^^^^^^^ support.constant.color.w3c-special-color-keyword.css +/* ^^^^^^^^^^^^ support.constant.color.w3c-special-color-keyword.css */ color: transparent; -// ^^^^^^^^^^^ support.constant.color.w3c-special-color-keyword.css +/* ^^^^^^^^^^^ support.constant.color.w3c-special-color-keyword.css */ color: #b4da55; -// ^ punctuation.definition.constant.css -// ^^^^^^^ constant.other.color.rgb-value.css +/* ^ punctuation.definition.constant.css */ +/* ^^^^^^^ constant.other.color.rgb-value.css */ color: #137; -// ^^^^ constant.other.color.rgb-value.css +/* ^^^^ constant.other.color.rgb-value.css */ color: #0f0a; -// ^^^^^ constant.other.color.rgba-value.css +/* ^^^^^ constant.other.color.rgba-value.css */ color: #a1b2c3d4; -// ^^^^^^^^^ constant.other.color.rgba-value.css +/* ^^^^^^^^^ constant.other.color.rgba-value.css */ color: #E5F6A7B8; -// ^ punctuation.definition.constant.css -// ^^^^^^^^^ constant.other.color.rgba-value.css +/* ^ punctuation.definition.constant.css */ +/* ^^^^^^^^^ constant.other.color.rgba-value.css */ } .test-function-meta { top: filter(param1, 20px); -// ^^^^^^^^^^^^^^^^^^^^ meta.function-call.css -// ^^^^^^^^^^^^^^ meta.group.css +/* ^^^^^^^^^^^^^^^^^^^^ meta.function-call.css */ +/* ^^^^^^^^^^^^^^ meta.group.css */ } .test-color-functions { top: rgb(1, 4.5%); -// ^^^ support.function.color.css -// ^ constant.numeric.css -// ^ punctuation.separator.css -// ^^^^ constant.numeric.css +/* ^^^ support.function.color.css */ +/* ^ constant.numeric.css */ +/* ^ punctuation.separator.css */ +/* ^^^^ constant.numeric.css */ top: rgba(); -// ^^^^ support.function.color.css +/* ^^^^ support.function.color.css */ top: hsl(1deg, 4.5%); -// ^^^ support.function.color.css -// ^^^^ constant.numeric.css -// ^ punctuation.separator.css -// ^^^^ constant.numeric.css +/* ^^^ support.function.color.css */ +/* ^^^^ constant.numeric.css */ +/* ^ punctuation.separator.css */ +/* ^^^^ constant.numeric.css */ top: hsla(); -// ^^^^ support.function.color.css +/* ^^^^ support.function.color.css */ top: hwb(); -// ^^^ support.function.color.css +/* ^^^ support.function.color.css */ top: gray(1, 4.5%); -// ^^^^ support.function.color.css -// ^ constant.numeric.css -// ^ punctuation.separator.css -// ^^^^ constant.numeric.css +/* ^^^^ support.function.color.css */ +/* ^ constant.numeric.css */ +/* ^ punctuation.separator.css */ +/* ^^^^ constant.numeric.css */ top: device-cmyk(0.5, 1%, red()); -// ^^^^^^^^^^^ support.function.color.css -// ^^^ constant.numeric.css -// ^ punctuation.separator.css -// ^^ constant.numeric.css -// ^^^ support.function.color.css +/* ^^^^^^^^^^^ support.function.color.css */ +/* ^^^ constant.numeric.css */ +/* ^ punctuation.separator.css */ +/* ^^ constant.numeric.css */ +/* ^^^ support.function.color.css */ top: color(w() s()); -// ^^^^^ support.function.color.css -// ^ support.function.color.css -// ^ support.function.color.css +/* ^^^^^ support.function.color.css */ +/* ^ support.function.color.css */ +/* ^ support.function.color.css */ top: alpha(- 1.5%); -// ^^^^^ support.function.color.css -// ^ keyword.operator -// ^^^^ constant.numeric.css +/* ^^^^^ support.function.color.css */ +/* ^ keyword.operator.css */ +/* ^^^^ constant.numeric.css */ top: h(+ 1.5deg); -// ^ support.function.color.css -// ^ keyword.operator -// ^^^^^^ constant.numeric.css +/* ^ support.function.color.css */ +/* ^ keyword.operator.css */ +/* ^^^^^^ constant.numeric.css */ top: w(* 1.5%); -// ^ support.function.color.css -// ^ keyword.operator -// ^^^^ constant.numeric.css +/* ^ support.function.color.css */ +/* ^ keyword.operator.css */ +/* ^^^^ constant.numeric.css */ top: shade(1.5%); -// ^^^^^ support.function.color.css -// ^^^^ constant.numeric.css +/* ^^^^^ support.function.color.css */ +/* ^^^^ constant.numeric.css */ top: blenda(red 50% hsl); -// ^^^^^^ support.function.color.css -// ^^^ support.constant.color.w3c-standard-color-name.css -// ^^^ constant.numeric.css -// ^^^ keyword.other.color-space.css - - background-color: color(var(--background, blue) blend(var(--foreground, change-color($var, $blue: 5)) 80%)); -// ^^^^^^^^^^^^^^^^ support.type.property-name.css -// ^ punctuation.separator.key-value.css -// ^^^^^ support.function.color.css -// ^ punctuation.definition.group.begin.css -// ^^^ support.function.var.css -// ^ punctuation.definition.group.begin.css -// ^^^^^^^^^^^^ support.type.custom-property -// ^ punctuation.separator -// ^ punctuation.definition.group.end.css -// ^^^^^ support.function.color.css -// ^ punctuation.definition.group.begin.css -// ^^^ support.function.var.css -// ^ punctuation.definition.group.begin.css -// ^^^^^^^^^^^^ support.type.custom-property.css -// ^ variable.other -// ^ punctuation.separator -// ^ punctuation.definition.group.end.css -// ^^^ constant.numeric.css -// ^^ punctuation.definition.group.end.css -// ^ punctuation.terminator.rule.css +/* ^^^^^^ support.function.color.css */ +/* ^^^ support.constant.color.w3c-standard-color-name.css */ +/* ^^^ constant.numeric.css */ +/* ^^^ keyword.other.color-space.css */ + + background-color: color(var(--background) blend(var(--foreground) 80%)); +/* ^^^^^^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^ support.function.color.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^^^^^^^^^^ support.type.custom-property */ +/* ^ punctuation.definition.group.end.css */ +/* ^^^^^ support.function.color.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^^^^^^^^^^ support.type.custom-property.css */ +/* ^ punctuation.definition.group.end.css */ +/* ^^^ constant.numeric.css */ +/* ^^ punctuation.definition.group.end.css */ +/* ^ punctuation.terminator.rule.css */ } .test-transform-functions { top: rotate3d(-1, 2deg); -// ^^^^^^^^ support.function.css -// ^^ constant.numeric.css -// ^^^^ constant.numeric.css +/* ^^^^^^^^ support.function.transform.css */ +/* ^^ constant.numeric.css */ +/* ^^^^ constant.numeric.css */ top: matrix3d(1, 0); -// ^^^^^^^^ support.function.css -// ^ constant.numeric.css -// ^ punctuation.separator.css -// ^ constant.numeric.css +/* ^^^^^^^^ support.function.transform.css */ +/* ^ constant.numeric.css */ +/* ^ punctuation.separator.css */ +/* ^ constant.numeric.css */ top: translate3d(1, 2px, 3%); -// ^^^^^^^^^^^ support.function.css -// ^ constant.numeric.css -// ^ punctuation.separator.css -// ^^^ constant.numeric.css -// ^^ constant.numeric.css +/* ^^^^^^^^^^^ support.function.transform.css */ +/* ^ constant.numeric.css */ +/* ^ punctuation.separator.css */ +/* ^^^ constant.numeric.css */ +/* ^^ constant.numeric.css */ top: translateY(2px); -// ^^^^^^^^^^ support.function.css -// ^^^ constant.numeric.css +/* ^^^^^^^^^^ support.function.transform.css */ +/* ^^^ constant.numeric.css */ top: translateX(1%); -// ^^^^^^^^^^ support.function -// ^^ constant.numeric.css +/* ^^^^^^^^^^ support.function.transform */ +/* ^^ constant.numeric.css */ top: translateZ(0); -// ^^^^^^^^^^ support.function -// ^ constant.numeric.css +/* ^^^^^^^^^^ support.function.transform */ +/* ^ constant.numeric.css */ top: skewY(1deg); -// ^^^^^ support.function.css -// ^^^^ constant.numeric.css +/* ^^^^^ support.function.transform.css */ +/* ^^^^ constant.numeric.css */ top: skew(1deg, 2turn); -// ^^^^ support.function.css -// ^^^^ constant.numeric.css -// ^ punctuation.separator.css -// ^^^^^ constant.numeric.css +/* ^^^^ support.function.transform.css */ +/* ^^^^ constant.numeric.css */ +/* ^ punctuation.separator.css */ +/* ^^^^^ constant.numeric.css */ top: perspective(17px); -// ^^^^^^^^^^^ support.function.css -// ^^^^ constant.numeric.css +/* ^^^^^^^^^^^ support.function.transform.css */ +/* ^^^^ constant.numeric.css */ top: scaleY(2); -// ^^^^^^ support.function.css -// ^ constant.numeric.css +/* ^^^^^^ support.function.transform.css */ +/* ^ constant.numeric.css */ top: skewY(1rad) rotate(1turn); -// ^^^^^^ support.function.css -// ^^^^^ constant.numeric.css +/* ^^^^^^ support.function.transform.css */ +/* ^^^^^ constant.numeric.css */ transform: translate(var(--center), 0) scale(var(--ripple-scale), 1); -// ^^^^^^^^^ support.function -// ^^^ support.function.var -// ^^^^^^^^ support.type.custom-property -// ^ constant.numeric -// ^^^ support.function.var +/* ^^^^^^^^^ support.function.transform */ +/* ^^^ support.function.var */ +/* ^^^^^^^^ support.type.custom-property */ +/* ^ constant.numeric */ +/* ^^^ support.function.var */ } .test-timing-functions { top: cubic-bezier(0.42, 0, 0.58, 1); -// ^^^^^^^^^^^^ support.function.css -// ^^^^ constant.numeric.css +/* ^^^^^^^^^^^^ support.function.timing.css */ +/* ^^^^ constant.numeric.css */ top: steps(020, start); -// ^^^^^ support.function.css -// ^^^ constant.numeric.css -// ^^^^^ support.keyword.timing-direction.css +/* ^^^^^ support.function.timing.css */ +/* ^^^ constant.numeric.css */ +/* ^^^^^ support.keyword.timing-direction.css */ top: steps(1, end); -// ^^^ support.keyword.timing-direction.css +/* ^^^ support.keyword.timing-direction.css */ top: steps(1, middle); -// ^^^^^^ support.keyword.timing-direction.css +/* ^^^^^^ support.keyword.timing-direction.css */ } .test-shape-functions { top: circle(at top 5.5e20em); -// ^^^^^^ support.function.css -// ^^ keyword.other.css -// ^^^ support.constant.property-value.css -// ^^^^^^^^ constant.numeric.css +/* ^^^^^^ support.function.shape.css */ +/* ^^ keyword.other.css */ +/* ^^^ support.constant.property-value.css */ +/* ^^^^^^^^ constant.numeric.css */ top: ellipse(at 0%); -// ^^^^^^^ support.function.css -// ^^ keyword.other.css -// ^^ constant.numeric.css +/* ^^^^^^^ support.function.shape.css */ +/* ^^ keyword.other.css */ +/* ^^ constant.numeric.css */ top: ellipse(closest-side); -// ^^^^^^^^^^^^ support.constant.property-value.css +/* ^^^^^^^^^^^^ support.constant.property-value.css */ top: inset(1.1px round 50%); -// ^^^^^ support.function.css -// ^^^^^ constant.numeric.css -// ^^^^^ keyword.other.css +/* ^^^^^ support.function.shape.css */ +/* ^^^^^ constant.numeric.css */ +/* ^^^^^ keyword.other.css */ top: rect(auto); -// ^^^^ support.function.css -// ^^^^ support.constant.property-value.css +/* ^^^^ support.function.shape.css */ +/* ^^^^ support.constant.property-value.css */ top: rect(1px); -// ^^^ constant.numeric.css +/* ^^^ constant.numeric.css */ } .test-calc-function { top: calc(1.1px + 2rad); -// ^^^^ support.function -// ^^^^^ constant.numeric.css -// ^^^^ constant.numeric.css +/* ^^^^ support.function.calc.css */ +/* ^^^^^ constant.numeric.css */ +/* ^^^^ constant.numeric.css */ top: calc(attr(start, 1) - 1); /* ^^^^ support.function.attr.css */ top: calc(calc() * calc()); -// ^^^^ support.function -// ^^^^ support.function -// ^ keyword.operator -// ^^^^ support.function +/* ^^^^ support.function.calc.css */ +/* ^^^^ support.function.calc.css */ +/* ^ keyword.operator.css */ +/* ^^^^ support.function.calc.css */ top: calc(100% - (1 * 10px) / 1 - (1 * 10px) / 1 - (1 * 10px) / 1); -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css -// ^^^^ support.function -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css -// ^ punctuation.definition.group.begin.css -// ^^^ constant.numeric.css -// ^ keyword.operator -// ^ punctuation.definition.group.begin.css -// ^^^^^^^^^^ meta.group.css meta.group.css -// ^ punctuation.definition.group.end.css -// ^ keyword.operator -// ^ punctuation.definition.group.begin.css -// ^^ constant.numeric.css -// ^^ keyword.other.unit.css -// ^ punctuation.definition.group.end.css -// ^ keyword.operator -// ^ keyword.operator -// ^ punctuation.definition.group.begin.css -// ^ constant.numeric.css -// ^ keyword.operator -// ^^ constant.numeric.css -// ^ punctuation.definition.group.end.css -// ^ keyword.operator -// ^ constant.numeric.css -// ^ punctuation.definition.group.end.css -// ^ punctuation.terminator.rule.css - meta.group +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css */ +/* ^^^^ support.function.calc.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^ constant.numeric.css */ +/* ^ keyword.operator.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^^^^^^^^^ meta.group.css meta.group.css */ +/* ^ punctuation.definition.group.end.css */ +/* ^ keyword.operator.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^^ constant.numeric.css */ +/* ^^ keyword.other.unit.css */ +/* ^ punctuation.definition.group.end.css */ +/* ^ keyword.operator.css */ +/* ^ keyword.operator.css */ +/* ^ punctuation.definition.group.begin.css */ +/* ^ constant.numeric.css */ +/* ^ keyword.operator.css */ +/* ^^ constant.numeric.css */ +/* ^ punctuation.definition.group.end.css */ +/* ^ keyword.operator.css */ +/* ^ constant.numeric.css */ +/* ^ punctuation.definition.group.end.css */ +/* ^ punctuation.terminator.rule.css - meta.group */ } .test-toggle-function { top: toggle(5px red preserve-3d); -// ^^^^^^ support.function.css -// ^^^ constant.numeric.css -// ^^^ support.constant.color.w3c-standard-color-name.css -// ^^^^^^^^^^^ support.constant.property-value.css +/* ^^^^^^ support.function.toggle.css */ +/* ^^^ constant.numeric.css */ +/* ^^^ support.constant.color.w3c-standard-color-name.css */ +/* ^^^^^^^^^^^ support.constant.property-value.css */ } .test-attr-function { top: attr(*|c); -// ^^^^ support.function.attr.css -// ^ entity.name.namespace.wildcard.css -// ^ punctuation.separator.namespace.css -// ^ entity.other.attribute-name.css +/* ^^^^ support.function.attr.css */ +/* ^ entity.name.namespace.wildcard.css */ +/* ^ punctuation.separator.namespace.css */ +/* ^ entity.other.attribute-name.css */ top: attr(n|size); -// ^ entity.other.namespace-prefix.css -// ^^^^ entity.other.attribute-name.css +/* ^ entity.other.namespace-prefix.css */ +/* ^^^^ entity.other.attribute-name.css */ top: attr(size px, auto); -// ^^^^ entity.other.attribute-name.css -// ^^ keyword.other.unit.css -// ^ punctuation.separator.css -// ^^^^ support.constant.property-value.css +/* ^^^^ entity.other.attribute-name.css */ +/* ^^ keyword.other.unit.css */ +/* ^ punctuation.separator.css */ +/* ^^^^ support.constant.property-value.css */ top: attr(preserve-3d); -// ^^^^^^^^^^^ entity.other.attribute-name.css +/* ^^^^^^^^^^^ entity.other.attribute-name.css */ } .test-url-function { top: url("a"); -// ^^^ support.function.url.css -// ^^^ string.quoted.double.css +/* ^^^ support.function.url.css */ +/* ^^^ string.quoted.double.css */ top: url(a); -// ^ string.unquoted.css +/* ^ string.unquoted.css */ } .test-image-functions { top: image("a"); -// ^^^^^ support.function.image.css -// ^^^ string.quoted.double.css +/* ^^^^^ support.function.image.css */ +/* ^^^ string.quoted.double.css */ top: image(a); -// ^ string.unquoted.css +/* ^ string.unquoted.css */ top: image("a", rgb(0, 0, 0)); -// ^ punctuation.separator.css -// ^ constant.numeric.css +/* ^ punctuation.separator.css */ +/* ^ constant.numeric.css */ top: image-set("a" 1x, a 4dpi); -// ^^^ string.quoted.double.css -// ^^ constant.numeric.css -// ^ keyword.other.unit.css -// ^ punctuation.separator.css -// ^ string.unquoted.css -// ^^^^ constant.numeric.css +/* ^^^ string.quoted.double.css */ +/* ^^ constant.numeric.css */ +/* ^ keyword.other.unit.css */ +/* ^ punctuation.separator.css */ +/* ^ string.unquoted.css */ +/* ^^^^ constant.numeric.css */ top: cross-fade(50% "a", b); -// ^^^^^^^^^^ support.function.image.css -// ^^^ constant.numeric.css -// ^^^ string.quoted.double.css -// ^ punctuation.separator.css -// ^ string.unquoted.css +/* ^^^^^^^^^^ support.function.image.css */ +/* ^^^ constant.numeric.css */ +/* ^^^ string.quoted.double.css */ +/* ^ punctuation.separator.css */ +/* ^ string.unquoted.css */ } .test-gradient-functions { top: linear-gradient(); -// ^^^^^^^^^^^^^^^ support.function.gradient.css +/* ^^^^^^^^^^^^^^^ support.function.gradient.css */ top: linear-gradient(45deg, white); -// ^^^^^ constant.numeric.css -// ^ punctuation.separator.css -// ^^^^^ support.constant.color.w3c-standard-color-name.css +/* ^^^^^ constant.numeric.css */ +/* ^ punctuation.separator.css */ +/* ^^^^^ support.constant.color.w3c-standard-color-name.css */ top: linear-gradient(to top left); -// ^^ keyword.other.css -// ^^^ support.constant.property-value.css -// ^^^^ support.constant.property-value.css +/* ^^ keyword.other.css */ +/* ^^^ support.constant.property-value.css */ +/* ^^^^ support.constant.property-value.css */ top: linear-gradient(0%, 100%); -// ^^ constant.numeric.css -// ^^^^ constant.numeric.css +/* ^^ constant.numeric.css */ +/* ^^^^ constant.numeric.css */ top: repeating-linear-gradient(); -// ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css +/* ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css */ top: radial-gradient(); -// ^^^^^^^^^^^^^^^ support.function.gradient.css +/* ^^^^^^^^^^^^^^^ support.function.gradient.css */ top: radial-gradient(circle at top left); -// ^^^^^^ keyword.other.css -// ^^ keyword.other.css -// ^^^ support.constant.property-value.css -// ^^^^ support.constant.property-value.css +/* ^^^^^^ keyword.other.css */ +/* ^^ keyword.other.css */ +/* ^^^ support.constant.property-value.css */ +/* ^^^^ support.constant.property-value.css */ top: radial-gradient(red, blue); -// ^^^ support.constant.color.w3c-standard-color-name.css -// ^ punctuation.separator.css +/* ^^^ support.constant.color.w3c-standard-color-name.css */ +/* ^ punctuation.separator.css */ top: repeating-radial-gradient(); -// ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css +/* ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css */ } .test-counter-functions { top: counter(name, decimal-leading-zero); -// ^^^^^^^ support.function -// ^^^^ entity.other.counter-name.css string.unquoted.css -// ^ punctuation.separator.css -// ^^^^^^^^^^^^^^^^^^^^ support.constant.property-value.counter-style.css +/* ^^^^^^^ support.function.counter.css */ +/* ^^^^ entity.other.counter-name.css string.unquoted.css */ +/* ^ punctuation.separator.css */ +/* ^^^^^^^^^^^^^^^^^^^^ support.constant.property-value.counter-style.css */ top: counters(name, "str", none); -// ^^^^^^^^ support.function -// ^^^^ entity.other.counter-name.css string.unquoted.css -// ^ punctuation.separator.css -// ^^^^^ string.quoted.double.css -// ^ punctuation.separator.css -// ^^^^ support.constant.property-value.counter-style.css +/* ^^^^^^^^ support.function.counter.css */ +/* ^^^^ entity.other.counter-name.css string.unquoted.css */ +/* ^ punctuation.separator.css */ +/* ^^^^^ string.quoted.double.css */ +/* ^ punctuation.separator.css */ +/* ^^^^ support.constant.property-value.counter-style.css */ top: symbols(fixed "\2020" url()); -// ^^^^^^^ support.function -// ^^^^^ support.constant.symbol-type.css -// ^^^^^^^ string.quoted.double.css -// ^^^ support.function.url.css +/* ^^^^^^^ support.function.counter.css */ +/* ^^^^^ support.constant.symbol-type.css */ +/* ^^^^^^^ string.quoted.double.css */ +/* ^^^ support.function.url.css */ } .test-grid-functions { top: repeat(20); -// ^^^^^^ support.function.css -// ^^ constant.numeric.css +/* ^^^^^^ support.function.grid.css */ +/* ^^ constant.numeric.css */ top: repeat(auto-fit, 2fr minmax() 5%); -// ^^^^^^^^ support.keyword.repetitions.css -// ^ punctuation.separator.css -// ^^^ constant.numeric.css -// ^^^^^^ support.function -// ^^ constant.numeric.css +/* ^^^^^^^^ support.keyword.repetitions.css */ +/* ^ punctuation.separator.css */ +/* ^^^ constant.numeric.css */ +/* ^^^^^^ support.function.grid.css */ +/* ^^ constant.numeric.css */ top: minmax(min-content, 1fr); -// ^^^^^^ support.function -// ^^^^^^^^^^^ support.constant.property-value.css -// ^ punctuation.separator.css -// ^^^ constant.numeric.css +/* ^^^^^^ support.function.grid.css */ +/* ^^^^^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.separator.css */ +/* ^^^ constant.numeric.css */ grid-template: repeat(2, var(--size)) / repeat(2, 50%); -// ^^^ support.function.var.css -// ^^^^^^ support.type.custom-property.css -// ^^ punctuation.definition.group.end.css -// ^^^^^^ support.function.css +/* ^^^ support.function.var.css */ +/* ^^^^^^ support.type.custom-property.css */ +/* ^^ punctuation.definition.group.end.css */ +/* ^^^^^^ support.function.grid.css */ } .test-filter-functions { top: filter(url(), blur()); -// ^^^^^^ support.function -// ^^^ support.function -// ^^^^ support.function +/* ^^^^^^ support.function.filter.css */ +/* ^^^ support.function.url.css */ +/* ^^^^ support.function.filter.css */ top: blur(1px); -// ^^^^ support.function +/* ^^^^ support.function.filter.css */ top: sepia(1% 1); -// ^^^^^ support.function -// ^^ constant.numeric.css -// ^ constant.numeric.css +/* ^^^^^ support.function.filter.css */ +/* ^^ constant.numeric.css */ +/* ^ constant.numeric.css */ top: drop-shadow(1px rgb()); -// ^^^^^^^^^^^ support.function -// ^^^ constant.numeric.css -// ^^^ support.function +/* ^^^^^^^^^^^ support.function.filter.css */ +/* ^^^ constant.numeric.css */ +/* ^^^ support.function.color.css */ top: hue-rotate(1turn); -// ^^^^^^^^^^ support.function -// ^^^^^ constant.numeric.css +/* ^^^^^^^^^^ support.function.filter.css */ +/* ^^^^^ constant.numeric.css */ } -// Test Font Functions: format() & local() +/* Test Font Functions: format() & local() */ @font-face { src: format("embedded-opentype"); -// ^^^^^^ support.function -// ^^^^^^^^^^^^^^^^^^^ string.quoted.double.css +/* ^^^^^^ support.function.font-face.css */ +/* ^^^^^^^^^^^^^^^^^^^ string.quoted.double.css */ src: local(Gentium-Bold); -// ^^^^^ support.function -// ^^^^^^^^^^^^ string.unquoted.css +/* ^^^^^ support.function.font-face.css */ +/* ^^^^^^^^^^^^ string.unquoted.css */ } @font-face { font-family: m700, aria; -// ^^^^ string.unquoted.css -// ^^^^ string.unquoted.css +/* ^^^^ string.unquoted.css */ +/* ^^^^ string.unquoted.css */ } .test-var-function { top: var(--name); -// ^^^ support.function.var.css -// ^^ punctuation.definition.custom-property.css -// ^^^^ support.type.custom-property.name.css +/* ^^^ support.function.var.css */ +/* ^^ punctuation.definition.custom-property.css */ +/* ^^^^ support.type.custom-property.name.css */ } .test-custom-tags > div > span + cust·m-tÀg > div-cøstom-tag ~ form-Çust😀m-tag.classname:last-child:hover {} -// ^ -entity.name.tag.custom.css -// ^^^ entity.name.tag.css -// ^^^^ entity.name.tag.css -// ^ -entity.name.tag.custom.css -// ^^^^^^^^^^ entity.name.tag.custom.css -// ^^^^^^^^^^^^^^ entity.name.tag.custom.css -// ^ -entity.name.tag.custom.css -// ^^^^^^^^^^^^^^^ entity.name.tag.custom.css -// ^^^^^^^^^ entity.other.attribute-name.class.css -// ^^^^^^^^^^ -entity.name.tag.custom.css -// ^^^^^ -entity.name.tag.custom.css +/* ^ -entity.name.tag.custom.css */ +/* ^^^ entity.name.tag.css */ +/* ^^^^ entity.name.tag.css */ +/* ^ -entity.name.tag.custom.css */ +/* ^^^^^^^^^^ entity.name.tag.custom.css */ +/* ^^^^^^^^^^^^^^ entity.name.tag.custom.css */ +/* ^ -entity.name.tag.custom.css */ +/* ^^^^^^^^^^^^^^^ entity.name.tag.custom.css */ +/* ^^^^^^^^^ entity.other.attribute-name.class.css */ +/* ^^^^^^^^^^ -entity.name.tag.custom.css */ +/* ^^^^^ -entity.name.tag.custom.css */ .test-property-name-order-doesnt-prevent-full-matches { grid-template-rows: none; -// ^^^^^^^^^^^^^^^^^^ support.type.property-name -// ^ punctuation.separator.key-value +/* ^^^^^^^^^^^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ grid-template-columns: none; -// ^^^^^^^^^^^^^^^^^^^^^ support.type.property-name -// ^ punctuation.separator.key-value +/* ^^^^^^^^^^^^^^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ grid-template-areas: auto; -// ^^^^^^^^^^^^^^^^^^^ support.type.property-name -// ^ punctuation.separator.key-value +/* ^^^^^^^^^^^^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ grid-template: initial; -// ^^^^^^^^^^^^^ support.type.property-name -// ^ punctuation.separator.key-value +/* ^^^^^^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ grid-row-gap: 3vmin; -// ^^^^^^^^^^^^ support.type.property-name -// ^ punctuation.separator.key-value +/* ^^^^^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ grid-row: auto; -// ^^^^^^^^ support.type.property-name -// ^ punctuation.separator.key-value +/* ^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ } .test-meta-scopes-for-completions { top: 5px; -// ^^^ meta.property-name -// ^^^^ meta.property-value +/*^^^^^^^^^^^ meta.property-list */ +/* ^^^ meta.property-name */ +/* ^^^^ meta.property-value */ top: ; -// ^^^ meta.property-name -// ^ meta.property-value +/*^^^^^^^^^^^ meta.property-list */ +/* ^^^ meta.property-name */ +/* ^ meta.property-value */ top: -// ^^^ meta.property-name +/*^^^^^^^ meta.property-list */ +/* ^^^ meta.property-name */ }/* ^ meta.property-value */ .generic-font-family { font-family: my-serif, serif } -// ^^^^^^^^ string.unquoted -// ^ - string -// ^^^^^ support.constant.font-name +/* ^^^^^^^^ string.unquoted */ +/* ^ - string */ +/* ^^^^^ support.constant.font-name */ .generic-font-family2 { font-family: sans-serif , fantasy , system-ui; } -// ^^^^^^^^^^ support.constant.font-name -// ^^^^^^^ support.constant.font-name -// ^^^^^^^^^ support.constant.font-name +/* ^^^^^^^^^^ support.constant.font-name */ +/* ^^^^^^^ support.constant.font-name */ +/* ^^^^^^^^^ support.constant.font-name */ .generic-font-family3 { font-family: cursive -// ^^^^^^^ support.constant.font-name +/* ^^^^^^^ support.constant.font-name */ } .generic-font-family4 { - font-family: droid serif; // we can't pass this test without being more specific about this being a font-name property -// ^^^^^^^^^^^ string.unquoted + font-family: droid serif; +/* ^^^^^^^^^^^ string.unquoted */ +} + +a { + height:calc(10px/*); + font-family:"a*/); +/* ^^^^^^^^^^^^^^^ comment.block.css */ +/* ^ punctuation.definition.group.end.css */ } .variable-beginnings { --1x: url(data:image/png;base64,PNG); -// ^^^^ support.type.custom-property -// ^^ punctuation.definition.custom-property -// ^^ support.type.custom-property.name -// ^ punctuation.separator.key-value +/* ^^^^ support.type.custom-property */ +/* ^^ punctuation.definition.custom-property */ +/* ^^ support.type.custom-property.name */ +/* ^ punctuation.separator.key-value */ background-image: var(--1x); -// ^^^^ support.type.custom-property -// ^^ punctuation.definition.custom-property -// ^^ support.type.custom-property.name +/* ^^^^ support.type.custom-property */ +/* ^^ punctuation.definition.custom-property */ +/* ^^ support.type.custom-property.name */ --\ff: 5px; -// ^^^^^ support.type.custom-property -// ^^ punctuation.definition.custom-property -// ^^^ support.type.custom-property.name -// ^ punctuation.separator.key-value +/* ^^^^^ support.type.custom-property */ +/* ^^ punctuation.definition.custom-property */ +/* ^^^ support.type.custom-property.name */ +/* ^ punctuation.separator.key-value */ +} + +img{ + clip-path: polygon( + 0% 0%, + 100% 0%, + 100% calc(100% - 31px), +/* ^^^^ support.function.calc */ +/* ^^^ constant.numeric */ +/* ^ punctuation.separator.sequence */ + calc(100% - 196px) calc(100% - 31px), + calc(100% - 196px) 100%, + 0% 100% + ) !important; +/*^ punctuation.definition.group.end */ +/* ^^^^^^^^^^ keyword.other.important */ }