README
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 aboveDetermines 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 aboveIf true declarations will be replaced by the converted version. If false a new declaration will be added above them
Supported declarations
Border
modesblock-start
||block-end
||inline-start
||inline-end
exampleborder-block-start: 1px solid #ddd;
ltr:border-left: 1px solid #ddd;
rtl:border-right: 1px solid #ddd;
specification: 3.3. Logical Padding and BorderClear
modesblock-start
||block-end
||inline-start
||inline-end
exampleclear: inline-start;
ltr:clear: left
rtl:clear: right
specification: 1.2. Logical Values for the float and clear PropertiesFloat
modesblock-start
||block-end
||inline-start
||inline-end
examplefloat: inline-start;
ltr:float: left
rtl:float: right
specification: 1.2. Logical Values for the float and clear PropertiesMargin
modesblock-start
||block-end
||inline-start
||inline-end
examplemargin-block-end: 2rem;
ltr:margin-right: 2rem;
rtl:margin-left: 2rem;
specification: 3.2. Logical Margins and OffsetsOffset
modesblock-start
||block-end
||inline-start
||inline-end
exampleoffset-block-start: 100%;
ltr:left: 100%;
rtl:right: 100%;
specification: 3.2. Logical Margins and OffsetsPadding
modesblock-start
||block-end
||inline-start
||inline-end
examplepadding-block-end: 0;
ltr:padding-right: 0;
rtl:padding-left: 0;
specification: 3.3. Logical Padding and BorderText align
modesstart
||end
exampletext-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.