Skip to content

Commit f1106c6

Browse files
elchininetelchininet
committed
Add a bothPrefix option to manage overridden properties due to specificity
1 parent 7b1995b commit f1106c6

File tree

14 files changed

+952
-55
lines changed

14 files changed

+952
-55
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+
## [1.2.0] - 2020-04-16
4+
5+
- Introduced a new parameter (bothPrefix) to manage styles that can be overridden due to specificity
6+
37
## [1.1.2] - 2020-04-14
48

59
- Avoid duplicating the same declarations in the flipped rules

‎README.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@ All the options are optional, and a default value will be used, if any of them i
288288
| mode | `Mode (string)` | `Mode.combined` | Mode of generating the final CSS rules |
289289
| ltrPrefix | `string` or `string[]` | `[dir="ltr"]` | Prefix to use in the left-to-right CSS rules |
290290
| rtlPrefix | `string` or `string[]` | `[dir="rtl"]` | Prefix to use in the right-to-left CSS rules |
291+
| bothPrefix | `string` or `string[]` | `[dir]` | Prefix to use for styles in both directions when the specificity of the ltr or rtl styles will override them |
291292
| source | `Source (string)` | `Source.ltr` | The direction from which the final CSS will be generated |
292293
| processUrls | `boolean` | `false` | Change the strings using the string map also in URLs |
293294
| processKeyFrames | `boolean` | `false` | Flip keyframe animations |
@@ -418,6 +419,68 @@ const options = {
418419
419420
---
420421
422+
#### bothPrefix
423+
424+
<details><summary>Expand</summary>
425+
<p>
426+
427+
This prefix will be used in some specific cases in which a ltr or rtl rule will override styles located in the main rule due to [specificty](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). Consider the next example using the option `processUrls` as `true`:
428+
429+
```css
430+
.test1 {
431+
background: url('icons/ltr/arrow.png');
432+
background-size: 10px 20px;
433+
width: 10px;
434+
}
435+
```
436+
437+
The generated CSS would be:
438+
439+
```css
440+
.test1 {
441+
background-size: 10px 20px;
442+
width: 10px;
443+
}
444+
445+
[dir="ltr"] .test1 {
446+
background: url('icons/ltr/arrow.png');
447+
}
448+
449+
[dir="rtl"] .test1 {
450+
background: url('icons/rtl/arrow.png');
451+
}
452+
```
453+
454+
In the previous case, the `background-size` property has been overridden by the `background` one. Even if we change the order of the rules, the last ones have a higher specificty, so they will rule over the first one.
455+
456+
To solve this, another rule will be created at the end using the `bothPrefix` parameter:
457+
458+
```css
459+
.test1 {
460+
width: 10px;
461+
}
462+
463+
[dir="ltr"] .test1 {
464+
background: url('icons/ltr/arrow.png');
465+
}
466+
467+
[dir="rtl"] .test1 {
468+
background: url('icons/rtl/arrow.png');
469+
}
470+
471+
[dir] {
472+
background-size: 10px 20px;
473+
}
474+
```
475+
476+
And no matter the direction, the `background-size` property is respected.
477+
478+
</p>
479+
480+
</details>
481+
482+
---
483+
421484
#### source
422485
423486
<details><summary>Expand</summary>

‎src/@types/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export interface PluginOptions {
4141
mode?: ModeValues;
4242
ltrPrefix?: strings;
4343
rtlPrefix?: strings;
44+
bothPrefix?: strings;
4445
source?: SourceValues;
4546
processUrls?: boolean;
4647
processKeyFrames?: boolean;
@@ -56,6 +57,7 @@ export interface RulesObject {
5657
rule: Rule;
5758
ruleLTR: Rule | null;
5859
ruleRTL: Rule | null;
60+
ruleBoth: Rule | null;
5961
}
6062

6163
export interface AtRulesObject {
@@ -78,4 +80,11 @@ export interface KeyFramesData {
7880
keyframes: AtRulesObject[];
7981
stringMap: AtRulesStringMap;
8082
regExp: RegExp;
83+
}
84+
85+
export interface ShortHandsData {
86+
[key: string]: {
87+
overridden: string | null;
88+
overrides: string[];
89+
};
8190
}

‎src/data/shorthands.json‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
{
2+
"animation": {
3+
"overridden": null,
4+
"overrides": [
5+
"animation-direction",
6+
"animation-duration",
7+
"animation-delay",
8+
"animation-name",
9+
"animation-fill-mode",
10+
"animation-iteration-count",
11+
"animation-play-state",
12+
"animation-timing-function"
13+
]
14+
},
15+
"background": {
16+
"overridden": null,
17+
"overrides": [
18+
"background-attachment",
19+
"background-color",
20+
"background-image",
21+
"background-position",
22+
"background-repeat"
23+
]
24+
},
25+
"border": {
26+
"overridden": null,
27+
"overrides": [
28+
"border-color",
29+
"border-style",
30+
"border-width"
31+
]
32+
},
33+
"border-bottom": {
34+
"overridden": "border",
35+
"overrides": [
36+
"border-bottom-color",
37+
"border-bottom-style",
38+
"border-bottom-width"
39+
]
40+
},
41+
"border-left": {
42+
"overridden": "border",
43+
"overrides": [
44+
"border-left-color",
45+
"border-left-style",
46+
"border-left-width"
47+
]
48+
},
49+
"border-right": {
50+
"overridden": "border",
51+
"overrides": [
52+
"border-right-color",
53+
"border-right-style",
54+
"border-right-width"
55+
]
56+
},
57+
"border-top": {
58+
"overridden": "border",
59+
"overrides": [
60+
"border-top-color",
61+
"border-top-style",
62+
"border-top-width"
63+
]
64+
},
65+
"border-radius": {
66+
"overridden": null,
67+
"overrides": [
68+
"border-bottom-left-radius",
69+
"border-bottom-right-radius",
70+
"border-top-left-radius",
71+
"border-top-right-radius"
72+
]
73+
},
74+
"columns": {
75+
"overridden": null,
76+
"overrides": [
77+
"column-count",
78+
"column-width"
79+
]
80+
},
81+
"column-rule": {
82+
"overridden": null,
83+
"overrides": [
84+
"column-rule-color",
85+
"column-rule-style",
86+
"column-rule-width"
87+
]
88+
},
89+
"font": {
90+
"overridden": null,
91+
"overrides": [
92+
"font-family",
93+
"font-style",
94+
"font-size",
95+
"font-stretch",
96+
"font-variant",
97+
"font-weight",
98+
"line-height"
99+
]
100+
},
101+
"flex": {
102+
"overridden": null,
103+
"overrides": [
104+
"flex-basis",
105+
"flex-grow",
106+
"flex-shrink"
107+
]
108+
},
109+
"flex-flow": {
110+
"overridden": null,
111+
"overrides": [
112+
"flex-direction",
113+
"flex-wrap"
114+
]
115+
},
116+
"grid": {
117+
"overridden": null,
118+
"overrides": [
119+
"grid-auto-columns",
120+
"grid-auto-flow",
121+
"grid-auto-rows",
122+
"grid-column-gap",
123+
"grid-row-gap",
124+
"grid-template-areas",
125+
"grid-template-columns",
126+
"grid-template-rows"
127+
]
128+
},
129+
"grid-area": {
130+
"overridden": null,
131+
"overrides": [
132+
"grid-column-end",
133+
"grid-column-start",
134+
"grid-row-end",
135+
"grid-row-start"
136+
]
137+
},
138+
"grid-column": {
139+
"overridden": "grid-area",
140+
"overrides": [
141+
"grid-column-end",
142+
"grid-column-start"
143+
]
144+
},
145+
"grid-row": {
146+
"overridden": "grid-area",
147+
"overrides": [
148+
"grid-row-end",
149+
"grid-row-start"
150+
]
151+
},
152+
"grid-template": {
153+
"overridden": "grid",
154+
"overrides": [
155+
"grid-template-areas",
156+
"grid-template-columns",
157+
"grid-template-rows"
158+
]
159+
},
160+
"list-style": {
161+
"overridden": null,
162+
"overrides": [
163+
"list-style-image",
164+
"list-style-position",
165+
"list-style-type"
166+
]
167+
},
168+
"margin": {
169+
"overridden": null,
170+
"overrides": [
171+
"margin-bottom",
172+
"margin-left",
173+
"margin-top",
174+
"margin-right"
175+
]
176+
},
177+
"offset": {
178+
"overridden": null,
179+
"overrides": [
180+
"offset-anchor",
181+
"offset-distance",
182+
"offset-path",
183+
"offset-position",
184+
"offset-rotate"
185+
]
186+
},
187+
"outline": {
188+
"overridden": null,
189+
"overrides": [
190+
"outline-color",
191+
"outline-style",
192+
"outline-width"
193+
]
194+
},
195+
"overflow": {
196+
"overridden": null,
197+
"overrides": [
198+
"overflow-x",
199+
"overflow-y"
200+
]
201+
},
202+
"padding": {
203+
"overridden": null,
204+
"overrides": [
205+
"padding-bottom",
206+
"padding-left",
207+
"padding-top",
208+
"padding-right"
209+
]
210+
},
211+
"place-content": {
212+
"overridden": null,
213+
"overrides": [
214+
"align-content",
215+
"justify-content"
216+
]
217+
},
218+
"place-items": {
219+
"overridden": null,
220+
"overrides": [
221+
"align-items",
222+
"justify-items"
223+
]
224+
},
225+
"place-self": {
226+
"overridden": null,
227+
"overrides": [
228+
"align-self",
229+
"justify-self"
230+
]
231+
},
232+
"text-decoration": {
233+
"overridden": null,
234+
"overrides": [
235+
"text-decoration-color",
236+
"text-decoration-line",
237+
"text-decoration-style",
238+
"text-decoration-thickness"
239+
]
240+
},
241+
"transition": {
242+
"overridden": null,
243+
"overrides": [
244+
"transition-delay",
245+
"transition-duration",
246+
"transition-property",
247+
"transition-timing-function"
248+
]
249+
}
250+
}

0 commit comments

Comments
 (0)