feat: add csstools/use-logical for warning about LTR-RTL properties

index.js

@@ -8,6 +8,7 @@ module.exports = {
 		'stylelint-config-recommended-vue/scss'
 	],
 	ignoreFiles: ['**/*.js', '**/*.ts', '**/*.svg'],
+	plugins: ['stylelint-use-logical'],
 	rules: {
 		// Stylistic rules conflicting with prettier
 		'scss/operator-no-newline-after': null,
@@ -43,6 +44,31 @@ module.exports = {
 				ignorePseudoElements: ['deep'],
 			},
 		],
+
+		// Logical properties
+		'csstools/use-logical': [
+			'always',
+			{
+				// TODO: make it an error later?
+				severity: 'warning',
+				// Only lint LTR-RTL properties for now
+				except: [
+					// Position properties
+					'top',
+					'bottom',
+					// Position properties with directional suffixes
+					/-top$/,
+					/-bottom$/,
+					// Size properties
+					'width',
+					'max-width',
+					'min-width',
+					'height',
+					'max-height',
+					'min-height',
+				],
+			},
+		],
 	},
 	overrides: [
 		{

package.json

@@ -31,5 +31,8 @@
   "engines": {
     "node": "^20.0.0",
     "npm": "^10.0.0"
+  },
+  "dependencies": {
+    "stylelint-use-logical": "^2.1.2"
   }
 }