Update Playground with the latest changes in version 5.0.0

elchininet · elchininet · commit 1644fd9a81d4 · 2023-12-30T13:03:20.000+01:00
diff --git a/playground/src/components/AppProvider/AppProvider.tsx b/playground/src/components/AppProvider/AppProvider.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, createContext, useContext, useState, useEffect } from 'react';
-import { Mode, Source, Autorename } from 'postcss-rtlcss/options';
+import { Mode, Source } from 'postcss-rtlcss/options';
 import { PluginOptions, FetchOptions } from '@types';
 import { breakpointSizes } from '@constants';
 import { useApi } from '@hooks/useApi';
@@ -31,10 +31,10 @@ export interface AppProviderContext {
     changeOptionsSafeBothPrefix: (safeBothPrefix: boolean) => void;
     changeOptionsIgnorePrefixedRules: (ignorePrefixedRules: boolean) => void;
     changeOptionsProcessUrls: (processUrls: boolean) => void;
+    changeOptionsProcessRuleNames: (processRuleNames: boolean) => void;
     changeOptionsProcessKeyframes: (processKeyFrames: boolean) => void;
     changeOptionsProcessEnv: (processEnv: boolean) => void;
     changeOptionsUseCalc: (useCalc: boolean) => void;
-    changeOptionsAutoRename: (value: Autorename) => void;
     changeOptionsGreedy: (greedy: boolean) => void;
 }
 
@@ -94,10 +94,10 @@ export const AppProvider = (props: PropsWithChildren<{}>): JSX.Element => {
     const changeOptionsSafeBothPrefix = (safeBothPrefix: boolean): void => setOptions({...options, safeBothPrefix});
     const changeOptionsIgnorePrefixedRules = (ignorePrefixedRules: boolean) => setOptions({...options, ignorePrefixedRules});
     const changeOptionsProcessUrls = (processUrls: boolean): void => setOptions({ ...options, processUrls });
+    const changeOptionsProcessRuleNames = (processRuleNames: boolean): void => setOptions({ ...options, processRuleNames });
     const changeOptionsProcessKeyframes = (processKeyFrames: boolean): void => setOptions({ ...options, processKeyFrames });
     const changeOptionsProcessEnv = (processEnv: boolean): void => setOptions({ ...options, processEnv });
     const changeOptionsUseCalc = (useCalc: boolean): void => setOptions({ ...options, useCalc });
-    const changeOptionsAutoRename = (value: Autorename): void => setOptions({ ...options, autoRename: value });
     const changeOptionsGreedy = (greedy: boolean): void => setOptions({ ...options, greedy });
 
     const providerData = {
@@ -118,10 +118,10 @@ export const AppProvider = (props: PropsWithChildren<{}>): JSX.Element => {
         changeOptionsSafeBothPrefix,
         changeOptionsIgnorePrefixedRules,
         changeOptionsProcessUrls,
+        changeOptionsProcessRuleNames,
         changeOptionsProcessKeyframes,
         changeOptionsProcessEnv,
         changeOptionsUseCalc,
-        changeOptionsAutoRename,
         changeOptionsGreedy,
         windowSizes: sizes        
     };
diff --git a/playground/src/components/Options/Options.tsx b/playground/src/components/Options/Options.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Mode, Source, Autorename } from 'postcss-rtlcss/options';
+import { Mode, Source } from 'postcss-rtlcss/options';
 import { useAppContext } from '@components/AppProvider';
 import { Switch } from '@components/Switch';
 import { SwitchGroup } from '@components/SwitchGroup';
@@ -16,10 +16,10 @@ export const Options = (): JSX.Element => {
         changeOptionsSafeBothPrefix,
         changeOptionsIgnorePrefixedRules,
         changeOptionsProcessUrls,
+        changeOptionsProcessRuleNames,
         changeOptionsProcessKeyframes,
         changeOptionsProcessEnv,
         changeOptionsUseCalc,
-        changeOptionsAutoRename,
         changeOptionsGreedy,
         fetchOptions
     } = useAppContext();
@@ -37,18 +37,10 @@ export const Options = (): JSX.Element => {
     const changeSafeBothPrefix = (checked: boolean) => changeOptionsSafeBothPrefix(checked);
     const changeIgnorePrefixedRules = (checked: boolean) => changeOptionsIgnorePrefixedRules(checked);
     const changeProcessUrls = (checked: boolean): void => changeOptionsProcessUrls(checked);
+    const changeProcessRuleNames = (processRuleNames: boolean): void => changeOptionsProcessRuleNames(processRuleNames);
     const changeProcessKeyframes = (checked: boolean): void => changeOptionsProcessKeyframes(checked);
     const changeProcessEnv = (checked: boolean): void => changeOptionsProcessEnv(checked);
     const changeUseCalc = (checked: boolean): void => changeOptionsUseCalc(checked);
-    const changeAutoRename = (value: string): void => {
-        if (value === 'disabled') {
-            changeOptionsAutoRename(Autorename.disabled);
-        } else if (value === 'flexible') {
-            changeOptionsAutoRename(Autorename.flexible);
-        } else {
-            changeOptionsAutoRename(Autorename.strict);
-        }
-    };
     const changeGreedy = (checked: boolean): void => changeOptionsGreedy(checked);
 
     useEffect(() => {
@@ -117,6 +109,16 @@ export const Options = (): JSX.Element => {
                         }}
                     />
                 </div>
+                { /* processRuleNames */ }
+                <div className={styles.panel}>
+                    <Switch
+                        labels={['processRuleNames: false', 'processRuleNames: true']}
+                        onChange={changeProcessRuleNames}
+                        attributes={{
+                            checked: !!fetchOptions?.processRuleNames
+                        }}
+                    />
+                </div>
                 { /* processKeyFrames */ }
                 <div className={styles.panel}>
                     <Switch
@@ -151,16 +153,6 @@ export const Options = (): JSX.Element => {
                         }}
                     />
                 </div>
-                { /* autoRename */ }
-                <div className={styles.panel}>
-                    <SwitchGroup
-                        label="autoRename"
-                        name="auto-rename"
-                        values={['disabled', 'flexible', 'strict']}
-                        onChange={changeAutoRename}
-                        active={fetchOptions?.autoRename as string || 'disabled'}
-                    />
-                </div>
                 { /* greedy */ }
                 <div className={styles.panel}>
                     <Switch
diff --git a/playground/src/components/Playground/css.tsx b/playground/src/components/Playground/css.tsx
@@ -58,32 +58,44 @@ export const cssLines = `.test1, .test2 {
     }
 }
 
-/*rtl:rename*/
 .test10-ltr {
     color: #000;
     width: 100%;
 }
 
 .test11-left::before {
-    content: "keyboard_arrow_left";
+    background-image: url("/icons/icon-l.png");
 }
 
 .test11-right::before {
-    content: "keyboard_arrow_right";
+    background-image: url("/icons/icon-r.png");
 }
 
 .testleft12 {
-    border: 1px solid gray;
+    content: "\\f007";
+}
+
+.testright12 {
+    content: "\\f010";
 }
 
-.testleft13 {
+.testltr13 {
     content: "keyboard_arrow_left";
 }
 
-.testright14 {
+.testrtl13 {
     content: "keyboard_arrow_right";
 }
 
+.test14 {
+    .test14-ltr {
+        content: "left content";
+    }
+    .test14-rtl {
+        content: "right content";
+    }
+}
+
 .test15 {
     color: #EFEFEF;
     left: 10px;
@@ -142,6 +154,8 @@ export const cssLines = `.test1, .test2 {
 }
 
 .test22 {
+    /*rtl:urls*/
+    background: url("/folder/icons/icon-ltr.png");
     margin-right: env(safe-area-inset-right, 10px);
     margin-left: env(safe-area-inset-left, 20px);
 }

Original file line number	Diff line number	Diff line change
@@ -58,32 +58,44 @@ export const cssLines = `.test1, .test2 {
`58`	`58`	`}`
`59`	`59`	`}`
`60`	`60`
`61`		`-/rtl:rename/`
`62`	`61`	`.test10-ltr {`
`63`	`62`	`color: #000;`
`64`	`63`	`width: 100%;`
`65`	`64`	`}`
`66`	`65`
`67`	`66`	`.test11-left::before {`
`68`		`- content: "keyboard_arrow_left";`
	`67`	`+ background-image: url("/icons/icon-l.png");`
`69`	`68`	`}`
`70`	`69`
`71`	`70`	`.test11-right::before {`
`72`		`- content: "keyboard_arrow_right";`
	`71`	`+ background-image: url("/icons/icon-r.png");`
`73`	`72`	`}`
`74`	`73`
`75`	`74`	`.testleft12 {`
`76`		`- border: 1px solid gray;`
	`75`	`+ content: "\\f007";`
	`76`	`+}`
	`77`	`+`
	`78`	`+.testright12 {`
	`79`	`+ content: "\\f010";`
`77`	`80`	`}`
`78`	`81`
`79`		`-.testleft13 {`
	`82`	`+.testltr13 {`
`80`	`83`	`content: "keyboard_arrow_left";`
`81`	`84`	`}`
`82`	`85`
`83`		`-.testright14 {`
	`86`	`+.testrtl13 {`
`84`	`87`	`content: "keyboard_arrow_right";`
`85`	`88`	`}`
`86`	`89`
	`90`	`+.test14 {`
	`91`	`+ .test14-ltr {`
	`92`	`+ content: "left content";`
	`93`	`+ }`
	`94`	`+ .test14-rtl {`
	`95`	`+ content: "right content";`
	`96`	`+ }`
	`97`	`+}`
	`98`	`+`
`87`	`99`	`.test15 {`
`88`	`100`	`color: #EFEFEF;`
`89`	`101`	`left: 10px;`
@@ -142,6 +154,8 @@ export const cssLines = `.test1, .test2 {
`142`	`154`	`}`
`143`	`155`
`144`	`156`	`.test22 {`
	`157`	`+ /rtl:urls/`
	`158`	`+ background: url("/folder/icons/icon-ltr.png");`
`145`	`159`	`margin-right: env(safe-area-inset-right, 10px);`
`146`	`160`	`margin-left: env(safe-area-inset-left, 20px);`
`147`	`161`	`}`