source: trip-planner-front/node_modules/postcss-dir-pseudo-class/README.md@ 8d391a1

Last change on this file since 8d391a1 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 4.3 KB
Line 
1# PostCSS Dir Pseudo Class [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
2
3[![NPM Version][npm-img]][npm-url]
4[![CSS Standard Status][css-img]][css-url]
5[![Build Status][cli-img]][cli-url]
6[![Support Chat][git-img]][git-url]
7
8[PostCSS Dir Pseudo Class] lets you style by directionality using the `:dir()`
9pseudo-class in CSS, following the [Selectors] specification.
10
11```pcss
12article h3:dir(rtl) {
13 margin-right: 10px;
14}
15
16article h3:dir(ltr) {
17 margin-left: 10px;
18}
19
20/* becomes */
21
22[dir="rtl"] article h3 {
23 margin-right: 10px;
24}
25
26[dir="ltr"] article h3 {
27 margin-left: 10px;
28}
29```
30
31### Maintaining Specificity
32
33Using [PostCSS Dir Pseudo Class] will not impact selector weight, but it will
34require having at least one `[dir]` attribute in your HTML. If you don’t have
35_any_ `[dir]` attributes, consider using the following JavaScript:
36
37```js
38// force at least one dir attribute (this can run at any time)
39document.documentElement.dir=document.documentElement.dir||'ltr';
40```
41
42If you absolutely cannot add a `[dir]` attribute in your HTML or even force one
43via JavaScript, you can still work around this by presuming a direction in your
44CSS using the [`dir` option](#dir-option), but understand that this will
45sometimes increase selector weight by one element (`html`).
46
47## Usage
48
49Add [PostCSS Dir Pseudo Class] to your project:
50
51```bash
52npm install postcss-dir-pseudo-class --save-dev
53```
54
55Use [PostCSS Dir Pseudo Class] to process your CSS:
56
57```js
58const postcssDirPseudoClass = require('postcss-dir-pseudo-class');
59
60postcssDirPseudoClass.process(YOUR_CSS /*, processOptions, pluginOptions */);
61```
62
63Or use it as a [PostCSS] plugin:
64
65```js
66const postcss = require('postcss');
67const postcssDirPseudoClass = require('postcss-dir-pseudo-class');
68
69postcss([
70 postcssDirPseudoClass(/* pluginOptions */)
71]).process(YOUR_CSS /*, processOptions */);
72```
73
74[PostCSS Dir Pseudo Class] runs in all Node environments, with special instructions for:
75
76| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
77| --- | --- | --- | --- | --- | --- |
78
79## Options
80
81### dir
82
83The `dir` option allows you presume a direction in your CSS. By default, this
84is not specified and you are required to include a direction `[dir]` attribute
85somewhere in your HTML, preferably on the `html` element.
86
87Here’s an example of using the `dir` option to presume a left-to-right
88direction:
89
90```js
91postcssDirPseudoClass({ dir: 'ltr' });
92```
93
94```pcss
95.example:dir(ltr) {
96 margin-left: 10px;
97}
98
99.example:dir(rtl) {
100 margin-right: 10px;
101}
102
103/* becomes */
104
105html:not([dir="rtl"]) .example {
106 margin-left: 10px;
107}
108
109[dir="rtl"] .example {
110 margin-right: 10px;
111}
112```
113
114### preserve
115
116The `preserve` option determines whether the original `:dir()` rule should
117remain in the CSS. By default, the original rule is not preserved.
118
119```js
120postcssDirPseudoClass({ preserve: true });
121```
122
123```pcss
124article h3:dir(rtl) {
125 margin-right: 10px;
126}
127
128article h3:dir(ltr) {
129 margin-left: 10px;
130}
131
132/* becomes */
133
134[dir="rtl"] article h3 {
135 margin-right: 10px;
136}
137
138article h3:dir(rtl) {
139 margin-right: 10px;
140}
141
142[dir="ltr"] article h3 {
143 margin-left: 10px;
144}
145
146article h3:dir(ltr) {
147 margin-left: 10px;
148}
149```
150
151[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-dir-pseudo-class.svg
152[cli-url]: https://travis-ci.org/jonathantneal/postcss-dir-pseudo-class
153[css-img]: https://cssdb.org/badge/dir-pseudo-class.svg
154[css-url]: https://cssdb.org/#dir-pseudo-class
155[git-img]: https://img.shields.io/badge/support-chat-blue.svg
156[git-url]: https://gitter.im/postcss/postcss
157[npm-img]: https://img.shields.io/npm/v/postcss-dir-pseudo-class.svg
158[npm-url]: https://www.npmjs.com/package/postcss-dir-pseudo-class
159[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-dir-pseudo-class.svg
160[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-dir-pseudo-class
161
162[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
163[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
164[PostCSS]: https://github.com/postcss/postcss
165[PostCSS Loader]: https://github.com/postcss/postcss-loader
166[PostCSS Dir Pseudo Class]: https://github.com/jonathantneal/postcss-dir-pseudo-class
167[Selectors]: https://www.w3.org/TR/selectors-4/#the-dir-pseudo
Note: See TracBrowser for help on using the repository browser.