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]>

Author: Antonio-Laguna

.github/ISSUE_TEMPLATE/css-issue.yml

@@ -87,6 +87,8 @@ body:
         - PostCSS Is Pseudo Class
         - PostCSS Lab Function
         - PostCSS Logical
+        - PostCSS Logical Float and Clear
+        - PostCSS Logical Resize
         - PostCSS Logical Viewport Units
         - PostCSS Media Queries Aspect-Ratio Number Values
         - PostCSS Media Query Ranges

.github/ISSUE_TEMPLATE/plugin-issue.yml

@@ -89,6 +89,8 @@ body:
         - PostCSS Is Pseudo Class
         - PostCSS Lab Function
         - PostCSS Logical
+        - PostCSS Logical Float and Clear
+        - PostCSS Logical Resize
         - PostCSS Logical Viewport Units
         - PostCSS Media Queries Aspect-Ratio Number Values
         - PostCSS Media Query Ranges

.github/labeler.yml

@@ -136,6 +136,14 @@
   - plugins/postcss-logical/**
   - experimental/postcss-logical/**
 
+"plugins/postcss-logical-float-and-clear":
+  - plugins/postcss-logical-float-and-clear/**
+  - experimental/postcss-logical-float-and-clear/**
+
+"plugins/postcss-logical-resize":
+  - plugins/postcss-logical-resize/**
+  - experimental/postcss-logical-resize/**
+
 "plugins/postcss-logical-viewport-units":
   - plugins/postcss-logical-viewport-units/**
   - experimental/postcss-logical-viewport-units/**

cli/csstools-cli/CHANGELOG.md

@@ -5,6 +5,9 @@
 - Updated: Support for Node v14+ (major).
 - Remove `postcss-env-function` (breaking).
 - Remove `importFrom` and `exportTo` plugin options (breaking).
+- Added `@csstools/postcss-logical-float-and-clear`
+- Added `@csstools/postcss-logical-resize`
+- Added `@csstools/postcss-logical-viewport-units`
 
 ### 1.4.0 (June 3, 2022)
 

cli/csstools-cli/dist/cli.cjs

@@ -38,6 +38,9 @@
 		"@csstools/postcss-hwb-function": "^1.0.1",
 		"@csstools/postcss-ic-unit": "^1.0.0",
 		"@csstools/postcss-is-pseudo-class": "^2.0.4",
+		"@csstools/postcss-logical-float-and-clear": "^1.0.0",
+		"@csstools/postcss-logical-resize": "^1.0.0",
+		"@csstools/postcss-logical-viewport-units": "^1.0.0",
 		"@csstools/postcss-normalize-display-values": "^1.0.0",
 		"@csstools/postcss-oklab-function": "^1.1.0",
 		"@csstools/postcss-stepped-value-functions": "^1.0.0",

cli/csstools-cli/package.json

@@ -22,6 +22,9 @@ import postcssImageSetFunction from './plugins/postcss-image-set-function';
 import postcssIsPseudoClass from './plugins/postcss-is-pseudo-class';
 import postcssLabFunction from './plugins/postcss-lab-function';
 import postcssLogical from './plugins/postcss-logical';
+import postcssLogicalFloatAndClear from './plugins/postcss-logical-float-and-clear';
+import postcssLogicalResize from './plugins/postcss-logical-resize';
+import postcssLogicalViewportUnits from './plugins/postcss-logical-viewport-units';
 import postcssNesting from './plugins/postcss-nesting';
 import postcssNormalizeDisplayValues from './plugins/postcss-normalize-display-values';
 import postcssOKLabFunction from './plugins/postcss-oklab-function';
@@ -109,6 +112,15 @@ function main() {
 		case 'postcss-logical':
 			postcssLogical();
 			return;
+		case 'postcss-logical-float-and-clear':
+			postcssLogicalFloatAndClear();
+			return;
+		case 'postcss-logical-resize':
+			postcssLogicalResize();
+			return;
+		case 'postcss-logical-viewport-units':
+			postcssLogicalViewportUnits();
+			return;
 		case 'postcss-nesting':
 			postcssNesting();
 			return;

cli/csstools-cli/src/cli.ts

@@ -0,0 +1,18 @@
+import plugin from '@csstools/postcss-logical-float-and-clear';
+import { cli, helpTextLogger } from '@csstools/base-cli';
+
+export default function postcssLogical() {
+	cli(
+		plugin,
+		['inlineDirection', 'blockDirection'],
+		helpTextLogger(
+			'@csstools/cli postcss-logical-float-and-clear',
+			'PostCSS Logical Float And Clear',
+			'Lets you use flow-relative (inline-start and inline-end) values for float and clear, following the CSS Logical Properties and Values specification.',
+			{
+				inlineDirection: 'left-to-right',
+			},
+		),
+		false,
+	);
+}

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

@@ -0,0 +1,18 @@
+import plugin from '@csstools/postcss-logical-resize';
+import { cli, helpTextLogger } from '@csstools/base-cli';
+
+export default function postcssLogicalResize() {
+	cli(
+		plugin,
+		['inlineDirection'],
+		helpTextLogger(
+			'@csstools/cli postcss-logical-resize',
+			'PostCSS Logical Resize',
+			'Lets you use logical values in the resize property, following the CSS Logical Properties and Values specification.',
+			{
+				inlineDirection: 'left-to-right',
+			},
+		),
+		false,
+	);
+}

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

@@ -0,0 +1,19 @@
+import plugin from '@csstools/postcss-logical-viewport-units';
+import { cli, helpTextLogger } from '@csstools/base-cli';
+
+export default function postcssLogicalViewportUnits() {
+	cli(
+		plugin,
+		['inlineDirection', 'preserve'],
+		helpTextLogger(
+			'@csstools/cli postcss-viewport-units',
+			'PostCSS Logical Viewport Units',
+			'Lets you use vb and vi length units in CSS, following the CSS Values and Units Module Level 4 specification.',
+			{
+				inlineDirection: 'left-to-right',
+				preserve: true,
+			},
+		),
+		false,
+	);
+}