PostCSS :dir() lets you use the :dir pseudo-class in CSS.
.example:dir(ltr) {
margin-left: 10px;
}
/* becomes */
[dir="ltr"] .example {
margin-left: 10px;
}Selector weight remains the same, but this requires you to specify a direction
(dir) attribute in your HTML.
Add PostCSS :dir() to your build tool:
npm install postcss-dir-pseudo-class --save-devUse PostCSS :dir() to process your CSS:
require('postcss-dir-pseudo-class').process(YOUR_CSS);Add PostCSS to your build tool:
npm install postcss --save-devUse PostCSS :dir() as a plugin:
postcss([
require('postcss-dir-pseudo-class')()
]).process(YOUR_CSS);Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-devUse 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('.')
);
});Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-devUse PostCSS :dir() in your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-dir-pseudo-class')()
]
},
dist: {
src: '*.css'
}
}
});