Wire logical into Preset Env and CLI

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/package.json

@@ -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/src/cli.ts

@@ -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/plugins/postcss-logical-float-and-clear.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-resize.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-viewport-units.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.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,

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

@@ -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,

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

@@ -4,7 +4,12 @@
 
 - Added: TypeScript support.
 - 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.
+- 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.
+- 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.
+- 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.
+- Added `logical` option to control all logical plugins.
 - Fixed: `all-property` and `overflow-wrap-property` now follow the `preserve` plugin option
+- Removed a workaround to consider `blank-pseudo-class` and `prefers-color-scheme-query` as `stage: 1` features when using default options.
 
 ### (8.0.0-alpha.1) (November 14, 2022)
 

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

@@ -19,6 +19,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
 | `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) |
 | `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) |
 | `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) |
+| `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) |
 | `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) |
 | `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) |

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

@@ -218,7 +218,7 @@ postcssPresetEnv({
   /* use stage 3 features + custom-selectors (preserving the original CSS) */
   stage: 3,
   features: {
-    'custom-selectors': { preserve: true  }
+    'custom-selectors': { preserve: true }
   }
 })
 ```
@@ -337,6 +337,50 @@ The `enableClientSidePolyfills` enables any feature that would need an extra bro
 - Note that manually enabling/disabling features via the "feature" option overrides this flag.
 - This only controls if the PostCSS plugins are enabled. It does not cause the browsers libraries to be included in your bundle.
 
+### logical
+
+The `logical` option can hold an object which lets you specify direction of the inline and block axes and will affect the
+following features:
+
+- `logical-properties-and-values`: [PostCSS Logical](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme)
+- `float-clear-logical-values`: [PostCSS Logical Float And Clear](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme)
+- `logical-resize`: [PostCSS Logical Resize](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-resize#readme)
+- `logical-viewport-units`: [PostCSS Logical Viewport Units](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logica-viewport-unitsl#readme)
+
+It should have `blockDirection` and/or `inlineDirection` which can be any of the following:
+
+- `top-to-bottom`
+- `bottom-to-top`
+- `left-to-right`
+- `right-to-left`
+
+```js
+postcssPresetEnv({
+  logical: { // instruct all logical plugins to set inline axis to right to left
+		inlineDirection: 'right-to-left',
+	},
+});
+```
+
+```pcss
+.element {
+	float: inline-start;
+	padding-inline-end: 10px;
+}
+```
+
+Becomes :
+
+```
+.element {
+	float: right;
+	padding-left: 10px;
+}
+```
+
+You can't mix two vertical directions or two horizontal directions so for example `top-to-bottom` and `right-to-left` are valid, but `top-to-bottom` and `bottom-to-top` are not.
+
+You might want to tweak these values if you are using a different writing system, such as Arabic, Hebrew or Chinese for example.
 
 ## Stability and Portability
 

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

@@ -1,5 +1,11 @@
 import type autoprefixer from 'autoprefixer';
 import { pluginsOptions } from './plugins/plugins-options';
+export declare enum DirectionFlow {
+    TopToBottom = "top-to-bottom",
+    BottomToTop = "bottom-to-top",
+    RightToLeft = "right-to-left",
+    LeftToRight = "left-to-right"
+}
 export type pluginOptions = {
     /**
      * Determine which CSS features to polyfill,
@@ -63,4 +69,14 @@ export type pluginOptions = {
      * default: false
      */
     debug?: boolean;
+    /**
+     * The `logical` object allows to configure all plugins related to logical document flow at once.
+     * It accepts the same options as each plugin: `inlineDirection` and `blockDirection`.
+     */
+    logical?: {
+        /** Set the inline flow direction. default: left-to-right */
+        inlineDirection?: DirectionFlow;
+        /** Set the block flow direction. default: top-to-bottom */
+        blockDirection?: DirectionFlow;
+    };
 };

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

@@ -13,6 +13,7 @@ import type { pluginOptions as postcssCustomSelectors } from 'postcss-custom-sel
 import type { pluginOptions as postcssDirPseudoClass } from 'postcss-dir-pseudo-class';
 import type { pluginOptions as postcssNormalizeDisplayValues } from '@csstools/postcss-normalize-display-values';
 import type { pluginOptions as postcssDoublePositionGradients } from 'postcss-double-position-gradients';
+import type { pluginOptions as postcssLogicalFloatAndClear } from '@csstools/postcss-logical-float-and-clear';
 import type { pluginOptions as postcssFocusVisible } from 'postcss-focus-visible';
 import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within';
 import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords';
@@ -25,7 +26,9 @@ 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 postcssLogical } from '../types/postcss-logical/plugin-options';
+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';
 import type { pluginOptions as postcssMediaQueriesAspectRatioNumberValues } from '@csstools/postcss-media-queries-aspect-ratio-number-values';
 import type { pluginOptions as postcssMediaMinmax } from '../types/postcss-media-minmax/plugin-options';
 import type { pluginOptions as postcssNestedCalc } from '@csstools/postcss-nested-calc';
@@ -75,6 +78,8 @@ export type pluginsOptions = {
     'display-two-values'?: postcssNormalizeDisplayValues | boolean;
     /** plugin options for "postcss-double-position-gradients" */
     'double-position-gradients'?: postcssDoublePositionGradients | boolean;
+    /** plugin options for "@csstools/postcss-logical-float-and-clear" */
+    'float-clear-logical-values'?: postcssLogicalFloatAndClear | boolean;
     /** plugin options for "postcss-focus-visible" */
     'focus-visible-pseudo-class'?: postcssFocusVisible | boolean;
     /** plugin options for "postcss-focus-within" */
@@ -101,6 +106,10 @@ export type pluginsOptions = {
     'lab-function'?: postcssLabFunction | boolean;
     /** plugin options for "postcss-logical" */
     'logical-properties-and-values'?: postcssLogical | boolean;
+    /** plugin options for "@csstools/postcss-logical-resize" */
+    'logical-resize'?: postcssLogicalResize | boolean;
+    /** plugin options for "@csstools/postcss-logical-viewport-units" */
+    'logical-viewport-units'?: postcssLogicalViewportUnits | boolean;
     /** plugin options for "@csstools/postcss-media-queries-aspect-ratio-number-values" */
     'media-queries-aspect-ratio-number-values'?: postcssMediaQueriesAspectRatioNumberValues | boolean;
     /** plugin options for "postcss-media-minmax" */

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

@@ -34,6 +34,9 @@
 		"@csstools/postcss-hwb-function": "^1.0.2",
 		"@csstools/postcss-ic-unit": "^1.0.1",
 		"@csstools/postcss-is-pseudo-class": "^2.0.7",
+		"@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-media-queries-aspect-ratio-number-values": "^1.0.0",
 		"@csstools/postcss-nested-calc": "^1.0.0",
 		"@csstools/postcss-normalize-display-values": "^1.0.1",

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

@@ -134,6 +134,21 @@
 		"id": "logical-properties-and-values",
 		"importName": "postcssLogical"
 	},
+	{
+		"packageName": "@csstools/postcss-logical-float-and-clear",
+		"id": "float-clear-logical-values",
+		"importName": "postcssLogicalFloatAndClear"
+	},
+	{
+		"packageName": "@csstools/postcss-logical-resize",
+		"id": "logical-resize",
+		"importName": "postcssLogicalResize"
+	},
+	{
+		"packageName": "@csstools/postcss-logical-viewport-units",
+		"id": "logical-viewport-units",
+		"importName": "postcssLogicalViewportUnits"
+	},
 	{
 		"packageName": "postcss-media-minmax",
 		"id": "media-query-ranges",

plugin-packs/postcss-preset-env/src/index.ts

@@ -20,9 +20,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 	const sharedOptions = initializeSharedOptions(options);
 
 	const features = listFeatures(cssdb, options, sharedOptions, logger);
-	const plugins = features.map((feature) => {
-		return feature.plugin;
-	});
+	const plugins = features.map((feature) => feature.plugin);
 
 	if (options.autoprefixer !== false) {
 		plugins.push(