Merge pull request #68 from alan-agius4/preudo-class

developit · web-flow · commit 0524b2e297eb · 2021-01-14T15:28:18.000-05:00
fix: handle pseudo-class in middle of selector
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(/(?:>\s*)?::?[a-z-]+\s*(\{|$)/gi, '$1').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
@@ -120,6 +120,18 @@ ul.navbar a {
   text-decoration: none;
 }
 
+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;
+}
+
 a:link {
   color: blue;
 }
@@ -132,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>
@@ -336,12 +352,22 @@ exports[`webpack compilation 1`] = `
       ul.navbar a {
         text-decoration: none;
       }
+      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;
+      }
       a:link {
         color: blue;
       }
       a:visited {
         color: purple;
       }
+
       footer {
         margin-top: 1em;
         padding-top: 1em;
@@ -350,10 +376,17 @@ exports[`webpack compilation 1`] = `
       .extra-style {
         font-size: 200%;
       }
+      .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
@@ -56,6 +56,18 @@ ul.navbar a {
   text-decoration: none;
 }
 
+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;
+}
+
 a:link {
   color: blue;
 }
@@ -68,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
@@ -30,12 +30,22 @@
       ul.navbar a {
         text-decoration: none;
       }
+      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;
+      }
       a:link {
         color: blue;
       }
       a:visited {
         color: purple;
       }
+
       footer {
         margin-top: 1em;
         padding-top: 1em;
@@ -44,10 +54,17 @@
       .extra-style {
         font-size: 200%;
       }
+      .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(/(?:>\s)?::?[a-z-]+\s(\{\|$)/gi, '$1').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`