[Bug]: escaped colon not handled properly #1086
Description
Describe the bug
If a CSS rule contains a colon that is escaped with a backslash (which is how sass emits them by default, I'm not trying to push on stuff here), then purgecss will not include that rule in the output even if it should be included.
To Reproduce
CSS file c.css (reduced from how sass compiles my stylesheets):
.tablet_grid-col {
font-size: 16px;
}
.tablet\:grid-col-6 {
flex: 0 1 auto;
width: 50%;
}html file index.html:
<html>
<head>
<link rel="stylesheet" href="c.css" />
</head>
<body>
<div class="tablet:grid-col-6">test</div>
<div class="tablet_grid-col">test</div>
</body>
</html>test output:
$ ./node_modules/.bin/purgecss --css c.css --content index.html | echo "$(jq -r .[0].css)"
.tablet_grid-col {
font-size: 16px;
}
If you remove the backslash escaping the colon, it works as expected. d.css:
.tablet_grid-col {
font-size: 16px;
}
.tablet:grid-col-6 {
flex: 0 1 auto;
width: 50%;
}works as expected:
$ ./node_modules/.bin/purgecss --css d.css --content index.html | echo "$(jq -r .[0].css)"
.tablet_grid-col {
font-size: 16px;
}
.tablet:grid-col-6 {
flex: 0 1 auto;
width: 50%;
}
Expected Behavior
I expect purgecss to recognize that .tablet\:grid-col-6 is a class name with an escaped colon, and handle it as such.
It seems that purgecss is parsing the backslash as a literal backslash in the name instead of as an escape:
$ ./node_modules/.bin/purgecss --css c.css --content index.html --rejected | echo "$(jq -r .[0].rejected)"
[
".tablet\\:grid-col-6"
]
Environment
macos ventura, node v19.4.0, purgecss 4.1.3
Add any other context about the problem here
I found this when I was seeing layout problems in my site which uses USWDS; sass compiles its layout rules down to rules with escaped colons in the name, and purgecss was incorrectly removing them.
Possibly related to #978
Code of Conduct
- I agree to follow this project's Code of Conduct