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

[Bug]: escaped colon not handled properly #1086

Closed
1 task done
llimllib opened this issue Mar 15, 2023 · 1 comment
Closed
1 task done

[Bug]: escaped colon not handled properly #1086

llimllib opened this issue Mar 15, 2023 · 1 comment
Labels
bug

Comments

@llimllib
Copy link

llimllib commented Mar 15, 2023 •
edited

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
@llimllib llimllib added the bug label Mar 15, 2023
@Ffloriel
Copy link
Member

It seems to be the expected behavior. You would need to specify another "extractor" to be able to handle semicolon. Take a look at the documentation here: https://purgecss.com/extractors.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@llimllib @Ffloriel