Skip to content

Commit 79e10a5

Browse files
romainmenkeromainmenke
authored
logical-overflow and logical-overscroll-behavior (#1151)
1 parent d17488a commit 79e10a5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+2034
-473
lines changed

‎.github/ISSUE_TEMPLATE/css-issue.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ body:
9494
- PostCSS Lab Function
9595
- PostCSS Logical
9696
- PostCSS Logical Float and Clear
97+
- PostCSS Logical Overflow
98+
- PostCSS Logical Overscroll Behavior
9799
- PostCSS Logical Resize
98100
- PostCSS Logical Viewport Units
99101
- PostCSS Media Queries Aspect-Ratio Number Values

‎.github/ISSUE_TEMPLATE/plugin-issue.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@ body:
9696
- PostCSS Lab Function
9797
- PostCSS Logical
9898
- PostCSS Logical Float and Clear
99+
- PostCSS Logical Overflow
100+
- PostCSS Logical Overscroll Behavior
99101
- PostCSS Logical Resize
100102
- PostCSS Logical Viewport Units
101103
- PostCSS Media Queries Aspect-Ratio Number Values

‎.github/labeler.yml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,14 @@
177177
- plugins/postcss-logical-float-and-clear/**
178178
- experimental/postcss-logical-float-and-clear/**
179179

180+
"plugins/postcss-overflow":
181+
- plugins/postcss-overflow/**
182+
- experimental/postcss-overflow/**
183+
184+
"plugins/postcss-overscroll-behavior":
185+
- plugins/postcss-overscroll-behavior/**
186+
- experimental/postcss-overscroll-behavior/**
187+
180188
"plugins/postcss-logical-resize":
181189
- plugins/postcss-logical-resize/**
182190
- experimental/postcss-logical-resize/**

‎package-lock.json

Lines changed: 348 additions & 461 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
# Changes to PostCSS Preset Env
22

3+
### Unreleased (minor)
4+
5+
- 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.
6+
- 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.
7+
- 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)
8+
39
### 9.2.0
410

511
_October 9, 2023_
612

713
- 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.
8-
- 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)
14+
- 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)
915
- 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)
1016
- 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)
1117
- 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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
2626
| `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) |
2727
| `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) |
2828
| `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) |
29-
| `gamut-mapping` | | | |
29+
| `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) |
3030
| `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) |
3131
| `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) |
3232
| `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.
3636
| `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) |
3737
| `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) |
3838
| `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) |
39+
| `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) |
40+
| `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) |
3941
| `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) |
4042
| `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) |
4143
| `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/index.cjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎plugin-packs/postcss-preset-env/dist/index.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import type { pluginOptions as postcssICUnit } from '@csstools/postcss-ic-unit';
3030
import type { pluginOptions as postcssImageSetFunction } from 'postcss-image-set-function';
3131
import type { pluginOptions as postcssIsPseudoClass } from '@csstools/postcss-is-pseudo-class';
3232
import type { pluginOptions as postcssLabFunction } from 'postcss-lab-function';
33+
import type { pluginOptions as postcssLogicalOverflow } from '@csstools/postcss-logical-overflow';
34+
import type { pluginOptions as postcssLogicalOverscrollBehavor } from '@csstools/postcss-logical-overscroll-behavior';
3335
import type { pluginOptions as postcssLogical } from 'postcss-logical';
3436
import type { pluginOptions as postcssLogicalResize } from '@csstools/postcss-logical-resize';
3537
import type { pluginOptions as postcssLogicalViewportUnits } from '@csstools/postcss-logical-viewport-units';
@@ -117,6 +119,10 @@ export type pluginsOptions = {
117119
'is-pseudo-class'?: postcssIsPseudoClass | boolean;
118120
/** plugin options for "postcss-lab-function" */
119121
'lab-function'?: postcssLabFunction | boolean;
122+
/** plugin options for "@csstools/postcss-logical-overflow" */
123+
'logical-overflow'?: postcssLogicalOverflow | boolean;
124+
/** plugin options for "@csstools/postcss-logical-overscroll-behavior" */
125+
'logical-overscroll-behavior'?: postcssLogicalOverscrollBehavor | boolean;
120126
/** plugin options for "postcss-logical" */
121127
'logical-properties-and-values'?: postcssLogical | boolean;
122128
/** plugin options for "@csstools/postcss-logical-resize" */

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@
6161
"@csstools/postcss-initial": "^1.0.0",
6262
"@csstools/postcss-is-pseudo-class": "^4.0.3",
6363
"@csstools/postcss-logical-float-and-clear": "^2.0.0",
64+
"@csstools/postcss-logical-overflow": "^0.0.0",
65+
"@csstools/postcss-logical-overscroll-behavior": "^0.0.0",
6466
"@csstools/postcss-logical-resize": "^2.0.0",
6567
"@csstools/postcss-logical-viewport-units": "^2.0.3",
6668
"@csstools/postcss-media-minmax": "^1.1.0",
@@ -80,7 +82,7 @@
8082
"css-blank-pseudo": "^6.0.0",
8183
"css-has-pseudo": "^6.0.0",
8284
"css-prefers-color-scheme": "^9.0.0",
83-
"cssdb": "^7.8.0",
85+
"cssdb": "^7.9.0",
8486
"postcss-attribute-case-insensitive": "^6.0.2",
8587
"postcss-clamp": "^4.1.0",
8688
"postcss-color-functional-notation": "^6.0.2",

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,16 @@
159159
"id": "float-clear-logical-values",
160160
"importName": "postcssLogicalFloatAndClear"
161161
},
162+
{
163+
"packageName": "@csstools/postcss-logical-overflow",
164+
"id": "logical-overflow",
165+
"importName": "postcssLogicalOverflow"
166+
},
167+
{
168+
"packageName": "@csstools/postcss-logical-overscroll-behavior",
169+
"id": "logical-overscroll-behavior",
170+
"importName": "postcssLogicalOverscrollBehavor"
171+
},
162172
{
163173
"packageName": "@csstools/postcss-logical-resize",
164174
"id": "logical-resize",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ export default function getOptionsForBrowsersByFeature(supportedBrowsers, featur
5050
case 'float-clear-logical-values':
5151
case 'logical-resize':
5252
case 'logical-viewport-units':
53+
case 'logical-overflow':
54+
case 'logical-overscroll-behavior':
5355
{
5456
if ('logical' in options) {
5557
return options.logical;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export default [
1515
'not-pseudo-class', // run not-pseudo-class after other selectors have been transpiled
1616
'logical-properties-and-values', // run logical-properties-and-values before dir-pseudo-class
1717
'float-clear-logical-values',
18+
'logical-overflow',
19+
'logical-overscroll-behavior',
1820
'logical-resize',
1921
'logical-viewport-units',
2022
'dir-pseudo-class',

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import postcssICUnit from '@csstools/postcss-ic-unit';
3030
import postcssImageSetFunction from 'postcss-image-set-function';
3131
import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';
3232
import postcssLabFunction from 'postcss-lab-function';
33+
import postcssLogicalOverflow from '@csstools/postcss-logical-overflow';
34+
import postcssLogicalOverscrollBehavor from '@csstools/postcss-logical-overscroll-behavior';
3335
import postcssLogical from 'postcss-logical';
3436
import postcssLogicalResize from '@csstools/postcss-logical-resize';
3537
import postcssLogicalViewportUnits from '@csstools/postcss-logical-viewport-units';
@@ -89,6 +91,8 @@ export const pluginsById = new Map(
8991
['image-set-function', postcssImageSetFunction],
9092
['is-pseudo-class', postcssIsPseudoClass],
9193
['lab-function', postcssLabFunction],
94+
['logical-overflow', postcssLogicalOverflow],
95+
['logical-overscroll-behavior', postcssLogicalOverscrollBehavor],
9296
['logical-properties-and-values', postcssLogical],
9397
['logical-resize', postcssLogicalResize],
9498
['logical-viewport-units', postcssLogicalViewportUnits],

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,16 @@ export default [
159159
'id': 'float-clear-logical-values',
160160
'importName': 'postcssLogicalFloatAndClear',
161161
},
162+
{
163+
'packageName': '@csstools/postcss-logical-overflow',
164+
'id': 'logical-overflow',
165+
'importName': 'postcssLogicalOverflow',
166+
},
167+
{
168+
'packageName': '@csstools/postcss-logical-overscroll-behavior',
169+
'id': 'logical-overscroll-behavior',
170+
'importName': 'postcssLogicalOverscrollBehavor',
171+
},
162172
{
163173
'packageName': '@csstools/postcss-logical-resize',
164174
'id': 'logical-resize',

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import type { pluginOptions as postcssICUnit } from '@csstools/postcss-ic-unit';
3030
import type { pluginOptions as postcssImageSetFunction } from 'postcss-image-set-function';
3131
import type { pluginOptions as postcssIsPseudoClass } from '@csstools/postcss-is-pseudo-class';
3232
import type { pluginOptions as postcssLabFunction } from 'postcss-lab-function';
33+
import type { pluginOptions as postcssLogicalOverflow } from '@csstools/postcss-logical-overflow';
34+
import type { pluginOptions as postcssLogicalOverscrollBehavor } from '@csstools/postcss-logical-overscroll-behavior';
3335
import type { pluginOptions as postcssLogical } from 'postcss-logical';
3436
import type { pluginOptions as postcssLogicalResize } from '@csstools/postcss-logical-resize';
3537
import type { pluginOptions as postcssLogicalViewportUnits } from '@csstools/postcss-logical-viewport-units';
@@ -118,6 +120,10 @@ export type pluginsOptions = {
118120
'is-pseudo-class'?: postcssIsPseudoClass | boolean
119121
/** plugin options for "postcss-lab-function" */
120122
'lab-function'?: postcssLabFunction | boolean
123+
/** plugin options for "@csstools/postcss-logical-overflow" */
124+
'logical-overflow'?: postcssLogicalOverflow | boolean
125+
/** plugin options for "@csstools/postcss-logical-overscroll-behavior" */
126+
'logical-overscroll-behavior'?: postcssLogicalOverscrollBehavor | boolean
121127
/** plugin options for "postcss-logical" */
122128
'logical-properties-and-values'?: postcssLogical | boolean
123129
/** plugin options for "@csstools/postcss-logical-resize" */

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,8 @@ assert.deepStrictEqual(
196196
'float-clear-logical-values',
197197
'logical-resize',
198198
'logical-viewport-units',
199+
'logical-overflow',
200+
'logical-overscroll-behavior',
199201
];
200202

201203
for (const plugin of logicalPlugins) {

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// import './options-matrix.mjs';
21
import './lib/feature-is-inserted-or-has-plugin.mjs';
32
import './lib/feature-is-less.mjs';
43
import './lib/format-staged-feature.mjs';

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
}
3535

3636
.test-logical-resize {
37-
resize: inline;
37+
resize: horizontal;
3838
}
3939

4040
.test-logical-viewport-units {
@@ -124,6 +124,7 @@
124124
}
125125

126126
.test-font-variant-property {
127+
font-feature-settings: "smcp";
127128
font-variant-caps: small-caps;
128129
order: 19;
129130
}
@@ -415,7 +416,7 @@
415416
}
416417

417418
.logical-float {
418-
float: inline-start;
419+
float: left;
419420
}
420421

421422
.color-function {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -322,12 +322,12 @@
322322

323323
.overflow {
324324
/* overflow-block */
325-
overflow-block: inherit;
325+
overflow-y: inherit;
326326
}
327327

328328
.overflow {
329329
/* overflow-inline */
330-
overflow-inline: inherit;
330+
overflow-x: inherit;
331331
}
332332

333333
.overflow {
@@ -382,12 +382,12 @@
382382

383383
.overscroll-behavior {
384384
/* overscroll-behavior-block */
385-
overscroll-behavior-block: inherit;
385+
overscroll-behavior-y: inherit;
386386
}
387387

388388
.overscroll-behavior {
389389
/* overscroll-behavior-inline */
390-
overscroll-behavior-inline: inherit;
390+
overscroll-behavior-x: inherit;
391391
}
392392

393393
.overscroll-behavior {

‎plugins/postcss-logical-overflow/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
package-lock.json
3+
yarn.lock
4+
*.result.css
5+
*.result.css.map
6+
*.result.html

‎plugins/postcss-logical-overflow/.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v20.2.0

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { postcssTape } from '@csstools/postcss-tape';
2+
import plugin from '@csstools/postcss-logical-overflow';
3+
4+
postcssTape(plugin)({
5+
basic: {
6+
message: "supports basic usage",
7+
},
8+
'basic:rtl': {
9+
message: 'basic test with rtl',
10+
options: {
11+
inlineDirection: 'right-to-left'
12+
},
13+
},
14+
'basic:chinese': {
15+
message: 'basic test with rtl and bt',
16+
options: {
17+
inlineDirection: 'top-to-bottom'
18+
},
19+
},
20+
'examples/example': {
21+
message: 'minimal example',
22+
},
23+
'examples/example:chinese': {
24+
message: 'minimal example',
25+
options: {
26+
inlineDirection: 'top-to-bottom'
27+
}
28+
},
29+
});

‎plugins/postcss-logical-overflow/CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Changes to PostCSS Logical Overflow
2+
3+
### Unreleased (major)
4+
5+
- Initial version

0 commit comments

Comments
 (0)