Require logical properties, values and units

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com), and 
 ### Changed
 
 - The legacy single-value syntax for the `display` property is now disallowed.
+- Physical properties, values and units are now disallowed. Use logical ones instead.
 
 ## [2.0.0] — 2024–05–17
 

package.json

@@ -28,7 +28,8 @@
 		"stylelint": "^16.5.0"
 	},
 	"dependencies": {
-		"@stylistic/stylelint-plugin": "^2.1.2"
+		"@stylistic/stylelint-plugin": "^2.1.2",
+		"stylelint-plugin-logical-css": "^1.2.1"
 	},
 	"scripts": {
 		"prepare": "husky",

stylelint.config.js

@@ -1,6 +1,9 @@
 /** @type {import('stylelint').Config} */
 export default {
-	plugins: [`@stylistic/stylelint-plugin`],
+	plugins: [
+		`@stylistic/stylelint-plugin`,
+		`stylelint-plugin-logical-css`,
+	],
 	rules: {
 		"annotation-no-unknown": true,
 		"at-rule-empty-line-before": [
@@ -130,6 +133,9 @@ export default {
 		"value-keyword-case": `lower`,
 		"value-no-vendor-prefix": true,
 
+		"plugin/use-logical-properties-and-values": true,
+		"plugin/use-logical-units": true,
+
 		"@stylistic/at-rule-name-case": `lower`,
 		"@stylistic/at-rule-name-space-after": `always`,
 		"@stylistic/at-rule-semicolon-newline-after": `always`,

test/plugin/use-logical-properties-and-values.js

@@ -0,0 +1,102 @@
+import { testRule } from "../../utils/testRule.js"
+
+let plugin = {
+	name: `stylelint-plugin-logical-css`,
+	prefix: `plugin/`,
+}
+
+let rule = `${plugin.prefix}use-logical-properties-and-values`
+
+let code = `
+.valid {
+	inline-size: 100px;
+	block-size: 100px;
+	inset: 0;
+	inset-block-start: 5px;
+	padding-inline-end: 5px;
+	float: inline-start;
+	clear: inline-end;
+}
+
+.invalid {
+	width: 100px;
+	height: 100px;
+	top: 5px;
+	bottom: 0;
+	padding-bottom: 5px;
+	float: right;
+	clear: left;
+}
+`
+
+testRule({
+	description: `Properties and values must be logical`,
+	rule,
+	plugin,
+	code,
+	expectedWarnings: [
+		{
+			line: 13,
+			column: 2,
+			endLine: 13,
+			endColumn: 15,
+			rule,
+			severity: `error`,
+			text: `Unexpected "width" property. Use "inline-size". (${rule})`,
+		},
+		{
+			line: 14,
+			column: 2,
+			endLine: 14,
+			endColumn: 16,
+			rule,
+			severity: `error`,
+			text: `Unexpected "height" property. Use "block-size". (${rule})`,
+		},
+		{
+			line: 15,
+			column: 2,
+			endLine: 15,
+			endColumn: 11,
+			rule,
+			severity: `error`,
+			text: `Unexpected "top" property. Use "inset-block-start". (${rule})`,
+		},
+		{
+			line: 16,
+			column: 2,
+			endLine: 16,
+			endColumn: 12,
+			rule,
+			severity: `error`,
+			text: `Unexpected "bottom" property. Use "inset-block-end". (${rule})`,
+		},
+		{
+			line: 17,
+			column: 2,
+			endLine: 17,
+			endColumn: 22,
+			rule,
+			severity: `error`,
+			text: `Unexpected "padding-bottom" property. Use "padding-block-end". (${rule})`,
+		},
+		{
+			line: 18,
+			column: 2,
+			endLine: 18,
+			endColumn: 15,
+			rule,
+			severity: `error`,
+			text: `Unexpected "right" value in "float" property. Use "inline-end". (${rule})`,
+		},
+		{
+			line: 19,
+			column: 2,
+			endLine: 19,
+			endColumn: 14,
+			rule,
+			severity: `error`,
+			text: `Unexpected "left" value in "clear" property. Use "inline-start". (${rule})`,
+		},
+	],
+})

test/plugin/use-logical-units.js

@@ -0,0 +1,80 @@
+import { testRule } from "../../utils/testRule.js"
+
+let plugin = {
+	name: `stylelint-plugin-logical-css`,
+	prefix: `plugin/`,
+}
+
+let rule = `${plugin.prefix}use-logical-units`
+
+let code = `
+.valid {
+	inline-size: 10svi;
+	block-size: 10svb;
+	inset: 5dvb;
+	inset-inline: 5lvi;
+	padding-block: 5vb;
+}
+
+.invalid {
+	inline-size: 10svw;
+	block-size: 10svh;
+	inset: 5dvh;
+	inset-inline: 5lvw;
+	padding-block: 5vh;
+}
+`
+
+testRule({
+	description: `Units must be logical`,
+	rule,
+	plugin,
+	code,
+	expectedWarnings: [
+		{
+			line: 11,
+			column: 2,
+			endLine: 11,
+			endColumn: 21,
+			rule,
+			severity: `error`,
+			text: `Unexpected "svw" unit. Use "svi". (${rule})`,
+		},
+		{
+			line: 12,
+			column: 2,
+			endLine: 12,
+			endColumn: 20,
+			rule,
+			severity: `error`,
+			text: `Unexpected "svh" unit. Use "svb". (${rule})`,
+		},
+		{
+			line: 13,
+			column: 2,
+			endLine: 13,
+			endColumn: 14,
+			rule,
+			severity: `error`,
+			text: `Unexpected "dvh" unit. Use "dvb". (${rule})`,
+		},
+		{
+			line: 14,
+			column: 2,
+			endLine: 14,
+			endColumn: 21,
+			rule,
+			severity: `error`,
+			text: `Unexpected "lvw" unit. Use "lvi". (${rule})`,
+		},
+		{
+			line: 15,
+			column: 2,
+			endLine: 15,
+			endColumn: 21,
+			rule,
+			severity: `error`,
+			text: `Unexpected "vh" unit. Use "vb". (${rule})`,
+		},
+	],
+})