logical-overflow and logical-overscroll-behavior (#1151)

.github/ISSUE_TEMPLATE/css-issue.yml

@@ -94,6 +94,8 @@ body:
         - PostCSS Lab Function
         - PostCSS Logical
         - PostCSS Logical Float and Clear
+        - PostCSS Logical Overflow
+        - PostCSS Logical Overscroll Behavior
         - PostCSS Logical Resize
         - PostCSS Logical Viewport Units
         - PostCSS Media Queries Aspect-Ratio Number Values

.github/ISSUE_TEMPLATE/plugin-issue.yml

@@ -96,6 +96,8 @@ body:
         - PostCSS Lab Function
         - PostCSS Logical
         - PostCSS Logical Float and Clear
+        - PostCSS Logical Overflow
+        - PostCSS Logical Overscroll Behavior
         - PostCSS Logical Resize
         - PostCSS Logical Viewport Units
         - PostCSS Media Queries Aspect-Ratio Number Values

.github/labeler.yml

@@ -177,6 +177,14 @@
   - plugins/postcss-logical-float-and-clear/**
   - experimental/postcss-logical-float-and-clear/**
 
+"plugins/postcss-overflow":
+  - plugins/postcss-overflow/**
+  - experimental/postcss-overflow/**
+
+"plugins/postcss-overscroll-behavior":
+  - plugins/postcss-overscroll-behavior/**
+  - experimental/postcss-overscroll-behavior/**
+
 "plugins/postcss-logical-resize":
   - plugins/postcss-logical-resize/**
   - experimental/postcss-logical-resize/**

plugin-packs/postcss-preset-env/CHANGELOG.md

@@ -1,11 +1,17 @@
 # Changes to PostCSS Preset Env
 
+### Unreleased (minor)
+
+- Added `@csstools/postcss-logical-overflow` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-overflow#readme) for usage details.
+- Added `@csstools/postcss-logical-overscroll-behavior` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-overscroll-behavior#readme) for usage details.
+- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`7.9.0`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#790-october-31-2023) (minor)
+
 ### 9.2.0
 
 _October 9, 2023_
 
 - Added `@csstools/postcss-gamut-mapping` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping#readme) for usage details.
-- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`7.8.0`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#780-october-08-2023) (patch)
+- Updated [`cssdb`](https://github.com/csstools/cssdb) to [`7.8.0`](https://github.com/csstools/cssdb/blob/main/CHANGELOG.md#780-october-08-2023) (minor)
 - Updated [`@csstools/postcss-color-function`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function) to [`3.0.7`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function/CHANGELOG.md#307) (patch)
 - Updated [`@csstools/postcss-color-mix-function`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function) to [`2.0.7`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function/CHANGELOG.md#207) (patch)
 - Updated [`@csstools/postcss-exponential-functions`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions) to [`1.0.1`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions/CHANGELOG.md#101) (patch)

plugin-packs/postcss-preset-env/FEATURES.md

@@ -26,7 +26,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
 | `focus-within-pseudo-class` | `:focus-within` Focus Container Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-within-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#readme) |
 | `font-format-keywords` | Font `format()` Keywords | [example](https://preset-env.cssdb.org/features/#font-format-keywords) | [docs](https://github.com/valtlai/postcss-font-format-keywords#readme) |
 | `font-variant-property` | `font-variant` Property | [example](https://preset-env.cssdb.org/features/#font-variant-property) | [docs](https://github.com/postcss/postcss-font-variant#readme) |
-| `gamut-mapping` |   |   |   |
+| `gamut-mapping` | Gamut mapping for CSS color functions | [example](https://preset-env.cssdb.org/features/#gamut-mapping) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping#readme) |
 | `gap-properties` | Gap Properties | [example](https://preset-env.cssdb.org/features/#gap-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties#readme) |
 | `gradients-interpolation-method` | Gradients Interpolation Method | [example](https://preset-env.cssdb.org/features/#gradients-interpolation-method) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method#readme) |
 | `has-pseudo-class` | `:has()` Relational Pseudo-Class | [example](https://preset-env.cssdb.org/features/#has-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo#readme) |
@@ -36,6 +36,8 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
 | `image-set-function` | `image-set()` Function | [example](https://preset-env.cssdb.org/features/#image-set-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-image-set-function#readme) |
 | `is-pseudo-class` | `:is()` Matches-Any Pseudo-Class | [example](https://preset-env.cssdb.org/features/#is-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class#readme) |
 | `lab-function` | `lab()` Function | [example](https://preset-env.cssdb.org/features/#lab-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function#readme) |
+| `logical-overflow` | Logical Overflow | [example](https://preset-env.cssdb.org/features/#logical-overflow) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-overflow#readme) |
+| `logical-overscroll-behavior` | Logical Overscroll Behavior | [example](https://preset-env.cssdb.org/features/#logical-overscroll-behavior) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-overscroll-behavior#readme) |
 | `logical-properties-and-values` | Logical Properties and Values | [example](https://preset-env.cssdb.org/features/#logical-properties-and-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme) |
 | `logical-resize` | Logical values in the `resize` property | [example](https://preset-env.cssdb.org/features/#logical-resize) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-resize#readme) |
 | `logical-viewport-units` | Logical Viewport Units | [example](https://preset-env.cssdb.org/features/#logical-viewport-units) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units#readme) |

plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts

@@ -30,6 +30,8 @@ import type { pluginOptions as postcssICUnit } from '@csstools/postcss-ic-unit';
 import type { pluginOptions as postcssImageSetFunction } from 'postcss-image-set-function';
 import type { pluginOptions as postcssIsPseudoClass } from '@csstools/postcss-is-pseudo-class';
 import type { pluginOptions as postcssLabFunction } from 'postcss-lab-function';
+import type { pluginOptions as postcssLogicalOverflow } from '@csstools/postcss-logical-overflow';
+import type { pluginOptions as postcssLogicalOverscrollBehavor } from '@csstools/postcss-logical-overscroll-behavior';
 import type { pluginOptions as postcssLogical } from 'postcss-logical';
 import type { pluginOptions as postcssLogicalResize } from '@csstools/postcss-logical-resize';
 import type { pluginOptions as postcssLogicalViewportUnits } from '@csstools/postcss-logical-viewport-units';
@@ -117,6 +119,10 @@ export type pluginsOptions = {
     'is-pseudo-class'?: postcssIsPseudoClass | boolean;
     /** plugin options for "postcss-lab-function" */
     'lab-function'?: postcssLabFunction | boolean;
+    /** plugin options for "@csstools/postcss-logical-overflow" */
+    'logical-overflow'?: postcssLogicalOverflow | boolean;
+    /** plugin options for "@csstools/postcss-logical-overscroll-behavior" */
+    'logical-overscroll-behavior'?: postcssLogicalOverscrollBehavor | boolean;
     /** plugin options for "postcss-logical" */
     'logical-properties-and-values'?: postcssLogical | boolean;
     /** plugin options for "@csstools/postcss-logical-resize" */

plugin-packs/postcss-preset-env/package.json

@@ -61,6 +61,8 @@
 		"@csstools/postcss-initial": "^1.0.0",
 		"@csstools/postcss-is-pseudo-class": "^4.0.3",
 		"@csstools/postcss-logical-float-and-clear": "^2.0.0",
+		"@csstools/postcss-logical-overflow": "^0.0.0",
+		"@csstools/postcss-logical-overscroll-behavior": "^0.0.0",
 		"@csstools/postcss-logical-resize": "^2.0.0",
 		"@csstools/postcss-logical-viewport-units": "^2.0.3",
 		"@csstools/postcss-media-minmax": "^1.1.0",
@@ -80,7 +82,7 @@
 		"css-blank-pseudo": "^6.0.0",
 		"css-has-pseudo": "^6.0.0",
 		"css-prefers-color-scheme": "^9.0.0",
-		"cssdb": "^7.8.0",
+		"cssdb": "^7.9.0",
 		"postcss-attribute-case-insensitive": "^6.0.2",
 		"postcss-clamp": "^4.1.0",
 		"postcss-color-functional-notation": "^6.0.2",

plugin-packs/postcss-preset-env/scripts/plugins-data.json

@@ -159,6 +159,16 @@
 		"id": "float-clear-logical-values",
 		"importName": "postcssLogicalFloatAndClear"
 	},
+	{
+		"packageName": "@csstools/postcss-logical-overflow",
+		"id": "logical-overflow",
+		"importName": "postcssLogicalOverflow"
+	},
+	{
+		"packageName": "@csstools/postcss-logical-overscroll-behavior",
+		"id": "logical-overscroll-behavior",
+		"importName": "postcssLogicalOverscrollBehavor"
+	},
 	{
 		"packageName": "@csstools/postcss-logical-resize",
 		"id": "logical-resize",

plugin-packs/postcss-preset-env/src/lib/get-options-for-browsers-by-feature.mjs

@@ -50,6 +50,8 @@ export default function getOptionsForBrowsersByFeature(supportedBrowsers, featur
 		case 'float-clear-logical-values':
 		case 'logical-resize':
 		case 'logical-viewport-units':
+		case 'logical-overflow':
+		case 'logical-overscroll-behavior':
 			{
 				if ('logical' in options) {
 					return options.logical;

plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs

@@ -15,6 +15,8 @@ export default [
 	'not-pseudo-class', // run not-pseudo-class after other selectors have been transpiled
 	'logical-properties-and-values', // run logical-properties-and-values before dir-pseudo-class
 	'float-clear-logical-values',
+	'logical-overflow',
+	'logical-overscroll-behavior',
 	'logical-resize',
 	'logical-viewport-units',
 	'dir-pseudo-class',

plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs

@@ -30,6 +30,8 @@ import postcssICUnit from '@csstools/postcss-ic-unit';
 import postcssImageSetFunction from 'postcss-image-set-function';
 import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';
 import postcssLabFunction from 'postcss-lab-function';
+import postcssLogicalOverflow from '@csstools/postcss-logical-overflow';
+import postcssLogicalOverscrollBehavor from '@csstools/postcss-logical-overscroll-behavior';
 import postcssLogical from 'postcss-logical';
 import postcssLogicalResize from '@csstools/postcss-logical-resize';
 import postcssLogicalViewportUnits from '@csstools/postcss-logical-viewport-units';
@@ -89,6 +91,8 @@ export const pluginsById = new Map(
 		['image-set-function', postcssImageSetFunction],
 		['is-pseudo-class', postcssIsPseudoClass],
 		['lab-function', postcssLabFunction],
+		['logical-overflow', postcssLogicalOverflow],
+		['logical-overscroll-behavior', postcssLogicalOverscrollBehavor],
 		['logical-properties-and-values', postcssLogical],
 		['logical-resize', postcssLogicalResize],
 		['logical-viewport-units', postcssLogicalViewportUnits],

plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs

@@ -159,6 +159,16 @@ export default [
 		'id': 'float-clear-logical-values',
 		'importName': 'postcssLogicalFloatAndClear',
 	},
+	{
+		'packageName': '@csstools/postcss-logical-overflow',
+		'id': 'logical-overflow',
+		'importName': 'postcssLogicalOverflow',
+	},
+	{
+		'packageName': '@csstools/postcss-logical-overscroll-behavior',
+		'id': 'logical-overscroll-behavior',
+		'importName': 'postcssLogicalOverscrollBehavor',
+	},
 	{
 		'packageName': '@csstools/postcss-logical-resize',
 		'id': 'logical-resize',

plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts

@@ -30,6 +30,8 @@ import type { pluginOptions as postcssICUnit } from '@csstools/postcss-ic-unit';
 import type { pluginOptions as postcssImageSetFunction } from 'postcss-image-set-function';
 import type { pluginOptions as postcssIsPseudoClass } from '@csstools/postcss-is-pseudo-class';
 import type { pluginOptions as postcssLabFunction } from 'postcss-lab-function';
+import type { pluginOptions as postcssLogicalOverflow } from '@csstools/postcss-logical-overflow';
+import type { pluginOptions as postcssLogicalOverscrollBehavor } from '@csstools/postcss-logical-overscroll-behavior';
 import type { pluginOptions as postcssLogical } from 'postcss-logical';
 import type { pluginOptions as postcssLogicalResize } from '@csstools/postcss-logical-resize';
 import type { pluginOptions as postcssLogicalViewportUnits } from '@csstools/postcss-logical-viewport-units';
@@ -118,6 +120,10 @@ export type pluginsOptions = {
 	'is-pseudo-class'?: postcssIsPseudoClass | boolean
 	/** plugin options for "postcss-lab-function" */
 	'lab-function'?: postcssLabFunction | boolean
+	/** plugin options for "@csstools/postcss-logical-overflow" */
+	'logical-overflow'?: postcssLogicalOverflow | boolean
+	/** plugin options for "@csstools/postcss-logical-overscroll-behavior" */
+	'logical-overscroll-behavior'?: postcssLogicalOverscrollBehavor | boolean
 	/** plugin options for "postcss-logical" */
 	'logical-properties-and-values'?: postcssLogical | boolean
 	/** plugin options for "@csstools/postcss-logical-resize" */

plugin-packs/postcss-preset-env/src/test/lib/format-staged-feature.mjs

@@ -196,6 +196,8 @@ assert.deepStrictEqual(
 		'float-clear-logical-values',
 		'logical-resize',
 		'logical-viewport-units',
+		'logical-overflow',
+		'logical-overscroll-behavior',
 	];
 
 	for (const plugin of logicalPlugins) {

plugin-packs/postcss-preset-env/src/test/test.mjs

@@ -1,4 +1,3 @@
-// import './options-matrix.mjs';
 import './lib/feature-is-inserted-or-has-plugin.mjs';
 import './lib/feature-is-less.mjs';
 import './lib/format-staged-feature.mjs';

plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css

@@ -34,7 +34,7 @@
 }
 
 .test-logical-resize {
-	resize: inline;
+	resize: horizontal;
 }
 
 .test-logical-viewport-units {
@@ -124,6 +124,7 @@
 }
 
 .test-font-variant-property {
+	font-feature-settings: "smcp";
 	font-variant-caps: small-caps;
 	order: 19;
 }
@@ -415,7 +416,7 @@
 }
 
 .logical-float {
-	float: inline-start;
+	float: left;
 }
 
 .color-function {

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

@@ -322,12 +322,12 @@
 
 .overflow {
 	/* overflow-block */
-	overflow-block: inherit;
+	overflow-y: inherit;
 }
 
 .overflow {
 	/* overflow-inline */
-	overflow-inline: inherit;
+	overflow-x: inherit;
 }
 
 .overflow {
@@ -382,12 +382,12 @@
 
 .overscroll-behavior {
 	/* overscroll-behavior-block */
-	overscroll-behavior-block: inherit;
+	overscroll-behavior-y: inherit;
 }
 
 .overscroll-behavior {
 	/* overscroll-behavior-inline */
-	overscroll-behavior-inline: inherit;
+	overscroll-behavior-x: inherit;
 }
 
 .overscroll-behavior {

plugins/postcss-logical-overflow/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+package-lock.json
+yarn.lock
+*.result.css
+*.result.css.map
+*.result.html

plugins/postcss-logical-overflow/.nvmrc

@@ -0,0 +1 @@
+v20.2.0

plugins/postcss-logical-overflow/.tape.mjs

@@ -0,0 +1,29 @@
+import { postcssTape } from '@csstools/postcss-tape';
+import plugin from '@csstools/postcss-logical-overflow';
+
+postcssTape(plugin)({
+	basic: {
+		message: "supports basic usage",
+	},
+	'basic:rtl': {
+		message: 'basic test with rtl',
+		options: {
+			inlineDirection: 'right-to-left'
+		},
+	},
+	'basic:chinese': {
+		message: 'basic test with rtl and bt',
+		options: {
+			inlineDirection: 'top-to-bottom'
+		},
+	},
+	'examples/example': {
+		message: 'minimal example',
+	},
+	'examples/example:chinese': {
+		message: 'minimal example',
+		options: {
+			inlineDirection: 'top-to-bottom'
+		}
+	},
+});

plugins/postcss-logical-overflow/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changes to PostCSS Logical Overflow
+
+### Unreleased (major)
+
+- Initial version