Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-03 06:51:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move SCSS to extension

Browse Source
This commit is contained in:
Martin Aeschlimann
2016-06-13 18:57:54 +02:00
parent b1130039f9
commit 65b2c5ca27
23 changed files with 1839 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
extensions/css/server/src/test/codeActions.test.ts → extensions/css/server/src/test/css/codeActions.test.ts
View File

@@ -5,13 +5,13 @@
'use strict';
import * as assert from 'assert';
import {Parser} from '../parser/cssParser';
import {CSSCompletion} from '../services/cssCompletion';
import {CSSCodeActions} from '../services/cssCodeActions';
import {CSSValidation} from '../services/cssValidation';
import {Parser} from '../../parser/cssParser';
import {CSSCompletion} from '../../services/cssCompletion';
import {CSSCodeActions} from '../../services/cssCodeActions';
import {CSSValidation} from '../../services/cssValidation';
import {CompletionList, TextDocument, TextEdit, Position, Range, Command} from 'vscode-languageserver';
import {applyEdits} from './textEditSupport';
import {applyEdits} from '../textEditSupport';
suite('CSS - Code Actions', () => {
let testCodeActions = function (value: string, tokenBefore: string): Thenable<{ commands: Command[]; document: TextDocument; }> {

52
extensions/css/server/src/test/completion.test.ts → extensions/css/server/src/test/css/completion.test.ts
View File

@@ -5,37 +5,37 @@
'use strict';
import * as assert from 'assert';
import {Parser} from '../parser/cssParser';
import {CSSCompletion} from '../services/cssCompletion';
import {Parser} from '../../parser/cssParser';
import {CSSCompletion} from '../../services/cssCompletion';
import {CompletionList, TextDocument, TextEdit, Position, CompletionItemKind} from 'vscode-languageserver';
import {applyEdits} from './textEditSupport';
import {applyEdits} from '../textEditSupport';
export interface ItemDescription {
label: string;
documentation?: string;
kind?: CompletionItemKind;
resultText?: string;
}
export let assertCompletion = function (completions: CompletionList, expected: ItemDescription, document?: TextDocument) {
let matches = completions.items.filter(completion => {
return completion.label === expected.label;
});
assert.equal(matches.length, 1, expected.label + " should only existing once: Actual: " + completions.items.map(c => c.label).join(', '));
if (expected.documentation) {
assert.equal(matches[0].documentation, expected.documentation);
}
if (expected.kind) {
assert.equal(matches[0].kind, expected.kind);
}
if (document && expected.resultText) {
assert.equal(applyEdits(document, [matches[0].textEdit]), expected.resultText);
}
};
suite('CSS - Completion', () => {
interface ItemDescription {
label: string;
documentation?: string;
kind?: CompletionItemKind;
resultText?: string;
}
let assertCompletion = function (completions: CompletionList, expected: ItemDescription, document?: TextDocument) {
let matches = completions.items.filter(completion => {
return completion.label === expected.label;
});
assert.equal(matches.length, 1, expected.label + " should only existing once: Actual: " + completions.items.map(c => c.label).join(', '));
if (expected.documentation) {
assert.equal(matches[0].documentation, expected.documentation);
}
if (expected.kind) {
assert.equal(matches[0].kind, expected.kind);
}
if (document && expected.resultText) {
assert.equal(applyEdits(document, [matches[0].textEdit]), expected.resultText);
}
};
let testCompletionFor = function (value: string, stringBefore: string, expected: { count?: number, items?: ItemDescription[] }): Thenable<void> {
let idx = stringBefore ? value.indexOf(stringBefore) + stringBefore.length : 0;

6
extensions/css/server/src/test/languageFacts.test.ts → extensions/css/server/src/test/css/languageFacts.test.ts
View File

@@ -5,9 +5,9 @@
'use strict';
import * as assert from 'assert';
import * as languageFacts from '../services/languageFacts';
import {Parser} from '../parser/cssParser';
import * as nodes from '../parser/cssNodes';
import * as languageFacts from '../../services/languageFacts';
import {Parser} from '../../parser/cssParser';
import * as nodes from '../../parser/cssNodes';
import {TextDocument} from 'vscode-languageserver';
export function assertColor(parser: Parser, text: string, selection: string, isColor: boolean): void {

8
extensions/css/server/src/test/lint.test.ts → extensions/css/server/src/test/css/lint.test.ts
View File

@@ -5,10 +5,10 @@
'use strict';
import * as assert from 'assert';
import * as nodes from '../parser/cssNodes';
import {Parser} from '../parser/cssParser';
import {LintVisitor} from '../services/lint';
import {Rule, Rules} from '../services/lintRules';
import * as nodes from '../../parser/cssNodes';
import {Parser} from '../../parser/cssParser';
import {LintVisitor} from '../../services/lint';
import {Rule, Rules} from '../../services/lintRules';
import {TextDocument} from 'vscode-languageserver';
export function assertEntries(node: nodes.Node, rules: nodes.IRule[]): void {

16
extensions/css/server/src/test/navigation.test.ts → extensions/css/server/src/test/css/navigation.test.ts
View File

@@ -5,10 +5,10 @@
'use strict';
import * as assert from 'assert';
import {Scope, GlobalScope, ScopeBuilder} from '../parser/cssSymbolScope';
import * as nodes from '../parser/cssNodes';
import {Parser} from '../parser/cssParser';
import {CSSNavigation} from '../services/cssNavigation';
import {Scope, GlobalScope, ScopeBuilder} from '../../parser/cssSymbolScope';
import * as nodes from '../../parser/cssNodes';
import {Parser} from '../../parser/cssParser';
import {CSSNavigation} from '../../services/cssNavigation';
import {TextDocument, DocumentHighlightKind} from 'vscode-languageserver';
@@ -17,7 +17,7 @@ export function assertScopesAndSymbols(p: Parser, input: string, expected: strin
assert.equal(scopeToString(global), expected);
}
export function assertHighlights(p: Parser, input: string, marker: string, expectedMatches: number, expectedWrites: number): Thenable<void> {
export function assertHighlights(p: Parser, input: string, marker: string, expectedMatches: number, expectedWrites: number, elementName?: string): Thenable<void> {
let document = TextDocument.create('test://test/test.css', 'css', 0, input);
let stylesheet = p.parseStylesheet(document);
@@ -27,7 +27,7 @@ export function assertHighlights(p: Parser, input: string, marker: string, expec
let position = document.positionAt(index);
return new CSSNavigation().findDocumentHighlights(document, position, stylesheet).then(highlights => {
assert.equal(highlights.length, expectedMatches);
assert.equal(highlights.length, expectedMatches, input);
let nWrites = 0;
for (let highlight of highlights) {
@@ -36,7 +36,7 @@ export function assertHighlights(p: Parser, input: string, marker: string, expec
}
let range = highlight.range;
let start = document.offsetAt(range.start), end = document.offsetAt(range.end);
assert.equal(document.getText().substring(start, end), marker);
assert.equal(document.getText().substring(start, end), elementName || marker);
}
assert.equal(nWrites, expectedWrites);
});
@@ -170,7 +170,7 @@ suite('CSS - Symbols', () => {
assertScopesAndSymbols(p, '@font-face { font-family: "Bitstream Vera Serif Bold"; }', '[]');
});
test('mark occurrences', function (testDone) {
test('mark highlights', function (testDone) {
let p = new Parser();
Promise.all([
assertHighlights(p, '@keyframes id {}; #main { animation: id 4s linear 0s infinite alternate; }', 'id', 2, 1),

4
extensions/css/server/src/test/nodes.test.ts → extensions/css/server/src/test/css/nodes.test.ts
View File

@@ -5,8 +5,8 @@
'use strict';
import * as assert from 'assert';
import * as nodes from '../parser/cssNodes';
import {Parser} from '../parser/cssParser';
import * as nodes from '../../parser/cssNodes';
import {Parser} from '../../parser/cssParser';
export class PrintingVisitor implements nodes.IVisitor {

8
extensions/css/server/src/test/parser.test.ts → extensions/css/server/src/test/css/parser.test.ts
View File

@@ -5,10 +5,10 @@
'use strict';
import * as assert from 'assert';
import {Parser} from '../parser/cssParser';
import {TokenType} from '../parser/cssScanner';
import * as nodes from '../parser/cssNodes';
import {ParseError} from '../parser/cssErrors';
import {Parser} from '../../parser/cssParser';
import {TokenType} from '../../parser/cssScanner';
import * as nodes from '../../parser/cssNodes';
import {ParseError} from '../../parser/cssErrors';
export function assertNode(text: string, parser: Parser, f: () => nodes.Node): nodes.Node {
let node = parser.internalParse(text, f);

2
extensions/css/server/src/test/scanner.test.ts → extensions/css/server/src/test/css/scanner.test.ts
View File

@@ -5,7 +5,7 @@
'use strict';
import * as assert from 'assert';
import {Scanner, TokenType} from '../parser/cssScanner';
import {Scanner, TokenType} from '../../parser/cssScanner';
suite('CSS - Scanner', () => {

6
extensions/css/server/src/test/selectorPrinting.test.ts → extensions/css/server/src/test/css/selectorPrinting.test.ts
View File

@@ -5,9 +5,9 @@
'use strict';
import * as assert from 'assert';
import {Parser} from '../parser/cssParser';
import * as nodes from '../parser/cssNodes';
import * as selectorPrinter from '../services/selectorPrinting';
import {Parser} from '../../parser/cssParser';
import * as nodes from '../../parser/cssNodes';
import * as selectorPrinter from '../../services/selectorPrinting';
import {TextDocument} from 'vscode-languageserver';
function elementToString(element: selectorPrinter.Element): string {

336
extensions/css/server/src/test/scss/example.scss Normal file
View File

@@ -0,0 +1,336 @@
// snippets from the Sass documentation at http://sass-lang.com/
/* css stuff */
/* charset */
@charset "UTF-8";
/* nested rules */
#main {
width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
pre { font-size: 3em; }
}
/* parent selector (&) */
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
/* nested properties */
.funky {
font: 2px/3px {
family: fantasy;
size: 30em;
weight: bold;
}
color: black;
}
/* nesting conflicts */
tr.default {
foo: { // properties
foo : 1;
}
foo: 1px; // rule
foo.bar { // selector
foo : 1;
}
foo:bar { // selector
foo : 1;
}
foo: 1px; // rule
}
/* extended comment syntax */
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
/* variables */
$width: 5em;
$width: "Second width?" !default;
#main {
$localvar: 6em;
width: $width;
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
/* variable declaration with whitespaces */
// Set the color of your columns
$grid-background-column-color : rgba(100, 100, 225, 0.25) !default;
/* operations*/
p {
width: (1em + 2em) * 3;
color: #010203 + #040506;
font-family: sans- + "serif";
margin: 3px + 4px auto;
content: "I ate #{5 + 10} pies!";
color: hsl(0, 100%, 50%);
color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
/* functions*/
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
/* @import */
@import "foo.scss";
$family: unquote("Droid+Sans");
@import "rounded-corners", url("http://fonts.googleapis.com/css?family=#{$family}");
#main {
@import "example";
}
/* @media */
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
/* @extend */
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme !optional;
}
/* @debug and @warn */
@debug 10em + 12em;
@mixin adjust-location($x, $y) {
@if unitless($x) {
@warn "Assuming #{$x} to be in pixels";
$x: 1px * $x;
}
@if unitless($y) {
@warn "Assuming #{$y} to be in pixels";
$y: 1px * $y;
}
position: relative; left: $x; top: $y;
}
/* control directives */
/* if statement */
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
/* if else statement */
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else {
color: black;
}
}
/* for statement */
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
/* each statement */
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
/* while statement */
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
/* function with controlstatements */
@function foo($total, $a) {
@for $i from 0 to $total {
@if (unit($a) == "%") and ($i == ($total - 1)) {
$z: 100%;
@return '1';
}
}
@return $grid;
}
/* @mixin simple*/
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
}
/* mixin with parameters */
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
/* mixin with varargs */
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
/* include with varargs */
@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}
/* include with body */
@mixin apply-to-ie6-only {
* html {
@content;
}
}
@include apply-to-ie6-only {
#logo {
background-image: url(/logo.gif);
}
}
/* attributes */
[rel="external"]::after {
content: 's';
}
/*page */
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
/* missing semicolons */
tr.default {
foo.bar {
$foo: 1px
}
foo: {
foo : white
}
foo.bar1 {
@extend tr.default
}
foo.bar2 {
@import "compass"
}
bar: black
}
/* rules without whitespace */
legend {foo{a:s}margin-top:0;margin-bottom:#123;margin-top:s(1)}
/* extend with interpolation variable */
@mixin error($a: false) {
@extend .#{$a};
@extend ##{$a};
}
#bar {a: 1px;}
.bar {b: 1px;}
foo {
@include error('bar');
}
/* css3: @font face */
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
/* rule names with variables */
.orbit-#{$d}-prev {
#{$d}-style: 0;
foo-#{$d}: 1;
#{$d}-bar-#{$d}: 2;
foo-#{$d}-bar: 1;
}
/* keyframes */
@-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* string escaping */
[data-icon='test-1']:before {
content:'\\';
}
/* a comment */
$var1: '\'';
$var2: "\"";
/* another comment */

24
extensions/css/server/src/test/scss/languageFacts.test.ts Normal file
View File

@@ -0,0 +1,24 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import {SCSSParser} from '../../parser/scssParser';
import {assertColor} from '../css/languageFacts.test';
suite('SCSS - Language facts', () => {
test('is color', function () {
let parser = new SCSSParser();
assertColor(parser, '#main { color: foo(red) }', 'red', true);
assertColor(parser, '#main { color: red() }', 'red', false);
assertColor(parser, '#main { red { nested: 1px } }', 'red', false);
assertColor(parser, '#main { @include red; }', 'red', false);
assertColor(parser, '#main { @include foo($f: red); }', 'red', true);
assertColor(parser, '@function red($p) { @return 1px; }', 'red', false);
assertColor(parser, '@function foo($p) { @return red; }', 'red', true);
assertColor(parser, '@function foo($r: red) { @return $r; }', 'red', true);
});
});

52
extensions/css/server/src/test/scss/lint.test.ts Normal file
View File

@@ -0,0 +1,52 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import {Rule, Rules} from '../../services/lintRules';
import {assertEntries} from '../css/lint.test';
import {SCSSParser} from '../../parser/scssParser';
function assertFontFace(input: string, ...rules: Rule[]): void {
let p = new SCSSParser();
let node = p.internalParse(input, p._parseFontFace);
assertEntries(node, rules);
}
function assertRuleSet(input: string, ...rules: Rule[]): void {
let p = new SCSSParser();
let node = p.internalParse(input, p._parseRuleset);
assertEntries(node, rules);
}
suite('SCSS - Lint', () => {
test('empty ruleset', function () {
assertRuleSet('selector { color: red; nested {} }', Rules.EmptyRuleSet);
});
test('font-face required properties', function () {
assertFontFace('@font-face { }', Rules.RequiredPropertiesForFontFace);
assertFontFace('@font-face { src: url(test.tff) }', Rules.RequiredPropertiesForFontFace);
assertFontFace('@font-face { font-family: \'name\' }', Rules.RequiredPropertiesForFontFace);
assertFontFace('@font-face { font-#{family}: foo }'); // no error, ignore all unknown properties
assertFontFace('@font-face { font: {family: foo } }'); // no error, ignore all nested properties
assertFontFace('@font-face { @if true { } }'); // no error, ignore all nested properties
});
test('unknown properties', function () {
assertRuleSet('selector { -ms-property: "rest is missing" }', Rules.UnknownProperty);
assertRuleSet('selector { -moz-box-shadow: "rest is missing" }', Rules.UnknownProperty, Rules.IncludeStandardPropertyWhenUsingVendorPrefix);
assertRuleSet('selector { box-shadow: none }'); // no error
assertRuleSet('selector { -moz-#{box}-shadow: none }'); // no error if theres an interpolation
assertRuleSet('selector { outer: { nested : blue }'); // no error for nested
});
test('vendor specific prefixes', function () {
assertRuleSet('selector { -moz-animation: none }', Rules.AllVendorPrefixes, Rules.IncludeStandardPropertyWhenUsingVendorPrefix);
assertRuleSet('selector { -moz-transform: none; transform: none }', Rules.AllVendorPrefixes);
assertRuleSet('selector { -moz-transform: none; transform: none; -o-transform: none; -webkit-transform: none; -ms-transform: none; }');
});
});

335
extensions/css/server/src/test/scss/parser.test.ts Normal file
View File

@@ -0,0 +1,335 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import * as assert from 'assert';
import {SCSSParser} from '../../parser/scssParser';
import * as nodes from '../../parser/cssNodes';
import {ParseError} from '../../parser/cssErrors';
import {SCSSParseError} from '../../parser/scssErrors';
import {assertNode, assertError} from '../css/parser.test';
suite('SCSS - Parser', () => {
test('Comments', function () {
let parser = new SCSSParser();
assertNode(' a { b: /* comment */ c }', parser, parser._parseStylesheet.bind(parser));
assertNode(' a { b: /* comment \n * is several\n * lines long\n */ c }', parser, parser._parseStylesheet.bind(parser));
assertNode(' a { b: // single line comment\n c }', parser, parser._parseStylesheet.bind(parser));
});
test('Variable', function () {
let parser = new SCSSParser();
assertNode('$color', parser, parser._parseVariable.bind(parser));
assertNode('$co42lor', parser, parser._parseVariable.bind(parser));
assertNode('$-co42lor', parser, parser._parseVariable.bind(parser));
});
test('VariableDeclaration', function () {
let parser = new SCSSParser();
assertNode('$color: #F5F5F5', parser, parser._parseVariableDeclaration.bind(parser));
assertNode('$color: 0', parser, parser._parseVariableDeclaration.bind(parser));
assertNode('$color: 255', parser, parser._parseVariableDeclaration.bind(parser));
assertNode('$color: 25.5', parser, parser._parseVariableDeclaration.bind(parser));
assertNode('$color: 25px', parser, parser._parseVariableDeclaration.bind(parser));
assertNode('$color: 25.5px !default', parser, parser._parseVariableDeclaration.bind(parser));
assertNode('$primary-font: "wf_SegoeUI","Segoe UI","Segoe","Segoe WP"', parser, parser._parseVariableDeclaration.bind(parser));
assertError('$color: red !def', parser, parser._parseVariableDeclaration.bind(parser), ParseError.UnknownKeyword);
assertError('$color : !default', parser, parser._parseVariableDeclaration.bind(parser), ParseError.VariableValueExpected);
assertError('$color !default', parser, parser._parseVariableDeclaration.bind(parser), ParseError.ColonExpected);
});
test('Expr', function () {
let parser = new SCSSParser();
assertNode('($let + 20)', parser, parser._parseExpr.bind(parser));
assertNode('($let - 20)', parser, parser._parseExpr.bind(parser));
assertNode('($let * 20)', parser, parser._parseExpr.bind(parser));
assertNode('($let / 20)', parser, parser._parseExpr.bind(parser));
assertNode('(20 + $let)', parser, parser._parseExpr.bind(parser));
assertNode('(20 - $let)', parser, parser._parseExpr.bind(parser));
assertNode('(20 * $let)', parser, parser._parseExpr.bind(parser));
assertNode('(20 / $let)', parser, parser._parseExpr.bind(parser));
assertNode('(20 / 20 + $let)', parser, parser._parseExpr.bind(parser));
assertNode('(20 + 20 + $let)', parser, parser._parseExpr.bind(parser));
assertNode('(20 + 20 + 20 + $let)', parser, parser._parseExpr.bind(parser));
assertNode('(20 + 20 + 20 + 20 + $let)', parser, parser._parseExpr.bind(parser));
assertNode('(20 + 20 + $let + 20 + 20 + $let)', parser, parser._parseExpr.bind(parser));
assertNode('(20 + 20)', parser, parser._parseExpr.bind(parser));
assertNode('($var1 + $var2)', parser, parser._parseExpr.bind(parser));
assertNode('(($let + 5) * 2)', parser, parser._parseExpr.bind(parser));
assertNode('(($let + (5 + 2)) * 2)', parser, parser._parseExpr.bind(parser));
assertNode('($let + ((5 + 2) * 2))', parser, parser._parseExpr.bind(parser));
assertNode('$color', parser, parser._parseExpr.bind(parser));
assertNode('$color, $color', parser, parser._parseExpr.bind(parser));
assertNode('$color, 42%', parser, parser._parseExpr.bind(parser));
assertNode('$color, 42%, $color', parser, parser._parseExpr.bind(parser));
assertNode('$color - ($color + 10%)', parser, parser._parseExpr.bind(parser));
assertNode('($base + $filler)', parser, parser._parseExpr.bind(parser));
assertNode('(100% / 2 + $filler)', parser, parser._parseExpr.bind(parser));
assertNode('100% / 2 + $filler', parser, parser._parseExpr.bind(parser));
assertNode('not ($v and $b) or $c', parser, parser._parseExpr.bind(parser));
assertError('(20 + 20', parser, parser._parseExpr.bind(parser), ParseError.RightParenthesisExpected);
});
test('SassOperator', function () {
let parser = new SCSSParser();
assertNode('>=', parser, parser._parseOperator.bind(parser));
assertNode('>', parser, parser._parseOperator.bind(parser));
assertNode('<', parser, parser._parseOperator.bind(parser));
assertNode('<=', parser, parser._parseOperator.bind(parser));
assertNode('==', parser, parser._parseOperator.bind(parser));
assertNode('!=', parser, parser._parseOperator.bind(parser));
assertNode('and', parser, parser._parseOperator.bind(parser));
assertNode('+', parser, parser._parseOperator.bind(parser));
assertNode('-', parser, parser._parseOperator.bind(parser));
assertNode('*', parser, parser._parseOperator.bind(parser));
assertNode('/', parser, parser._parseOperator.bind(parser));
assertNode('%', parser, parser._parseOperator.bind(parser));
assertNode('not', parser, parser._parseUnaryOperator.bind(parser));
});
test('Interpolation', function () {
let parser = new SCSSParser();
assertNode('#{red}', parser, parser._parseIdent.bind(parser));
assertNode('#{$color}', parser, parser._parseIdent.bind(parser));
assertNode('#{3 + 4}', parser, parser._parseIdent.bind(parser));
assertNode('#{3 + #{3 + 4}}', parser, parser._parseIdent.bind(parser));
assertNode('#{$d}-style: 0', parser, parser._parseDeclaration.bind(parser));
assertNode('foo-#{$d}: 1', parser, parser._parseDeclaration.bind(parser));
assertNode('#{$d}-bar-#{$d}: 2', parser, parser._parseDeclaration.bind(parser));
assertNode('foo-#{$d}-bar: 1', parser, parser._parseDeclaration.bind(parser));
assertNode('#{$d}-#{$d}: 2', parser, parser._parseDeclaration.bind(parser));
assertNode('&:nth-child(#{$query}+1) { clear: $opposite-direction; }', parser, parser._parseRuleset.bind(parser));
assertError('#{}', parser, parser._parseIdent.bind(parser), ParseError.ExpressionExpected);
assertError('#{1 + 2', parser, parser._parseIdent.bind(parser), ParseError.RightCurlyExpected);
});
test('Declaration', function () {
let parser = new SCSSParser();
assertNode('border: thin solid 1px', parser, parser._parseDeclaration.bind(parser));
assertNode('dummy: $color', parser, parser._parseDeclaration.bind(parser));
assertNode('dummy: blue', parser, parser._parseDeclaration.bind(parser));
assertNode('dummy: (20 / $let)', parser, parser._parseDeclaration.bind(parser));
assertNode('dummy: (20 / 20 + $let)', parser, parser._parseDeclaration.bind(parser));
assertNode('dummy: func($red)', parser, parser._parseDeclaration.bind(parser));
assertNode('dummy: desaturate($red, 10%)', parser, parser._parseDeclaration.bind(parser));
assertNode('dummy: desaturate(16, 10%)', parser, parser._parseDeclaration.bind(parser));
assertNode('color: $base-color + #111', parser, parser._parseDeclaration.bind(parser));
assertNode('color: 100% / 2 + $ref', parser, parser._parseDeclaration.bind(parser));
assertNode('border: ($width * 2) solid black', parser, parser._parseDeclaration.bind(parser));
assertNode('property: $class', parser, parser._parseDeclaration.bind(parser));
assertNode('prop-erty: fnc($t, 10%)', parser, parser._parseDeclaration.bind(parser));
assertNode('width: (1em + 2em) * 3', parser, parser._parseDeclaration.bind(parser));
assertNode('color: #010203 + #040506', parser, parser._parseDeclaration.bind(parser));
assertNode('font-family: sans- + "serif"', parser, parser._parseDeclaration.bind(parser));
assertNode('margin: 3px + 4px auto', parser, parser._parseDeclaration.bind(parser));
assertNode('color: hsl(0, 100%, 50%)', parser, parser._parseDeclaration.bind(parser));
assertNode('color: hsl($hue: 0, $saturation: 100%, $lightness: 50%)', parser, parser._parseDeclaration.bind(parser));
assertNode('foo: if($value == \'default\', flex-gutter(), $value)', parser, parser._parseDeclaration.bind(parser));
assertError('fo = 8', parser, parser._parseDeclaration.bind(parser), ParseError.ColonExpected);
assertError('fo:', parser, parser._parseDeclaration.bind(parser), ParseError.PropertyValueExpected);
assertError('color: hsl($hue: 0,', parser, parser._parseDeclaration.bind(parser), ParseError.ExpressionExpected);
assertError('color: hsl($hue: 0', parser, parser._parseDeclaration.bind(parser), ParseError.RightParenthesisExpected);
});
test('Stylesheet', function () {
let parser = new SCSSParser();
assertNode('$color: #F5F5F5;', parser, parser._parseStylesheet.bind(parser));
assertNode('$color: #F5F5F5; $color: #F5F5F5;', parser, parser._parseStylesheet.bind(parser));
assertNode('$color: #F5F5F5; $color: #F5F5F5; $color: #F5F5F5;', parser, parser._parseStylesheet.bind(parser));
assertNode('#main { width: 97%; p, div { a { font-weight: bold; } } }', parser, parser._parseStylesheet.bind(parser));
assertNode('a { &:hover { color: red; } }', parser, parser._parseStylesheet.bind(parser));
assertNode('fo { font: 2px/3px { family: fantasy; } }', parser, parser._parseStylesheet.bind(parser));
assertNode('.foo { bar: { yoo: fantasy; } }', parser, parser._parseStylesheet.bind(parser));
assertNode('selector { propsuffix: { nested: 1px; } rule: 1px; nested.selector { foo: 1; } nested:selector { foo: 2 }}', parser, parser._parseStylesheet.bind(parser));
assertNode('legend {foo{a:s}margin-top:0;margin-bottom:#123;margin-top:s(1)}', parser, parser._parseStylesheet.bind(parser));
assertNode('@mixin keyframe { @keyframes name { @content; } }', parser, parser._parseStylesheet.bind(parser));
assertNode('@include keyframe { 10% { top: 3px; } }', parser, parser._parseStylesheet.bind(parser));
assertNode('.class{&--sub-class-with-ampersand{color: red;}}', parser, parser._parseStylesheet.bind(parser));
assertError('fo { font: 2px/3px { family } }', parser, parser._parseStylesheet.bind(parser), ParseError.ColonExpected);
});
test('@import', function () {
let parser = new SCSSParser();
assertNode('@import "test.css"', parser, parser._parseImport.bind(parser));
assertNode('@import url("test.css")', parser, parser._parseImport.bind(parser));
assertNode('@import "test.css", "bar.css"', parser, parser._parseImport.bind(parser));
assertNode('@import "test.css", "bar.css" screen, projection', parser, parser._parseImport.bind(parser));
assertNode('foo { @import "test.css"; }', parser, parser._parseStylesheet.bind(parser));
assertError('@import "test.css" "bar.css"', parser, parser._parseStylesheet.bind(parser), ParseError.SemiColonExpected);
assertError('@import "test.css", screen', parser, parser._parseImport.bind(parser), ParseError.URIOrStringExpected);
assertError('@import', parser, parser._parseImport.bind(parser), ParseError.URIOrStringExpected);
});
test('@media', function () {
let parser = new SCSSParser();
assertNode('@media screen { .sidebar { @media (orientation: landscape) { width: 500px; } } }', parser, parser._parseStylesheet.bind(parser));
assertNode('@media #{$media} and ($feature: $value) {}', parser, parser._parseStylesheet.bind(parser));
assertNode('foo { bar { @media screen and (orientation: landscape) {}} }', parser, parser._parseStylesheet.bind(parser));
assertNode('@media screen and (nth($query, 1): nth($query, 2)) { }', parser, parser._parseMedia.bind(parser));
});
test('@keyframe', function () {
let parser = new SCSSParser();
assertNode('@keyframes name { @content; }', parser, parser._parseKeyframe.bind(parser));
});
test('@extend', function () {
let parser = new SCSSParser();
assertNode('foo { @extend .error; border-width: 3px; }', parser, parser._parseStylesheet.bind(parser));
assertNode('a.important { @extend .notice !optional; }', parser, parser._parseStylesheet.bind(parser));
assertNode('.hoverlink { @extend a:hover; }', parser, parser._parseStylesheet.bind(parser));
assertNode('.seriousError { @extend .error; @extend .attention; }', parser, parser._parseStylesheet.bind(parser));
assertNode('#context a%extreme { color: blue; } .notice { @extend %extreme }', parser, parser._parseStylesheet.bind(parser));
assertNode('@media print { .error { } .seriousError { @extend .error; } }', parser, parser._parseStylesheet.bind(parser));
assertNode('@mixin error($a: false) { @extend .#{$a}; @extend ##{$a}; }', parser, parser._parseStylesheet.bind(parser));
assertError('.hoverlink { @extend }', parser, parser._parseStylesheet.bind(parser), ParseError.SelectorExpected);
assertError('.hoverlink { @extend %extreme !default }', parser, parser._parseStylesheet.bind(parser), ParseError.UnknownKeyword);
});
test('@debug', function () {
let parser = new SCSSParser();
assertNode('@debug test;', parser, parser._parseStylesheet.bind(parser));
assertNode('foo { @debug 1 + 4; nested { @warn 1 4; } }', parser, parser._parseStylesheet.bind(parser));
assertNode('@if $foo == 1 { @debug 1 + 4 }', parser, parser._parseStylesheet.bind(parser));
});
test('@if', function () {
let parser = new SCSSParser();
assertNode('@if 1 + 1 == 2 { border: 1px solid; }', parser, parser._parseRuleSetDeclaration.bind(parser));
assertNode('@if 5 < 3 { border: 2px dotted; }', parser, parser._parseRuleSetDeclaration.bind(parser));
assertNode('@if null { border: 3px double; }', parser, parser._parseRuleSetDeclaration.bind(parser));
assertNode('@if 1 <= $let { border: 3px; } @else { border: 4px; }', parser, parser._parseRuleSetDeclaration.bind(parser));
assertNode('@if 1 >= (1 + $foo) { border: 3px; } @else if 1 + 1 == 2 { border: 4px; }', parser, parser._parseRuleSetDeclaration.bind(parser));
assertNode('p { @if $i == 1 { x: 3px; } @else if $i == 1 { x: 4px; } @else { x: 4px; } }', parser, parser._parseStylesheet.bind(parser));
assertNode('@if $i == 1 { p { x: 3px; } }', parser, parser._parseStylesheet.bind(parser));
assertError('@if { border: 1px solid; }', parser, parser._parseRuleSetDeclaration.bind(parser), ParseError.ExpressionExpected);
assertError('@if 1 }', parser, parser._parseRuleSetDeclaration.bind(parser), ParseError.LeftCurlyExpected);
});
test('@for', function () {
let parser = new SCSSParser();
assertNode('@for $i from 1 to 5 { .item-#{$i} { width: 2em * $i; } }', parser, parser._parseRuleSetDeclaration.bind(parser));
assertNode('@for $k from 1 + $x through 5 + $x { }', parser, parser._parseRuleSetDeclaration.bind(parser));
assertError('@for i from 0 to 4 {}', parser, parser._parseRuleSetDeclaration.bind(parser), ParseError.VariableNameExpected);
assertError('@for $i to 4 {}', parser, parser._parseRuleSetDeclaration.bind(parser), SCSSParseError.FromExpected);
assertError('@for $i from 0 by 4 {}', parser, parser._parseRuleSetDeclaration.bind(parser), SCSSParseError.ThroughOrToExpected);
assertError('@for $i from {}', parser, parser._parseRuleSetDeclaration.bind(parser), ParseError.ExpressionExpected);
assertError('@for $i from 0 to {}', parser, parser._parseRuleSetDeclaration.bind(parser), ParseError.ExpressionExpected);
});
test('@each', function () {
let parser = new SCSSParser();
assertNode('@each $i in 1, 2, 3 { }', parser, parser._parseRuleSetDeclaration.bind(parser));
assertNode('@each $i in 1 2 3 { }', parser, parser._parseRuleSetDeclaration.bind(parser));
assertError('@each i in 4 {}', parser, parser._parseRuleSetDeclaration.bind(parser), ParseError.VariableNameExpected);
assertError('@each $i from 4 {}', parser, parser._parseRuleSetDeclaration.bind(parser), SCSSParseError.InExpected);
assertError('@each $i in {}', parser, parser._parseRuleSetDeclaration.bind(parser), ParseError.ExpressionExpected);
});
test('@while', function () {
let parser = new SCSSParser();
assertNode('@while $i < 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }', parser, parser._parseRuleSetDeclaration.bind(parser));
assertError('@while {}', parser, parser._parseRuleSetDeclaration.bind(parser), ParseError.ExpressionExpected);
assertError('@while $i != 4', parser, parser._parseRuleSetDeclaration.bind(parser), ParseError.LeftCurlyExpected);
assertError('@while ($i >= 4) {', parser, parser._parseRuleSetDeclaration.bind(parser), ParseError.RightCurlyExpected);
});
test('@mixin', function () {
let parser = new SCSSParser();
assertNode('@mixin large-text { font: { family: Arial; size: 20px; } color: #ff0000; }', parser, parser._parseStylesheet.bind(parser));
assertNode('@mixin sexy-border($color, $width: 1in) { color: black; }', parser, parser._parseStylesheet.bind(parser));
assertNode('@mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; }', parser, parser._parseStylesheet.bind(parser));
assertNode('@mixin apply-to-ie6-only { * html { @content; } }', parser, parser._parseStylesheet.bind(parser));
assertNode('@mixin #{foo}($color){}', parser, parser._parseStylesheet.bind(parser));
assertNode('@mixin foo ($i:4) { size: $i; @include wee ($i - 1); }', parser, parser._parseStylesheet.bind(parser));
assertError('@mixin $1 {}', parser, parser._parseStylesheet.bind(parser), ParseError.IdentifierExpected);
assertError('@mixin foo() i {}', parser, parser._parseStylesheet.bind(parser), ParseError.LeftCurlyExpected);
assertError('@mixin foo(1) {}', parser, parser._parseStylesheet.bind(parser), ParseError.RightParenthesisExpected);
assertError('@mixin foo($color = 9) {}', parser, parser._parseStylesheet.bind(parser), ParseError.RightParenthesisExpected);
assertError('@mixin foo($color)', parser, parser._parseStylesheet.bind(parser), ParseError.LeftCurlyExpected);
assertError('@mixin foo($color){', parser, parser._parseStylesheet.bind(parser), ParseError.RightCurlyExpected);
assertError('@mixin foo($color,){', parser, parser._parseStylesheet.bind(parser), ParseError.VariableNameExpected);
});
test('@include', function () {
let parser = new SCSSParser();
assertNode('p { @include sexy-border(blue); }', parser, parser._parseStylesheet.bind(parser));
assertNode('.shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); }', parser, parser._parseStylesheet.bind(parser));
assertNode('$values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values...); }', parser, parser._parseStylesheet.bind(parser));
assertNode('p { @include apply-to-ie6-only { #logo { background-image: url(/logo.gif); } } }', parser, parser._parseStylesheet.bind(parser));
assertError('p { @include sexy-border blue', parser, parser._parseStylesheet.bind(parser), ParseError.SemiColonExpected);
assertError('p { @include sexy-border($values blue', parser, parser._parseStylesheet.bind(parser), ParseError.RightParenthesisExpected);
assertError('p { @include }', parser, parser._parseStylesheet.bind(parser), ParseError.IdentifierExpected);
assertError('p { @include foo($values }', parser, parser._parseStylesheet.bind(parser), ParseError.RightParenthesisExpected);
assertError('p { @include foo($values, }', parser, parser._parseStylesheet.bind(parser), ParseError.ExpressionExpected);
});
test('@function', function () {
let parser = new SCSSParser();
assertNode('@function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; }', parser, parser._parseStylesheet.bind(parser));
assertNode('@function grid-width($n: 1, $e) { @return 0; }', parser, parser._parseStylesheet.bind(parser));
assertNode('@function foo($total, $a) { @for $i from 0 to $total { } @return $grid; }', parser, parser._parseStylesheet.bind(parser));
assertNode('@function foo() { @if (unit($a) == "%") and ($i == ($total - 1)) { @return 0; } @return 1; }', parser, parser._parseStylesheet.bind(parser));
assertNode('@function is-even($int) { @if $int%2 == 0 { @return true; } @return false }', parser, parser._parseStylesheet.bind(parser));
assertNode('@function bar ($i) { @if $i > 0 { @return $i * bar($i - 1); } @return 1; }', parser, parser._parseStylesheet.bind(parser));
assertError('@function foo {} ', parser, parser._parseStylesheet.bind(parser), ParseError.LeftParenthesisExpected);
assertError('@function {} ', parser, parser._parseStylesheet.bind(parser), ParseError.IdentifierExpected);
assertError('@function foo($a $b) {} ', parser, parser._parseStylesheet.bind(parser), ParseError.RightParenthesisExpected);
assertError('@function foo($a {} ', parser, parser._parseStylesheet.bind(parser), ParseError.RightParenthesisExpected);
assertError('@function foo($a...) { @return; }', parser, parser._parseStylesheet.bind(parser), ParseError.ExpressionExpected);
assertError('@function foo($a,) {} ', parser, parser._parseStylesheet.bind(parser), ParseError.VariableNameExpected);
assertError('@function foo($a:) {} ', parser, parser._parseStylesheet.bind(parser), ParseError.VariableValueExpected);
});
test('Ruleset', function () {
let parser = new SCSSParser();
assertNode('.selector { prop: erty $let 1px; }', parser, parser._parseRuleset.bind(parser));
assertNode('selector:active { property:value; nested:hover {}}', parser, parser._parseRuleset.bind(parser));
assertNode('selector {}', parser, parser._parseRuleset.bind(parser));
assertNode('selector { property: declaration }', parser, parser._parseRuleset.bind(parser));
assertNode('selector { $variable: declaration }', parser, parser._parseRuleset.bind(parser));
assertNode('selector { nested {}}', parser, parser._parseRuleset.bind(parser));
assertNode('selector { nested, a, b {}}', parser, parser._parseRuleset.bind(parser));
assertNode('selector { property: value; property: $value; }', parser, parser._parseRuleset.bind(parser));
assertNode('selector { property: value; @keyframes foo {} @-moz-keyframes foo {}}', parser, parser._parseRuleset.bind(parser));
});
test('Nested Ruleset', function () {
let parser = new SCSSParser();
assertNode('.class1 { $let: 1; .class { $let: 2; three: $let; let: 3; } one: $let; }', parser, parser._parseRuleset.bind(parser));
assertNode('.class1 { > .class2 { & > .class4 { rule1: v1; } } }', parser, parser._parseRuleset.bind(parser));
});
test('Selector Interpolation', function () {
let parser = new SCSSParser();
assertNode('.#{$name} { }', parser, parser._parseRuleset.bind(parser));
assertNode('p.#{$name} { #{$attr}-color: blue; }', parser, parser._parseRuleset.bind(parser));
assertNode('sans-#{serif} { a-#{1 + 2}-color-#{$attr}: blue; }', parser, parser._parseRuleset.bind(parser));
assertNode('##{f} .#{f} #{f}:#{f} { }', parser, parser._parseRuleset.bind(parser));
});
test('Parent Selector', function () {
let parser = new SCSSParser();
assertNode('&:hover', parser, parser._parseSimpleSelector.bind(parser));
assertNode('&.float', parser, parser._parseSimpleSelector.bind(parser));
assertNode('&-bar', parser, parser._parseSimpleSelector.bind(parser));
assertNode('&&', parser, parser._parseSimpleSelector.bind(parser));
});
test('Selector Placeholder', function () {
let parser = new SCSSParser();
assertNode('%hover', parser, parser._parseSimpleSelector.bind(parser));
assertNode('a%float', parser, parser._parseSimpleSelector.bind(parser));
});
});

78
extensions/css/server/src/test/scss/scssCompletion.test.ts Normal file
View File

@@ -0,0 +1,78 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import * as assert from 'assert';
import {SCSSParser} from '../../parser/scssParser';
import {SCSSCompletion} from '../../services/scssCompletion';
import * as nodes from '../../parser/cssNodes';
import {TextDocument, Position} from 'vscode-languageserver';
import {assertCompletion, ItemDescription} from '../css/completion.test';
suite('SCSS - Completions', () => {
let testCompletionFor = function (value: string, stringBefore: string, expected: { count?: number, items?: ItemDescription[] }): Thenable<void> {
let idx = stringBefore ? value.indexOf(stringBefore) + stringBefore.length : 0;
let completionProvider = new SCSSCompletion();
let document = TextDocument.create('test://test/test.scss', 'scss', 0, value);
let position = Position.create(0, idx);
let jsonDoc = new SCSSParser().parseStylesheet(document);
return completionProvider.doComplete(document, position, jsonDoc).then(list => {
if (expected.count) {
assert.equal(list.items, expected.count);
}
if (expected.items) {
for (let item of expected.items) {
assertCompletion(list, item, document);
}
}
});
};
test('sylesheet', function (testDone): any {
Promise.all([
testCompletionFor('$i: 0; body { width: ', 'width: ', {
items: [
{ label: '$i' }
]
}),
testCompletionFor('@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }', '.item-#{', {
items: [
{ label: '$i' }
]
}),
testCompletionFor('.foo { background-color: d', 'background-color: d', {
items: [
{ label: 'darken' },
{ label: 'desaturate' }
]
}),
testCompletionFor('@function foo($x, $y) { @return $x + $y; } .foo { background-color: f', 'background-color: f', {
items: [
{ label: 'foo' }
]
}),
testCompletionFor('.foo { di span { } ', 'di', {
items: [
{ label: 'display' },
{ label: 'div' }
]
}),
testCompletionFor('.foo { .', '{ .', {
items: [
{ label: '.foo' }
]
}),
// issue #250
testCompletionFor('.foo { display: block;', 'block;', {
count: 0
}),
]).then(() => testDone(), (error) => testDone(error));
});
});

68
extensions/css/server/src/test/scss/scssNavigation.test.ts Normal file
View File

@@ -0,0 +1,68 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import {SCSSParser} from '../../parser/scssParser';
import * as nodes from '../../parser/cssNodes';
import {assertSymbolsInScope, assertScopesAndSymbols, assertHighlights} from '../css/navigation.test';
suite('SCSS - Symbols', () => {
test('symbols in scopes', function() {
var p = new SCSSParser();
assertSymbolsInScope(p, '$var: iable;', 0, { name:'$var', type:nodes.ReferenceType.Variable });
assertSymbolsInScope(p, '$var: iable;', 11, { name:'$var', type:nodes.ReferenceType.Variable });
assertSymbolsInScope(p, '$var: iable; .class { $color: blue; }', 11, { name:'$var', type:nodes.ReferenceType.Variable }, { name:'.class', type:nodes.ReferenceType.Rule });
assertSymbolsInScope(p, '$var: iable; .class { $color: blue; }', 22, { name:'$color', type:nodes.ReferenceType.Variable });
assertSymbolsInScope(p, '$var: iable; .class { $color: blue; }', 36, { name:'$color', type:nodes.ReferenceType.Variable });
assertSymbolsInScope(p, '@namespace "x"; @mixin mix() {}', 0, { name:'mix', type:nodes.ReferenceType.Mixin });
assertSymbolsInScope(p, '@mixin mix { @mixin nested() {} }', 12, { name:'nested', type:nodes.ReferenceType.Mixin });
assertSymbolsInScope(p, '@mixin mix () { @mixin nested() {} }', 13);
});
test('scopes and symbols', function() {
var p = new SCSSParser();
assertScopesAndSymbols(p, '$var1: 1; $var2: 2; .foo { $var3: 3; }', '$var1,$var2,.foo,[$var3]');
assertScopesAndSymbols(p, '@mixin mixin1 { $var0: 1} @mixin mixin2($var1) { $var3: 3 }', 'mixin1,mixin2,[$var0],[$var1,$var3]');
assertScopesAndSymbols(p, 'a b { $var0: 1; c { d { } } }', '[$var0,c,[d,[]]]');
assertScopesAndSymbols(p, '@function a($p1: 1, $p2: 2) { $v1: 3; @return $v1; }', 'a,[$p1,$p2,$v1]');
assertScopesAndSymbols(p, '$var1: 3; @if $var1 == 2 { $var2: 1; } @else { $var2: 2; $var3: 2;} ', '$var1,[$var2],[$var2,$var3]');
assertScopesAndSymbols(p, '@if $var1 == 2 { $var2: 1; } @else if $var1 == 2 { $var3: 2; } @else { $var3: 2; } ', '[$var2],[$var3],[$var3]');
assertScopesAndSymbols(p, '$var1: 3; @while $var1 < 2 { #rule { a: b; } }', '$var1,[#rule,[]]');
assertScopesAndSymbols(p, '$i:0; @each $name in f1, f2, f3 { $i:$i+1; }', '$i,[$name,$i]');
assertScopesAndSymbols(p, '$i:0; @for $x from $i to 5 { }', '$i,[$x]');
});
test('mark highlights', function(testDone) {
var p = new SCSSParser();
Promise.all([
assertHighlights(p, '$var1: 1; $var2: /**/$var1;', '$var1', 2, 1),
assertHighlights(p, '$var1: 1; p { $var2: /**/$var1; }', '/**/', 2, 1, '$var1'),
assertHighlights(p, 'r1 { $var1: 1; p1: $var1;} r2,r3 { $var1: 1; p1: /**/$var1 + $var1;}', '/**/', 3, 1, '$var1'),
assertHighlights(p, '.r1 { r1: 1em; } r2 { r1: 2em; @extend /**/.r1;}', '/**/', 2, 1, '.r1'),
assertHighlights(p, '/**/%r1 { r1: 1em; } r2 { r1: 2em; @extend %r1;}', '/**/', 2, 1, '%r1'),
assertHighlights(p, '@mixin r1 { r1: $p1; } r2 { r2: 2em; @include /**/r1; }', '/**/', 2, 1, 'r1'),
assertHighlights(p, '@mixin r1($p1) { r1: $p1; } r2 { r2: 2em; @include /**/r1(2px); }', '/**/', 2, 1, 'r1'),
assertHighlights(p, '$p1: 1; @mixin r1($p1: $p1) { r1: $p1; } r2 { r2: 2em; @include /**/r1; }', '/**/', 2, 1, 'r1'),
assertHighlights(p, '/**/$p1: 1; @mixin r1($p1: $p1) { r1: $p1; }', '/**/', 2, 1, '$p1'),
assertHighlights(p, '$p1 : 1; @mixin r1($p1) { r1: /**/$p1; }', '/**/', 2, 1, '$p1'),
assertHighlights(p, '/**/$p1 : 1; @mixin r1($p1) { r1: $p1; }', '/**/', 1, 1, '$p1'),
assertHighlights(p, '$p1 : 1; @mixin r1(/**/$p1) { r1: $p1; }', '/**/', 2, 1, '$p1'),
assertHighlights(p, '$p1 : 1; @function r1($p1, $p2: /**/$p1) { @return $p1 + $p1 + $p2; }', '/**/', 2, 1, '$p1'),
assertHighlights(p, '$p1 : 1; @function r1($p1, /**/$p2: $p1) { @return $p1 + $p2 + $p2; }', '/**/', 3, 1, '$p2'),
assertHighlights(p, '@function r1($p1, $p2) { @return $p1 + $p2; } @function r2() { @return /**/r1(1, 2); }', '/**/', 2, 1, 'r1'),
assertHighlights(p, '@function /**/r1($p1, $p2) { @return $p1 + $p2; } @function r2() { @return r1(1, 2); } p { x: r2(); }', '/**/', 2, 1, 'r1'),
assertHighlights(p, '@function r1($p1, $p2) { @return $p1 + $p2; } @function r2() { @return r1(/**/$p1 : 1, $p2 : 2); } p { x: r2(); }', '/**/', 3, 1, '$p1'),
assertHighlights(p, '@mixin /*here*/foo { display: inline } foo { @include foo; }', '/*here*/', 2, 1, 'foo'),
assertHighlights(p, '@mixin foo { display: inline } foo { @include /*here*/foo; }', '/*here*/', 2, 1, 'foo'),
assertHighlights(p, '@mixin foo { display: inline } /*here*/foo { @include foo; }', '/*here*/', 1, 1, 'foo'),
assertHighlights(p, '@function /*here*/foo($i) { @return $i*$i; } #foo { width: foo(2); }', '/*here*/', 2, 1, 'foo'),
assertHighlights(p, '@function foo($i) { @return $i*$i; } #foo { width: /*here*/foo(2); }', '/*here*/', 2, 1, 'foo')
]).then(() => testDone(), (error) => testDone(error));
});
});

34
extensions/css/server/src/test/scss/selectorPrinting.test.ts Normal file
View File

@@ -0,0 +1,34 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import {SCSSParser} from '../../parser/scssParser';
import {parseSelector} from '../css/selectorPrinting.test';
suite('SCSS - Selector Printing', () => {
test('nested selector', function () {
let p = new SCSSParser();
parseSelector(p, 'o1 { e1 { } }', 'e1', '{o1{…{e1}}}');
parseSelector(p, 'o1 { e1.div { } }', 'e1', '{o1{…{e1[class=div]}}}');
parseSelector(p, 'o1 o2 { e1 { } }', 'e1', '{o1{…{o2{…{e1}}}}}');
parseSelector(p, 'o1, o2 { e1 { } }', 'e1', '{o1{…{e1}}}');
parseSelector(p, 'o1 { @if $a { e1 { } } }', 'e1', '{o1{…{e1}}}');
parseSelector(p, 'o1 { @mixin a { e1 { } } }', 'e1', '{e1}');
parseSelector(p, 'o1 { @mixin a { e1 { } } }', 'e1', '{e1}');
});
test('referencing selector', function () {
let p = new SCSSParser();
parseSelector(p, 'o1 { &:hover { }}', '&', '{o1[:hover=]}');
parseSelector(p, 'o1 { &:hover & { }}', '&', '{o1[:hover=]{…{o1}}}');
});
test('placeholders', function () {
let p = new SCSSParser();
parseSelector(p, '%o1 { e1 { } }', 'e1', '{%o1{…{e1}}}');
});
});