fix(renderer): Flip all RTL styles

We need a sylis plugin for this according to
https://mui.com/material-ui/guides/right-to-left/#3-install-the-rtl-plugin

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

1 files changed, 36 insertions, 0 deletions

diff --git a/yarn.lock b/yarn.lock
index a2b3cd1..7228aa1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1317,6 +1317,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sophie/renderer@workspace:packages/renderer"
   dependencies:
+    "@emotion/cache": ^11.7.1
     "@emotion/react": ^11.9.0
     "@emotion/styled": ^11.8.1
     "@fontsource/roboto": ^4.5.5
@@ -1328,6 +1329,7 @@ __metadata:
     "@types/lodash-es": ^4.17.6
     "@types/react": ^17.0.44
     "@types/react-dom": ^17.0.15
+    "@types/stylis": ^4.0.2
     "@vitejs/plugin-react": ^1.3.1
     i18next: ^21.6.16
     jest: ^27.5.1
@@ -1344,6 +1346,8 @@ __metadata:
     react-dom: ^17.0.2
     react-i18next: ^11.16.6
     remotedev: ^0.2.9
+    stylis: ^4.1.0
+    stylis-plugin-rtl: ^2.1.1
     vite: ^2.9.5
   languageName: unknown
   linkType: soft
@@ -1745,6 +1749,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "@types/stylis@npm:4.0.2"
+  checksum: 5461290afd6e7fbbd713f4896b4c586fa6f3072ef8addcb062feaf112a50168477df98ab474d9b603b19b879696aab6932c5f0bb3cda7472ab9c1622ee7fea60
+  languageName: node
+  linkType: hard
+
 "@types/verror@npm:^1.10.3":
   version: 1.10.5
   resolution: "@types/verror@npm:1.10.5"
@@ -3076,6 +3087,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssjanus@npm:^2.0.1":
+  version: 2.1.0
+  resolution: "cssjanus@npm:2.1.0"
+  checksum: 87d02bb8a54aeb046fab0c63e32bc73a6f776d33f07b1ead29cbdd65bc6f5078f28bae85653b0fcae528817e54a91fcc8cd9f4fcb98a3c4e229628d8a10439c3
+  languageName: node
+  linkType: hard
+
 "cssom@npm:^0.4.4":
   version: 0.4.4
   resolution: "cssom@npm:0.4.4"
@@ -8486,6 +8504,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis-plugin-rtl@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "stylis-plugin-rtl@npm:2.1.1"
+  dependencies:
+    cssjanus: ^2.0.1
+  peerDependencies:
+    stylis: 4.x
+  checksum: 262d2c762216556ed3dc8218ea5929ae24b4b0fae020eb41c217911e6628374009d1e1b24256ed6a2f39cbbf302a877f2efe912b628c71dd15fde90866ca54ca
+  languageName: node
+  linkType: hard
+
 "stylis@npm:4.0.13":
   version: 4.0.13
   resolution: "stylis@npm:4.0.13"
@@ -8493,6 +8522,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "stylis@npm:4.1.0"
+  checksum: 1d0c167340cfd0fa0fecebcaae807e1d66f6498ae250bb3c5ba47d849ab8ce1142757feebcf8fede08941d2e7597cebee25419e21a2846b66c55bb49a6ad2b8a
+  languageName: node
+  linkType: hard
+
 "sumchecker@npm:^3.0.1":
   version: 3.0.1
   resolution: "sumchecker@npm:3.0.1"