fix: handle classes with colons

alan-agius4 · alan-agius4 · commit 6d5c5d8b704f · 2020-12-14T12:54:42.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-]+(\(.+?\))?\s*/gi, (match, p1) => p1 === '\\' ? match : ' ').trim();
             }
             if (!sel) return false;
 
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -140,10 +140,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>
@@ -368,10 +372,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
@@ -76,10 +76,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
@@ -54,10 +54,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-]+(\(.+?\))?\s*/gi, (match, p1) => p1 === '\\' ? match : ' ').trim();`
`464`	`464`	`}`
`465`	`465`	`if (!sel) return false;`
`466`	`466`