Skip to content

Commit e9387ef

Browse files
elchininetelchininet
committed
Add a new option to support declarations aliasses
1 parent 9a28aa5 commit e9387ef

File tree

13 files changed

+405
-9
lines changed

13 files changed

+405
-9
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
## [3.3.4 / 1.7.3] - 2021-05-23
4+
5+
- Added a new option to support declarations aliases
6+
37
## [3.3.3 / 1.7.2] - 2021-05-23
48

59
- Added a new option to ignore rules already prefixed

‎README.md‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,8 @@ All the options are optional, and a default value will be used if any of them is
329329
| 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) |
330330
| stringMap | `PluginStringMap[]` | Check below | An array of strings maps that will be used to make the replacements of the URLs and rules selectors names |
331331
| autoRename | `Autorename (string)` | `Autorename.disabled` | Flip or not the selectors names of the rules without directional properties using the `stringMap` |
332-
| greedy | `boolean ` | `false` | When `autoRename` is enabled and greedy is `true`, the strings replacements will not take into account word boundaries |
332+
| greedy | `boolean` | `false` | When `autoRename` is enabled and greedy is `true`, the strings replacements will not take into account word boundaries |
333+
| aliases | `Record<string, string>` | `{}` | A strings map to treat some declarations as others |
333334

334335
---
335336

@@ -1150,6 +1151,71 @@ const options = {
11501151

11511152
---
11521153

1154+
#### aliases
1155+
1156+
<details><summary>Expand</summary>
1157+
<p>
1158+
1159+
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)
1160+
1161+
##### input
1162+
1163+
```css
1164+
:root {
1165+
--my-padding: 1rem 1rem 1.5rem 1.5rem;
1166+
}
1167+
1168+
.test {
1169+
padding: var(--my-padding);
1170+
}
1171+
```
1172+
1173+
##### No aliases string map (default)
1174+
1175+
##### output
1176+
1177+
```css
1178+
:root {
1179+
--my-padding: 1rem 1rem 1.5rem 1.5rem;
1180+
}
1181+
1182+
.test {
1183+
padding: var(--my-padding);
1184+
}
1185+
```
1186+
1187+
##### Set an aliases string map
1188+
1189+
```javascript
1190+
const options = {
1191+
aliases: {
1192+
'--my-padding': 'padding'
1193+
}
1194+
};
1195+
```
1196+
1197+
##### output
1198+
1199+
```css
1200+
[dir="ltr"]:root {
1201+
--my-padding: 1rem 1rem 1.5rem 1.5rem;
1202+
}
1203+
1204+
[dir="rtl"]:root {
1205+
--my-padding: 1rem 1.5rem 1.5rem 1rem;
1206+
}
1207+
1208+
.test {
1209+
padding: var(--my-padding);
1210+
}
1211+
```
1212+
1213+
</p>
1214+
1215+
</details>
1216+
1217+
---
1218+
11531219
Control Directives
11541220
---
11551221

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"url": "git+https://github.com/elchininet/postcss-rtlcss"
4444
},
4545
"dependencies": {
46-
"rtlcss": "^3.1.2"
46+
"rtlcss": "^3.2.0"
4747
},
4848
"devDependencies": {
4949
"@types/eslint": "^7.2.10",

‎src/@types/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export interface PluginOptions {
5555
stringMap?: PluginStringMap[];
5656
autoRename?: AutorenameValues;
5757
greedy?: boolean;
58+
aliases?: Record<string, string>;
5859
}
5960

6061
export interface PluginOptionsNormalized extends Omit<Required<PluginOptions>, 'stringMap'> {

‎src/data/store.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,12 @@ const isNotAcceptedStringMap = (stringMap: PluginStringMap[]): boolean => {
9898
);
9999
};
100100

101+
const isObjectWithStringKeys = (obj: Record<string, unknown>): boolean =>
102+
!Object.entries(obj).some(
103+
(entry: [string, unknown]): boolean =>
104+
typeof entry[1] !== 'string'
105+
);
106+
101107
const spreadArrayOfStrings = (arr: string[], item: strings): string[] => {
102108
return typeof item === 'string'
103109
? [...arr, item]
@@ -133,7 +139,8 @@ const defaultOptions = (): PluginOptionsNormalized => ({
133139
useCalc: false,
134140
stringMap: getRTLCSSStringMap(defaultStringMap),
135141
autoRename: Autorename.disabled,
136-
greedy: false
142+
greedy: false,
143+
aliases: {}
137144
});
138145

139146
const store: Store = {
@@ -196,6 +203,9 @@ export const normalizeOptions = (options: PluginOptions): PluginOptionsNormalize
196203
}
197204
});
198205
}
206+
if (options.aliases && isObjectWithStringKeys(options.aliases)) {
207+
returnOptions.aliases = options.aliases;
208+
}
199209
return returnOptions;
200210
};
201211

‎src/parsers/declarations.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ export const parseDeclarations = (
4444
useCalc,
4545
stringMap,
4646
autoRename,
47-
greedy
47+
greedy,
48+
aliases
4849
} = store.options;
4950

5051
const deleteDeclarations: Declaration[] = [];
@@ -132,7 +133,8 @@ export const parseDeclarations = (
132133
stringMap,
133134
autoRename: autoRename !== Autorename.disabled,
134135
autoRenameStrict: autoRename === Autorename.strict,
135-
greedy
136+
greedy,
137+
aliases
136138
});
137139

138140
const root = postcss.parse(declFlippedString);

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Aliases Tests Aliases default 1`] = `
4+
":root {
5+
--small-padding: 2px 4px 8px 16px;
6+
--large-padding: 4px 8px 16px 32px;
7+
--custom-margin: 2px;
8+
--small-margin: 2px 4px 8px 16px;
9+
--large-margin: 4px 8px 16px 32px;
10+
}
11+
12+
.test1 {
13+
margin: var(--small-margin);
14+
padding: var(--small-padding);
15+
}
16+
17+
.test1.large {
18+
margin: var(--large-margin);
19+
padding: var(--large-padding);
20+
}
21+
22+
[dir=\\"ltr\\"] .test1.large {
23+
left: 10px;
24+
}
25+
26+
[dir=\\"rtl\\"] .test1.large {
27+
right: 10px;
28+
}
29+
30+
.test2 {
31+
margin: var(--custom-margin);
32+
}"
33+
`;
34+
35+
exports[`Aliases Tests Aliases map 1`] = `
36+
":root {
37+
--custom-margin: 2px;
38+
}
39+
40+
[dir=\\"ltr\\"]:root {
41+
--small-padding: 2px 4px 8px 16px;
42+
--large-padding: 4px 8px 16px 32px;
43+
--small-margin: 2px 4px 8px 16px;
44+
--large-margin: 4px 8px 16px 32px;
45+
}
46+
47+
[dir=\\"rtl\\"]:root {
48+
--small-padding: 2px 16px 8px 4px;
49+
--large-padding: 4px 32px 16px 8px;
50+
--small-margin: 2px 16px 8px 4px;
51+
--large-margin: 4px 32px 16px 8px;
52+
}
53+
54+
.test1 {
55+
margin: var(--small-margin);
56+
padding: var(--small-padding);
57+
}
58+
59+
.test1.large {
60+
margin: var(--large-margin);
61+
padding: var(--large-padding);
62+
}
63+
64+
[dir=\\"ltr\\"] .test1.large {
65+
left: 10px;
66+
}
67+
68+
[dir=\\"rtl\\"] .test1.large {
69+
right: 10px;
70+
}
71+
72+
.test2 {
73+
margin: var(--custom-margin);
74+
}"
75+
`;
76+
77+
exports[`Aliases Tests Wrong aliases 1`] = `
78+
":root {
79+
--small-padding: 2px 4px 8px 16px;
80+
--large-padding: 4px 8px 16px 32px;
81+
--custom-margin: 2px;
82+
--small-margin: 2px 4px 8px 16px;
83+
--large-margin: 4px 8px 16px 32px;
84+
}
85+
86+
.test1 {
87+
margin: var(--small-margin);
88+
padding: var(--small-padding);
89+
}
90+
91+
.test1.large {
92+
margin: var(--large-margin);
93+
padding: var(--large-padding);
94+
}
95+
96+
[dir=\\"ltr\\"] .test1.large {
97+
left: 10px;
98+
}
99+
100+
[dir=\\"rtl\\"] .test1.large {
101+
right: 10px;
102+
}
103+
104+
.test2 {
105+
margin: var(--custom-margin);
106+
}"
107+
`;

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Aliases Tests Aliases default 1`] = `
4+
":root {
5+
--small-padding: 2px 4px 8px 16px;
6+
--large-padding: 4px 8px 16px 32px;
7+
--custom-margin: 2px;
8+
--small-margin: 2px 4px 8px 16px;
9+
--large-margin: 4px 8px 16px 32px;
10+
}
11+
12+
.test1 {
13+
margin: var(--small-margin);
14+
padding: var(--small-padding);
15+
}
16+
17+
.test1.large {
18+
margin: var(--large-margin);
19+
padding: var(--large-padding);
20+
left: 10px;
21+
}
22+
23+
[dir=\\"rtl\\"] .test1.large {
24+
left: auto;
25+
right: 10px;
26+
}
27+
28+
.test2 {
29+
margin: var(--custom-margin);
30+
}"
31+
`;
32+
33+
exports[`Aliases Tests Aliases map 1`] = `
34+
":root {
35+
--small-padding: 2px 4px 8px 16px;
36+
--large-padding: 4px 8px 16px 32px;
37+
--custom-margin: 2px;
38+
--small-margin: 2px 4px 8px 16px;
39+
--large-margin: 4px 8px 16px 32px;
40+
}
41+
42+
[dir=\\"rtl\\"]:root {
43+
--small-padding: 2px 16px 8px 4px;
44+
--large-padding: 4px 32px 16px 8px;
45+
--small-margin: 2px 16px 8px 4px;
46+
--large-margin: 4px 32px 16px 8px;
47+
}
48+
49+
.test1 {
50+
margin: var(--small-margin);
51+
padding: var(--small-padding);
52+
}
53+
54+
.test1.large {
55+
margin: var(--large-margin);
56+
padding: var(--large-padding);
57+
left: 10px;
58+
}
59+
60+
[dir=\\"rtl\\"] .test1.large {
61+
left: auto;
62+
right: 10px;
63+
}
64+
65+
.test2 {
66+
margin: var(--custom-margin);
67+
}"
68+
`;
69+
70+
exports[`Aliases Tests Wrong aliases 1`] = `
71+
":root {
72+
--small-padding: 2px 4px 8px 16px;
73+
--large-padding: 4px 8px 16px 32px;
74+
--custom-margin: 2px;
75+
--small-margin: 2px 4px 8px 16px;
76+
--large-margin: 4px 8px 16px 32px;
77+
}
78+
79+
.test1 {
80+
margin: var(--small-margin);
81+
padding: var(--small-padding);
82+
}
83+
84+
.test1.large {
85+
margin: var(--large-margin);
86+
padding: var(--large-padding);
87+
left: 10px;
88+
}
89+
90+
[dir=\\"rtl\\"] .test1.large {
91+
left: auto;
92+
right: 10px;
93+
}
94+
95+
.test2 {
96+
margin: var(--custom-margin);
97+
}"
98+
`;

0 commit comments

Comments
 (0)