postcss-logical-properties
![Dependency Status](https://camo.githubusercontent.com/06c99f44c3dfe57a8b30a37a17a845089256bd8673795859ac4b9369d68a9b0c/68747470733a2f2f67656d6e617369756d2e636f6d2f61686d6164616c66792f706f73746373732d6c6f676963616c2d70726f706572746965732e737667)
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
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 beltr
orrtl
. PostCSS-logical-properties also tries to get the root direction from CSS (html
or:root
) and overrides this option. Usehtml
option to disable this behaviour.replace
replaces rules containing the logical properties instead of adding fallbacks.html
overrides root direction from CSShtml {}
or:root {}
- Add support for logical directional values:
block-start
andblock-end
. Add support for logical values of thetext-align
property (start
andend
).- Add support for logical margins and offsets: the
margin-
andoffset-
(block-start
,block-end
,inline-start
andinline-end
properties). - Add support for logical padding and border: the
padding-
andborder-*-
(block-start
,block-end
,inline-start
andinline-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.
MIT © Ahmad Alfy