Skip to content
Permalink
Browse files

feat: add blocklist option

  • Loading branch information
Ffloriel committed Jul 29, 2020
1 parent dc59d30 commit 04223f7fe27f8d818961a53900a7c5293d2322b6
@@ -176,3 +176,27 @@ describe("safelist option: variables", () => {
notFindInCSS(expect, ["--tertiary-color:"], purgedCSS);
});
});

describe("blocklist option", () => {
let purgedCSS: string;
beforeAll(async () => {
const resultsPurge = await new PurgeCSS().purge({
content: [`${ROOT_TEST_EXAMPLES}safelist/blocklist.html`],
css: [`${ROOT_TEST_EXAMPLES}safelist/blocklist.css`],
blocklist: ["h1", "yep", "button", /nav-/],
});
purgedCSS = resultsPurge[0].css;
});

it("excludes blocklisted selectors", () => {
notFindInCSS(
expect,
["h1", "yep", "button", "nav-blue", "nav-red"],
purgedCSS
);
});

it("includes non-blocklisted selectors", () => {
findInCSS(expect, ["data-v-test", ".random"], purgedCSS);
});
});
@@ -0,0 +1,28 @@
h1 {
color: blue;
}

.random {
color: green;
}

#yep {
color: red;
}

button {
color: rebeccapurple;
}

.nav-blue {
background-color: blue;
}

.nav-red {
background-color: red;
}

[data-v-test] {
color: green;
}

@@ -0,0 +1,11 @@
<html>

<body>
<div class="nav-blue">is it blue?</div>
<div class="nav-red">is it red?</div>
<h1>Title</h1>
<div class="random">random</div>
<button id="yep" data-v-test="colorful">button</button>
</body>

</html>
@@ -554,6 +554,18 @@ class PurgeCSS {
});
}

/**
* Check if the selector is blocklisted with the option blocklist
* @param selector css selector
*/
private isSelectorBlocklisted(selector: string): boolean {
return this.options.blocklist.some((blocklistItem) => {
return typeof blocklistItem === "string"
? blocklistItem === selector
: blocklistItem.test(selector);
});
}

/**
* Check if the selector is safelisted with the option safelist standard
* @param selector css selector
@@ -718,6 +730,12 @@ class PurgeCSS {
continue;
}

// The selector is present in the blocklist
if (selectorValue && this.isSelectorBlocklisted(selectorValue)) {
isPresent = false;
continue;
}

switch (selectorNode.type) {
case "attribute":
// `value` is a dynamic attribute, highly used in input element
@@ -19,4 +19,5 @@ export const defaultOptions: Options = {
variables: [],
keyframes: [],
},
blocklist: [],
};
@@ -65,6 +65,7 @@ export interface UserDefinedOptions {
stdout?: boolean;
variables?: boolean;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}

export interface Options {
@@ -80,6 +81,7 @@ export interface Options {
stdout: boolean;
variables: boolean;
safelist: Required<ComplexSafelist>;
blocklist: StringRegExpArray;
}

export interface ResultPurge {

0 comments on commit 04223f7

Please sign in to comment.
You can’t perform that action at this time.