Add a new option to support declarations aliases

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [3.3.4 / 1.7.3] - 2021-05-23
+
+- Added a new option to support declarations aliases
+
 ## [3.3.3 / 1.7.2] - 2021-05-23
 
 - Added a new option to ignore rules already prefixed

README.md

@@ -329,7 +329,8 @@ All the options are optional, and a default value will be used if any of them is
 | useCalc            | `boolean`                 | `false`         | Flips `background-position`, `background-position-x` and `transform-origin` properties if they are expressed in length units using [calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) |
 | stringMap          | `PluginStringMap[]`       | Check below     | An array of strings maps that will be used to make the replacements of the URLs and rules selectors names |
 | autoRename         | `Autorename (string)`     | `Autorename.disabled` | Flip or not the selectors names of the rules without directional properties using the `stringMap` |
-| greedy             | `boolean            `     | `false`         | When `autoRename` is enabled and greedy is `true`, the strings replacements will not take into account word boundaries |
+| greedy             | `boolean`                 | `false`         | When `autoRename` is enabled and greedy is `true`, the strings replacements will not take into account word boundaries |
+| aliases            | `Record<string, string>`  | `{}`            | A strings map to treat some declarations as others |
 
 ---
 
@@ -1150,6 +1151,71 @@ const options = {
 
 ---
 
+#### aliases
+
+<details><summary>Expand</summary>
+<p>
+
+This property consists of a string map to treat some declarations as others, very useful to flip the values of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+
+##### input
+
+```css
+:root {
+    --my-padding: 1rem 1rem 1.5rem 1.5rem;
+}
+
+.test {
+    padding: var(--my-padding);
+}
+```
+
+##### No aliases string map (default)
+
+##### output
+
+```css
+:root {
+    --my-padding: 1rem 1rem 1.5rem 1.5rem;
+}
+
+.test {
+    padding: var(--my-padding);
+}
+```
+
+##### Set an aliases string map
+
+```javascript
+const options = {
+    aliases: {
+        '--my-padding': 'padding'
+    }
+};
+```
+
+##### output
+
+```css
+[dir="ltr"]:root {
+    --my-padding: 1rem 1rem 1.5rem 1.5rem;
+}
+
+[dir="rtl"]:root {
+    --my-padding: 1rem 1.5rem 1.5rem 1rem;
+}
+
+.test {
+    padding: var(--my-padding);
+}
+```
+
+</p>
+
+</details>
+
+---
+
 Control Directives
 ---
 

package.json

@@ -43,7 +43,7 @@
     "url": "git+https://github.com/elchininet/postcss-rtlcss"
   },
   "dependencies": {
-    "rtlcss": "^3.1.2"
+    "rtlcss": "^3.2.0"
   },
   "devDependencies": {
     "@types/eslint": "^7.2.10",

src/@types/index.ts

@@ -55,6 +55,7 @@ export interface PluginOptions {
     stringMap?: PluginStringMap[];
     autoRename?: AutorenameValues;
     greedy?: boolean;
+    aliases?: Record<string, string>;
 }
 
 export interface PluginOptionsNormalized extends Omit<Required<PluginOptions>, 'stringMap'> {

src/data/store.ts

@@ -98,6 +98,12 @@ const isNotAcceptedStringMap = (stringMap: PluginStringMap[]): boolean => {
     );
 };
 
+const isObjectWithStringKeys = (obj: Record<string, unknown>): boolean =>
+    !Object.entries(obj).some(
+        (entry: [string, unknown]): boolean =>
+            typeof entry[1] !== 'string'
+    );
+
 const spreadArrayOfStrings = (arr: string[], item: strings): string[] => {
     return typeof item === 'string'
         ? [...arr, item]
@@ -133,7 +139,8 @@ const defaultOptions = (): PluginOptionsNormalized => ({
     useCalc: false,
     stringMap: getRTLCSSStringMap(defaultStringMap),
     autoRename: Autorename.disabled,
-    greedy: false
+    greedy: false,
+    aliases: {}
 });
 
 const store: Store = {
@@ -196,6 +203,9 @@ export const normalizeOptions = (options: PluginOptions): PluginOptionsNormalize
             }
         });
     }
+    if (options.aliases && isObjectWithStringKeys(options.aliases)) {
+        returnOptions.aliases = options.aliases;
+    }
     return returnOptions;
 };
 

src/parsers/declarations.ts

@@ -44,7 +44,8 @@ export const parseDeclarations = (
         useCalc,
         stringMap,
         autoRename,
-        greedy
+        greedy,
+        aliases
     } = store.options;
 
     const deleteDeclarations: Declaration[] = [];
@@ -132,7 +133,8 @@ export const parseDeclarations = (
                 stringMap,
                 autoRename: autoRename !== Autorename.disabled,
                 autoRenameStrict: autoRename === Autorename.strict,
-                greedy
+                greedy,
+                aliases
             });
 
             const root = postcss.parse(declFlippedString);

tests/__snapshots__/combined-aliases.test.ts.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Aliases Tests Aliases default 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+}
+
+[dir=\\"ltr\\"] .test1.large {
+    left: 10px;
+}
+
+[dir=\\"rtl\\"] .test1.large {
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}"
+`;
+
+exports[`Aliases Tests Aliases map 1`] = `
+":root {
+    --custom-margin: 2px;
+}
+
+[dir=\\"ltr\\"]:root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+[dir=\\"rtl\\"]:root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+}
+
+[dir=\\"ltr\\"] .test1.large {
+    left: 10px;
+}
+
+[dir=\\"rtl\\"] .test1.large {
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}"
+`;
+
+exports[`Aliases Tests Wrong aliases 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+}
+
+[dir=\\"ltr\\"] .test1.large {
+    left: 10px;
+}
+
+[dir=\\"rtl\\"] .test1.large {
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}"
+`;

tests/__snapshots__/override-aliases.test.ts.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Aliases Tests Aliases default 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+    left: 10px;
+}
+
+[dir=\\"rtl\\"] .test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}"
+`;
+
+exports[`Aliases Tests Aliases map 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+[dir=\\"rtl\\"]:root {
+    --small-padding: 2px 16px 8px 4px;
+    --large-padding: 4px 32px 16px 8px;
+    --small-margin: 2px 16px 8px 4px;
+    --large-margin: 4px 32px 16px 8px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+    left: 10px;
+}
+
+[dir=\\"rtl\\"] .test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}"
+`;
+
+exports[`Aliases Tests Wrong aliases 1`] = `
+":root {
+    --small-padding: 2px 4px 8px 16px;
+    --large-padding: 4px 8px 16px 32px;
+    --custom-margin: 2px;
+    --small-margin: 2px 4px 8px 16px;
+    --large-margin: 4px 8px 16px 32px;
+}
+
+.test1 {
+    margin: var(--small-margin);
+    padding: var(--small-padding);
+}
+
+.test1.large {
+    margin: var(--large-margin);
+    padding: var(--large-padding);
+    left: 10px;
+}
+
+[dir=\\"rtl\\"] .test1.large {
+    left: auto;
+    right: 10px;
+}
+
+.test2 {
+    margin: var(--custom-margin);
+}"
+`;