Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: handle pseudo-class in middle of selector #68

Merged
merged 2 commits into from Jan 14, 2021
Merged

fix: handle pseudo-class in middle of selector #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f0bf76
fix: handle pseudo-class in middle of selector
alan-agius4 Dec 14, 2020
cf38bdf
fix: handle classes with colons
alan-agius4 Jan 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/index.js
View file
Open in desktop
Expand Up @@ -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;

Expand Down
37 changes: 35 additions & 2 deletions test/__snapshots__/index.test.js.snap
View file
Open in desktop
Expand Up @@ -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;
}
Expand All @@ -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>
Expand Down Expand Up @@ -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;
Expand All @@ -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>
Expand Down
18 changes: 17 additions & 1 deletion test/__snapshots__/standalone.test.js.snap
View file
Open in desktop
Expand Up @@ -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;
}
Expand All @@ -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>
Expand Down
19 changes: 18 additions & 1 deletion test/fixtures/basic/index.html
View file
Open in desktop
Expand Up @@ -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;
Expand All @@ -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>
Expand Down