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

Author: Antonio-Laguna

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,
+	);
+}

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

@@ -4,14 +4,14 @@ import { cli, helpTextLogger } from '@csstools/base-cli';
 export default function postcssLogical() {
 	cli(
 		plugin,
-		['dir', 'preserve'],
+		['inlineDirection', 'blockDirection'],
 		helpTextLogger(
 			'@csstools/cli postcss-logical',
 			'PostCSS Logical',
 			'Lets you use logical, rather than physical, direction and dimension mappings in CSS, following the CSS Logical Properties and Values specification.',
 			{
-				dir: 'ltr|rtl',
-				preserve: true,
+				inlineDirection: 'left-to-right',
+				blockDirection: 'top-to-bottom',
 			},
 		),
 		false,

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

@@ -167,6 +167,15 @@ postcssTape(plugin)({
 			browsers: '> 0%'
 		},
 	},
+	'basic:hebrew': {
+		message: 'supports { logical: { inlineDirection: "right-to-left" }, stage: 0, browsers: "> 0%" } usage',
+		options: {
+			stage: 0,
+			logical: {
+				inlineDirection: 'right-to-left'
+			}
+		},
+	},
 	'layers-basic': {
 		message: 'supports layers usage',
 		options: {
@@ -268,9 +277,6 @@ postcssTape(plugin)({
 		message: 'supports { insertBefore } usage when looking for source',
 		options: {
 			stage: 0,
-			features: {
-				'lab-function': true
-			},
 			features: {
 				'lab-function': true,
 				'color-function': false,
@@ -288,9 +294,6 @@ postcssTape(plugin)({
 		message: 'supports { insertBefore } usage when looking for a result',
 		options: {
 			stage: 0,
-			features: {
-				'lab-function': true
-			},
 			features: {
 				'lab-function': true,
 				'color-function': false,