Skip to content

Update playground with version 5.0.0 #245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elchininet merged 2 commits into from
Dec 30, 2023
Merged

Update playground with version 5.0.0 #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
33ec746
Update Playground with the latest changes in version 5.0.0
elchininet Dec 30, 2023
eec5069
Update playground bundle
elchininet Dec 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/scripts/index.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"dependencies": {
"monaco-editor": "^0.45.0",
"postcss": "^8.4.31",
"postcss-rtlcss": "^4.0.9",
"postcss-rtlcss": "^5.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-github-btn": "^1.4.0"
Expand Down
8 changes: 4 additions & 4 deletions playground/src/components/AppProvider/AppProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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 = {
Expand All @@ -118,10 +118,10 @@ export const AppProvider = (props: PropsWithChildren<{}>): JSX.Element => {
changeOptionsSafeBothPrefix,
changeOptionsIgnorePrefixedRules,
changeOptionsProcessUrls,
changeOptionsProcessRuleNames,
changeOptionsProcessKeyframes,
changeOptionsProcessEnv,
changeOptionsUseCalc,
changeOptionsAutoRename,
changeOptionsGreedy,
windowSizes: sizes
};
Expand Down
34 changes: 13 additions & 21 deletions playground/src/components/Options/Options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -16,10 +16,10 @@ export const Options = (): JSX.Element => {
changeOptionsSafeBothPrefix,
changeOptionsIgnorePrefixedRules,
changeOptionsProcessUrls,
changeOptionsProcessRuleNames,
changeOptionsProcessKeyframes,
changeOptionsProcessEnv,
changeOptionsUseCalc,
changeOptionsAutoRename,
changeOptionsGreedy,
fetchOptions
} = useAppContext();
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
26 changes: 20 additions & 6 deletions playground/src/components/Playground/css.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down
8 changes: 4 additions & 4 deletions playground/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5506,10 +5506,10 @@ postcss-modules@^6.0.0:
postcss-modules-values "^4.0.0"
string-hash "^1.1.1"

postcss-rtlcss@^4.0.9:
version "4.0.9"
resolved "https://registry.yarnpkg.com/postcss-rtlcss/-/postcss-rtlcss-4.0.9.tgz#cdb1c862c5c5b29469a436a4521f7aeee403176d"
integrity sha512-dCNKEf+FgTv+EA3XI8ysg2RnpS5s3/iZmU+9qpCNFxHU/BhK+4hz7jyCsCAfo0CLnDrMPtaQENhwb+EGm1wh7Q==
postcss-rtlcss@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/postcss-rtlcss/-/postcss-rtlcss-5.0.0.tgz#382d07c933686f7d014cb7b93653820f2ded3d60"
integrity sha512-it0d8gTtiJLQs+JdbxFJ8MxECLL0oe5XhN+9qH8cbTn5o/guVwRp+I37x1vLekQ7lQRw2+6CXNWFIlv6EvCBfA==
dependencies:
rtlcss "4.1.1"

Expand Down