feat: add rtlcss to styled components.

package.json

@@ -107,6 +107,7 @@
     "semver": "6.3.0",
     "style-loader": "0.23.1",
     "styled-components": "^5.3.1",
+    "stylis-rtlcss": "^2.1.1",
     "terser-webpack-plugin": "2.3.4",
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",

src/components/BankAccounts/index.js

@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
 import clsx from 'classnames';
 import Icon from '../Icon';
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 const ACCOUNT_TYPE = {
   CASH: 'cash',
@@ -185,9 +184,7 @@ const MetaLineValue = styled.div`
   text-align: center;
   color: rgb(23, 43, 77);
   font-size: 11px;
-
+  margin-left: auto;
-  ${whenLtr(`margin-left: auto;`)}
-  ${whenRtl(`margin-right: auto;`)}
 `;
 
 const BankAccountMeta = styled.div`
@@ -204,7 +201,5 @@ const AccountIconWrap = styled.div`
   position: absolute;
   top: 14px;
   color: #abb3bb;
-
+  right: 12px;
-  ${whenLtr(`right: 12px;`)}
-  ${whenRtl(`left: 12px;`)}
 `;

src/components/Dashboard/DashboardThemeProvider.js

@@ -1,9 +1,16 @@
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider, StyleSheetManager } from 'styled-components';
+import rtlcss from 'stylis-rtlcss';
 import { useAppIntlContext } from '../AppIntlProvider';
 
 export function DashboardThemeProvider({ children }) {
   const { direction } = useAppIntlContext();
 
-  return <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>;
+  return (
+    <StyleSheetManager
+      {...(direction === 'rtl' ? { stylisPlugins: [rtlcss] } : {})}
+    >
+      <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>
+    </StyleSheetManager>
+  );
 }

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -18,7 +18,6 @@ import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { handleCashFlowTransactionType } from './utils';
 
 import { compose } from 'utils';
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 /**
  * Account transactions data table.
@@ -129,8 +128,7 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)`
 
     .tbody-inner {
       .tr .td:not(:first-child) {
-        ${whenLtr(`border-left: 1px solid #e6e6e6;`)}
+        border-left: 1px solid #e6e6e6;
-        ${whenRtl(`border-right: 1px solid #e6e6e6;`)}
       }
     }
   }

src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js

@@ -14,7 +14,6 @@ import { curry } from 'lodash/fp';
 
 import { Icon } from '../../../components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 function AccountSwitchButton() {
   const { currentAccount } = useAccountTransactionsContext();
@@ -23,7 +22,7 @@ function AccountSwitchButton() {
     <AccountSwitchButtonBase
       minimal={true}
       rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
-    > 
+    >
       <AccountSwitchText>{currentAccount.name}</AccountSwitchText>
     </AccountSwitchButtonBase>
   );
@@ -161,8 +160,7 @@ const AccountBalanceAmount = styled.span`
   font-weight: 600;
   display: inline-block;
   color: rgb(31, 50, 85);
-  ${whenLtr(`margin-left: 10px;`)}
+  margin-left: 10px;
-  ${whenRtl(`margin-right: 10px;`)}
 `;
 
 const AccountSwitchItemName = styled.div`
@@ -180,7 +178,6 @@ const AccountSwitchItemUpdatedAt = styled.div`
 
 const AccountSwitchButtonBase = styled(Button)`
   .bp3-button-text {
-    ${whenLtr(`margin-right: 5px;`)}
+    margin-right: 5px;
-    ${whenRtl(`margin-left: 5px;`)}
   }
 `;

src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js

@@ -12,8 +12,6 @@ import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
 import { SMSMessagePreview } from 'components';
 import { getSMSUnits } from '../../NotifyViaSMS/utils';
 
-import { whenRtl, whenLtr } from 'utils/styled-components';
-
 /**
  * SMS message form content.
  */
@@ -98,22 +96,16 @@ const MessageVariable = styled.div`
 const FormContent = styled.div`
   display: flex;
 `;
+
 const FormFields = styled.div`
   width: 55%;
 `;
+
 const FormPreview = styled.div`
   display: flex;
   flex-direction: column;
   width: 45%;
-
+  padding-left: 25px;
-  ${whenLtr(`
+  margin-left: 25px;
-    padding-left: 25px;
+  border-left: 1px solid #dcdcdd;
-    margin-left: 25px;
-    border-left: 1px solid #dcdcdd;
-  `)}
-  ${whenRtl(`
-    padding-right: 25px;
-    margin-right: 25px;
-    border-right: 1px solid #dcdcdd;
-  `)}
 `;

src/containers/NotifyViaSMS/NotifyViaSMSForm.js

@@ -15,7 +15,6 @@ import { FormObserver, SMSMessagePreview } from 'components';
 import { transformToForm, safeInvoke } from 'utils';
 import { getSMSUnits } from './utils';
 
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 const defaultInitialValues = {
   notification_key: '',
@@ -147,17 +146,9 @@ const SMSPreviewSectionRoot = styled.div`
   display: flex;
   flex-direction: column;
   width: 45%;
-
+  padding-left: 25px;
-  ${whenLtr(`
+  margin-left: 25px;
-    padding-left: 25px;
+  border-left: 1px solid #dcdcdd;
-    margin-left: 25px;
-    border-left: 1px solid #dcdcdd;
-  `)}
-  ${whenRtl(`
-    padding-right: 25px;
-    margin-right: 25px;
-    border-right: 1px solid #dcdcdd;
-  `)}
 `;
 
 const SMSPreviewSectionNote = styled.div`

src/utils/styled-components.js

@@ -1,9 +0,0 @@
-import { css } from 'styled-components';
-
-export const whenRtl = (restCss) => css`
-  ${({ theme }) => theme.dir === 'rtl' && restCss}
-`;
-
-export const whenLtr = (restCss) => css`
-  ${({ theme }) => theme.dir === 'ltr' && restCss}
-`;