PostCSS Dir Pseudo Class

PostCSS Dir Pseudo Class lets you style by directionality using the :dir() pseudo-class in CSS, following the Selectors specification.

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:

// 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, but understand that this will sometimes increase selector weight by one element (html).

Usage

Add PostCSS Dir Pseudo Class to your project:

npm install postcss-dir-pseudo-class --save-dev

Use PostCSS Dir Pseudo Class to process your CSS:

const postcssDirPseudoClass = require('postcss-dir-pseudo-class');

postcssDirPseudoClass.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

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	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

Options

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.

Here’s an example of using the dir option to presume a left-to-right direction:

postcssDirPseudoClass({ dir: 'ltr' });

.example:dir(ltr) {
  margin-left: 10px;
}

.example:dir(rtl) {
  margin-right: 10px;
}

/* becomes */

html:not([dir="rtl"]) .example {
  margin-left: 10px;
}

[dir="rtl"] .example {
  margin-right: 10px;
}

preserve

The preserve option determines whether the original :dir() rule should remain in the CSS. By default, the original rule is not preserved.

postcssDirPseudoClass({ preserve: true });

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;
}