Skip to content

Commit 6c708d9

Browse files
Antonio-Lagunaromainmenke
Antonio-Laguna
and
romainmenke
authored
PostCSS Logical revamp (#740)
* Getting started * wip: starting with single logical on margin * Updating how the transform works * Getting block/inline working for padding and margin * Completing margin and padding * Enable caption-side, float and clear * adding support for text-align * further progress Resize Block size and Inline Size Offsets * Completing border * Addiing docs * Rewriting test * Missing part of the CHANGELOG * Removing no longer needed check * Updating tests * Updating more tests * Linting package.json * feature/logical-revamp-v8 : feedback (#773) * feature/logical-revamp-v8 : feedback * Update plugins/postcss-logical/src/utils/parse-value-couple.ts Co-authored-by: Antonio Laguna <[email protected]> * undo * more undo Co-authored-by: Antonio Laguna <[email protected]> * Adding missing docs * Removing `preserve` * Updating CHANGELOG * add a few abstract tests with various configs (#775) * logical : border radius (#776) * logical : border radius * fix * typescript... * Logical Float and Clear (#781) * Removing float and clear from logical plugin * Adding CHANGELOG * Introducing postcss-logical-float-and-clear * Preparing labeler and exteernals * Update plugins/postcss-logical-float-and-clear/docs/README.md Co-authored-by: Romain Menke <[email protected]> * Update plugins/postcss-logical/docs/README.md Co-authored-by: Romain Menke <[email protected]> * Update .github/labeler.yml Co-authored-by: Romain Menke <[email protected]> * Adding to Issue Templates Co-authored-by: Romain Menke <[email protected]> * logical-resize (#792) * logical-resize * rebuild * Updating CHANGELOG * Updating dependencies * Wire logical into Preset Env and CLI (#798) * remove extra space * remove plugin-options for logical * include new logical plugins * minor format * removing redundant if within shared-options * adding shared logical options to preset-env options * ensuring logical options get passed * updating tests * adding tests for logical options * removing wrong object * adding test for logical * adding clear and resize to the CHANGELOG * updating tests and built files * Updating CSSDB * Generating FEATURES * update CHANGELOG and README * Updating tests for ratios * Adding missing example * Updating CLI * rebuild * a few tweaks and some more tests Co-authored-by: Romain Menke <[email protected]> Co-authored-by: Romain Menke <[email protected]> Co-authored-by: Romain Menke <[email protected]> Co-authored-by: Romain Menke <[email protected]>
1 parent c96a57c commit 6c708d9

File tree

239 files changed

+5344
-3209
lines changed

Some content is hidden

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

239 files changed

+5344
-3209
lines changed

‎.github/ISSUE_TEMPLATE/css-issue.yml

+2
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,8 @@ body:
8787
- PostCSS Is Pseudo Class
8888
- PostCSS Lab Function
8989
- PostCSS Logical
90+
- PostCSS Logical Float and Clear
91+
- PostCSS Logical Resize
9092
- PostCSS Logical Viewport Units
9193
- PostCSS Media Queries Aspect-Ratio Number Values
9294
- PostCSS Media Query Ranges

‎.github/ISSUE_TEMPLATE/plugin-issue.yml

+2
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@ body:
8989
- PostCSS Is Pseudo Class
9090
- PostCSS Lab Function
9191
- PostCSS Logical
92+
- PostCSS Logical Float and Clear
93+
- PostCSS Logical Resize
9294
- PostCSS Logical Viewport Units
9395
- PostCSS Media Queries Aspect-Ratio Number Values
9496
- PostCSS Media Query Ranges

‎.github/labeler.yml

+8
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,14 @@
136136
- plugins/postcss-logical/**
137137
- experimental/postcss-logical/**
138138

139+
"plugins/postcss-logical-float-and-clear":
140+
- plugins/postcss-logical-float-and-clear/**
141+
- experimental/postcss-logical-float-and-clear/**
142+
143+
"plugins/postcss-logical-resize":
144+
- plugins/postcss-logical-resize/**
145+
- experimental/postcss-logical-resize/**
146+
139147
"plugins/postcss-logical-viewport-units":
140148
- plugins/postcss-logical-viewport-units/**
141149
- experimental/postcss-logical-viewport-units/**

‎cli/csstools-cli/CHANGELOG.md

+3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
- Updated: Support for Node v14+ (major).
66
- Remove `postcss-env-function` (breaking).
77
- Remove `importFrom` and `exportTo` plugin options (breaking).
8+
- Added `@csstools/postcss-logical-float-and-clear`
9+
- Added `@csstools/postcss-logical-resize`
10+
- Added `@csstools/postcss-logical-viewport-units`
811

912
### 1.4.0 (June 3, 2022)
1013

‎cli/csstools-cli/dist/cli.cjs

+1-1
Large diffs are not rendered by default.

‎cli/csstools-cli/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@
3838
"@csstools/postcss-hwb-function": "^1.0.1",
3939
"@csstools/postcss-ic-unit": "^1.0.0",
4040
"@csstools/postcss-is-pseudo-class": "^2.0.4",
41+
"@csstools/postcss-logical-float-and-clear": "^1.0.0",
42+
"@csstools/postcss-logical-resize": "^1.0.0",
43+
"@csstools/postcss-logical-viewport-units": "^1.0.0",
4144
"@csstools/postcss-normalize-display-values": "^1.0.0",
4245
"@csstools/postcss-oklab-function": "^1.1.0",
4346
"@csstools/postcss-stepped-value-functions": "^1.0.0",

‎cli/csstools-cli/src/cli.ts

+12
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ import postcssImageSetFunction from './plugins/postcss-image-set-function';
2222
import postcssIsPseudoClass from './plugins/postcss-is-pseudo-class';
2323
import postcssLabFunction from './plugins/postcss-lab-function';
2424
import postcssLogical from './plugins/postcss-logical';
25+
import postcssLogicalFloatAndClear from './plugins/postcss-logical-float-and-clear';
26+
import postcssLogicalResize from './plugins/postcss-logical-resize';
27+
import postcssLogicalViewportUnits from './plugins/postcss-logical-viewport-units';
2528
import postcssNesting from './plugins/postcss-nesting';
2629
import postcssNormalizeDisplayValues from './plugins/postcss-normalize-display-values';
2730
import postcssOKLabFunction from './plugins/postcss-oklab-function';
@@ -109,6 +112,15 @@ function main() {
109112
case 'postcss-logical':
110113
postcssLogical();
111114
return;
115+
case 'postcss-logical-float-and-clear':
116+
postcssLogicalFloatAndClear();
117+
return;
118+
case 'postcss-logical-resize':
119+
postcssLogicalResize();
120+
return;
121+
case 'postcss-logical-viewport-units':
122+
postcssLogicalViewportUnits();
123+
return;
112124
case 'postcss-nesting':
113125
postcssNesting();
114126
return;

‎cli/csstools-cli/src/plugins/postcss-logical-float-and-clear.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import plugin from '@csstools/postcss-logical-float-and-clear';
2+
import { cli, helpTextLogger } from '@csstools/base-cli';
3+
4+
export default function postcssLogical() {
5+
cli(
6+
plugin,
7+
['inlineDirection', 'blockDirection'],
8+
helpTextLogger(
9+
'@csstools/cli postcss-logical-float-and-clear',
10+
'PostCSS Logical Float And Clear',
11+
'Lets you use flow-relative (inline-start and inline-end) values for float and clear, following the CSS Logical Properties and Values specification.',
12+
{
13+
inlineDirection: 'left-to-right',
14+
},
15+
),
16+
false,
17+
);
18+
}

‎cli/csstools-cli/src/plugins/postcss-logical-resize.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import plugin from '@csstools/postcss-logical-resize';
2+
import { cli, helpTextLogger } from '@csstools/base-cli';
3+
4+
export default function postcssLogicalResize() {
5+
cli(
6+
plugin,
7+
['inlineDirection'],
8+
helpTextLogger(
9+
'@csstools/cli postcss-logical-resize',
10+
'PostCSS Logical Resize',
11+
'Lets you use logical values in the resize property, following the CSS Logical Properties and Values specification.',
12+
{
13+
inlineDirection: 'left-to-right',
14+
},
15+
),
16+
false,
17+
);
18+
}

‎cli/csstools-cli/src/plugins/postcss-logical-viewport-units.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import plugin from '@csstools/postcss-logical-viewport-units';
2+
import { cli, helpTextLogger } from '@csstools/base-cli';
3+
4+
export default function postcssLogicalViewportUnits() {
5+
cli(
6+
plugin,
7+
['inlineDirection', 'preserve'],
8+
helpTextLogger(
9+
'@csstools/cli postcss-viewport-units',
10+
'PostCSS Logical Viewport Units',
11+
'Lets you use vb and vi length units in CSS, following the CSS Values and Units Module Level 4 specification.',
12+
{
13+
inlineDirection: 'left-to-right',
14+
preserve: true,
15+
},
16+
),
17+
false,
18+
);
19+
}

‎cli/csstools-cli/src/plugins/postcss-logical.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import { cli, helpTextLogger } from '@csstools/base-cli';
44
export default function postcssLogical() {
55
cli(
66
plugin,
7-
['dir', 'preserve'],
7+
['inlineDirection', 'blockDirection'],
88
helpTextLogger(
99
'@csstools/cli postcss-logical',
1010
'PostCSS Logical',
1111
'Lets you use logical, rather than physical, direction and dimension mappings in CSS, following the CSS Logical Properties and Values specification.',
1212
{
13-
dir: 'ltr|rtl',
14-
preserve: true,
13+
inlineDirection: 'left-to-right',
14+
blockDirection: 'top-to-bottom',
1515
},
1616
),
1717
false,

‎package-lock.json

+75-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugin-packs/postcss-preset-env/.tape.mjs

+9-6
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,15 @@ postcssTape(plugin)({
167167
browsers: '> 0%'
168168
},
169169
},
170+
'basic:hebrew': {
171+
message: 'supports { logical: { inlineDirection: "right-to-left" }, stage: 0, browsers: "> 0%" } usage',
172+
options: {
173+
stage: 0,
174+
logical: {
175+
inlineDirection: 'right-to-left'
176+
}
177+
},
178+
},
170179
'layers-basic': {
171180
message: 'supports layers usage',
172181
options: {
@@ -268,9 +277,6 @@ postcssTape(plugin)({
268277
message: 'supports { insertBefore } usage when looking for source',
269278
options: {
270279
stage: 0,
271-
features: {
272-
'lab-function': true
273-
},
274280
features: {
275281
'lab-function': true,
276282
'color-function': false,
@@ -288,9 +294,6 @@ postcssTape(plugin)({
288294
message: 'supports { insertBefore } usage when looking for a result',
289295
options: {
290296
stage: 0,
291-
features: {
292-
'lab-function': true
293-
},
294297
features: {
295298
'lab-function': true,
296299
'color-function': false,

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

+5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@
44

55
- Added: TypeScript support.
66
- Added `@csstools/postcss-media-queries-aspect-ratio-number-values` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-queries-aspect-ratio-number-values#readme) for usage details.
7+
- Added `@csstools/postcss-logical-float-and-clear` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-float-and-clear#readme) for usage details.
8+
- Added `@csstools/postcss-logical-resize` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-resize#readme) for usage details.
9+
- Added `@csstools/postcss-logical-viewport-units` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units#readme) for usage details.
10+
- Added `logical` option to control all logical plugins.
711
- Fixed: `all-property` and `overflow-wrap-property` now follow the `preserve` plugin option
12+
- Removed a workaround to consider `blank-pseudo-class` and `prefers-color-scheme-query` as `stage: 1` features when using default options.
813

914
### (8.0.0-alpha.1) (November 14, 2022)
1015

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

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
1919
| `dir-pseudo-class` | `:dir` Directionality Pseudo-Class | [example](https://preset-env.cssdb.org/features/#dir-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class#readme) |
2020
| `display-two-values` | Two values syntax for `display` | [example](https://preset-env.cssdb.org/features/#display-two-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values#readme) |
2121
| `double-position-gradients` | Double Position Gradients | [example](https://preset-env.cssdb.org/features/#double-position-gradients) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients#readme) |
22+
| `float-clear-logical-values` | Logical Values in float and clear | [example](https://preset-env.cssdb.org/features/#float-clear-logical-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme) |
2223
| `focus-visible-pseudo-class` | `:focus-visible` Focus-Indicated Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-visible-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible#readme) |
2324
| `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) |
2425
| `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) |

0 commit comments

Comments
 (0)