PostCSS Logical Props

PostCSS plugin Converts CSS Logical Property declarations to vanilla CSS in either ltr or rtl versions. It is currently very simplistic in it's determination of how to apply the properties and only supports 1d transforms (left or right).

Should be expected to change as the related spec is still in Editors Draft status.

Currently treats inline-* and block-* identically.

Example transform

.block1 {
    clear: inline-end;
    border-block-start: 2px solid blue;
    float: inline-start;
    padding-block-end: 20px;
}

.block2 {
    offset-block-start: 20px;
    position: absolute;
}

LTR version

.block1 {
    clear: right;
    border-left: 2px solid blue;
    float: left;
    padding-right: 20px;
}

.block2 {
    left: 20px;
    position: absolute;
}

RTL version

.block1 {
    clear: left;
    border-right: 2px solid blue;
    float: right;
    padding-left: 20px;
}

.block2 {
    right: 20px;
    position: absolute;
}

Usage

var logicalProps = require('postcss-logical-props');
postcss([ logicalProps({
    dir: 'rtl'
}) ])

Options

• dir Type: String Default: ltr Available Values: ltr || rtl Version: 0.0.1 and above

  Determines if the stylesheet will be modified to sit in an ltr or rtl environment

• replace Type: Boolean Default: true Available Values: true || false Version: 0.0.2 and above

  If true declarations will be replaced by the converted version. If false a new declaration will be added above them

Supported declarations

• Border modes block-start || block-end || inline-start || inline-end example border-block-start: 1px solid #ddd; ltr: border-left: 1px solid #ddd; rtl: border-right: 1px solid #ddd; specification: 3.3. Logical Padding and Border

• Clear modes block-start || block-end || inline-start || inline-end example clear: inline-start; ltr: clear: left rtl: clear: right specification: 1.2. Logical Values for the float and clear Properties

• Float modes block-start || block-end || inline-start || inline-end example float: inline-start; ltr: float: left rtl: float: right specification: 1.2. Logical Values for the float and clear Properties

• Margin modes block-start || block-end || inline-start || inline-end example margin-block-end: 2rem; ltr: margin-right: 2rem; rtl: margin-left: 2rem; specification: 3.2. Logical Margins and Offsets

• Offset modes block-start || block-end || inline-start || inline-end example offset-block-start: 100%; ltr: left: 100%; rtl: right: 100%; specification: 3.2. Logical Margins and Offsets

• Padding modes block-start || block-end || inline-start || inline-end example padding-block-end: 0; ltr: padding-right: 0; rtl: padding-left: 0; specification: 3.3. Logical Padding and Border

• Text align modes start || end example text-align: start; ltr: text-align: left; rtl: text-align: right; specification: 1.3. Logical Values for the text-align Property

See PostCSS docs for examples for your environment.