Skip to content

Commit 9b0fdc3

Browse files
committed
feat: add dynamic attributes option
#588 add option to add custom CSS attribute selectors
1 parent 510f386 commit 9b0fdc3

File tree

5 files changed

+44
-32
lines changed

5 files changed

+44
-32
lines changed

packages/purgecss/__tests__/attributes.test.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import PurgeCSS from "./../src/index";
2-
32
import { ROOT_TEST_EXAMPLES } from "./utils";
43

54
describe("attributes", () => {
@@ -9,6 +8,7 @@ describe("attributes", () => {
98
const resultsPurge = await new PurgeCSS().purge({
109
content: [`${ROOT_TEST_EXAMPLES}attributes/attribute_selector.html`],
1110
css: [`${ROOT_TEST_EXAMPLES}attributes/attribute_selector.css`],
11+
dynamicAttributes: ["aria-selected"],
1212
});
1313
purgedCSS = resultsPurge[0].css;
1414
});
@@ -72,4 +72,8 @@ describe("attributes", () => {
7272
expect(purgedCSS.includes('[class*=" class2"]')).toBe(true);
7373
expect(purgedCSS.includes('[class*="class1 class2 "]')).toBe(true);
7474
});
75+
76+
it("keeps dynamic attributes", () => {
77+
expect(purgedCSS.includes("[aria-selected]")).toBe(true);
78+
});
7579
});

packages/purgecss/__tests__/test_examples/attributes/attribute_selector.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,8 @@ a[title*="fat"] {
8080
}
8181
[class*="class1 class2 "] {
8282
color: blue;
83-
}
83+
}
84+
85+
[aria-selected] {
86+
font-weight: 700;
87+
}

packages/purgecss/src/index.ts

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,38 @@
1-
import * as postcss from "postcss";
2-
import selectorParser from "postcss-selector-parser";
31
import * as fs from "fs";
4-
import { promisify } from "util";
5-
62
import glob from "glob";
73
import path from "path";
8-
4+
import * as postcss from "postcss";
5+
import selectorParser from "postcss-selector-parser";
6+
import { promisify } from "util";
7+
import {
8+
CONFIG_FILENAME,
9+
ERROR_CONFIG_FILE_LOADING,
10+
IGNORE_ANNOTATION_CURRENT,
11+
IGNORE_ANNOTATION_END,
12+
IGNORE_ANNOTATION_NEXT,
13+
IGNORE_ANNOTATION_START,
14+
} from "./constants";
15+
import ExtractorResultSets from "./ExtractorResultSets";
16+
import { CSS_SAFELIST } from "./internal-safelist";
917
import { defaultOptions } from "./options";
10-
export { defaultOptions } from "./options";
11-
1218
import {
13-
Options,
14-
ResultPurge,
15-
RawContent,
16-
Extractors,
19+
AtRules,
20+
ComplexSafelist,
1721
ExtractorFunction,
22+
ExtractorResultDetailed,
23+
Extractors,
1824
IgnoreType,
19-
AtRules,
25+
Options,
26+
RawContent,
2027
RawCSS,
28+
ResultPurge,
2129
UserDefinedOptions,
22-
ExtractorResultDetailed,
2330
UserDefinedSafelist,
24-
ComplexSafelist,
2531
} from "./types";
26-
27-
import {
28-
CONFIG_FILENAME,
29-
ERROR_CONFIG_FILE_LOADING,
30-
IGNORE_ANNOTATION_NEXT,
31-
IGNORE_ANNOTATION_START,
32-
IGNORE_ANNOTATION_END,
33-
IGNORE_ANNOTATION_CURRENT,
34-
} from "./constants";
35-
import { CSS_SAFELIST } from "./internal-safelist";
3632
import VariablesStructure from "./VariablesStructure";
37-
import ExtractorResultSets from "./ExtractorResultSets";
33+
34+
export { defaultOptions } from "./options";
35+
export { PurgeCSS };
3836

3937
const asyncFs = {
4038
access: promisify(fs.access),
@@ -751,9 +749,13 @@ class PurgeCSS {
751749
// `value` is a dynamic attribute, highly used in input element
752750
// the choice is to always leave `value` as it can change based on the user
753751
// idem for `checked`, `selected`, `open`
754-
isPresent = ["value", "checked", "selected", "open"].includes(
755-
selectorNode.attribute
756-
)
752+
isPresent = [
753+
...this.options.dynamicAttributes,
754+
"value",
755+
"checked",
756+
"selected",
757+
"open",
758+
].includes(selectorNode.attribute)
757759
? true
758760
: isAttributeFound(selectorNode, selectorsFromExtractor);
759761
break;
@@ -811,5 +813,4 @@ class PurgeCSS {
811813
}
812814
}
813815

814-
export { PurgeCSS };
815816
export default PurgeCSS;

packages/purgecss/src/options.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Options, ExtractorResult } from "./types/";
1+
import { ExtractorResult, Options } from "./types/";
22

33
export const defaultOptions: Options = {
44
css: [],
@@ -20,4 +20,5 @@ export const defaultOptions: Options = {
2020
keyframes: [],
2121
},
2222
blocklist: [],
23+
dynamicAttributes: [],
2324
};

packages/purgecss/src/types/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export interface UserDefinedOptions {
6666
variables?: boolean;
6767
safelist?: UserDefinedSafelist;
6868
blocklist?: StringRegExpArray;
69+
dynamicAttributes?: string[];
6970
}
7071

7172
export interface Options {
@@ -82,6 +83,7 @@ export interface Options {
8283
variables: boolean;
8384
safelist: Required<ComplexSafelist>;
8485
blocklist: StringRegExpArray;
86+
dynamicAttributes: string[];
8587
}
8688

8789
export interface ResultPurge {

0 commit comments

Comments
 (0)