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.

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

bugfix: Classes that contain :is or :where in their names are no longer unintentionally purged #1187

Merged
merged 2 commits into from
Feb 3, 2024

Conversation

AdrianGonz97
Copy link
Contributor

@AdrianGonz97 AdrianGonz97 commented Nov 26, 2023

Proposed changes

Class selectors that contained :is or :where within their names were being unintentionally purged. The use-case that brought about this issue was using these pseudo-classes in tailwind (e.g. class="[&:where(.some-class)]:text-black"), which would generate the following CSS:

.\[\&\:where\(\.some-class\)\]\:text-black:where(.some-class) {
	color: black;
}

This regex will misfire for the class above and for any classes that contain :where or :is in their names (even when the class name is added to the safelist!):

if ( selector.toString() && /(:where$)|(:is$)|(:where[^(])|(:is[^(])/.test(selector.toString()) ) {
	selector.remove();
}

As such, I added the appropriate tests, slightly widened the regex and added a more rigorous check for if the functional pseudo-class is empty of selectors:

if ( selector.toString() && /(:where)|(:is)/.test(selector.toString()) ) {
	selector.walk((node) => {
		if (node.type !== "pseudo") return;
		if (node.value !== ":where" && node.value !== ":is") return;
		if (node.nodes.length === 0) {
		  selector.remove();
		}
	});
}

Types of changes

What types of changes does your code introduce?
Put an x in the boxes that apply

  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

Put an x in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.

  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation (if appropriate)

Further comments

If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc...

Comment on lines +110 to +112
safelist: {
standard: ["[&:where(.a)]:text-black"],
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: This was added to the safelist as the default extractor doesn't properly extract the whole class name.

@AdrianGonz97 AdrianGonz97 changed the title bugfix: Classes that contain :is or :where in their names are no longer unintentionally purged bugfix: Classes that contain :is or :where in their names are no longer be unintentionally purged Nov 26, 2023
@AdrianGonz97 AdrianGonz97 changed the title bugfix: Classes that contain :is or :where in their names are no longer be unintentionally purged bugfix: Classes that contain :is or :where in their names are no longer unintentionally purged Nov 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants