Fix usage filtering for from/to selectors in keyframes at-rule (fixes #…

…448)

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

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 }
+}

fixtures/usage/atrule-2.css.usage

@@ -0,0 +1,3 @@
+{
+  "tags": ["used1", "used2"]
+}

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}}

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)) {