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;
}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).
Add PostCSS Dir Pseudo Class to your build tool:
npm install postcss-dir-pseudo-class --save-devUse PostCSS Dir Pseudo Class to process your CSS:
import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
postcssDirPseudoClass.process(YOUR_CSS, /* processOptions */, /* pluginOptions */);Add PostCSS to your build tool:
npm install postcss --save-devUse 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);Add PostCSS Loader to your build tool:
npm install postcss-loader --save-devUse 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 */)
]
} }
]
}
]
}
}Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-devUse 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('.')
));Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-devUse 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'
}
}
});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;
}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;
}