Merge pull request #298 from codesnippetspro/rtl

Migrate to native CSS direction management

Author: sheabunge

config/RtlCssPlugin.ts

@@ -7,7 +7,6 @@ import hslCompat from 'postcss-color-hsl'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts'
 import { glob } from 'glob'
-import { RtlCssPlugin } from './RtlCssPlugin'
 import type { Configuration, EntryObject } from 'webpack'
 import type { Config as PostCssConfig } from 'postcss-load-config'
 
@@ -103,9 +102,6 @@ export const cssWebpackConfig: Configuration = {
 						.replace(/^codemirror-theme-/, 'editor-themes/')
 						.replace(/-css\.css$/, '.css')
 					: '[name].css'
-		}),
-		new RtlCssPlugin({
-			entries: new Set(['manage-css', 'edit-css'])
 		})
 	]
 }

config/webpack-css.ts

@@ -73,7 +73,6 @@
         "@types/prismjs": "^1.26.5",
         "@types/react": "^18.3.1",
         "@types/react-dom": "^18.3.1",
-        "@types/rtlcss": "^3.5.4",
         "@types/tinymce": "^4.6.9",
         "@types/web": "^0.0.202",
         "@typescript-eslint/eslint-plugin": "^8.24.0",
@@ -100,7 +99,6 @@
         "postcss-load-config": "^6.0.1",
         "postcss-loader": "^8.1.1",
         "react-is": "^19.0.0",
-        "rtlcss": "^4.3.0",
         "sass": "^1.84.0",
         "sass-loader": "^16.0.4",
         "style-loader": "^4.0.0",

package-lock.json

@@ -0,0 +1,8 @@
+:root {
+	--cs-direction-multiplier: 1; // LTR = 1, RTL = -1
+}
+
+html[dir="rtl"],
+body.rtl {
+	--cs-direction-multiplier: -1;
+}

package.json

@@ -40,13 +40,13 @@ input[type='checkbox'].switch:checked {
 
 	&::before {
 		background-color: white;
-		transform: translateX(100%);
+		transform: translateX(calc(100% * var(--cs-direction-multiplier)));
 	}
 }
 
 .erroneous-snippet .snippet-activation-switch::before {
 	content: '!';
-	transform: translateX(50%);
+	transform: translateX(calc(50% * var(--cs-direction-multiplier)));
 	text-align: center;
 	font-weight: bold;
 	line-height: 1;

src/css/common/_direction.scss

@@ -172,13 +172,13 @@ $bg-color: hsl(0deg 0% 20% / 90%);
 .tooltip-inline.tooltip-end:hover,
 .tooltip-inline.tooltip-end:focus {
 	&::before, .tooltip-content {
-		transform: translateX(10px);
+		transform: translateX(calc(10px * var(--cs-direction-multiplier)));
 	}
 }
 
 .tooltip-inline.tooltip-start:hover,
 .tooltip-inline.tooltip-start:focus {
 	&::before, .tooltip-content {
-		transform: translateX(-10px);
+		transform: translateX(calc(-10px * var(--cs-direction-multiplier)));
 	}
 }

src/css/common/_switch.scss

@@ -2,6 +2,7 @@
  * Styles for the edit snippet admin page.
  */
 
+@use 'common/direction';
 @use 'common/codemirror';
 @use 'common/badges';
 @use 'common/switch';

src/css/common/_tooltips.scss

@@ -237,7 +237,6 @@ td.column-download {
 	gap: 5px;
 }
 
-
 .cloud-table > tbody > tr {
 	block-size: 80px;
 	box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
@@ -265,7 +264,6 @@ td.column-download {
 	background-color: #ce0000;
 	border-radius: 50%;
 
-
 	.cloud-connect-active & {
 		background-color: #25a349;
 	}
@@ -284,6 +282,10 @@ td.column-download {
 	block-size: 1.25rem; /* 20px */
 	transform-origin: bottom left;
 
+	[dir="rtl"] & {
+		transform-origin: bottom right;
+	}
+
 	&:hover {
 		stroke: #059669;
 		fill: #6ee7b7;
@@ -325,15 +327,15 @@ td.column-download {
 	}
 
 	33% {
-		transform: rotate(7deg)
+		transform: rotate(calc(7deg * var(--cs-direction-multiplier)));
 	}
 
 	66% {
-		transform: rotate(-15deg)
+		transform: rotate(calc(-15deg * var(--cs-direction-multiplier)));
 	}
 
 	90% {
-		transform: rotate(5deg)
+		transform: rotate(calc(5deg * var(--cs-direction-multiplier)));
 	}
 
 	100% {

src/css/edit.scss

@@ -378,6 +378,6 @@ a.csp-card {
 
 @keyframes loading-rotate {
 	100% {
-		transform: rotate(360deg);
+		transform: rotate(calc(360deg * var(--cs-direction-multiplier)));
 	}
 }