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.