feature/logical-revamp-v8 : feedback (#773)

romainmenke · Antonio-Laguna · web-flow · commit 8ea3c39294c7 · 2023-01-09T09:41:55.000+01:00
* feature/logical-revamp-v8 : feedback

* Update plugins/postcss-logical/src/utils/parse-value-couple.ts

Co-authored-by: Antonio Laguna &lt;sombragriselros@gmail.com&gt;

* undo

* more undo

Co-authored-by: Antonio Laguna &lt;sombragriselros@gmail.com&gt;
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css
@@ -518,10 +518,7 @@
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css
@@ -518,10 +518,7 @@
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css
@@ -429,10 +429,7 @@
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css
@@ -455,10 +455,7 @@ h6.test-custom-selectors {
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css
@@ -455,10 +455,7 @@ h6.test-custom-selectors {
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css
@@ -455,10 +455,7 @@ h6.test-custom-selectors {
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css
@@ -354,7 +354,7 @@
 	right: round(nearest, 2.5px, 1px);
 	bottom: round(up, 2.5px, 1px);
 	left: round(down, 2.5px, 1px);
-	inset: round(to-zero, 2.5px, 1px);
+	padding-left: round(to-zero, 2.5px, 1px);
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css
@@ -536,10 +536,7 @@
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css
@@ -432,10 +432,7 @@
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css
@@ -426,7 +426,7 @@
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	inset: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css
@@ -556,10 +556,7 @@
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css
@@ -554,10 +554,7 @@ h6.test-custom-selectors {
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css
@@ -366,7 +366,7 @@
 	right: round(nearest, 2.5px, 1px);
 	bottom: round(up, 2.5px, 1px);
 	left: round(down, 2.5px, 1px);
-	inset: round(to-zero, 2.5px, 1px);
+	padding-left: round(to-zero, 2.5px, 1px);
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css
@@ -545,10 +545,7 @@ h6.test-custom-selectors {
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css
@@ -975,20 +975,8 @@ h6.test-custom-selectors {
 	bottom: round(up, 2.5px, 1px);
 	left: 2px;
 	left: round(down, 2.5px, 1px);
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
-	inset: 2px;
-	top: 2px;
-	top: round(to-zero, 2.5px, 1px);
-	right: 2px;
-	right: round(to-zero, 2.5px, 1px);
-	bottom: 2px;
-	bottom: round(to-zero, 2.5px, 1px);
-	left: 2px;
-	left: round(to-zero, 2.5px, 1px);
-	inset: round(to-zero, 2.5px, 1px);
+	padding-left: 2px;
+	padding-left: round(to-zero, 2.5px, 1px);
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css
@@ -387,7 +387,7 @@
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	inset: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css
@@ -457,10 +457,7 @@ h6.test-custom-selectors {
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css
@@ -451,7 +451,7 @@ h6.test-custom-selectors {
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	inset: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
@@ -561,10 +561,7 @@ h6.test-custom-selectors {
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css
@@ -540,10 +540,7 @@
 	right: 3px;
 	bottom: 3px;
 	left: 2px;
-	top: 2px;
-	right: 2px;
-	bottom: 2px;
-	left: 2px;
+	padding-left: 2px;
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css
@@ -503,10 +503,7 @@
 	right: round(nearest, 2.5px, 1px);
 	bottom: round(up, 2.5px, 1px);
 	left: round(down, 2.5px, 1px);
-	top: round(to-zero, 2.5px, 1px);
-	right: round(to-zero, 2.5px, 1px);
-	bottom: round(to-zero, 2.5px, 1px);
-	left: round(to-zero, 2.5px, 1px);
+	padding-left: round(to-zero, 2.5px, 1px);
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css
@@ -476,10 +476,7 @@
 	right: round(nearest, 2.5px, 1px);
 	bottom: round(up, 2.5px, 1px);
 	left: round(down, 2.5px, 1px);
-	top: round(to-zero, 2.5px, 1px);
-	right: round(to-zero, 2.5px, 1px);
-	bottom: round(to-zero, 2.5px, 1px);
-	left: round(to-zero, 2.5px, 1px);
+	padding-left: round(to-zero, 2.5px, 1px);
 }
 
 .trigonometric {
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css
@@ -813,5 +813,4 @@ h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	top: 2px;
 	right: 2px;
 	bottom: 2px;
-	left: 2px;
 }
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css
@@ -989,7 +989,6 @@ h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	top: 2px;
 	right: 2px;
 	bottom: 2px;
-	left: 2px;
 	inset: 2px;
 	top: 2px;
 	top: round(to-zero, 2.5px, 1px);
diff --git a/plugins/css-has-pseudo/test/plugin-order-logical.after.preserve.expect.css b/plugins/css-has-pseudo/test/plugin-order-logical.after.preserve.expect.css
@@ -1,10 +1,8 @@
 .js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) {
-	margin-left: 2px;
 	margin-left: 2px;
 	margin-inline-start: 2px;
 }
 .js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) {
-	margin-left: 2px;
 	margin-left: 2px;
 	margin-inline-start: 2px;
 }
diff --git a/plugins/css-has-pseudo/test/plugin-order-logical.before.preserve.expect.css b/plugins/css-has-pseudo/test/plugin-order-logical.before.preserve.expect.css
@@ -1,10 +1,8 @@
 .js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) {
-	margin-left: 2px;
 	margin-left: 2px;
 	margin-inline-start: 2px;
 }
 .js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) {
-	margin-left: 2px;
 	margin-left: 2px;
 	margin-inline-start: 2px;
 }
diff --git a/plugins/postcss-logical/dist/index.cjs b/plugins/postcss-logical/dist/index.cjs
diff --git a/plugins/postcss-logical/dist/index.mjs b/plugins/postcss-logical/dist/index.mjs
diff --git a/plugins/postcss-logical/dist/lib/clone-declaration.d.ts b/plugins/postcss-logical/dist/lib/clone-declaration.d.ts
@@ -1,2 +1,2 @@
 import type { Declaration } from 'postcss';
-export declare function cloneDeclaration(declaration: Declaration, value: string, prop: string): Declaration;
+export declare function cloneDeclaration(declaration: Declaration, value: string, prop: string): void;
diff --git a/plugins/postcss-logical/src/index.ts b/plugins/postcss-logical/src/index.ts
@@ -76,23 +76,22 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 			if (!transform) {
 				return;
 			}
-			const parent = decl.parent;
+
 			let transformed = false;
 
 			try {
 				transformed = transform(decl);
 			} catch (error) {
 				decl.warn(result, error.message);
+				return;
 			}
 
-			if (transformed) {
-				if (!options.preserve) {
-					decl.remove();
-				}
+			if (!transformed) {
+				return;
+			}
 
-				if (!parent.nodes.length) {
-					parent.remove();
-				}
+			if (!options.preserve) {
+				decl.remove();
 			}
 		};
 	};
diff --git a/plugins/postcss-logical/src/lib/clone-declaration.ts b/plugins/postcss-logical/src/lib/clone-declaration.ts
@@ -4,6 +4,12 @@ export function cloneDeclaration(
 	declaration: Declaration,
 	value: string,
 	prop: string,
-) : Declaration {
-	return declaration.cloneBefore({ value, prop });
+): void {
+	if (declaration.parent && declaration.parent.some((x) => {
+		return x.type == 'decl' && x.prop === prop && x.value === value;
+	})) {
+		return;
+	}
+
+	declaration.cloneBefore({ value, prop });
 }
diff --git a/plugins/postcss-logical/src/lib/transform-borders.ts b/plugins/postcss-logical/src/lib/transform-borders.ts
@@ -19,7 +19,7 @@ export function transformBorder(
 
 export function transformBorderProperty(
 	borderSetting: string,
-	side: [string,string],
+	side: [string, string],
 ): (declaration: Declaration) => boolean {
 	return (declaration: Declaration) => {
 		const [sideA, sideB] = side;
@@ -42,7 +42,7 @@ export function transformBorderProperty(
 }
 
 export function transformBorderShorthand(
-	side: [string] | [string,string],
+	side: [string] | [string, string],
 ): (declaration: Declaration) => boolean {
 	return (declaration: Declaration) => {
 		side.forEach((sidePart) => cloneDeclaration(
diff --git a/plugins/postcss-logical/src/lib/transform-inset.ts b/plugins/postcss-logical/src/lib/transform-inset.ts
diff --git a/plugins/postcss-logical/src/lib/transform-logical-size.ts b/plugins/postcss-logical/src/lib/transform-logical-size.ts
diff --git a/plugins/postcss-logical/src/lib/transform-resize.ts b/plugins/postcss-logical/src/lib/transform-resize.ts
diff --git a/plugins/postcss-logical/src/lib/transform-side.ts b/plugins/postcss-logical/src/lib/transform-side.ts
diff --git a/plugins/postcss-logical/src/lib/transform-text-align.ts b/plugins/postcss-logical/src/lib/transform-text-align.ts
diff --git a/plugins/postcss-logical/src/lib/transform-value.ts b/plugins/postcss-logical/src/lib/transform-value.ts
diff --git a/plugins/postcss-logical/src/lib/types.ts b/plugins/postcss-logical/src/lib/types.ts
diff --git a/plugins/postcss-logical/src/utils/parse-value-couple.ts b/plugins/postcss-logical/src/utils/parse-value-couple.ts
diff --git a/plugins/postcss-logical/test/offsets.chinese.expect.css b/plugins/postcss-logical/test/offsets.chinese.expect.css
diff --git a/plugins/postcss-logical/test/offsets.css b/plugins/postcss-logical/test/offsets.css
diff --git a/plugins/postcss-logical/test/offsets.expect.css b/plugins/postcss-logical/test/offsets.expect.css

Original file line number	Diff line number	Diff line change
`@@ -354,7 +354,7 @@`
`354`	`354`	`right: round(nearest, 2.5px, 1px);`
`355`	`355`	`bottom: round(up, 2.5px, 1px);`
`356`	`356`	`left: round(down, 2.5px, 1px);`
`357`		`- inset: round(to-zero, 2.5px, 1px);`
	`357`	`+ padding-left: round(to-zero, 2.5px, 1px);`
`358`	`358`	`}`
`359`	`359`
`360`	`360`	`.trigonometric {`
Original file line number	Diff line number	Diff line change
`@@ -426,7 +426,7 @@`
`426`	`426`	`right: 3px;`
`427`	`427`	`bottom: 3px;`
`428`	`428`	`left: 2px;`
`429`		`- inset: 2px;`
	`429`	`+ padding-left: 2px;`
`430`	`430`	`}`
`431`	`431`
`432`	`432`	`.trigonometric {`