fix: handle classes with colons

alan-agius4 · alan-agius4 · commit cf38bdf575b8 · 2021-01-11T09:47:26.000+01:00
Class names can have `:` if they are escapped. Example: `.flex\:box`
diff --git a/src/index.js b/src/index.js
@@ -460,7 +460,7 @@ export default class Critters {
             // Strip pseudo-elements and pseudo-classes, since we only care that their associated elements exist.
             // This means any selector for a pseudo-element or having a pseudo-class will be inlined if the rest of the selector matches.
             if (sel !== ':root') {
-              sel = sel.replace(/(::?[a-z-]+(\(.+?\))?\s*)/gi, ' ').trim();
+              sel = sel.replace(/(?<!\\)::?[a-z-]+(?![a-z-(])/gi, '').replace(/::?not\(\s*\)/g, '').trim();
             }
             if (!sel) return false;
 
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -124,6 +124,10 @@ ul.navbar:not(.hidden) li:hover a {
   color: black;
 }
 
+ul.navbar:not(:hover) li:hover a {
+  color: black;
+}
+
 ul.navbar li:hover a {
   color: red;
 }
@@ -140,10 +144,14 @@ footer {
   margin-top: 1em;
   padding-top: 1em;
   border-top: thin dotted;
+}
+
+.clazz\\\\:colon {
+  color: green;
 }</style>
   </head>
   <body>
-    <ul class=\\"navbar\\">
+    <ul class=\\"navbar clazz:colon\\">
       <li>
         <a href=\\"index.html\\">Home page</a>
       </li>
@@ -347,6 +355,9 @@ exports[`webpack compilation 1`] = `
       ul.navbar:not(.hidden) li:hover a {
         color: black;
       }
+      ul.navbar:not(:hover) li:hover a {
+        color: black;
+      }
       ul.navbar li:hover a {
         color: red;
       }
@@ -368,10 +379,14 @@ exports[`webpack compilation 1`] = `
       .hidden {
         visibility: hidden;
       }
+
+      .clazz\\\\:colon {
+        color: green;
+      }
     </style>
   </head>
   <body>
-    <ul class=\\"navbar\\">
+    <ul class=\\"navbar clazz:colon\\">
       <li>
         <a href=\\"index.html\\">Home page</a>
       </li>
diff --git a/test/__snapshots__/standalone.test.js.snap b/test/__snapshots__/standalone.test.js.snap
@@ -60,6 +60,10 @@ ul.navbar:not(.hidden) li:hover a {
   color: black;
 }
 
+ul.navbar:not(:hover) li:hover a {
+  color: black;
+}
+
 ul.navbar li:hover a {
   color: red;
 }
@@ -76,10 +80,14 @@ footer {
   margin-top: 1em;
   padding-top: 1em;
   border-top: thin dotted;
+}
+
+.clazz\\\\:colon {
+  color: green;
 }</style>
   </head>
   <body>
-    <ul class=\\"navbar\\">
+    <ul class=\\"navbar clazz:colon\\">
       <li>
         <a href=\\"index.html\\">Home page</a>
       </li>
diff --git a/test/fixtures/basic/index.html b/test/fixtures/basic/index.html
@@ -33,6 +33,9 @@
       ul.navbar:not(.hidden) li:hover a {
         color: black;
       }
+      ul.navbar:not(:hover) li:hover a {
+        color: black;
+      }
       ul.navbar li:hover a {
         color: red;
       }
@@ -54,10 +57,14 @@
       .hidden {
         visibility: hidden;
       }
+
+      .clazz\:colon {
+        color: green;
+      }
     </style>
   </head>
   <body>
-    <ul class="navbar">
+    <ul class="navbar clazz:colon">
       <li>
         <a href="index.html">Home page</a>
       </li>

Original file line number	Diff line number	Diff line change
`@@ -460,7 +460,7 @@ export default class Critters {`
`460`	`460`	`// Strip pseudo-elements and pseudo-classes, since we only care that their associated elements exist.`
`461`	`461`	`// This means any selector for a pseudo-element or having a pseudo-class will be inlined if the rest of the selector matches.`
`462`	`462`	`if (sel !== ':root') {`
`463`		`- sel = sel.replace(/(::?[a-z-]+(\(.+?\))?\s*)/gi, ' ').trim();`
	`463`	`+ sel = sel.replace(/(?<!\\)::?[a-z-]+(?![a-z-(])/gi, '').replace(/::?not\(\s*\)/g, '').trim();`
`464`	`464`	`}`
`465`	`465`	`if (!sel) return false;`
`466`	`466`