elchininet · elchininet · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## [5.6.0] - 2024-12-13
+
+- Add new directives to freeze rules and declarations `/*rtl:freeze*/`, `/*rtl:begin:freeze*/` and `/*rtl:end:freeze*/`
+- Remove references to the legacy package
+
 ## [5.5.1] - 2024-11-24
 
 - Small refactor to avoid a circular dependency between two parsers

diff --git a/README.md b/README.md
diff --git a/src/@types/index.ts b/src/@types/index.ts
@@ -152,13 +152,15 @@ export type RuleParser = (
     parsers: Parsers,
     container: Container,
     parentSourceDirective?: string,
+    parentFreezeDirectiveActive?: boolean,
     hasParentRule?: boolean
 ) => void;
 
 export type AtRuleParser = (
     parsers: Parsers,
     container: Container,
     parentSourceDirective?: string,
+    parentFreezeDirectiveActive?: boolean,
     hasParentRule?: boolean
 ) => void;
 
@@ -170,6 +172,7 @@ export type DeclarationParser = (
     container: DeclarationContainer,
     hasParentRule: boolean,
     ruleSourceDirectiveValue: string,
+    parentFreezeDirectiveActive: boolean,
     processRule: boolean,
     rename: boolean
 ) => void;

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -27,6 +27,7 @@ export enum TYPEOF {
 
 export enum CONTROL_DIRECTIVE {
     IGNORE = 'ignore',
+    FREEZE = 'freeze',
     URLS = 'urls',
     RULES = 'rules',
     SOURCE = 'source',

diff --git a/src/parsers/atrules.ts b/src/parsers/atrules.ts
@@ -22,6 +22,7 @@ export const parseAtRules = (
     parsers: Parsers,
     container: Container,
     parentSourceDirective: string = undefined,
+    parentFreezeDirectiveActive: boolean = false,
     hasParentRule = false
 ): void => {
 
@@ -54,6 +55,11 @@ export const parseAtRules = (
                 parentSourceDirective
             );
 
+            const freezeDirectiveActive = (
+                checkDirective(controlDirectives, CONTROL_DIRECTIVE.FREEZE) ||
+                parentFreezeDirectiveActive
+            );
+
             if (
                 hasParentRule &&
                 node.nodes
@@ -62,6 +68,7 @@ export const parseAtRules = (
                     node,
                     hasParentRule,
                     sourceDirectiveValue,
+                    freezeDirectiveActive,
                     checkDirective(controlDirectives, CONTROL_DIRECTIVE.RULES),
                     checkDirective(controlDirectives, CONTROL_DIRECTIVE.URLS)
                 );
@@ -70,14 +77,16 @@ export const parseAtRules = (
             parsers.parseAtRules(
                 parsers,
                 node,
-                parentSourceDirective,
+                sourceDirectiveValue,
+                freezeDirectiveActive,
                 hasParentRule
             );
 
             parsers.parseRules(
                 parsers,
                 node,
                 sourceDirectiveValue,
+                freezeDirectiveActive,
                 hasParentRule
             );
 

diff --git a/src/parsers/declarations.ts b/src/parsers/declarations.ts
@@ -47,6 +47,7 @@ export const parseDeclarations = (
     container: DeclarationContainer,
     hasParentRule: boolean,
     ruleSourceDirectiveValue: string,
+    ruleFreezeDirectiveActive: boolean,
     processRule: boolean,
     rename: boolean
 ): void => {
@@ -151,11 +152,11 @@ export const parseDeclarations = (
                 return;
             }
 
-            const processUrlDirective = checkDirective(controlDirectives, CONTROL_DIRECTIVE.URLS);
+            const isProcessUrlDirectiveActive = checkDirective(controlDirectives, CONTROL_DIRECTIVE.URLS);
 
             const declString = `${decl.toString()};`;
             const declFlippedString = rtlcss.process(declString, {
-                processUrls: processUrls || processUrlDirective || rename,
+                processUrls: processUrls || isProcessUrlDirectiveActive || rename,
                 processEnv,
                 useCalc,
                 stringMap,
@@ -215,6 +216,18 @@ export const parseDeclarations = (
                 !sourceDirectiveValue ||
                 sourceDirectiveValue === source ||
                 mode === Mode.diff;
+
+            if (
+                checkDirective(controlDirectives, CONTROL_DIRECTIVE.FREEZE) ||
+                ruleFreezeDirectiveActive
+            ) {
+                if (mode === Mode.combined) {
+                    appendDeclarationToRule(decl, containerFlipped);
+                    declarationsProps.push(declPropUnprefixed);
+                    deleteDeclarations.push(decl);
+                }
+                return;
+            }
 
             if (
                 declProp === declFlippedProp &&

diff --git a/src/parsers/rules.ts b/src/parsers/rules.ts
@@ -24,6 +24,7 @@ export const parseRules = (
     parsers: Parsers,
     container: Container,
     parentSourceDirective: string = undefined,
+    parentFreezeDirectiveActive: boolean = false,
     hasParentRule = false
 ): void => {
 
@@ -92,19 +93,47 @@ export const parseRules = (
                 addToIgnoreRulesInDiffMode(node);
                 return;
             }
-            
+
             const sourceDirectiveValue = getSourceDirectiveValue(
                 controlDirectives,
                 parentSourceDirective
             );
 
+            const freezeDirectiveActive = (
+                checkDirective(controlDirectives, CONTROL_DIRECTIVE.FREEZE) ||
+                parentFreezeDirectiveActive
+            );
+
+            if (freezeDirectiveActive) {
+                if (mode === Mode.combined) {
+                    addSelectorPrefixes(
+                        node,
+                        (
+                            (
+                                !sourceDirectiveValue &&
+                                source === Source.ltr
+                            ) ||
+                            (
+                                sourceDirectiveValue &&
+                                sourceDirectiveValue === Source.ltr
+                            )
+                        )
+                            ? ltrPrefix
+                            : rtlPrefix
+                    );
+                }
+                addToIgnoreRulesInDiffMode(node);
+                return;
+            }
+
             if (hasSelectorsPrefixed(node)) {
                 addToIgnoreRulesInDiffMode(node);
             } else {
                 parsers.parseDeclarations(
                     node,
                     hasParentRule,
                     sourceDirectiveValue,
+                    freezeDirectiveActive,
                     checkDirective(controlDirectives, CONTROL_DIRECTIVE.RULES),
                     checkDirective(controlDirectives, CONTROL_DIRECTIVE.URLS)
                 );
@@ -113,14 +142,16 @@ export const parseRules = (
             parsers.parseAtRules(
                 parsers,
                 node,
-                parentSourceDirective,
+                sourceDirectiveValue,
+                freezeDirectiveActive,
                 true
             );
 
             parsers.parseRules(
                 parsers,
                 node,
-                parentSourceDirective,
+                sourceDirectiveValue,
+                freezeDirectiveActive,
                 true
             );
 

diff --git a/src/utilities/rules.ts b/src/utilities/rules.ts
@@ -231,7 +231,14 @@ export const removeEmptyRules = (rule: Container): void => {
 
 export const appendRules = (): void => {
     const { rules } = store;
-    rules.forEach(({rule, ruleLTR, ruleRTL, ruleBoth, ruleSafe}): void => {
+    rules.forEach((ruleObject): void => {
+        const {
+            rule,
+            ruleLTR,
+            ruleRTL,
+            ruleBoth,
+            ruleSafe
+        } = ruleObject;
         if (ruleBoth.nodes.length) {
             rule.after(ruleBoth);
         }
@@ -309,7 +316,7 @@ export const parseRuleNames = (): void => {
         let ruleFlippedSecond: Rule | undefined = undefined;
 
         for (const selector of rule.selectors) {
-            const flip = selector.replace(replaceRegExp, (match: string, group: string): string => replaceHash[group]);
+            const flip = selector.replace(replaceRegExp, (__match: string, group: string): string => replaceHash[group]);
             if (rulesHash[flip]) {
                 ruleFlippedSecond = rulesHash[flip].clone();
                 break;

diff --git a/src/utilities/selectors.ts b/src/utilities/selectors.ts
@@ -66,13 +66,32 @@ export const addProperSelectorPrefixes = (
         source
     } = store.options;
     if (mode === Mode.combined) {
-        addSelectorPrefixes(ruleFlipped, source === Source.ltr ? ltrPrefix : rtlPrefix);
-        addSelectorPrefixes(ruleFlippedSecond, source === Source.rtl ? ltrPrefix : rtlPrefix);
+        addSelectorPrefixes(
+            ruleFlipped,
+            source === Source.ltr
+                ? ltrPrefix
+                : rtlPrefix
+        );
+        addSelectorPrefixes(
+            ruleFlippedSecond,
+            source === Source.ltr
+                ? rtlPrefix
+                : ltrPrefix
+        );
     } else {
-        addSelectorPrefixes(ruleFlipped, source === Source.ltr ? rtlPrefix : ltrPrefix);
-        addSelectorPrefixes(ruleFlippedSecond, source === Source.rtl ? rtlPrefix : ltrPrefix);
+        addSelectorPrefixes(
+            ruleFlipped,
+            source === Source.ltr
+                ? rtlPrefix
+                : ltrPrefix
+        );
+        addSelectorPrefixes(
+            ruleFlippedSecond,
+            source === Source.ltr
+                ? ltrPrefix
+                : rtlPrefix
+        );
     }
-
     addSelectorPrefixes(ruleBoth, bothPrefix);
     addSelectorPrefixes(ruleSafe, bothPrefix);
 };
diff --git a/tests/__snapshots__/basic-options/combined/basic.snapshot b/tests/__snapshots__/basic-options/combined/basic.snapshot
@@ -666,5 +666,59 @@ html[dir="rtl"] .test50 {
 .test53 {
     margin-block-start: 10px;
     margin-block-end: 5px;
+}
+
+[dir="ltr"] .test54 {
+    background: gray;
+    color: red;
+    margin: 0px 2px 10px 5px;
+    padding-left: 10px;
+    text-align: right;
+}
+
+.test55, .test56 {
+    z-index: 100;
+}
+
+[dir="ltr"] .test55, [dir="ltr"] .test56 {
+    float: left;
+    background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%);
+    padding: 10px 5px 2px 20px;
+    margin: 10px 20px 30px 40px;
+    text-align: left;
+}
+
+[dir="rtl"] .test55, [dir="rtl"] .test56 {
+    float: right;
+    margin: 10px 40px 30px 20px;
+    text-align: right;
+}
+
+[dir] .test55, [dir] .test56 {
+    background-clip: text;
+    -webkit-background-clip: text;
+}
+
+@media only screen and (min-width: 630px) {
+    [dir="rtl"] .test57 {
+        text-align: right;
+        color: rgba(255, 242, 126, 1);
+    }
+
+    [dir="rtl"] .test58 {
+        padding: 20px;
+        margin: auto;
+    }
+}
+
+html[dir="ltr"] .test59 {
+    border-radius: 5px;
+    text-align: left;
+}
+
+[dir="ltr"]:root .test60, [dir="ltr"] .test61 {
+    bottom: 20x;
+    margin: 10px 20px 30px;
+    z-index: 10;
 }"
 `;
diff --git a/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot
@@ -734,5 +734,59 @@ html[dir="rtl"] .test50 {
 .test53 {
     margin-block-start: 10px;
     margin-block-end: 5px;
+}
+
+[dir="ltr"] .test54 {
+    background: gray;
+    color: red;
+    margin: 0px 2px 10px 5px;
+    padding-left: 10px;
+    text-align: right;
+}
+
+.test55, .test56 {
+    z-index: 100;
+}
+
+[dir="ltr"] .test55, [dir="ltr"] .test56 {
+    float: left;
+    background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%);
+    padding: 10px 5px 2px 20px;
+    margin: 10px 20px 30px 40px;
+    text-align: left;
+}
+
+[dir="rtl"] .test55, [dir="rtl"] .test56 {
+    float: right;
+    margin: 10px 40px 30px 20px;
+    text-align: right;
+}
+
+[dir] .test55, [dir] .test56 {
+    background-clip: text;
+    -webkit-background-clip: text;
+}
+
+@media only screen and (min-width: 630px) {
+    [dir="rtl"] .test57 {
+        text-align: right;
+        color: rgba(255, 242, 126, 1);
+    }
+
+    [dir="rtl"] .test58 {
+        padding: 20px;
+        margin: auto;
+    }
+}
+
+html[dir="ltr"] .test59 {
+    border-radius: 5px;
+    text-align: left;
+}
+
+[dir="ltr"]:root .test60, [dir="ltr"] .test61 {
+    bottom: 20x;
+    margin: 10px 20px 30px;
+    z-index: 10;
 }"
 `;