blob: a46ea240670f926f8acc0efb9935eb69c522626b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
# 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]
```bash
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.
```pcss
.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 */);
```
[PostCSS Logical Properties and Values] runs in all Node environments, with special
instructions for:
- [Node](INSTALL.md#node)
- [PostCSS CLI](INSTALL.md#postcss-cli)
- [PostCSS Load Config](INSTALL.md#postcss-load-config)
- [Webpack](INSTALL.md#webpack)
- [Next.js](INSTALL.md#nextjs)
- [Gulp](INSTALL.md#gulp)
- [Grunt](INSTALL.md#grunt)
## Options
### blockDirection & 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'
})
```
```pcss
.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.
[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/
|
