postcss-logical: add ignoreCustomProperties plugin option

plugin-packs/postcss-preset-env/test/logical-properties.css

@@ -200,46 +200,6 @@
 	contain-intrinsic-width: inherit;
 }
 
-.corner-shape {
-	/* corner-bottom-left-shape */
-	corner-bottom-left-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-bottom-right-shape */
-	corner-bottom-right-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-end-end-shape */
-	corner-end-end-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-end-start-shape */
-	corner-end-start-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-start-end-shape */
-	corner-start-end-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-start-start-shape */
-	corner-start-start-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-top-left-shape */
-	corner-top-left-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-top-right-shape */
-	corner-top-right-shape: inherit;
-}
-
 .inset {
 	/* bottom */
 	bottom: inherit;

plugin-packs/postcss-preset-env/test/logical-properties.expect.css

@@ -200,46 +200,6 @@
 	contain-intrinsic-width: inherit;
 }
 
-.corner-shape {
-	/* corner-bottom-left-shape */
-	corner-bottom-left-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-bottom-right-shape */
-	corner-bottom-right-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-end-end-shape */
-	corner-end-end-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-end-start-shape */
-	corner-end-start-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-start-end-shape */
-	corner-start-end-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-start-start-shape */
-	corner-start-start-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-top-left-shape */
-	corner-top-left-shape: inherit;
-}
-
-.corner-shape {
-	/* corner-top-right-shape */
-	corner-top-right-shape: inherit;
-}
-
 .inset {
 	/* bottom */
 	bottom: inherit;

plugins/postcss-logical/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Logical Properties
 
+### Unreleased (minor)
+
+- Add: `ignoreCustomProperties` plugin option.
+
 ### 8.0.0
 
 _August 3, 2024_

plugins/postcss-logical/README.md

@@ -68,7 +68,7 @@ instructions for:
 
 ## Options
 
-### blockDirection & inlineDirection
+### `blockDirection` and `inlineDirection`
 
 The `blockDirection` and `inlineDirection` options allow you to specify the direction of the block and inline axes. The default values are `top-to-bottom` and `left-to-right` respectively, which would match any latin language.
 
@@ -120,6 +120,93 @@ You can't mix two vertical directions or two horizontal directions so for exampl
 
 Please do note that `text-align` won't be transformed if `inlineDirection` becomes vertical.
 
+### `ignoreCustomProperties`
+
+The `ignoreCustomProperties` option allows you to ignore any properties containing `var()`.  
+`postcss-logical` assumes that all custom properties are single value (e.g. `--foo: 10px;`) and will assign these to physical properties as fallbacks for logical properties.  
+
+This will produce broken declarations when your custom properties contain multiple values instead (e.g. `--foo: 1px 2px;`).
+
+```css
+:root {
+	--inset-a: 10px;
+}
+
+.foo {
+	inset: var(--inset-a);
+}
+
+:root {
+	--inset-b: 1px 2px 3px 4px;
+}
+
+.bar {
+	inset: var(--inset-b);
+}
+
+/* becomes */
+
+:root {
+	--inset-a: 10px;
+}
+
+.foo {
+	top: var(--inset-a);
+	right: var(--inset-a);
+	bottom: var(--inset-a);
+	left: var(--inset-a);
+}
+
+:root {
+	--inset-b: 1px 2px 3px 4px;
+}
+
+.bar {
+	top: var(--inset-b);
+	right: var(--inset-b);
+	bottom: var(--inset-b);
+	left: var(--inset-b);
+}
+```
+
+With `ignoreCustomProperties` set to `true`:
+
+```css
+:root {
+	--inset-a: 10px;
+}
+
+.foo {
+	inset: var(--inset-a);
+}
+
+:root {
+	--inset-b: 1px 2px 3px 4px;
+}
+
+.bar {
+	inset: var(--inset-b);
+}
+
+/* becomes */
+
+:root {
+	--inset-a: 10px;
+}
+
+.foo {
+	inset: var(--inset-a);
+}
+
+:root {
+	--inset-b: 1px 2px 3px 4px;
+}
+
+.bar {
+	inset: var(--inset-b);
+}
+```
+
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#logical-properties-and-values
 [discord]: https://discord.gg/bUadyRwkJS

plugins/postcss-logical/dist/index.d.ts

@@ -12,6 +12,8 @@ export declare enum DirectionFlow {
 
 /** postcss-logical plugin options */
 export declare type pluginOptions = {
+    /** Ignore logical properties with values containing `var()` */
+    ignoreCustomProperties?: true;
     /** Sets the direction for block. default: top-to-bottom */
     blockDirection?: DirectionFlow;
     /** Sets the direction for inline. default: left-to-right */

plugins/postcss-logical/docs/README.md

@@ -33,7 +33,7 @@
 
 ## Options
 
-### blockDirection & inlineDirection
+### `blockDirection` and `inlineDirection`
 
 The `blockDirection` and `inlineDirection` options allow you to specify the direction of the block and inline axes. The default values are `top-to-bottom` and `left-to-right` respectively, which would match any latin language.
 
@@ -65,5 +65,30 @@ You can't mix two vertical directions or two horizontal directions so for exampl
 
 Please do note that `text-align` won't be transformed if `inlineDirection` becomes vertical.
 
+### `ignoreCustomProperties`
+
+The `ignoreCustomProperties` option allows you to ignore any properties containing `var()`.  
+`postcss-logical` assumes that all custom properties are single value (e.g. `--foo: 10px;`) and will assign these to physical properties as fallbacks for logical properties.  
+
+This will produce broken declarations when your custom properties contain multiple values instead (e.g. `--foo: 1px 2px;`).
+
+```css
+<inset.css>
+
+/* becomes */
+
+<inset.expect.css>
+```
+
+With `ignoreCustomProperties` set to `true`:
+
+```css
+<inset.css>
+
+/* becomes */
+
+<inset.ignore-custom-properties.expect.css>
+```
+
 <linkList>
 [CSS Logical Properties and Values]: <specUrl>

plugins/postcss-logical/src/index.ts

@@ -4,11 +4,14 @@ import { Axes, DirectionFlow } from './lib/types';
 import { directionFlowToAxes } from './utils/direction-flow-to-axes';
 import { transformTransition } from './lib/transform-transition';
 import { prepareTransforms } from './lib/transforms';
+import { HAS_VARIABLE_FUNCTION_REGEX } from './utils/has-variable-function';
 
 export type { DirectionFlow } from './lib/types';
 
 /** postcss-logical plugin options */
 export type pluginOptions = {
+	/** Ignore logical properties with values containing `var()` */
+	ignoreCustomProperties?: true,
 	/** Sets the direction for block. default: top-to-bottom */
 	blockDirection?: DirectionFlow,
 	/** Sets the direction for inline. default: left-to-right */
@@ -59,6 +62,10 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 				return;
 			}
 
+			if (options.ignoreCustomProperties && HAS_VARIABLE_FUNCTION_REGEX.test(decl.value)) {
+				return;
+			}
+
 			let transformed: Array<Declaration> = [];
 
 			try {
@@ -153,6 +160,10 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 			'border-end-start-radius': makeTransform(transforms['border-end-start-radius']),
 			'border-end-end-radius': makeTransform(transforms['border-end-end-radius']),
 			'transition': (decl, { result, postcss }): void => {
+				if (options.ignoreCustomProperties && HAS_VARIABLE_FUNCTION_REGEX.test(decl.value)) {
+					return;
+				}
+
 				let transformed: Array<Declaration> = [];
 
 				try {

plugins/postcss-logical/src/utils/has-variable-function.ts

@@ -0,0 +1 @@
+export const HAS_VARIABLE_FUNCTION_REGEX = /var\(/i;

plugins/postcss-logical/test/_tape.mjs

@@ -83,6 +83,13 @@ postcssTape(plugin)({
 		message: 'supports logical "offsets" properties',
 		warnings: 3,
 	},
+	'offsets:ignore-custom-properties': {
+		message: 'supports logical "offsets" properties { ignoreCustomProperties: true }',
+		warnings: 3,
+		options: {
+			ignoreCustomProperties: true,
+		},
+	},
 	'offsets:chinese': {
 		message: 'supports logical "offsets" properties { blockDirection: "right-to-left", inlineDirection: "top-to-bottom" }',
 		warnings: 3,
@@ -144,4 +151,13 @@ postcssTape(plugin)({
 			inlineDirection: 'top-to-bottom',
 		},
 	},
+	'examples/inset': {
+		message: 'inset example',
+	},
+	'examples/inset:ignore-custom-properties': {
+		message: 'inset example { ignoreCustomProperties: true }',
+		options: {
+			ignoreCustomProperties: true,
+		},
+	},
 });

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

@@ -0,0 +1,15 @@
+:root {
+	--inset-a: 10px;
+}
+
+.foo {
+	inset: var(--inset-a);
+}
+
+:root {
+	--inset-b: 1px 2px 3px 4px;
+}
+
+.bar {
+	inset: var(--inset-b);
+}

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

@@ -0,0 +1,21 @@
+:root {
+	--inset-a: 10px;
+}
+
+.foo {
+	top: var(--inset-a);
+	right: var(--inset-a);
+	bottom: var(--inset-a);
+	left: var(--inset-a);
+}
+
+:root {
+	--inset-b: 1px 2px 3px 4px;
+}
+
+.bar {
+	top: var(--inset-b);
+	right: var(--inset-b);
+	bottom: var(--inset-b);
+	left: var(--inset-b);
+}

plugins/postcss-logical/test/examples/inset.ignore-custom-properties.expect.css

@@ -0,0 +1,15 @@
+:root {
+	--inset-a: 10px;
+}
+
+.foo {
+	inset: var(--inset-a);
+}
+
+:root {
+	--inset-b: 1px 2px 3px 4px;
+}
+
+.bar {
+	inset: var(--inset-b);
+}