postcss-logical-props

PostCSS plugin Converts CSS Logical Property declarations to vanilla CSS in either ltr or rtl

Usage no npm install needed!

<script type="module">
  import postcssLogicalProps from 'https://cdn.skypack.dev/postcss-logical-props';
</script>

README

PostCSS Logical Props Build Status

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

See PostCSS docs for examples for your environment.