Add a new option to ignore rules already prefixed

Author: elchininet

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.7.2] - 2021-05-23
+
+- Added a new option to ignore rules already prefixed
+
 ## [1.6.9] - 2021-05-12
 
 - Fix a bug with :root and html rules

README.md

@@ -296,6 +296,7 @@ All the options are optional, and a default value will be used, if any of them i
 | 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 |
 | safeBothPrefix     | `boolean`                 | `false`         | Add the `bothPrefix` to those declarations that can be flipped to avoid them being overridden by specificity |
+| ignorePrefixedRules| `boolean`                 | true            | Ignores rules that have been prefixed with some of the prefixes contained in `ltrPrefix`, `rtlPrefix`, or `bothPrefix` |
 | 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                                     |
@@ -565,6 +566,70 @@ As `test2` has the same level of specificity as `test1`, now the result is that
 
 ---
 
+#### ignorePrefixedRules
+
+<details><summary>Expand</summary>
+<p>
+
+This option is to ignore the rules that have been prefixed with one of the prefixes contained in `ltrPrefix`, `rtlPrefix`, or `bothPrefix`:
+
+##### input
+
+```css
+[dir="ltr"] test {
+    left: 10px;
+}
+[dir="rtl"] test {
+    right: 10px;
+}
+```
+
+##### ignorePrefixedRules true
+
+```javascript
+const options = { ignorePrefixedRules: true }; // This is the default value
+```
+
+##### output
+
+```css
+[dir="ltr"] test {
+    left: 10px;
+}
+[dir="rtl"] test {
+    right: 10px;
+}
+```
+
+##### ignorePrefixedRules false
+
+```javascript
+const options = { ignorePrefixedRules: false };
+```
+
+##### output
+
+```css
+[dir="ltr"] [dir="ltr"] test {
+    left: 10px;
+}
+[dir="rtl"] [dir="ltr"] test {
+    right: 10px;
+}
+[dir="ltr"] [dir="rtl"] test {
+    right: 10px;
+}
+[dir="rtl"] [dir="rtl"] test {
+    left: 10px;
+}
+```
+
+</p>
+
+</details>
+
+---
+
 #### source
 
 <details><summary>Expand</summary>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-rtlcss",
-  "version": "1.6.9",
+  "version": "1.7.2",
   "description": "PostCSS plugin to build Cascading Style Sheets (CSS) with Left-To-Right (LTR) and Right-To-Left (RTL) rules",
   "keywords": [
     "postcss",

src/@types/index.ts

@@ -51,6 +51,7 @@ export interface PluginOptions {
     rtlPrefix?: strings;
     bothPrefix?: strings;
     safeBothPrefix?: boolean;
+    ignorePrefixedRules?: boolean;
     source?: SourceValues;
     processUrls?: boolean;
     processKeyFrames?: boolean;

src/constants/index.ts

@@ -13,6 +13,8 @@ export const RTL_CONTROL_DIRECTIVE_REG_EXP = /^\/\*!? *rtl:?(begin|end)?:(\w+):?
 export const FLIP_PROPERTY_REGEXP = /(right|left)/i;
 export const HTML_SELECTOR_REGEXP = /^(html)(?=\W|$)/;
 export const ROOT_SELECTOR_REGEXP = /(:root)(?=\W|$)/;
+export const REG_EXP_CHARACTERS_REG_EXP = /[.?*+^$[\]\\(){}|-]/g;
+export const LAST_WORD_CHARACTER_REG_EXP = /\w$/;
 
 export enum CONTROL_DIRECTIVE {
     IGNORE = 'ignore',

src/data/store.ts

@@ -16,7 +16,11 @@ import {
     PluginStringMap
 } from '@types';
 import { getKeyFramesStringMap, getKeyFramesRegExp } from '@parsers/atrules';
-import { BOOLEAN_TYPE } from '@constants';
+import {
+    BOOLEAN_TYPE,
+    REG_EXP_CHARACTERS_REG_EXP,
+    LAST_WORD_CHARACTER_REG_EXP
+} from '@constants';
 
 interface Store {
     options: PluginOptionsNormalized;
@@ -25,8 +29,11 @@ interface Store {
     keyframesRegExp: RegExp;
     rules: RulesObject[];
     rulesAutoRename: Rule[];
+    rulesPrefixRegExp: RegExp;
 }
 
+const defaultRegExp = new RegExp('$-^');
+
 const defaultStringMap = [
     {
         name: 'left-right',
@@ -91,12 +98,35 @@ const isNotAcceptedStringMap = (stringMap: PluginStringMap[]): boolean => {
     );
 };
 
+const spreadArrayOfStrings = (arr: string[], item: strings): string[] => {
+    return typeof item === 'string'
+        ? [...arr, item]
+        : [...arr, ...item];
+};
+
+const createRulesPrefixesRegExp = (options: PluginOptionsNormalized): RegExp => {
+    const { ltrPrefix, rtlPrefix, bothPrefix, ignorePrefixedRules } = options;
+    if (!ignorePrefixedRules) return defaultRegExp;
+    let prefixes: string[] = [];
+    prefixes = spreadArrayOfStrings(prefixes, ltrPrefix);
+    prefixes = spreadArrayOfStrings(prefixes, rtlPrefix);
+    prefixes = spreadArrayOfStrings(prefixes, bothPrefix);
+    prefixes = prefixes.map((p: string): string => {
+        const escaped = p.replace(REG_EXP_CHARACTERS_REG_EXP, '\\$&');
+        return LAST_WORD_CHARACTER_REG_EXP.test(p)
+            ? `${escaped}(?:\\W|$)`
+            : escaped;
+    });
+    return new RegExp(`(${prefixes.join('|')})`);
+};
+
 const defaultOptions = (): PluginOptionsNormalized => ({
     mode: Mode.combined,
     ltrPrefix: '[dir="ltr"]',
     rtlPrefix: '[dir="rtl"]',
     bothPrefix: '[dir]',
     safeBothPrefix: false,
+    ignorePrefixedRules: true,
     source: Source.ltr,
     processUrls: false,
     processKeyFrames: false,
@@ -106,15 +136,14 @@ const defaultOptions = (): PluginOptionsNormalized => ({
     greedy: false
 });
 
-const defaultKeyframesRegExp = new RegExp('$-^');
-
 const store: Store = {
     options: {...defaultOptions()},
     keyframes: [],
     keyframesStringMap: {},
-    keyframesRegExp: defaultKeyframesRegExp,
+    keyframesRegExp: defaultRegExp,
     rules: [],
-    rulesAutoRename: []
+    rulesAutoRename: [],
+    rulesPrefixRegExp: defaultRegExp
 };
 
 export const normalizeOptions = (options: PluginOptions): PluginOptionsNormalized => {
@@ -128,6 +157,9 @@ export const normalizeOptions = (options: PluginOptions): PluginOptionsNormalize
     if (options.autoRename && AutorenameValuesArray.includes(options.autoRename)) {
         returnOptions.autoRename = options.autoRename;
     }
+    if (typeof options.ignorePrefixedRules === BOOLEAN_TYPE) {
+        returnOptions.ignorePrefixedRules = options.ignorePrefixedRules;
+    }
     if (typeof options.greedy === BOOLEAN_TYPE) {
         returnOptions.greedy = options.greedy;
     }
@@ -171,9 +203,10 @@ const initStore = (options: PluginOptions): void => {
     store.options = normalizeOptions(options);
     store.keyframes = [];
     store.keyframesStringMap = {};
-    store.keyframesRegExp = defaultKeyframesRegExp;
+    store.keyframesRegExp = defaultRegExp;
     store.rules = [];
     store.rulesAutoRename = [];
+    store.rulesPrefixRegExp = createRulesPrefixesRegExp(store.options);
 };
 
 const initKeyframesData = (): void => {

src/parsers/rules.ts

@@ -9,7 +9,7 @@ import {
 } from '@utilities/directives';
 import { walkContainer } from '@utilities/containers';
 import { cleanRuleRawsBefore } from '@utilities/rules';
-import { addSelectorPrefixes } from '@utilities/selectors';
+import { addSelectorPrefixes, hasSelectorsPrefixed } from '@utilities/selectors';
 import { parseDeclarations } from './declarations';
 
 export const parseRules = (
@@ -77,19 +77,23 @@ export const parseRules = (
             );
 
             if (checkDirective(controlDirectives, CONTROL_DIRECTIVE.RENAME)) {
-                store.rulesAutoRename.push(rule);
-                parseDeclarations(
-                    rule,
-                    hasParentRule,
-                    sourceDirectiveValue,
-                    true
-                );
+                if (!hasSelectorsPrefixed(rule)) {
+                    store.rulesAutoRename.push(rule);
+                    parseDeclarations(
+                        rule,
+                        hasParentRule,
+                        sourceDirectiveValue,
+                        true
+                    );
+                }
             } else {
-                parseDeclarations(
-                    rule,
-                    hasParentRule,
-                    sourceDirectiveValue
-                );
+                if (!hasSelectorsPrefixed(rule)) {
+                    parseDeclarations(
+                        rule,
+                        hasParentRule,
+                        sourceDirectiveValue
+                    );
+                }
             }
 
             parseRules(

src/utilities/selectors.ts

@@ -15,13 +15,29 @@ const addPrefix = (prefix: string, selector: string): string => {
 
 export const addSelectorPrefixes = (rule: Rule, prefixes: strings): void => {
     rule.selectors = typeof prefixes === 'string'
-        ? rule.selectors.map((selector: string): string => addPrefix(prefixes, selector))
+        ? rule.selectors.map((selector: string): string => {
+            if (store.rulesPrefixRegExp.test(selector)) {
+                return selector;
+            }
+            return addPrefix(prefixes, selector);
+        })
         : rule.selectors.reduce((selectors: string[], selector: string): string[] => {
-            selectors = selectors.concat(prefixes.map((prefix: string): string => addPrefix(prefix, selector)));
+            if (store.rulesPrefixRegExp.test(selector)) {
+                selectors = [...selectors, selector];
+            } else {
+                selectors = selectors.concat(
+                    prefixes.map((prefix: string): string => addPrefix(prefix, selector))
+                );
+            }
             return selectors;
         }, []);
 };
 
+export const hasSelectorsPrefixed = (rule: Rule): boolean => {
+    const prefixed = rule.selectors.find((selector: string) => store.rulesPrefixRegExp.test(selector));
+    return !!prefixed;
+};
+
 export const addProperSelectorPrefixes = (
     ruleFlipped: Rule,
     ruleFlippedSecond: Rule,