[CSS] Highlight operator inside calc() function with different style.

zufuliu · May 8, 2024 · 7c4e5ea · 7c4e5ea
1 parent ddc177c
commit 7c4e5ea
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 40 deletions.
diff --git a/scintilla/include/SciLexer.h b/scintilla/include/SciLexer.h
@@ -659,30 +659,31 @@
 #define SCE_CSS_COMMENTBLOCKDOC 4
 #define SCE_CSS_CDO_CDC 5
 #define SCE_CSS_OPERATOR 6
-#define SCE_CSS_NUMBER 7
-#define SCE_CSS_UNICODE_RANGE 8
-#define SCE_CSS_ESCAPECHAR 9
-#define SCE_CSS_STRING_SQ 10
-#define SCE_CSS_STRING_DQ 11
-#define SCE_CSS_URL 12
-#define SCE_CSS_VALUE 13
-#define SCE_CSS_IMPORTANT 14
-#define SCE_CSS_DIMENSION 15
-#define SCE_CSS_VARIABLE 16
-#define SCE_CSS_AT_RULE 17
-#define SCE_CSS_IDENTIFIER 18
-#define SCE_CSS_PSEUDOCLASS 19
-#define SCE_CSS_PSEUDOELEMENT 20
-#define SCE_CSS_FUNCTION 21
-#define SCE_CSS_PROPERTY 22
-#define SCE_CSS_UNKNOWN_PROPERTY 23
-#define SCE_CSS_UNKNOWN_PSEUDOCLASS 24
-#define SCE_CSS_UNKNOWN_PSEUDOELEMENT 25
-#define SCE_CSS_TAG 26
-#define SCE_CSS_ID 27
-#define SCE_CSS_CLASS 28
-#define SCE_CSS_ATTRIBUTE 29
-#define SCE_CSS_PLACEHOLDER 30
+#define SCE_CSS_OPERATOR2 7
+#define SCE_CSS_NUMBER 8
+#define SCE_CSS_UNICODE_RANGE 9
+#define SCE_CSS_ESCAPECHAR 10
+#define SCE_CSS_STRING_SQ 11
+#define SCE_CSS_STRING_DQ 12
+#define SCE_CSS_URL 13
+#define SCE_CSS_VALUE 14
+#define SCE_CSS_IMPORTANT 15
+#define SCE_CSS_DIMENSION 16
+#define SCE_CSS_VARIABLE 17
+#define SCE_CSS_AT_RULE 18
+#define SCE_CSS_IDENTIFIER 19
+#define SCE_CSS_PSEUDOCLASS 20
+#define SCE_CSS_PSEUDOELEMENT 21
+#define SCE_CSS_FUNCTION 22
+#define SCE_CSS_PROPERTY 23
+#define SCE_CSS_UNKNOWN_PROPERTY 24
+#define SCE_CSS_UNKNOWN_PSEUDOCLASS 25
+#define SCE_CSS_UNKNOWN_PSEUDOELEMENT 26
+#define SCE_CSS_TAG 27
+#define SCE_CSS_ID 28
+#define SCE_CSS_CLASS 29
+#define SCE_CSS_ATTRIBUTE 30
+#define SCE_CSS_PLACEHOLDER 31
 #define SCE_NSIS_DEFAULT 0
 #define SCE_NSIS_COMMENT 1
 #define SCE_NSIS_COMMENTLINE 2

diff --git a/scintilla/include/SciLexer.iface b/scintilla/include/SciLexer.iface
@@ -1007,6 +1007,7 @@ val SCE_CSS_COMMENTBLOCK=
 val SCE_CSS_COMMENTBLOCKDOC=
 val SCE_CSS_CDO_CDC=
 val SCE_CSS_OPERATOR=
+val SCE_CSS_OPERATOR2=
 val SCE_CSS_NUMBER=
 val SCE_CSS_UNICODE_RANGE=
 val SCE_CSS_ESCAPECHAR=

diff --git a/scintilla/lexers/LexCSS.cxx b/scintilla/lexers/LexCSS.cxx
@@ -79,10 +79,12 @@ void ColouriseCssDoc(Sci_PositionU startPos, Sci_Position lengthDoc, int initSty
 	const Preprocessor preprocessor = static_cast<Preprocessor>(styler.GetPropertyInt("lexer.lang"));
 	const bool fold = styler.GetPropertyBool("fold");
 	bool propertyValue = false;
+	bool attributeSelector = false;
+	bool calcFunc = false;
 	int variableInterpolation = 0;
 
-	int bracketCount = 0;	// attribute selector
 	int parenCount = 0;		// function
+	int calcLevel = 0;		// calc() function
 	int selectorLevel = 0;	// nested selector
 	int chBefore = 0;
 	int chPrevNonWhite = 0;
@@ -96,12 +98,14 @@ void ColouriseCssDoc(Sci_PositionU startPos, Sci_Position lengthDoc, int initSty
 		const uint32_t lineState = styler.GetLineState(sc.currentLine - 1);
 		/*
 		1: propertyValue
-		7: bracketCount
+		1: attributeSelector
+		6: calcLevel
 		8: parenCount
 		8: selectorLevel
 		*/
 		propertyValue = lineState & true;
-		bracketCount = (lineState >> 1) & 0x7f;
+		attributeSelector = lineState & 2;
+		calcLevel = (lineState >> 2) & 0x3f;
 		parenCount = (lineState >> 8) & 0xff;
 		selectorLevel = lineState >> 16;
 	}
@@ -113,6 +117,7 @@ void ColouriseCssDoc(Sci_PositionU startPos, Sci_Position lengthDoc, int initSty
 	while (sc.More()) {
 		switch (sc.state) {
 		case SCE_CSS_OPERATOR:
+		case SCE_CSS_OPERATOR2:
 		case SCE_CSS_CDO_CDC:
 			sc.SetState(SCE_CSS_DEFAULT);
 			break;
@@ -161,7 +166,9 @@ void ColouriseCssDoc(Sci_PositionU startPos, Sci_Position lengthDoc, int initSty
 						const int chNext = sc.GetDocNextChar(sc.ch == '(');
 						if (sc.ch == '(') {
 							sc.ChangeState(SCE_CSS_FUNCTION);
-							if (StrEqualsAny(s, "url", "url-prefix")
+							if (StrEqual(s, "calc")) {
+								calcFunc = true;
+							} else if (StrEqualsAny(s, "url", "url-prefix")
 								&& !(chNext == '\'' || chNext == '\"' || (chNext == '$' && preprocessor == Preprocessor::Scss))) {
 								levelNext++;
 								parenCount++;
@@ -182,7 +189,7 @@ void ColouriseCssDoc(Sci_PositionU startPos, Sci_Position lengthDoc, int initSty
 							// [attribute = value]
 							sc.ChangeState(SCE_CSS_VALUE);
 						} else if (!propertyValue) {
-							if (bracketCount) {
+							if (attributeSelector) {
 								sc.ChangeState(SCE_CSS_ATTRIBUTE);
 							} else if (chBefore == '.') {
 								sc.ChangeState(SCE_CSS_CLASS);
@@ -317,8 +324,9 @@ void ColouriseCssDoc(Sci_PositionU startPos, Sci_Position lengthDoc, int initSty
 						variableInterpolation = SCE_CSS_DEFAULT + 1;
 					} else {
 						propertyValue = false;
-						bracketCount = 0;
+						attributeSelector = false;
 						parenCount = 0;
+						calcLevel = 0;
 						selectorLevel = 0;
 					}
 					break;
@@ -330,29 +338,35 @@ void ColouriseCssDoc(Sci_PositionU startPos, Sci_Position lengthDoc, int initSty
 						continue;
 					}
 					propertyValue = false;
-					bracketCount = 0;
+					attributeSelector = false;
 					parenCount = 0;
+					calcLevel = 0;
 					selectorLevel = 0;
 					break;
 				case '[':
 					levelNext++;
-					bracketCount++;
+					attributeSelector = true;
 					break;
 				case ']':
 					levelNext--;
-					if (bracketCount > 0) {
-						bracketCount--;
-					}
+					attributeSelector = false;
 					break;
 				case '(':
 					levelNext++;
 					parenCount++;
+					if (calcLevel != 0 || calcFunc) {
+						calcFunc = false;
+						++calcLevel;
+					}
 					break;
 				case ')':
 					levelNext--;
 					if (parenCount > 0) {
 						parenCount--;
 					}
+					if (calcLevel > 0) {
+						--calcLevel;
+					}
 					if (selectorLevel > 0) {
 						selectorLevel--;
 					}
@@ -363,10 +377,18 @@ void ColouriseCssDoc(Sci_PositionU startPos, Sci_Position lengthDoc, int initSty
 					}
 					break;
 				case ';':
-					if (parenCount == 0 && bracketCount == 0) {
+					if (parenCount == 0 && !attributeSelector) {
 						propertyValue = false;
 					}
 					break;
+				case '+':
+				case '-':
+				case '*':
+				case '/':
+					if (calcLevel != 0 && (chPrevNonWhite == ')' || AnyOf(stylePrevNonWhite, SCE_CSS_NUMBER, SCE_CSS_DIMENSION))) {
+						sc.ChangeState(SCE_CSS_OPERATOR2); // operator inside calc() function
+					}
+					break;
 				}
 			}
 		}
@@ -386,7 +408,8 @@ void ColouriseCssDoc(Sci_PositionU startPos, Sci_Position lengthDoc, int initSty
 				styler.SetLevel(sc.currentLine, lev);
 			}
 
-			const int lineState = (propertyValue & true) | (bracketCount << 1) | (parenCount << 8) | (selectorLevel << 16);
+			const int lineState = static_cast<int>(propertyValue) | (static_cast<int>(attributeSelector) << 1)
+				| (calcLevel << 2) | (parenCount << 8) | (selectorLevel << 16);
 			styler.SetLineState(sc.currentLine, lineState);
 			levelCurrent = levelNext;
 		}

diff --git a/src/EditLexers/stlCSS.c b/src/EditLexers/stlCSS.c
@@ -302,7 +302,7 @@ static EDITSTYLE Styles_CSS[] = {
 	{ SCE_CSS_VALUE, NP2StyleX_Value, L"fore:#3A6EA5" },
 	{ SCE_CSS_VARIABLE, NP2StyleX_Variable, L"italic; fore:#003CE6" },
 	{ MULTI_STYLE(SCE_CSS_NUMBER, SCE_CSS_DIMENSION, SCE_CSS_UNICODE_RANGE, 0), NP2StyleX_Number, L"fore:#007F7F" },
-	{ SCE_CSS_OPERATOR, NP2StyleX_Operator, L"fore:#B000B0" },
+	{ MULTI_STYLE(SCE_CSS_OPERATOR, SCE_CSS_OPERATOR2, 0, 0), NP2StyleX_Operator, L"fore:#B000B0" },
 };
 
 EDITLEXER lexCSS = {
@@ -316,7 +316,7 @@ EDITLEXER lexCSS = {
 		'\\', SCE_CSS_ESCAPECHAR, 0,
 		0,
 		0, 0,
-		SCE_CSS_OPERATOR, 0
+		SCE_CSS_OPERATOR, SCE_CSS_OPERATOR2
 		, KeywordAttr32(0, KeywordAttr_PreSorted) // properties
 		| KeywordAttr32(1, KeywordAttr_PreSorted) // at rules
 		| KeywordAttr32(2, KeywordAttr_PreSorted) // pseudo classes

diff --git a/tools/LexerConfig.py b/tools/LexerConfig.py
@@ -341,7 +341,7 @@ class KeywordAttr(IntFlag):
 		'block_comment_string': ('/*', '*/'),
 		'comment_style_marker': 'SCE_CSS_CDO_CDC',
 		'escape_char_style': 'SCE_CSS_ESCAPECHAR',
-		'operator_style': ['SCE_CSS_OPERATOR'],
+		'operator_style': ['SCE_CSS_OPERATOR', 'SCE_CSS_OPERATOR2'],
 		'extra_word_char': '-$@',
 		#'ignore_word_style': ['SCE_CSS_PROPERTY', 'SCE_CSS_PSEUDOCLASS', 'SCE_CSS_PSEUDOELEMENT'],
 		'string_style_range': ['SCE_CSS_ESCAPECHAR', 'SCE_CSS_URL'],