Adding support for max/min-inline/block-size on logical (#859)

Author: Antonio-Laguna

plugins/postcss-logical/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Logical Properties
 
+### Unreleased (minor)
+
+- Adding support for `max-block-size`, `min-block-size`, `max-inline-size` and `min-inline-size`.
+
 ### 6.0.1 (January 28, 2023)
 
 - Improve `types` declaration in `package.json`

plugins/postcss-logical/README.md

@@ -7,6 +7,7 @@
 ```pcss
 .element {
 	block-size: 100px;
+	max-inline-size: 400px;
 	inline-size: 200px;
 	padding-block: 10px 20px;
 	margin-inline: auto;
@@ -18,6 +19,7 @@
 
 .element {
 	height: 100px;
+	max-width: 400px;
 	width: 200px;
 	padding-top: 10px;
 	padding-bottom: 20px;
@@ -78,6 +80,7 @@ postcssLogical({
 ```pcss
 .element {
 	block-size: 100px;
+	max-inline-size: 400px;
 	inline-size: 200px;
 	padding-block: 10px 20px;
 	margin-inline: auto;
@@ -89,6 +92,7 @@ postcssLogical({
 
 .element {
 	width: 100px;
+	max-height: 400px;
 	height: 200px;
 	padding-right: 10px;
 	padding-left: 20px;

plugins/postcss-logical/dist/index.cjs

@@ -103,6 +103,10 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 			// 4.1 Block Size and Inline Size
 			'block-size': makeTransform(transformLogicalSize(directionConfig)),
 			'inline-size': makeTransform(transformLogicalSize(directionConfig)),
+			'min-block-size': makeTransform(transformLogicalSize(directionConfig)),
+			'max-block-size': makeTransform(transformLogicalSize(directionConfig)),
+			'min-inline-size': makeTransform(transformLogicalSize(directionConfig)),
+			'max-inline-size': makeTransform(transformLogicalSize(directionConfig)),
 			// 4.2 Margins
 			'margin-block-start': makeTransform(
 				transformSide('margin', blockStart),

plugins/postcss-logical/dist/index.mjs

@@ -9,7 +9,9 @@ export function transformLogicalSize(
 		const { value } = declaration;
 		const inlineProp = directionConfig.inlineIsHorizontal ? 'width' : 'height';
 		const blockProp = directionConfig.inlineIsHorizontal ? 'height' : 'width';
-		const prop = declaration.prop === 'block-size' ? blockProp : inlineProp;
+		const prop = declaration.prop.toLowerCase()
+			.replace('inline-size', inlineProp)
+			.replace('block-size', blockProp);
 
 		cloneDeclaration(
 			declaration,

plugins/postcss-logical/src/index.ts

@@ -1,5 +1,6 @@
 .element {
 	width: 100px;
+	max-height: 400px;
 	height: 200px;
 	padding-right: 10px;
 	padding-left: 20px;

plugins/postcss-logical/src/lib/transform-logical-size.ts

@@ -1,5 +1,6 @@
 .element {
 	block-size: 100px;
+	max-inline-size: 400px;
 	inline-size: 200px;
 	padding-block: 10px 20px;
 	margin-inline: auto;

plugins/postcss-logical/test/examples/example.chinese.expect.css

@@ -1,5 +1,6 @@
 .element {
 	height: 100px;
+	max-width: 400px;
 	width: 200px;
 	padding-top: 10px;
 	padding-bottom: 20px;

plugins/postcss-logical/test/examples/example.css

@@ -1,4 +1,8 @@
 .foo {
 	width: 1px;
 	height: 2px;
+	min-width: 3px;
+	max-width: 4px;
+	min-height: 5px;
+	max-height: 6px;
 }

plugins/postcss-logical/test/examples/example.expect.css

@@ -1,4 +1,8 @@
 .foo {
 	block-size: 1px;
 	inline-size: 2px;
+	min-block-size: 3px;
+	max-block-size: 4px;
+	min-inline-size: 5px;
+	max-inline-size: 6px;
 }

plugins/postcss-logical/test/logical-size.chinese.expect.css

@@ -1,4 +1,8 @@
 .foo {
 	height: 1px;
 	width: 2px;
+	min-height: 3px;
+	max-height: 4px;
+	min-width: 5px;
+	max-width: 6px;
 }