README
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
Example
Input
element {
float: inline-start;
}
Output
element {
float: left; /* In case the direction of the document is rtl */
float: inline-start;
}
Usage
Use with grunt-postcss
grunt.initConfig({
postcss: {
options: {
...
processors: [
require('postcss-logical-properties')()
]
}
}
});
Options
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 {}
Roadmap
- Add support for logical directional values:
block-start
andblock-end
. - Add support for logical values for the
text-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
Contributing
Pull requests are welcome. If you add functionality, then please add unit tests to cover it.
License
MIT © Ahmad Alfy