Add a bothPrefix option to manage overridden properties due to specif…

…icity

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.2.0] - 2020-04-16
+
+- Introduced a new parameter (bothPrefix) to manage styles that can be overridden due to specificity
+
 ## [1.1.2] - 2020-04-14
 
 - Avoid duplicating the same declarations in the flipped rules

README.md

@@ -288,6 +288,7 @@ All the options are optional, and a default value will be used, if any of them i
 | mode               | `Mode (string)`           | `Mode.combined` | Mode of generating the final CSS rules                       |
 | ltrPrefix          | `string` or `string[]`    | `[dir="ltr"]`   | Prefix to use in the left-to-right CSS rules                 |
 | rtlPrefix          | `string` or `string[]`    | `[dir="rtl"]`   | Prefix to use in the right-to-left CSS rules                 |
+| 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 |
 | source             | `Source (string)`         | `Source.ltr`    | The direction from which the final CSS will be generated     |
 | processUrls        | `boolean`                 | `false`         | Change the strings using the string map also in URLs         |
 | processKeyFrames   | `boolean`                 | `false`         | Flip keyframe animations                                     |
@@ -418,6 +419,68 @@ const options = {
 
 ---
 
+#### bothPrefix
+
+<details><summary>Expand</summary>
+<p>
+
+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`:
+
+```css
+.test1 {
+    background: url('icons/ltr/arrow.png');
+    background-size: 10px 20px;
+    width: 10px;
+}
+```
+
+The generated CSS would be:
+
+```css
+.test1 {
+    background-size: 10px 20px;
+    width: 10px;
+}
+
+[dir="ltr"] .test1 {
+    background: url('icons/ltr/arrow.png');
+}
+
+[dir="rtl"] .test1 {
+    background: url('icons/rtl/arrow.png');
+}
+```
+
+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.
+
+To solve this, another rule will be created at the end using the `bothPrefix` parameter:
+
+```css
+.test1 {
+    width: 10px;
+}
+
+[dir="ltr"] .test1 {
+    background: url('icons/ltr/arrow.png');
+}
+
+[dir="rtl"] .test1 {
+    background: url('icons/rtl/arrow.png');
+}
+
+[dir] {
+    background-size: 10px 20px;
+}
+```
+
+And no matter the direction, the `background-size` property is respected.
+
+</p>
+
+</details>
+
+---
+
 #### source
 
 <details><summary>Expand</summary>

src/@types/index.ts

@@ -41,6 +41,7 @@ export interface PluginOptions {
     mode?: ModeValues;
     ltrPrefix?: strings;
     rtlPrefix?: strings;
+    bothPrefix?: strings;
     source?: SourceValues;
     processUrls?: boolean;
     processKeyFrames?: boolean;
@@ -56,6 +57,7 @@ export interface RulesObject {
     rule: Rule;
     ruleLTR: Rule | null;
     ruleRTL: Rule | null;
+    ruleBoth: Rule | null;
 }
 
 export interface AtRulesObject {
@@ -78,4 +80,11 @@ export interface KeyFramesData {
     keyframes: AtRulesObject[];
     stringMap: AtRulesStringMap;
     regExp: RegExp;
+}
+
+export interface ShortHandsData {
+    [key: string]: {
+        overridden: string | null;
+        overrides: string[];
+    };
 }

src/data/shorthands.json

@@ -0,0 +1,250 @@
+{
+    "animation": {
+        "overridden": null,
+        "overrides": [
+            "animation-direction",
+            "animation-duration",
+            "animation-delay",
+            "animation-name",
+            "animation-fill-mode",
+            "animation-iteration-count",
+            "animation-play-state",
+            "animation-timing-function"
+        ]
+    },
+    "background": {
+        "overridden": null,
+        "overrides": [
+            "background-attachment",
+            "background-color",
+            "background-image",
+            "background-position",
+            "background-repeat"
+        ]
+    },
+    "border": {
+        "overridden": null,
+        "overrides": [
+            "border-color",
+            "border-style",
+            "border-width"
+        ]
+    },
+    "border-bottom": {
+        "overridden": "border",
+        "overrides": [
+            "border-bottom-color",
+            "border-bottom-style",
+            "border-bottom-width"
+        ]
+    },
+    "border-left": {
+        "overridden": "border",
+        "overrides": [
+            "border-left-color",
+            "border-left-style",
+            "border-left-width"
+        ]
+    },
+    "border-right": {
+        "overridden": "border",
+        "overrides": [
+            "border-right-color",
+            "border-right-style",
+            "border-right-width"
+        ]
+    },
+    "border-top": {
+        "overridden": "border",
+        "overrides": [
+            "border-top-color",
+            "border-top-style",
+            "border-top-width"
+        ]
+    },
+    "border-radius": {
+        "overridden": null,
+        "overrides": [
+            "border-bottom-left-radius",
+            "border-bottom-right-radius",
+            "border-top-left-radius",
+            "border-top-right-radius"
+        ]
+    },
+    "columns": {
+        "overridden": null,
+        "overrides": [
+            "column-count",
+            "column-width"
+        ]
+    },
+    "column-rule": {
+        "overridden": null,
+        "overrides": [
+            "column-rule-color",
+            "column-rule-style",
+            "column-rule-width"
+        ]
+    },
+    "font": {
+        "overridden": null,
+        "overrides": [
+            "font-family",
+            "font-style",
+            "font-size",
+            "font-stretch",
+            "font-variant",
+            "font-weight",
+            "line-height"
+        ]
+    },
+    "flex": {
+        "overridden": null,
+        "overrides": [
+            "flex-basis",
+            "flex-grow",
+            "flex-shrink"
+        ]
+    },
+    "flex-flow": {
+        "overridden": null,
+        "overrides": [
+            "flex-direction",
+            "flex-wrap"
+        ]
+    },
+    "grid": {
+        "overridden": null,
+        "overrides": [
+            "grid-auto-columns",
+            "grid-auto-flow",
+            "grid-auto-rows",
+            "grid-column-gap",
+            "grid-row-gap",
+            "grid-template-areas",
+            "grid-template-columns",
+            "grid-template-rows"
+        ]
+    },
+    "grid-area": {
+        "overridden": null,
+        "overrides": [
+            "grid-column-end",
+            "grid-column-start",
+            "grid-row-end",
+            "grid-row-start"
+        ]
+    },
+    "grid-column": {
+        "overridden": "grid-area",
+        "overrides": [
+            "grid-column-end",
+            "grid-column-start"
+        ]
+    },
+    "grid-row": {
+        "overridden": "grid-area",
+        "overrides": [
+            "grid-row-end",
+            "grid-row-start"
+        ]
+    },
+    "grid-template": {
+        "overridden": "grid",
+        "overrides": [
+            "grid-template-areas",
+            "grid-template-columns",
+            "grid-template-rows"
+        ]
+    },
+    "list-style": {
+        "overridden": null,
+        "overrides": [
+            "list-style-image",
+            "list-style-position",
+            "list-style-type"
+        ]
+    },
+    "margin": {
+        "overridden": null,
+        "overrides": [
+            "margin-bottom",
+            "margin-left",
+            "margin-top",
+            "margin-right"
+        ]
+    },
+    "offset": {
+        "overridden": null,
+        "overrides": [
+            "offset-anchor",
+            "offset-distance",
+            "offset-path",
+            "offset-position",
+            "offset-rotate"
+        ]
+    },
+    "outline": {
+        "overridden": null,
+        "overrides": [
+            "outline-color",
+            "outline-style",
+            "outline-width"
+        ]
+    },
+    "overflow": {
+        "overridden": null,
+        "overrides": [
+            "overflow-x",
+            "overflow-y"
+        ]
+    },
+    "padding": {
+        "overridden": null,
+        "overrides": [
+            "padding-bottom",
+            "padding-left",
+            "padding-top",
+            "padding-right"
+        ]
+    },
+    "place-content": {
+        "overridden": null,
+        "overrides": [
+            "align-content",
+            "justify-content"
+        ]
+    },
+    "place-items": {
+        "overridden": null,
+        "overrides": [
+            "align-items",
+            "justify-items"
+        ]
+    },
+    "place-self": {
+        "overridden": null,
+        "overrides": [
+            "align-self",
+            "justify-self"
+        ]
+    },
+    "text-decoration": {
+        "overridden": null,
+        "overrides": [
+            "text-decoration-color",
+            "text-decoration-line",
+            "text-decoration-style",
+            "text-decoration-thickness"
+        ]
+    },
+    "transition": {
+        "overridden": null,
+        "overrides": [
+            "transition-delay",
+            "transition-duration",
+            "transition-property",
+            "transition-timing-function"
+        ]
+    }
+}