postcss-logical-properties

Transform start/end properties to left/right depending on LTR or RTL writing directions of the document. Currently supporting:

float: inline-start || inline-end
clear: inline-start || inline-end
text-align: start || end

More information about logical properties can be on the CSS Working Group Logical Porprties Draft

Install

With npm do:

npm install postcss-logical-properties --save-dev

element {
  float: inline-start;
}

element {
  float: left; /* In case the direction of the document is ltr */
  float: inline-start;
}

grunt.initConfig({
  postcss: {
    options: {
      ...
      processors: [
        require('postcss-logical-properties')()
      ]
    }
  }
});

Type: Object | Null Default: {rootDir: 'ltr', replace: false, html: true}

rootDir the root element direction. Can be ltr or rtl. PostCSS-logical-properties also tries to get the root direction from CSS (html or :root) and overrides this option. Use html option to disable this behaviour.
replace replaces rules containing the logical properties instead of adding fallbacks.
html overrides root direction from CSS html {} or :root {}

Add support for logical directional values: block-start and block-end.
~~Add support for logical values of the text-align property (start and end).~~
Add support for logical margins and offsets: the margin- and offset- (block-start, block-end, inline-start and inline-end properties).
Add support for logical padding and border: the padding- and border-*- (block-start, block-end, inline-start and inline-end properties).
Add support for shorthand properties with logical Keyword (padding, margin).
Add option to create fallbacks for the opposite direction of the document.
Write tests

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.