Update Playground with the latest changes in version 5.0.0

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        
     };

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

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);
 }