PostCSS Dir Pseudo Class
PostCSS Dir Pseudo Class lets you use the :dir()
pseudo-class to style by
directionality in CSS, following the Selectors Level 4 specification.
article h3:dir(rtl) {
margin-right: 10px;
}
article h3:dir(ltr) {
margin-left: 10px;
}
[dir="rtl"] article h3 {
margin-right: 10px;
}
[dir="ltr"] article h3 {
margin-left: 10px;
}
Maintain 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:
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);
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()
]).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()
]
} }
]
}
]
}
}
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()
])
).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()
]
},
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:
require('postcss-dir-pseudo-class')({
dir: 'ltr'
});
.example:dir(ltr) {
margin-left: 10px;
}
.example:dir(rtl) {
margin-right: 10px;
}
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 rule is replaced by the fallback.