Merge pull request #48 from SaekiTominaga/stylelint/logical-plugin

Use `stylelint-plugin-logical-css`

packages/stylelint/README.md

@@ -9,28 +9,32 @@
 
 It is based on [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard) with its own rule settings.
 
-- Disallow `!important` within declarations. ([`declaration-no-important`](https://stylelint.io/user-guide/rules/declaration-no-important) rule)
+- Disallow `!important` within declarations.
   - 🙁 `color: #000 !important`
   - 🙂 `color: #000`
-- [Multi-keyword syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display) is recommended for the `display` property. ([`declaration-property-value-disallowed-list`](https://stylelint.io/user-guide/rules/declaration-property-value-disallowed-list) rule)
+- [Multi-keyword syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display) is recommended for the `display` property.
   - 🙁 `display: block`
   - 🙂 `display: block flow`
-- Use of CSS physical properties and values is not recommended. Use [logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values). ([property-disallowed-list](https://stylelint.io/user-guide/rules/property-disallowed-list) rule)
+- Use of CSS physical properties and values is not recommended. Use [logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
   - 🙁 `margin-top: 1em`
   - 🙂 `margin-block-start: 1em`
   - 🙁 `text-align: right`
   - 🙂 `text-align: end`
-- Do not use ID selector. ([`selector-max-id`](https://stylelint.io/user-guide/rules/selector-max-id) rule)
+  - 🙂 `overflow-x: visible` (The `overflow-*` logical properties is not well supported by browsers)
+- Use of CSS physical utils is not recommended. Use logical utils.
+  - 🙁 `inline-size: 100vw`
+  - 🙂 `inline-size: 100vi`
+- Do not use ID selector.
   - 😨 `#foo { color: #000 }`
   - 🙂 `.foo { color: #000 }`
-- Do not use multiple universal selectors. However, this excludes the use of a next-sibling combinator (`+`). ([`selector-max-universal`](https://stylelint.io/user-guide/rules/selector-max-universal) rule)
+- Do not use multiple universal selectors. However, this excludes the use of a next-sibling combinator (`+`).
   - 🙂 `*`
   - 😨 `* > *`
   - 🙂 `* + *` (This is used in the "owl selector" in [stack layout](https://every-layout.dev/layouts/stack/))
-- The `font-weight` value must be numbers. ([`font-weight-notation`](https://stylelint.io/user-guide/rules/font-weight-notation) rule)
+- The `font-weight` value must be numbers.
   - 😨 `font-weight: normal`
   - 🙂 `font-weight: 500 /* Windows + Yu Gothic measures to be greater than 400 */`
-- CSS nesting must use the `&` nesting selector. ([`selector-nested-pattern`](https://stylelint.io/user-guide/rules/selector-nested-pattern) rule)
+- CSS nesting must use the `&` nesting selector.
   - 😨 `.foo { .bar {} }`
   - 🙂 `.foo { &.bar {} }`
 - The order of properties within declaration blocks follows [stylelint-config-concentric-order](https://github.com/chaucerbao/stylelint-config-concentric-order).

packages/stylelint/__tests__/invalid/enforce-conventions.css

@@ -26,35 +26,13 @@
 /* declaration-property-value-disallowed-list */
 .declaration-property-value-disallowed-list {
 	display: block;
-	float: left;
-	clear: left;
-	resize: horizontal;
-	text-align: left;
 }
 
 /* function-url-no-scheme-relative */
 .function-url-no-scheme-relative {
 	background-image: url("//example.com/file.jpg");
 }
 
-/* property-disallowed-list */
-.property-disallowed-list1 {
-	top: 0;
-	margin-top: 0;
-	border-top: 0;
-	border-top-width: 0;
-	border-top-style: none;
-	border-top-right-radius: 0;
-	padding-top: 0;
-	width: 0;
-	min-width: 0;
-	max-width: 0;
-	height: 0;
-	min-height: 0;
-	max-height: 0;
-	overscroll-behavior-x: auto;
-}
-
 /* selector-max-id */
 #selector-max-id {
 }

packages/stylelint/__tests__/invalid/logical.css

@@ -0,0 +1,27 @@
+.property {
+	top: 0;
+	margin-top: 0;
+	border-top: 0;
+	border-top-width: 0;
+	border-top-style: none;
+	border-top-right-radius: 0;
+	padding-top: 0;
+	width: 0;
+	min-width: 0;
+	max-width: 0;
+	height: 0;
+	min-height: 0;
+	max-height: 0;
+	overscroll-behavior-x: auto;
+}
+
+.value {
+	float: left;
+	clear: left;
+	resize: horizontal;
+	text-align: left;
+}
+
+.unit {
+	inline-size: 10vw;
+}

packages/stylelint/__tests__/valid/enforce-conventions.css

@@ -28,10 +28,6 @@
 /* declaration-property-value-disallowed-list */
 .declaration-property-value-disallowed-list {
 	display: block flow;
-	float: inline-start;
-	clear: inline-start;
-	resize: inline;
-	text-align: start;
 }
 
 /* value-keyword-case */

packages/stylelint/__tests__/valid/logical.css

@@ -0,0 +1,15 @@
+.property {
+	overflow-x: visible;
+}
+
+.value {
+	float: inline-start;
+	clear: inline-start;
+	resize: inline;
+	caption-side: top;
+	text-align: start;
+}
+
+.unit {
+	inline-size: 10vi;
+}

packages/stylelint/package.json

@@ -21,7 +21,8 @@
 	},
 	"dependencies": {
 		"stylelint-config-concentric-order": "^5.2.0",
-		"stylelint-config-standard": "^36.0.0"
+		"stylelint-config-standard": "^36.0.0",
+		"stylelint-plugin-logical-css": "^1.2.0"
 	},
 	"devDependencies": {
 		"stylelint": "^16.5.0"

packages/stylelint/stylelint.config.js

@@ -1,5 +1,7 @@
+/** @type {import('stylelint').Config} */
 export default {
 	extends: ['stylelint-config-standard', 'stylelint-config-concentric-order'],
+	plugins: ['stylelint-plugin-logical-css'],
 	rules: {
 		/**
 		 * Avoid errors
@@ -90,6 +92,7 @@ export default {
 		'declaration-property-value-disallowed-list': [
 			{
 				display: [
+					/* property list: https://drafts.csswg.org/css-display/#display-value-summary */
 					'block',
 					'flow-root',
 					'inline',
@@ -105,79 +108,74 @@ export default {
 					'table',
 					'inline-table',
 				],
-				float: ['left', 'right'],
-				clear: ['left', 'right'],
-				'text-align': ['left', 'right'],
-				resize: ['vertical', 'horizontal'],
 			},
 			{
-				message: (name, short) => {
+				message: (name, value) => {
 					switch (name) {
 						case 'display': {
-							let full = '';
-							switch (short) {
-								/* property list: https://drafts.csswg.org/css-display/#display-value-summary */
+							let multiValue = '';
+							switch (value) {
 								case 'block': {
-									full = 'block flow';
+									multiValue = 'block flow';
 									break;
 								}
 								case 'flow-root': {
-									full = 'block flow-root';
+									multiValue = 'block flow-root';
 									break;
 								}
 								case 'inline': {
-									full = 'inline flow';
+									multiValue = 'inline flow';
 									break;
 								}
 								case 'inline-block': {
-									full = 'inline flow-root';
+									multiValue = 'inline flow-root';
 									break;
 								}
 								case 'run-in': {
-									full = 'run-in flow';
+									multiValue = 'run-in flow';
 									break;
 								}
 								case 'list-item': {
-									full = 'block flow list-item';
+									multiValue = 'block flow list-item';
 									break;
 								}
 								case 'inline list-item': {
-									full = 'inline flow list-item';
+									multiValue = 'inline flow list-item';
 									break;
 								}
 								case 'flex': {
-									full = 'block flex';
+									multiValue = 'block flex';
 									break;
 								}
 								case 'inline-flex': {
-									full = 'inline flex';
+									multiValue = 'inline flex';
 									break;
 								}
 								case 'grid': {
-									full = 'block grid';
+									multiValue = 'block grid';
 									break;
 								}
 								case 'inline-grid': {
-									full = 'inline grid';
+									multiValue = 'inline grid';
 									break;
 								}
 								case 'ruby': {
-									full = 'inline ruby';
+									multiValue = 'inline ruby';
 									break;
 								}
 								case 'table': {
-									full = 'block table';
+									multiValue = 'block table';
 									break;
 								}
 								case 'inline-table': {
-									full = 'inline table';
+									multiValue = 'inline table';
 									break;
 								}
 							}
-							return `Use multi-keyword syntax for "${name}" ("${short}" → "${full}")`;
+							return `Use multi-keyword syntax for \`${name}\` (\`${value}\` → \`${multiValue}\`)`;
 						}
 					}
-					return `Use logical value for "${name}"`;
+					return `\`${value}\` values are not allowed for \`${name}\` properties`;
 				},
 				severity: 'warning',
 			},
@@ -194,54 +192,7 @@ export default {
 		// media-feature-name-unit-allowed-list
 		// media-feature-name-value-allowed-list
 		// property-allowed-list
-		'property-disallowed-list': [
-			[
-				'top',
-				'right',
-				'bottom',
-				'left',
-				'margin-top',
-				'margin-right',
-				'margin-bottom',
-				'margin-left',
-				'border-top',
-				'border-right',
-				'border-bottom',
-				'border-left',
-				'border-top-width',
-				'border-right-width',
-				'border-bottom-width',
-				'border-left-width',
-				'border-top-style',
-				'border-right-style',
-				'border-bottom-style',
-				'border-left-style',
-				'border-top-color',
-				'border-right-color',
-				'border-bottom-color',
-				'border-left-color',
-				'border-top-right-radius',
-				'border-top-left-radius',
-				'border-bottom-right-radius',
-				'border-bottom-left-radius',
-				'padding-top',
-				'padding-right',
-				'padding-bottom',
-				'padding-left',
-				'width',
-				'min-width',
-				'max-width',
-				'height',
-				'min-height',
-				'max-height',
-				'overscroll-behavior-x',
-				'overscroll-behavior-y',
-			],
-			{
-				message: (name) => `Use logical property for "${name}"`,
-				severity: 'warning',
-			},
-		],
+		// property-disallowed-list
 		// ✅ property-no-vendor-prefix
 		// rule-selector-property-disallowed-list
 		// selector-attribute-name-disallowed-list
@@ -325,7 +276,7 @@ export default {
 		// ✅ keyframes-name-pattern
 		// ✅ selector-class-pattern
 		// ✅ selector-id-pattern
-		"selector-nested-pattern": /&/,
+		'selector-nested-pattern': /&/,
 
 		/* Quotes */
 		// ✅ font-family-name-quotes
@@ -340,7 +291,7 @@ export default {
 		// ✅ comment-whitespace-inside
 
 		/**
-		 * order
+		 * stylelint-order
 		 */
 		'order/order': [
 			[
@@ -365,5 +316,22 @@ export default {
 			],
 			{ unspecified: 'bottom' },
 		],
+
+		/**
+		 * [plugin] stylelint-plugin-logical-css
+		 */
+		'plugin/use-logical-properties-and-values': [
+			true,
+			{
+				ignore: ['overflow-x', 'overflow-y', 'caption-side'],
+				severity: 'warning',
+			},
+		],
+		'plugin/use-logical-units': [
+			true,
+			{
+				severity: 'warning',
+			},
+		],
 	},
 };