PostCSS :dir()
PostCSS :dir() lets you use the :dir
pseudo-class in CSS.
.example:dir(rtl) {
margin-right: 10px;
}
.example:dir(ltr) {
margin-left: 10px;
}
[dir="rtl"] .example {
margin-right: 10px;
}
[dir="ltr"] .example {
margin-left: 10px;
}
If your browserslist already supports the :dir
pseudo-class, this plugin
will not change your CSS. You can learn more this by reading about the
browsers
option.
PostCSS :dir() does not change selector weight, but does require 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 force one via
JavaScript, you can still get around this by presuming a direction in your CSS
using the dir
option, but know that this will increase
selector weight by one element (html
).
Usage
Add PostCSS :dir() to your build tool:
npm install postcss-dir-pseudo-class --save-dev
Node
Use PostCSS :dir() to process your CSS:
require('postcss-dir-pseudo-class').process(YOUR_CSS);
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PostCSS :dir() as a plugin:
postcss([
require('postcss-dir-pseudo-class')()
]).process(YOUR_CSS);
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PostCSS :dir() in your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-dir-pseudo-class')()
])
).pipe(
gulp.dest('.')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PostCSS :dir() in your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-dir-pseudo-class')()
]
},
dist: {
src: '*.css'
}
}
});
browsers option
If your browserslist already supports the :dir
pseudo-class, this plugin
will not change your CSS. While only Firefox currently supports :dir
, this
will surely improve over time.
Here’s an example of a package.json
using a browserslist that would fully
support the :dir
pseudo-class:
{
"browserslist": "firefox >= 49"
}
And here’s an example of using the browsers
option to accomplish the same
thing:
require('postcss-dir-pseudo-class')({
browsers: 'firefox >= 49'
});
In both of these examples, the CSS would remain unchanged.
.example:dir(rtl) {
margin-right: 10px;
}
.example:dir(rtl) {
margin-right: 10px;
}
dir option
By default, this plugin requires you to specify a direction [dir]
attribute
in your HTML, preferably on the html
element. If you prefer not to, you
can presume a direction in your CSS using the dir
option.
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;
}
:not([dir="rtl"]) .example {
margin-left: 10px;
}
[dir="rtl"] .example {
margin-right: 10px;
}
Note: The :root
pseudo-class is added here to preserve the weight of the
original selector.