diff --git a/CHANGELOG.md b/CHANGELOG.md index 48ac9bad..e0a09e99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## next + +- Fixed usage filtering for from/to selectors in keyframes at-rule (#448) + ## 5.0.3 (March 9, 2022) - Fixed CommonJS version bundling when `browser` field is used diff --git a/fixtures/usage/atrule-2.css b/fixtures/usage/atrule-2.css new file mode 100644 index 00000000..e4f5cf1d --- /dev/null +++ b/fixtures/usage/atrule-2.css @@ -0,0 +1,31 @@ +/* + should not apply usage filtering to @keyframes & @page at-rules +*/ + +used1 { color: green } +unused { color: red } +used2 { color: green } +@page left { + margin: 5; + @top-center { + content: "text"; + } +} +@keyframes test { + from { color: blue } + to { color: yellow } +} +@-webkit-keyframes test { + from { color: blue } + to { color: yellow } +} +@media some-used { + used2 { color: green } + from { color: red } + unused { color: red } + used1 { color: green } +} +@media all-unused { + from { color: red } + unused { color: red } +} diff --git a/fixtures/usage/atrule-2.css.usage b/fixtures/usage/atrule-2.css.usage new file mode 100644 index 00000000..5a8eabfb --- /dev/null +++ b/fixtures/usage/atrule-2.css.usage @@ -0,0 +1,3 @@ +{ + "tags": ["used1", "used2"] +} diff --git a/fixtures/usage/atrule-2.min.css b/fixtures/usage/atrule-2.min.css new file mode 100644 index 00000000..446c36a2 --- /dev/null +++ b/fixtures/usage/atrule-2.min.css @@ -0,0 +1 @@ +@keyframes test{0%{color:#00f}to{color:#ff0}}@-webkit-keyframes test{0%{color:#00f}to{color:#ff0}}used1,used2{color:green}@page left{margin:5;@top-center{content:"text"}}@media some-used{used1,used2{color:green}} diff --git a/lib/clean/Rule.js b/lib/clean/Rule.js index d2d70dcc..c4b02d2f 100644 --- a/lib/clean/Rule.js +++ b/lib/clean/Rule.js @@ -1,7 +1,8 @@ -import { walk } from 'css-tree'; +import { walk, keyword } from 'css-tree'; import { hasNoChildren } from './utils.js'; const { hasOwnProperty } = Object.prototype; +const skipUsageFilteringAtrule = new Set(['keyframes']); function cleanUnused(selectorList, usageData) { selectorList.children.forEach((selector, item, list) => { @@ -81,6 +82,11 @@ export default function cleanRule(node, item, list, options) { return; } + // avoid usage filtering for some at-rules + if (this.atrule && skipUsageFilteringAtrule.has(keyword(this.atrule.name).basename)) { + return; + } + const { usage } = options; if (usage && (usage.whitelist !== null || usage.blacklist !== null)) {