Only insert semicolons inside of CSS

package.json

@@ -2,7 +2,7 @@
   "name": "vscode-styled-components",
   "displayName": "vscode-styled-components",
   "description": "Syntax highlighting for styled-components",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "publisher": "styled-components",
   "icon": "logo.png",
   "license": "MIT",

src/insertColonCommand.ts

@@ -1,5 +1,6 @@
-import { commands, window } from "vscode";
+import { commands, Position, Range, window } from "vscode";
 import { getDefaultCSSDataProvider } from "vscode-css-languageservice";
+import { normalizeRegex, patterns } from "./patterns";
 
 // Collect all CSS Functions, like matrix(), rotate() etc
 // There may be overlap so use Set to ensure unique values
@@ -33,15 +34,47 @@ export const enterKeyEvent = commands.registerCommand(
       return;
     }
 
-    const cursorPosition = editor.selection;
-    const lineText = editor.document.lineAt(cursorPosition.start.line).text;
+    const selection = editor.selection;
+    const textBeforeCursor = editor.document.getText(
+      new Range(new Position(0, 0), selection.active)
+    );
+    let insideAPattern = false;
+
+    // determine if the cursor is inside a pattern
+    patterns.forEach((pattern) => {
+      try {
+        /**
+         * this regex will match if the cursor is inside the pattern
+         * more specifically, we've encountered the beginning but not the corresponding ending
+         * that should indicate that we're inside css
+         */
+        const endRegex = new RegExp(
+          `(${normalizeRegex(pattern.begin)})(?![\\S\\s]*(${normalizeRegex(
+            pattern.end
+          )}))`
+        );
+
+        if (endRegex.test(textBeforeCursor)) {
+          insideAPattern = true;
+        }
+      } catch (e) {
+        // if the regex is invalid, skip it
+        console.warn("Failed to process regex:", e);
+      }
+    });
+
+    if (!insideAPattern) {
+      return;
+    }
+
+    const lineText = editor.document.lineAt(selection.start.line).text;
     const lineTextList = lineText.trim().split(" ");
     const lastWordBeforeCursor = lineTextList[lineTextList.length - 1];
 
     if (properties.find((value) => value.name === lastWordBeforeCursor)) {
       editor.edit((editBuilder) => {
         editBuilder.insert(
-          editor.document.lineAt(cursorPosition.active).range.end,
+          editor.document.lineAt(selection.active).range.end,
           ": ;"
         );
       });

src/patterns.ts

@@ -0,0 +1,43 @@
+import rawPatternFile from "../syntaxes/styled-components.json";
+export const patterns = rawPatternFile.patterns;
+
+/**
+ * replaces POSIX regex with javascript compatible regex
+ * @param regex POSIX regex to convert
+ * @returns converted regex
+ */
+export const normalizeRegex = (regex: string) => {
+  // alnum
+  let out = regex.replace(/\[:alnum:\]/g, "a-zA-Z0-9");
+  // alpha
+  out = out.replace(/\[:alpha:\]/g, "a-zA-Z");
+  // ascii
+  out = out.replace(/\[:ascii:\]/g, "\\x00-\\x7F");
+  // blank
+  out = out.replace(/\[:blank:\]/g, " \\t");
+  // cntrl
+  out = out.replace(/\[:cntrl:\]/g, "\\x00-\\x1F\\x7F");
+  // digit
+  out = out.replace(/\[:digit:\]/g, "0-9");
+  // graph
+  out = out.replace(/\[:graph:\]/g, "\\x21-\\x7E");
+  // lower
+  out = out.replace(/\[:lower:\]/g, "a-z");
+  // print
+  out = out.replace(/\[:print:\]/g, "\\x20-\\x7E");
+  // punct
+  out = out.replace(
+    /\[:punct:\]/g,
+    "!\"\\#$%&'()*+,\\-./:;<=>?@\\[\\\\\\]^_‘{|}~"
+  );
+  // space
+  out = out.replace(/\[:space:\]/g, " \\t\\r\\n\\v\\f");
+  // upper
+  out = out.replace(/\[:upper:\]/g, "A-Z");
+  // word
+  out = out.replace(/\[:word:\]/g, "a-zA-Z0-9_");
+  // xdigit
+  out = out.replace(/\[:xdigit:\]/g, "a-fA-F0-9");
+
+  return out;
+};

src/tests/suite/colorize-results/arrow-function_js.json

@@ -8,7 +8,7 @@
 			"dark_vs": "storage.type: #569CD6",
 			"light_vs": "storage.type: #0000FF",
 			"hc_black": "storage.type: #569CD6",
-			"hc_light": "storage.type: #0000FF"
+			"hc_light": "storage.type: #0F4A85"
 		}
 	},
 	{
@@ -32,7 +32,7 @@
 			"dark_vs": "default: #D4D4D4",
 			"light_vs": "default: #000000",
 			"hc_black": "entity.name.function: #DCDCAA",
-			"hc_light": "entity.name.function: #795E26"
+			"hc_light": "entity.name.function: #5E2CBC"
 		}
 	},
 	{
@@ -140,7 +140,7 @@
 			"dark_vs": "storage.type: #569CD6",
 			"light_vs": "storage.type: #0000FF",
 			"hc_black": "storage.type: #569CD6",
-			"hc_light": "storage.type: #0000FF"
+			"hc_light": "storage.type: #0F4A85"
 		}
 	},
 	{
@@ -164,7 +164,7 @@
 			"dark_vs": "default: #D4D4D4",
 			"light_vs": "default: #000000",
 			"hc_black": "entity.name.function: #DCDCAA",
-			"hc_light": "entity.name.function: #795E26"
+			"hc_light": "entity.name.function: #5E2CBC"
 		}
 	},
 	{
@@ -176,7 +176,7 @@
 			"dark_vs": "string: #CE9178",
 			"light_vs": "string: #A31515",
 			"hc_black": "string: #CE9178",
-			"hc_light": "string: #A31515"
+			"hc_light": "string: #0F4A85"
 		}
 	},
 	{
@@ -236,7 +236,7 @@
 			"dark_vs": "constant.numeric: #B5CEA8",
 			"light_vs": "constant.numeric: #098658",
 			"hc_black": "constant.numeric: #B5CEA8",
-			"hc_light": "constant.numeric: #098658"
+			"hc_light": "constant.numeric: #096D48"
 		}
 	},
 	{
@@ -248,7 +248,7 @@
 			"dark_vs": "keyword.other.unit: #B5CEA8",
 			"light_vs": "keyword.other.unit: #098658",
 			"hc_black": "keyword.other.unit: #B5CEA8",
-			"hc_light": "keyword.other.unit: #098658"
+			"hc_light": "keyword.other.unit: #096D48"
 		}
 	},
 	{
@@ -272,7 +272,7 @@
 			"dark_vs": "string: #CE9178",
 			"light_vs": "string: #A31515",
 			"hc_black": "string: #CE9178",
-			"hc_light": "string: #A31515"
+			"hc_light": "string: #0F4A85"
 		}
 	},
 	{

src/tests/suite/colorize-results/attrs_js.json

@@ -8,7 +8,7 @@
 			"dark_vs": "storage.type: #569CD6",
 			"light_vs": "storage.type: #0000FF",
 			"hc_black": "storage.type: #569CD6",
-			"hc_light": "storage.type: #0000FF"
+			"hc_light": "storage.type: #0F4A85"
 		}
 	},
 	{
@@ -32,7 +32,7 @@
 			"dark_vs": "default: #D4D4D4",
 			"light_vs": "default: #000000",
 			"hc_black": "variable: #9CDCFE",
-			"hc_light": "variable.other.constant: #0070C1"
+			"hc_light": "variable.other.constant: #02715D"
 		}
 	},
 	{
@@ -128,7 +128,7 @@
 			"dark_vs": "default: #D4D4D4",
 			"light_vs": "default: #000000",
 			"hc_black": "entity.name.function: #DCDCAA",
-			"hc_light": "entity.name.function: #795E26"
+			"hc_light": "entity.name.function: #5E2CBC"
 		}
 	},
 	{
@@ -212,7 +212,7 @@
 			"dark_vs": "string: #CE9178",
 			"light_vs": "string: #A31515",
 			"hc_black": "string: #CE9178",
-			"hc_light": "string: #A31515"
+			"hc_light": "string: #0F4A85"
 		}
 	},
 	{
@@ -224,7 +224,7 @@
 			"dark_vs": "string: #CE9178",
 			"light_vs": "string: #A31515",
 			"hc_black": "string: #CE9178",
-			"hc_light": "string: #A31515"
+			"hc_light": "string: #0F4A85"
 		}
 	},
 	{
@@ -236,7 +236,7 @@
 			"dark_vs": "string: #CE9178",
 			"light_vs": "string: #A31515",
 			"hc_black": "string: #CE9178",
-			"hc_light": "string: #A31515"
+			"hc_light": "string: #0F4A85"
 		}
 	},
 	{
@@ -272,7 +272,7 @@
 			"dark_vs": "string: #CE9178",
 			"light_vs": "string: #A31515",
 			"hc_black": "string: #CE9178",
-			"hc_light": "string: #A31515"
+			"hc_light": "string: #0F4A85"
 		}
 	},
 	{
@@ -356,7 +356,7 @@
 			"dark_vs": "string: #CE9178",
 			"light_vs": "string: #A31515",
 			"hc_black": "string: #CE9178",
-			"hc_light": "string: #A31515"
+			"hc_light": "string: #0F4A85"
 		}
 	},
 	{

src/tests/suite/colorize-results/comment_js.json

@@ -8,7 +8,7 @@
 			"dark_vs": "comment: #6A9955",
 			"light_vs": "comment: #008000",
 			"hc_black": "comment: #7CA668",
-			"hc_light": "comment: #008000"
+			"hc_light": "comment: #515151"
 		}
 	},
 	{
@@ -20,7 +20,7 @@
 			"dark_vs": "comment: #6A9955",
 			"light_vs": "comment: #008000",
 			"hc_black": "comment: #7CA668",
-			"hc_light": "comment: #008000"
+			"hc_light": "comment: #515151"
 		}
 	},
 	{
@@ -32,7 +32,7 @@
 			"dark_vs": "comment: #6A9955",
 			"light_vs": "comment: #008000",
 			"hc_black": "comment: #7CA668",
-			"hc_light": "comment: #008000"
+			"hc_light": "comment: #515151"
 		}
 	},
 	{
@@ -44,7 +44,7 @@
 			"dark_vs": "comment: #6A9955",
 			"light_vs": "comment: #008000",
 			"hc_black": "comment: #7CA668",
-			"hc_light": "comment: #008000"
+			"hc_light": "comment: #515151"
 		}
 	},
 	{
@@ -56,7 +56,7 @@
 			"dark_vs": "comment: #6A9955",
 			"light_vs": "comment: #008000",
 			"hc_black": "comment: #7CA668",
-			"hc_light": "comment: #008000"
+			"hc_light": "comment: #515151"
 		}
 	},
 	{
@@ -68,7 +68,7 @@
 			"dark_vs": "comment: #6A9955",
 			"light_vs": "comment: #008000",
 			"hc_black": "comment: #7CA668",
-			"hc_light": "comment: #008000"
+			"hc_light": "comment: #515151"
 		}
 	},
 	{
@@ -80,7 +80,7 @@
 			"dark_vs": "comment: #6A9955",
 			"light_vs": "comment: #008000",
 			"hc_black": "comment: #7CA668",
-			"hc_light": "comment: #008000"
+			"hc_light": "comment: #515151"
 		}
 	},
 	{
@@ -92,7 +92,7 @@
 			"dark_vs": "comment: #6A9955",
 			"light_vs": "comment: #008000",
 			"hc_black": "comment: #7CA668",
-			"hc_light": "comment: #008000"
+			"hc_light": "comment: #515151"
 		}
 	}
 ]

src/tests/suite/colorize-results/component_js.json

@@ -8,7 +8,7 @@
 			"dark_vs": "storage.type: #569CD6",
 			"light_vs": "storage.type: #0000FF",
 			"hc_black": "storage.type: #569CD6",
-			"hc_light": "storage.type: #0000FF"
+			"hc_light": "storage.type: #0F4A85"
 		}
 	},
 	{
@@ -32,7 +32,7 @@
 			"dark_vs": "default: #D4D4D4",
 			"light_vs": "default: #000000",
 			"hc_black": "variable: #9CDCFE",
-			"hc_light": "variable.other.constant: #0070C1"
+			"hc_light": "variable.other.constant: #02715D"
 		}
 	},
 	{
@@ -80,7 +80,7 @@
 			"dark_vs": "default: #D4D4D4",
 			"light_vs": "default: #000000",
 			"hc_black": "entity.name.function: #DCDCAA",
-			"hc_light": "entity.name.function: #795E26"
+			"hc_light": "entity.name.function: #5E2CBC"
 		}
 	},
 	{
@@ -128,7 +128,7 @@
 			"dark_vs": "string: #CE9178",
 			"light_vs": "string: #A31515",
 			"hc_black": "string: #CE9178",
-			"hc_light": "string: #A31515"
+			"hc_light": "string: #0F4A85"
 		}
 	},
 	{
@@ -224,7 +224,7 @@
 			"dark_vs": "string: #CE9178",
 			"light_vs": "string: #A31515",
 			"hc_black": "string: #CE9178",
-			"hc_light": "string: #A31515"
+			"hc_light": "string: #0F4A85"
 		}
 	},
 	{