# postcss-logical > Use logical properties and values in CSS Latest version **9.0.0** (published 2026-01-14) · MIT-0 license · 0 weekly downloads ## Install ```sh npm install postcss-logical pnpm add postcss-logical yarn add postcss-logical bun add postcss-logical ``` ## Health **Score 55/100 (C)** — status: stable. Positive: esm support; no vulnerabilities; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 9.0.0 | | Published | 2026-01-14 | | First published | 2017-08-09 | | Weekly downloads | 0 | | License | MIT-0 | | TypeScript types | none | | Module format | ESM | | Node | >=20.19.0 | | Dependencies | 1 | | Unpacked size | 20 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1052 | | Maintainers | jonathantneal, alaguna, romainmenke | | Keywords | align, block, border, css, dir, directional, directions, end, flow, inline, logical, ltr, margin, padding, postcss, postcss-plugin, properties, property, relative, rtl, size, start, text, values | ## Links - npm: https://www.npmjs.com/package/postcss-logical - Repository: https://github.com/csstools/postcss-plugins - Homepage: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme - Issues: https://github.com/csstools/postcss-plugins/issues - Funding: https://github.com/sponsors/csstools - npm.io page: https://npm.io/package/postcss-logical ## Dependencies (1) - [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^4.2.0 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 9.0.0 (latest) — 2026-01-14 - 8.1.0 — 2025-02-23 - 8.0.0 — 2024-08-03 - 7.0.1 — 2023-12-15 - 7.0.0 — 2023-07-03 - 6.2.0 — 2023-05-19 - 6.1.0 — 2023-02-15 - 6.0.1 — 2023-01-28 - 6.0.0 — 2023-01-24 - 5.0.4 — 2022-02-05 - 5.0.3 — 2022-01-12 - 5.0.2 — 2022-01-02 - 5.0.1 — 2021-12-13 - 5.0.0 — 2021-09-17 - 4.0.2 — 2019-06-10 - … 8 more at https://npm.io/package/postcss-logical/versions ## README # PostCSS Logical Properties and Values [PostCSS Logo][PostCSS] `npm install postcss-logical --save-dev` [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. ```css .element { block-size: 100px; max-inline-size: 400px; inline-size: 200px; padding-block: 10px 20px; margin-inline: auto; border-block-width: 2px; border-block-style: solid; } /* becomes */ .element { height: 100px; max-width: 400px; width: 200px; padding-top: 10px; padding-bottom: 20px; margin-left: auto; margin-right: auto; border-top-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-bottom-style: solid; } ``` ## Usage Add [PostCSS Logical Properties and Values] to your project: ```bash npm install postcss postcss-logical --save-dev ``` Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssLogical = require('postcss-logical'); postcss([ postcssLogical(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` ## Options ### `blockDirection` and `inlineDirection` 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 should tweak these values so that they are specific to your language and writing mode.** ```js postcssLogical({ blockDirection: 'right-to-left', inlineDirection: 'top-to-bottom' }) ``` ```css .element { block-size: 100px; max-inline-size: 400px; inline-size: 200px; padding-block: 10px 20px; margin-inline: auto; border-block-width: 2px; border-block-style: solid; } /* becomes */ .element { width: 100px; max-height: 400px; height: 200px; padding-right: 10px; padding-left: 20px; margin-top: auto; margin-bottom: auto; border-right-width: 2px; border-left-width: 2px; border-right-style: solid; border-left-style: solid; } ``` Each direction must be one of the following: - `top-to-bottom` - `bottom-to-top` - `left-to-right` - `right-to-left` 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. ### `ignoreCustomProperties` The `ignoreCustomProperties` option allows you to ignore any properties containing `var()`. `postcss-logical` assumes that all custom properties are single value (e.g. `--foo: 10px;`) and will assign these to physical properties as fallbacks for logical properties. This will produce broken declarations when your custom properties contain multiple values instead (e.g. `--foo: 1px 2px;`). ```css :root { --inset-a: 10px; } .foo { inset: var(--inset-a); } :root { --inset-b: 1px 2px 3px 4px; } .bar { inset: var(--inset-b); } /* becomes */ :root { --inset-a: 10px; } .foo { top: var(--inset-a); right: var(--inset-a); bottom: var(--inset-a); left: var(--inset-a); } :root { --inset-b: 1px 2px 3px 4px; } .bar { top: var(--inset-b); right: var(--inset-b); bottom: var(--inset-b); left: var(--inset-b); } ``` With `ignoreCustomProperties` set to `true`: ```css :root { --inset-a: 10px; } .foo { inset: var(--inset-a); } :root { --inset-b: 1px 2px 3px 4px; } .bar { inset: var(--inset-b); } /* becomes */ :root { --inset-a: 10px; } .foo { inset: var(--inset-a); } :root { --inset-b: 1px 2px 3px 4px; } .bar { inset: var(--inset-b); } ``` [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#logical-properties-and-values [discord]: https://discord.gg/bUadyRwkJS [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/ --- _Source: https://npm.io/package/postcss-logical · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._