diff --git a/CHANGELOG.md b/CHANGELOG.md index 645bd10..c752867 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 8b228dd..f50f067 100644 --- a/package.json +++ b/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", diff --git a/src/variable.ts b/src/variable.ts index 46189ec..844e299 100644 --- a/src/variable.ts +++ b/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(); + const alreadyProcessedDeclarations = new Set(); 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(); + 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) { diff --git a/test/variable.test.ts b/test/variable.test.ts index 7229ba6..9a70311 100644 --- a/test/variable.test.ts +++ b/test/variable.test.ts @@ -469,6 +469,24 @@ describe('with strategy "none"', () => { ); }); }); + + describe('with @property', () => { + const input = ` + @property --test-property { + syntax: ""; + 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"', () => { @@ -476,7 +494,8 @@ describe('with strategy "debug"', () => { 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: ""; + inherits: false; + initial-value: 45deg; + } + `; + + const expected = ` + @property --test-property_ { + syntax: ""; + 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', + }, + ); + }); + }); });