[css] Random red highlighting on code (#397)

Author: aeschli

src/parser/cssNodes.ts

@@ -99,7 +99,8 @@ export enum NodeType {
 	LayerNameList,
 	LayerName,
 	PropertyAtRule,
-	Container
+	Container,
+	ModuleConfig,
 }
 
 export enum ReferenceType {
@@ -1042,16 +1043,17 @@ export class Import extends Node {
 export class Use extends Node {
 
 	public identifier?: Identifier;
-	public parameters?: Nodelist;
+	public parameters?: Node;
 
 	public get type(): NodeType {
 		return NodeType.Use;
 	}
 
-	public getParameters(): Nodelist {
-		if (!this.parameters) {
-			this.parameters = new Nodelist(this);
-		}
+	public setParameters(value: Node | null): value is Node{
+		return this.setNode('parameters', value);
+	}
+
+	public getParameters(): Node | undefined {
 		return this.parameters;
 	}
 
@@ -1097,8 +1099,7 @@ export class ModuleConfiguration extends Node {
 export class Forward extends Node {
 
 	public identifier?: Node;
-	public members?: Nodelist;
-	public parameters?: Nodelist;
+	public parameters?: Node;
 
 	public get type(): NodeType {
 		return NodeType.Forward;
@@ -1112,17 +1113,11 @@ export class Forward extends Node {
 		return this.identifier;
 	}
 
-	public getMembers(): Nodelist {
-		if (!this.members) {
-			this.members = new Nodelist(this);
-		}
-		return this.members;
+	public setParameters(value: Node | null): value is Node{
+		return this.setNode('parameters', value);
 	}
 
-	public getParameters(): Nodelist {
-		if (!this.parameters) {
-			this.parameters = new Nodelist(this);
-		}
+	public getParameters(): Node | undefined {
 		return this.parameters;
 	}
 

src/parser/scssParser.ts

@@ -104,7 +104,7 @@ export class SCSSParser extends cssParser.Parser {
 		return this._parseInterpolation() || super._parseMediaCondition();
 	}
 
-	public _parseMediaFeatureRangeOperator() : boolean {
+	public _parseMediaFeatureRangeOperator(): boolean {
 		return this.accept(scssScanner.SmallerEqualsOperator) || this.accept(scssScanner.GreaterEqualsOperator) || super._parseMediaFeatureRangeOperator();
 	}
 
@@ -816,33 +816,41 @@ export class SCSSParser extends cssParser.Parser {
 			}
 
 			if (this.acceptIdent('with')) {
-				if (!this.accept(TokenType.ParenthesisL)) {
+				if (!node.setParameters(this._parseModuleConfig())) {
 					return this.finish(node, ParseError.LeftParenthesisExpected, [TokenType.ParenthesisR]);
 				}
+			}
+		}
 
-				// First variable statement, no comma.
-				if (!node.getParameters().addChild(this._parseModuleConfigDeclaration())) {
-					return this.finish(node, ParseError.VariableNameExpected);
-				}
+		if (!this.accept(TokenType.SemiColon) && !this.accept(TokenType.EOF)) {
+			return this.finish(node, ParseError.SemiColonExpected);
+		}
 
-				while (this.accept(TokenType.Comma)) {
-					if (this.peek(TokenType.ParenthesisR)) {
-						break;
-					}
-					if (!node.getParameters().addChild(this._parseModuleConfigDeclaration())) {
-						return this.finish(node, ParseError.VariableNameExpected);
-					}
-				}
+		return this.finish(node);
+	}
 
-				if (!this.accept(TokenType.ParenthesisR)) {
-					return this.finish(node, ParseError.RightParenthesisExpected);
-				}
+	public _parseModuleConfig(): nodes.Node | null {
+		const node = this.createNode(nodes.NodeType.ModuleConfig);
+		if (!this.accept(TokenType.ParenthesisL)) {
+			return null;
+		}
 
+		// First variable statement, no comma.
+		if (!node.addChild(this._parseModuleConfigDeclaration())) {
+			return this.finish(node, ParseError.VariableNameExpected);
+		}
+
+		while (this.accept(TokenType.Comma)) {
+			if (this.peek(TokenType.ParenthesisR)) {
+				break;
+			}
+			if (!node.addChild(this._parseModuleConfigDeclaration())) {
+				return this.finish(node, ParseError.VariableNameExpected);
 			}
 		}
 
-		if (!this.accept(TokenType.SemiColon) && !this.accept(TokenType.EOF)) {
-			return this.finish(node, ParseError.SemiColonExpected);
+		if (!this.accept(TokenType.ParenthesisR)) {
+			return this.finish(node, ParseError.RightParenthesisExpected);
 		}
 
 		return this.finish(node);
@@ -894,28 +902,10 @@ export class SCSSParser extends cssParser.Parser {
 		}
 
 		if (this.acceptIdent('with')) {
-			if (!this.accept(TokenType.ParenthesisL)) {
+			if (!node.setParameters(this._parseModuleConfig())) {
 				return this.finish(node, ParseError.LeftParenthesisExpected, [TokenType.ParenthesisR]);
 			}
 
-			// First variable statement, no comma.
-			if (!node.getParameters().addChild(this._parseModuleConfigDeclaration())) {
-				return this.finish(node, ParseError.VariableNameExpected);
-			}
-
-			while (this.accept(TokenType.Comma)) {
-				if (this.peek(TokenType.ParenthesisR)) {
-					break;
-				}
-				if (!node.getParameters().addChild(this._parseModuleConfigDeclaration())) {
-					return this.finish(node, ParseError.VariableNameExpected);
-				}
-			}
-
-			if (!this.accept(TokenType.ParenthesisR)) {
-				return this.finish(node, ParseError.RightParenthesisExpected);
-			}
-
 		} else if (this.peekIdent('hide') || this.peekIdent('show')) {
 			if (!node.addChild(this._parseForwardVisibility())) {
 				return this.finish(node, ParseError.IdentifierOrVariableExpected);

src/services/cssNavigation.ts

@@ -67,7 +67,7 @@ export class CSSNavigation {
 	private getHighlightNode(document: TextDocument, position: Position, stylesheet: nodes.Stylesheet): nodes.Node | undefined {
 		const offset = document.offsetAt(position);
 		let node = nodes.getNodeAtOffset(stylesheet, offset);
-		if (!node || node.type === nodes.NodeType.Stylesheet || node.type === nodes.NodeType.Declarations) {
+		if (!node || node.type === nodes.NodeType.Stylesheet || node.type === nodes.NodeType.Declarations || node.type === nodes.NodeType.ModuleConfig) {
 			return;
 		}
 		if (node.type === nodes.NodeType.Identifier && node.parent && node.parent.type === nodes.NodeType.ClassSelector) {