Provide an option to add more CSS Attribute Selectors

[navin-moorthy]

Feature Request

Provide an option to add custom CSS attribute selectors like "aria-selected", "data-selected", ...etc. because currently(PurgeCSS version: 3.1.3) there is no option to do that purging effectively other than "value", "checked", "selected", "open" attributes as per the below source code,

purgecss/packages/purgecss/src/index.ts

Lines 750 to 759 in 07e4e6d

	case "attribute":
	// `value` is a dynamic attribute, highly used in input element
	// the choice is to always leave `value` as it can change based on the user
	// idem for `checked`, `selected`, `open`
	isPresent = ["value", "checked", "selected", "open"].includes(
	selectorNode.attribute
	)
	? true
	: isAttributeFound(selectorNode, selectorsFromExtractor);
	break;

As per #277, ability to safelist css attributes were introduced. But that was not enough for our case, because we generate the rules via tailwind(postcss). Similar to whats mentioned here, our css file size grew larger, because we only use some of the classes that gets generated.

Solution

const purgecss = await new PurgeCSS().purge({
  content: [], // content
  css: [], // css
  attributes: ["aria-selected"]
})

isPresent = ["value", "checked", "selected", "open", ...this.options.attributes].includes(selectorNode.attribute)

Example demonstration code

index.html

<div class="aria-selected:bg-current">Purge</div>

style.css

aria-selected\:bg-transparent[aria-selected] {
  background-color: transparent;
}

aria-selected\:bg-current[aria-selected] {
  background-color: currentColor;
}

aria-selected\:bg-black[aria-selected] {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}

Note: The above code is just an example with only three rules, tailwind will generate more similar rules for all of its utilities.

Current Behavior

All the above rules get purged in final css.

Final CSS

// empty

Reason purgecss expects the class to be aria-selected:bg-current[aria-selected] not aria-selected:bg-current, because the attribute selector is not identified in shouldKeepSelector

Expected Behavior

The below rule should not be purged in the final css.

Final CSS

aria-selected\:bg-current[aria-selected] {
  background-color: currentColor;
}

NOTE: Able to obtain the expected behaviour locally by modifying the source code from node modules
isPresent = ["value", "checked", "selected", "open", "aria-selected"].includes(selectorNode.attribute)