clipper(core): added parser for extra characters (%,')

packages/clipper/package.json

@@ -29,7 +29,8 @@
   },
   "scripts": {
     "build": "tsc",
-    "test": "playwright test"
+    "test": "playwright test",
+    "watch": "tsc --watch"
   },
   "bugs": {
     "url": "https://github.com/streetwriters/notesnook/issues"
@@ -40,4 +41,4 @@
     "hyperapp": "^2.0.22",
     "specificity": "^0.4.1"
   }
-}
+}

packages/clipper/src/styles.ts

@@ -414,11 +414,20 @@ function parsePseudoSelector(selector: string) {
         (s.name === "after" || s.name === "before")
     );
     if (pseduoElementIndex <= -1) continue;
-
     output.push({
-      selector: stringify([part.slice(0, pseduoElementIndex)]),
+      selector: parseExtraCharacters(
+        stringify([part.slice(0, pseduoElementIndex)])
+      ),
       pseudoElement: stringify([part.slice(pseduoElementIndex)])
     });
   }
   return output;
 }
+
+function parseExtraCharacters(selector: string) {
+  const extraCharacters = ["%", "'"];
+  for (const character of extraCharacters) {
+    selector = selector.replace(new RegExp(character, "g"), `\\${character}`);
+  }
+  return selector;
+}