diff --git a/packages/purgecss/__tests__/safelist.test.ts b/packages/purgecss/__tests__/safelist.test.ts index 90651e34..71a4a8d4 100644 --- a/packages/purgecss/__tests__/safelist.test.ts +++ b/packages/purgecss/__tests__/safelist.test.ts @@ -126,3 +126,53 @@ describe("safelist option: greedy", () => { ); }); }); + +describe("safelist option: keyframes", () => { + let purgedCSS: string; + beforeAll(async () => { + const resultsPurge = await new PurgeCSS().purge({ + content: [`${ROOT_TEST_EXAMPLES}safelist/safelist_keyframes.html`], + css: [`${ROOT_TEST_EXAMPLES}safelist/safelist_keyframes.css`], + safelist: { + keyframes: [/^scale/, "spin"], + }, + keyframes: true, + }); + purgedCSS = resultsPurge[0].css; + }); + + it("finds safelisted keyframes", () => { + findInCSS( + expect, + ["@keyframes scale", "@keyframes scale-down", "@keyframes spin"], + purgedCSS + ); + }); + + it("excludes non-safelisted keyframes", () => { + notFindInCSS(expect, ["flash"], purgedCSS); + }); +}); + +describe("safelist option: variables", () => { + let purgedCSS: string; + beforeAll(async () => { + const resultsPurge = await new PurgeCSS().purge({ + content: [`${ROOT_TEST_EXAMPLES}safelist/safelist_css_variables.html`], + css: [`${ROOT_TEST_EXAMPLES}safelist/safelist_css_variables.css`], + safelist: { + variables: [/^--b/, "--unused-color"], + }, + variables: true, + }); + purgedCSS = resultsPurge[0].css; + }); + + it("finds safelisted css variables", () => { + findInCSS(expect, ["--unused-color", "--button-color"], purgedCSS); + }); + + it("excludes non-safelisted css variables", () => { + notFindInCSS(expect, ["--tertiary-color:"], purgedCSS); + }); +}); diff --git a/packages/purgecss/__tests__/test_examples/safelist/safelist_css_variables.css b/packages/purgecss/__tests__/test_examples/safelist/safelist_css_variables.css new file mode 100644 index 00000000..1956037d --- /dev/null +++ b/packages/purgecss/__tests__/test_examples/safelist/safelist_css_variables.css @@ -0,0 +1,22 @@ +:root { + --primary-color: blue; + --secondary-color: indigo; + --tertiary-color: aqua; + --unused-color: violet; + --used-color: rebeccapurple; + --accent-color: orange; + } + + .button { + --button-color: var(--tertiary-color); + --border-color: linear-gradient(to top, var(--secondary-color), var(--used-color, white)); + + background-color: var(--primary-color); + color: var(--accent-color); + border-color: var(--border-color); + } + + .button:focus { + background-color: var(--accent-color); + color: var(--primary-color); + } \ No newline at end of file diff --git a/packages/purgecss/__tests__/test_examples/safelist/safelist_css_variables.html b/packages/purgecss/__tests__/test_examples/safelist/safelist_css_variables.html new file mode 100644 index 00000000..65214131 --- /dev/null +++ b/packages/purgecss/__tests__/test_examples/safelist/safelist_css_variables.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/purgecss/__tests__/test_examples/safelist/safelist_keyframes.css b/packages/purgecss/__tests__/test_examples/safelist/safelist_keyframes.css new file mode 100644 index 00000000..3be12e29 --- /dev/null +++ b/packages/purgecss/__tests__/test_examples/safelist/safelist_keyframes.css @@ -0,0 +1,61 @@ +@keyframes bounce { + from, 20%, 53%, 80%, to { + animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 1.000); + transform: translate3d(1, 1, 0); + } +} + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} + +@keyframes flash { + from, 50%, to { + opacity: 1; + } + + 25%, 75% { + opacity: 0.5; + } +} + +.flash { + animation: flash +} + +@keyframes scale { + from { + transform: scale(1); + } + + to { + transform: scale(2); + } +} + +@keyframes scale-down { + from { + transform: scale(2); + } + + to { + transform: scale(1); + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.scale-spin { + animation: spin 300ms linear infinite forwards,scale 300ms linear infinite alternate; +} diff --git a/packages/purgecss/__tests__/test_examples/safelist/safelist_keyframes.html b/packages/purgecss/__tests__/test_examples/safelist/safelist_keyframes.html new file mode 100644 index 00000000..7b1f750a --- /dev/null +++ b/packages/purgecss/__tests__/test_examples/safelist/safelist_keyframes.html @@ -0,0 +1,2 @@ +