Support at-rule property definitions in variable renaming

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.8.1
+
+* Variable renaming now also renames variables defined by the `@property` rule.
+
 ## 0.8.0
 
 * Added variable renaming capabilities. Users who are interested in using the

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-rename",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "A PostCSS plugin to replace CSS names based on a customizable renaming scheme.",
   "keywords": [
     "postcss",

src/variable.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import postcss, {Declaration} from 'postcss';
+import postcss, {AtRule, Declaration} from 'postcss';
 import valueParser from 'postcss-value-parser';
 import {type RenamingMap, type VariableRenamingOptions} from './options';
 import {type SkipPredicate, createSkipPredicate} from './skip';
@@ -109,19 +109,31 @@ function plugin({
         return parsed.toString();
       }
 
-      const alreadyProcessedNodes = new Set<Declaration>();
+      const alreadyProcessedDeclarations = new Set<Declaration>();
       function renameDeclaration(declarationNode: Declaration): void {
-        if (alreadyProcessedNodes.has(declarationNode)) {
+        if (alreadyProcessedDeclarations.has(declarationNode)) {
           return;
         }
 
-        alreadyProcessedNodes.add(declarationNode);
+        alreadyProcessedDeclarations.add(declarationNode);
 
         declarationNode.prop = renameVariable(declarationNode.prop);
         declarationNode.value = renameValue(declarationNode.value);
       }
 
+      const alreadyProcessedAtRules = new Set<AtRule>();
+      function renameAtRuleProperty(atRuleNode: AtRule): void {
+        if (alreadyProcessedAtRules.has(atRuleNode)) {
+          return;
+        }
+
+        alreadyProcessedAtRules.add(atRuleNode);
+
+        atRuleNode.params = renameVariable(atRuleNode.params);
+      }
+
       return {
+        AtRule: {property: renameAtRuleProperty},
         Declaration: renameDeclaration,
         OnceExit() {
           if (outputMapCallback) {

test/variable.test.ts

@@ -469,14 +469,33 @@ describe('with strategy "none"', () => {
       );
     });
   });
+
+  describe('with @property', () => {
+    const input = `
+      @property --test-property {
+        syntax: "<angle>";
+        inherits: false;
+        initial-value: 45deg;
+      }
+    `;
+
+    it('does nothing with no options', () => {
+      assertPostcss(run(input), input);
+    });
+
+    it('does nothing with an explicit strategy', () => {
+      assertPostcss(run(input, {strategy: 'none'}), input);
+    });
+  });
 });
 
 describe('with strategy "debug"', () => {
   describe('with no variables', () => {
     const input = `
       .no-variables-here {
         absolutely: "nothing";
-      }`;
+      }
+    `;
 
     const options: plugin.Options = {
       strategy: 'debug',
@@ -946,4 +965,134 @@ describe('with strategy "debug"', () => {
       );
     });
   });
+
+  describe('with @property', () => {
+    const input = `
+      @property --test-property {
+        syntax: "<angle>";
+        inherits: false;
+        initial-value: 45deg;
+      }
+    `;
+
+    const expected = `
+      @property --test-property_ {
+        syntax: "<angle>";
+        inherits: false;
+        initial-value: 45deg;
+      }
+    `;
+
+    it('adds an underscore after every name', () => {
+      assertPostcss(run(input, {strategy: 'debug'}), expected);
+    });
+
+    it('emits an output map', () => {
+      assertMapEquals(
+        input,
+        {
+          'test-property': 'test-property_',
+        },
+        {
+          strategy: 'debug',
+        },
+      );
+    });
+
+    it('includes the prefix in the output map', () => {
+      assertMapEquals(
+        input,
+        {
+          'test-property': 'pf-test-property_',
+        },
+        {
+          strategy: 'debug',
+          prefix: 'pf',
+        },
+      );
+    });
+
+    it('omits excluded names from the output map', () => {
+      assertMapEquals(
+        input,
+        {},
+        {
+          strategy: 'debug',
+          except: ['test-property'],
+        },
+      );
+    });
+  });
+});
+
+describe('with strategy "minimal"', () => {
+  describe('with declaration + @property', () => {
+    const input = `
+      --test-property: 45deg;
+
+      @property --test-property {
+        syntax: "*";
+        inherits: false;
+      }`;
+
+    const expected = `
+      --a: 45deg;
+
+      @property --a {
+        syntax: "*";
+        inherits: false;
+      }`;
+
+    it('maps names to the shortest possible strings', () => {
+      assertPostcss(run(input, {strategy: 'minimal'}), expected);
+    });
+
+    it('includes the prefix in the output map', () => {
+      assertMapEquals(
+        input,
+        {
+          'test-property': 'pf-a',
+        },
+        {
+          strategy: 'minimal',
+          prefix: 'pf',
+        },
+      );
+    });
+  });
+
+  describe('with @property + declaration', () => {
+    const input = `  
+      @property --test-property {
+        syntax: "*";
+        inherits: false;
+      }
+
+      --test-property: 45deg;`;
+
+    const expected = `  
+      @property --a {
+        syntax: "*";
+        inherits: false;
+      }
+
+      --a: 45deg;`;
+
+    it('maps names to the shortest possible strings', () => {
+      assertPostcss(run(input, {strategy: 'minimal'}), expected);
+    });
+
+    it('includes the prefix in the output map', () => {
+      assertMapEquals(
+        input,
+        {
+          'test-property': 'pf-a',
+        },
+        {
+          strategy: 'minimal',
+          prefix: 'pf',
+        },
+      );
+    });
+  });
 });