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 build tool:

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

Node

Use PostCSS Dir Pseudo Class to process your CSS:

import postcssDirPseudoClass from 'postcss-dir-pseudo-class';

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

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Dir Pseudo Class as a plugin:

import postcss from 'gulp-postcss';
import postcssDirPseudoClass from 'postcss-dir-pseudo-class';

postcss([
  postcssDirPseudoClass(/* pluginOptions */)
]).process(YOUR_CSS);

Webpack

Add PostCSS Loader to your build tool:

npm install postcss-loader --save-dev

Use PostCSS Dir Pseudo Class in your Webpack configuration:

import postcssDirPseudoClass from 'postcss-dir-pseudo-class';

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          { loader: 'postcss-loader', options: {
            ident: 'postcss',
            plugins: () => [
              postcssDirPseudoClass(/* pluginOptions */)
            ]
          } }
        ]
      }
    ]
  }
}

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Dir Pseudo Class in your Gulpfile:

import postcss from 'gulp-postcss';
import postcssDirPseudoClass from 'postcss-dir-pseudo-class';

gulp.task('css', () => gulp.src('./src/*.css').pipe(
  postcss([
    postcssDirPseudoClass(/* pluginOptions */)
  ])
).pipe(
  gulp.dest('.')
));

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Dir Pseudo Class in your Gruntfile:

import postcssDirPseudoClass from 'postcss-dir-pseudo-class';

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
       postcssDirPseudoClass(/* pluginOptions */)
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

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