Use logical properties and values in CSS. 

jonathantneal

alaguna

romainmenke

postcss-logical

- Adding support for `max-block-size`, `min-block-size`, `max-inline-size` and `min-inline-size`.

- Improve `types` declaration in `package.json`

- Updated: Support for Node v14+ (major).

- Added: Support for `block-size`, `inline-size` and `caption-side`.

- Removed: Support for the `logical` keyword within `margin`, `padding`, `border-width`, `border-style`, `border-color` properties. (major)

- Removed support for `preserve` option. Changes are no longer preserved (major).

- Removed support for transforming `float`, `clear` and `resize` properties. (major)

- Updated: The plugin now requires block and inline direction to be configured (uses `top-to-bottom` and `left-to-right` respectively) and no longer introduces `:dir` (major).

- Improved `es module` and `commonjs` compatibility

- Fix compatibility with PostCSS `v8.2.x` [#147](https://github.com/csstools/postcss-plugins/issues/147)

This version is not officially supported but some tool providers pinned PostCSS to `v8.2.x`,

making it impossible for end users to have a working setup.

- Removed Sourcemaps from package tarball.

- Moved CLI to CLI Package. See [announcement](https://github.com/csstools/postcss-plugins/discussions/121).

- Updated: Support for PostCS 8+ (major).

- Fixed: Restored transforms for `max-block-size`, `max-inline-size`,

	`min-block-size`, and `min-inline-size`.

- Fixed: An issue with `block-size` and `inline-size` being miscalculated.

- Added: Logical border-radius properties, which include

	`border-end-end-radius`, `border-end-start-radius`, `border-start-end-radius`,

- Removed: All unknown logical properties, which include `border-end`,

	`border-end-color`, `border-end-style`, `border-end-width`, `border-start`,

	`border-start-color`, `border-start-style`, `border-start-width`, `inset-end`,

	`inset-start`, `margin-end`, `margin-start`, `padding-end`, `padding-start`

- Updated: `transition` and `transition-property` to support the changes.

- Added: Support for logical properties within `transition` and

- Changed: Physical rule fallbacks are written as full selectors rather than

- Add `preserve` option to preserve logical properties and values

	"description": "Use logical properties and values in CSS",

		"url": "https://opencollective.com/csstools"

		"build": "rollup -c ../../rollup/default.mjs",

		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",

		"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",

		"lint": "npm run lint:eslint && npm run lint:package-json",

		"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",

		"lint:package-json": "node ../../.github/bin/format-package-json.mjs",

		"prepublishOnly": "npm run clean && npm run build && npm run test",

		"test": "node .tape.mjs && npm run test:exports",

		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",

		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"

	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme",

		"url": "https://github.com/csstools/postcss-plugins.git",

	"bugs": "https://github.com/csstools/postcss-plugins/issues",

		"cssdbId": "logical-properties-and-values",

		"humanReadableName": "PostCSS Logical Properties and Values",

		"specUrl": "https://www.w3.org/TR/css-logical-1/"

# PostCSS Logical Properties and Values [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]

[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-logical.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/logical-properties-and-values.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]

[PostCSS Logical Properties and Values]  lets you use logical, rather than physical, direction and dimension mappings in CSS, following the [CSS Logical Properties and Values] specification.

Add [PostCSS Logical Properties and Values] to your project:

npm install postcss postcss-logical --save-dev

const postcssLogical = require('postcss-logical');

]).process(YOUR_CSS /*, processOptions */);

[PostCSS Logical Properties and Values] runs in all Node environments, with special

- [PostCSS Load Config](INSTALL.md#postcss-load-config)

The `blockDirection` and `inlineDirection` options allow you to specify the direction of the block and inline axes. The default values are `top-to-bottom` and `left-to-right` respectively which would match any latin language.

You might want to tweak these values if you are using a different writing system, such as Arabic, Hebrew or Chinese for example.

Each direction must be one of the following:

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.

Please do note that `text-align` won't be transformed if `inlineDirection` becomes vertical.

[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test

[css-url]: https://cssdb.org/#logical-properties-and-values

[npm-url]: https://www.npmjs.com/package/postcss-logical

[PostCSS]: https://github.com/postcss/postcss

[PostCSS Logical Properties and Values]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical

[CSS Logical Properties and Values]: https://www.w3.org/TR/css-logical-1/

		# Changes to PostCSS Logical Properties

		### 6.1.0 (February 15, 2023)

		- Adding support for `max-block-size`, `min-block-size`, `max-inline-size` and `min-inline-size`.

		### 6.0.1 (January 28, 2023)
		@@ -4,0 +8,0 @@

		{
		"name": "postcss-logical",
		"description": "Use logical properties and values in CSS",
		"version": "6.0.1",
		"version": "6.1.0",
		"contributors": [
		@@ -6,0 +6,0 @@ {

		@@ -10,2 +10,3 @@ # PostCSS Logical Properties and Values [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
		block-size: 100px;
		max-inline-size: 400px;
		inline-size: 200px;
		@@ -22,2 +23,3 @@ padding-block: 10px 20px;
		height: 100px;
		max-width: 400px;
		width: 200px;
		@@ -83,2 +85,3 @@ padding-top: 10px;
		block-size: 100px;
		max-inline-size: 400px;
		inline-size: 200px;
		@@ -95,2 +98,3 @@ padding-block: 10px 20px;
		width: 100px;
		max-height: 400px;
		height: 200px;
		@@ -97,0 +101,0 @@ padding-right: 10px;

Improved metrics