What is postcss-dir-pseudo-class?
The postcss-dir-pseudo-class package is a PostCSS plugin that allows you to use the :dir pseudo-class in CSS, enabling styling based on the directionality of text (e.g., left-to-right or right-to-left). This is particularly useful for creating styles that need to adapt to different language directionality, such as supporting both English (LTR) and Arabic or Hebrew (RTL) without having to write separate CSS rules for each.
What are postcss-dir-pseudo-class's main functionalities?
Directional Styling
Allows styling elements differently based on the text direction. This is useful for creating layouts and designs that adapt to both LTR and RTL languages.
/* Input CSS */
:dir(ltr) .selector { float: left; }
:dir(rtl) .selector { float: right; }
/* Output CSS */
.selector:dir(ltr) { float: left; }
.selector:dir(rtl) { float: right; }
Fallback Support
Generates fallbacks for browsers that do not support the :dir pseudo-class, using the [dir] attribute selector instead. This ensures compatibility across a wider range of browsers.
/* Input CSS */
:dir(ltr) .selector { float: left; }
:dir(rtl) .selector { float: right; }
/* Output CSS with fallback */
[dir='ltr'] .selector { float: left; }
[dir='rtl'] .selector { float: right; }
Other packages similar to postcss-dir-pseudo-class
rtlcss
RTLCSS is a framework for converting Left-To-Right (LTR) CSS to Right-To-Left (RTL). While postcss-dir-pseudo-class focuses on providing directional styling capabilities within CSS, RTLCSS specifically targets the conversion of existing LTR CSS to RTL, making it more suitable for projects that need to automate the generation of RTL stylesheets from their LTR counterparts.
postcss-rtl
Similar to RTLCSS, postcss-rtl is a PostCSS plugin designed to convert LTR CSS to RTL. It offers a different approach and syntax for defining directional styles compared to postcss-dir-pseudo-class, focusing more on the conversion aspect rather than enabling the direct use of :dir pseudo-class in stylesheets.
PostCSS :dir()
PostCSS :dir() lets you use the :dir
pseudo-class in CSS.
.example:dir(ltr) {
margin-left: 10px;
}
[dir="ltr"] .example {
margin-left: 10px;
}
Selector weight remains the same, but this requires you to specify a direction
(dir
) attribute in your 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'
}
}
});