postcss-dir-pseudo-class

Use the :dir pseudo-class in CSS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-dir-pseudo-class
83058.0.14 months ago7 years agoMinified + gzip package size for postcss-dir-pseudo-class in KB

Readme

PostCSS Dir Pseudo Class PostCSS LogoPostCSS
npm versionnpm-url CSS Standard Statuscss-url Build Statuscli-url Discorddiscord
npm install postcss-dir-pseudo-class --save-dev

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;
}

Maintaining 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:
// 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).

Usage

Add PostCSS Dir Pseudo Class to your project:
npm install postcss postcss-dir-pseudo-class --save-dev

Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssDirPseudoClass = require('postcss-dir-pseudo-class');

postcss([
	postcssDirPseudoClass(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Dir Pseudo Class runs in all Node environments, with special instructions for:

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it 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;
}

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.
postcssDirPseudoClass({ dir: 'ltr' });

article h3:dir(rtl) {
	margin-right: 10px;
}

article h3:dir(ltr) {
	margin-left: 10px;
}

/* becomes */

[dir="rtl"] article h3 {
	margin-right: 10px;
}

html:not([dir="rtl"]) article h3 {
	margin-left: 10px;
}

postcssDirPseudoClass({ dir: 'rtl' });

article h3:dir(rtl) {
	margin-right: 10px;
}

article h3:dir(ltr) {
	margin-left: 10px;
}

/* becomes */

html:not([dir="ltr"]) article h3 {
	margin-right: 10px;
}

[dir="ltr"] article h3 {
	margin-left: 10px;
}

shadow

The shadow option determines whether the CSS is assumed to be used in Shadow DOM with Custom Elements.
postcssDirPseudoClass({ shadow: true })

article h3:dir(rtl) {
	margin-right: 10px;
}

article h3:dir(ltr) {
	margin-left: 10px;
}

/* becomes */

:host-context([dir="rtl"]) article h3 {
	margin-right: 10px;
}

:host-context([dir="ltr"]) article h3 {
	margin-left: 10px;
}