blob: 6ed9382cd0dfb596359302fc93d76b073ffc33af (
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
# PostCSS Dir Pseudo Class [<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-dir-pseudo-class.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/dir-pseudo-class.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 Dir Pseudo Class] lets you style by directionality using the `:dir()`
pseudo-class in CSS, following the [Selectors] specification.
```pcss
article h3:dir(rtl) {
margin-right: 10px;
}
article h3:dir(ltr) {
margin-left: 10px;
}
/* becomes */
[dir="rtl"] article h3 {
margin-right: 10px;
}
[dir="ltr"] article h3 {
margin-left: 10px;
}
```
### Maintaining Specificity
Using [PostCSS Dir Pseudo Class] will not impact selector weight, but it will
require having at least one `[dir]` attribute in your HTML. If you don’t have
_any_ `[dir]` attributes, consider using the following JavaScript:
```js
// force at least one dir attribute (this can run at any time)
document.documentElement.dir=document.documentElement.dir||'ltr';
```
If you absolutely cannot add a `[dir]` attribute in your HTML or even force one
via JavaScript, you can still work around this by presuming a direction in your
CSS using the [`dir` option](#dir), but understand that this will
sometimes increase selector weight by one element (`html`).
## Usage
Add [PostCSS Dir Pseudo Class] to your project:
```bash
npm install postcss postcss-dir-pseudo-class --save-dev
```
Use it as a [PostCSS] plugin:
```js
const postcss = require('postcss');
const postcssDirPseudoClass = require('postcss-dir-pseudo-class');
postcss([
postcssDirPseudoClass(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```
[PostCSS Dir Pseudo Class] 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
### preserve
The `preserve` option determines whether the original notation
is preserved. By default, it is not preserved.
```js
postcssDirPseudoClass({ preserve: true })
```
```pcss
article h3:dir(rtl) {
margin-right: 10px;
}
article h3:dir(ltr) {
margin-left: 10px;
}
/* becomes */
[dir="rtl"] article h3 {
margin-right: 10px;
}
article h3:dir(rtl) {
margin-right: 10px;
}
[dir="ltr"] article h3 {
margin-left: 10px;
}
article h3:dir(ltr) {
margin-left: 10px;
}
```
### dir
The `dir` option allows you presume a direction in your CSS. By default, this
is not specified and you are required to include a direction `[dir]` attribute
somewhere in your HTML, preferably on the `html` element.
```js
postcssDirPseudoClass({ dir: 'ltr' });
```
```pcss
article h3:dir(rtl) {
margin-right: 10px;
}
article h3:dir(ltr) {
margin-left: 10px;
}
/* becomes */
[dir="rtl"] article h3 {
margin-right: 10px;
}
html:not([dir="rtl"]) article h3 {
margin-left: 10px;
}
```
```js
postcssDirPseudoClass({ dir: 'rtl' });
```
```pcss
article h3:dir(rtl) {
margin-right: 10px;
}
article h3:dir(ltr) {
margin-left: 10px;
}
/* becomes */
html:not([dir="ltr"]) article h3 {
margin-right: 10px;
}
[dir="ltr"] article h3 {
margin-left: 10px;
}
```
### shadow
The `shadow` option determines whether the CSS is assumed to be used in Shadow DOM with Custom Elements.
```js
postcssDirPseudoClass({ shadow: true })
```
```pcss
article h3:dir(rtl) {
margin-right: 10px;
}
article h3:dir(ltr) {
margin-left: 10px;
}
/* becomes */
:host-context([dir="rtl"]) article h3 {
margin-right: 10px;
}
:host-context([dir="ltr"]) article h3 {
margin-left: 10px;
}
```
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
[css-url]: https://cssdb.org/#dir-pseudo-class
[discord]: https://discord.gg/bUadyRwkJS
[npm-url]: https://www.npmjs.com/package/postcss-dir-pseudo-class
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Dir Pseudo Class]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class
[Selectors]: https://www.w3.org/TR/selectors-4/#the-dir-pseudo
|
