postcss-logical
Advanced tools
Comparing version 3.0.0 to 4.0.0
# Changes to PostCSS Logical Properties | ||
### 4.0.0 (June 5, 2019) | ||
- Added: Logical border-radius properties, which include | ||
`border-end-end-radius`, `border-end-start-radius`, `border-start-end-radius`, | ||
and `border-start-start-radius`. | ||
- Removed: All unknown logical properties, which include `border-end`, | ||
`border-end-color`, `border-end-style`, `border-end-width`, `border-start`, | ||
`border-start-color`, `border-start-style`, `border-start-width`, `inset-end`, | ||
`inset-start`, `margin-end`, `margin-start`, `padding-end`, `padding-start` | ||
and `border` with `logical`. | ||
- Updated: `transition` and `transition-property` to support the changes. | ||
- Updated: `postcss` to 7.0.16 (patch) | ||
- Updated: Node 8+ compatibility (major) | ||
### 3.0.0 (September 20, 2018) | ||
@@ -4,0 +18,0 @@ |
686
index.cjs.js
@@ -1,3 +0,1 @@ | ||
'use strict'; | ||
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
@@ -17,56 +15,4 @@ | ||
const matchLogical = /^\s*logical\s+/i; | ||
const matchLogicalBorder = /^border(-width|-style|-color)?$/i; | ||
const matchLogicalBorderSide = /^border-(block|block-start|block-end|inline|inline-start|inline-end|start|end)(-(width|style|color))?$/i; | ||
const matchLogicalBorderSide = /^border-(block|block-start|block-end|inline|inline-start|inline-end)(-(width|style|color))?$/i; | ||
var transformBorder = { | ||
// border | ||
'border': (decl, values, dir) => { | ||
const isLogical = matchLogical.test(values[0]); | ||
if (isLogical) { | ||
values[0] = values[0].replace(matchLogical, ''); | ||
} | ||
const ltrDecls = [decl.clone({ | ||
prop: `border-top${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[0] | ||
}), decl.clone({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[1] || values[0] | ||
}), decl.clone({ | ||
prop: `border-bottom${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[2] || values[0] | ||
}), decl.clone({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[3] || values[1] || values[0] | ||
})]; | ||
const rtlDecls = [decl.clone({ | ||
prop: `border-top${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[0] | ||
}), decl.clone({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[1] || values[0] | ||
}), decl.clone({ | ||
prop: `border-bottom${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[2] || values[0] | ||
}), decl.clone({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[3] || values[1] || values[0] | ||
})]; | ||
return isLogical ? 1 === values.length ? decl.clone({ | ||
value: decl.value.replace(matchLogical, '') | ||
}) : !values[3] || values[3] === values[1] ? [decl.clone({ | ||
prop: `border-top${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[0] | ||
}), decl.clone({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[3] || values[1] || values[0] | ||
}), decl.clone({ | ||
prop: `border-bottom${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[2] || values[0] | ||
}), decl.clone({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorder, '$1')}`, | ||
value: values[1] || values[0] | ||
})] : 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)] : null; | ||
}, | ||
// border-block | ||
@@ -82,7 +28,7 @@ 'border-block': (decl, values) => [decl.clone({ | ||
'border-block-start': decl => { | ||
decl.prop = 'border-top'; | ||
decl.prop = `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`; | ||
}, | ||
// border-block-end | ||
'border-block-end': decl => { | ||
decl.prop = 'border-bottom'; | ||
decl.prop = `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`; | ||
}, | ||
@@ -106,3 +52,3 @@ // border-inline | ||
const isLTR = 1 === values.length || 2 === values.length && values[0] === values[1]; | ||
return isLTR ? ltrDecls : 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
return isLTR ? ltrDecls : dir === 'ltr' ? ltrDecls : dir === 'rtl' ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
}, | ||
@@ -117,3 +63,3 @@ // border-inline-start | ||
}); | ||
return 'ltr' === dir ? ltrDecl : 'rtl' === dir ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
return dir === 'ltr' ? ltrDecl : dir === 'rtl' ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
}, | ||
@@ -128,42 +74,99 @@ // border-inline-end | ||
}); | ||
return 'ltr' === dir ? ltrDecl : 'rtl' === dir ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
}, | ||
// border-start | ||
'border-start': (decl, values, dir) => { | ||
const ltrDecls = [decl.clone({ | ||
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[0] | ||
}), decl.clone({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[1] || values[0] | ||
})]; | ||
const rtlDecls = [decl.clone({ | ||
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[0] | ||
}), decl.clone({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[1] || values[0] | ||
})]; | ||
return 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
}, | ||
// border-end | ||
'border-end': (decl, values, dir) => { | ||
const ltrDecls = [decl.clone({ | ||
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[0] | ||
}), decl.clone({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[1] || values[0] | ||
})]; | ||
const rtlDecls = [decl.clone({ | ||
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[0] | ||
}), decl.clone({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[1] || values[0] | ||
})]; | ||
return 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
return dir === 'ltr' ? ltrDecl : dir === 'rtl' ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
} | ||
}; | ||
const logicalRadii = /^(border-)(end-end|end-start|start-end|start-start)(-radius)$/i; | ||
const ltrRadii = { | ||
'end-end': 'bottom-right', | ||
'end-start': 'bottom-left', | ||
'start-end': 'top-right', | ||
'start-start': 'top-left' | ||
}; | ||
const rtlRadii = { | ||
'end-end': 'bottom-left', | ||
'end-start': 'bottom-right', | ||
'start-end': 'top-left', | ||
'start-start': 'top-right' | ||
}; | ||
var transformBorderRadius = ((decl, values, dir) => { | ||
const ltrDecl = decl.clone({ | ||
prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${ltrRadii[direction]}${suffix}`) | ||
}); | ||
if (dir === 'ltr') { | ||
return ltrDecl; | ||
} | ||
const rtlDecl = decl.clone({ | ||
prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${rtlRadii[direction]}${suffix}`) | ||
}); | ||
if (dir === 'rtl') { | ||
return rtlDecl; | ||
} | ||
return [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
}); | ||
var reduceValues = (values => { | ||
const reducedValues = values.slice(); // reduce [A, B, C, B] to [A, B, C] | ||
if (reducedValues.length === 4 && reducedValues[3] === reducedValues[1]) { | ||
reducedValues.pop(); | ||
} // reduce [A, B, A] to [A, B] | ||
if (reducedValues.length === 3 && reducedValues[2] === reducedValues[0]) { | ||
reducedValues.pop(); | ||
} // reduce [A, A] to [A] | ||
if (reducedValues.length === 2 && reducedValues[1] === reducedValues[0]) { | ||
reducedValues.pop(); | ||
} | ||
return reducedValues; | ||
}); | ||
var transformDirectionalShorthands = ((decl, values, dir) => { | ||
if ('logical' !== values[0]) { | ||
return null; | ||
} // get logical directions as all, inline, block-end, then inline-end | ||
const [, all, inline, blockEnd, inlineEnd] = values; // get left-to-right relative directions from logical directions as: | ||
// → top from all | ||
// → right from inline-end, inline, or all | ||
// → bottom from block-end, block, or all | ||
// → left from inline, or all | ||
const ltrValues = reduceValues([all, inlineEnd || inline || all, blockEnd || all, inline || all]); | ||
const ltrDecl = decl.clone({ | ||
value: ltrValues.join(' ') | ||
}); // return the ltr values if the values are flow agnostic (where no second inline value was needed) | ||
const isFlowAgnostic = ltrValues.length < 4; | ||
if (isFlowAgnostic || dir === 'ltr') { | ||
return ltrDecl; | ||
} // get right-to-left relative directions from logical directions as: | ||
// → top from all | ||
// → right from inline, or all | ||
// → bottom from block-end, block, or all | ||
// → left from inline-end, inline, or all | ||
const rtlValues = reduceValues([all, inline || all, blockEnd || all, inlineEnd || inline || all]); | ||
const rtlDecl = decl.clone({ | ||
value: rtlValues.join(' ') | ||
}); | ||
if (dir === 'rtl') { | ||
return rtlDecl; | ||
} | ||
return [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
}); | ||
var transformFloat = ((decl, values, dir) => { | ||
@@ -176,3 +179,3 @@ const lDecl = decl.clone({ | ||
}); | ||
return /^inline-start$/i.test(decl.value) ? 'ltr' === dir ? lDecl : 'rtl' === dir ? rDecl : [cloneRule(decl, 'ltr').append(lDecl), cloneRule(decl, 'rtl').append(rDecl)] : /^inline-end$/i.test(decl.value) ? 'ltr' === dir ? rDecl : 'rtl' === dir ? lDecl : [cloneRule(decl, 'ltr').append(rDecl), cloneRule(decl, 'rtl').append(lDecl)] : null; | ||
return /^inline-start$/i.test(decl.value) ? dir === 'ltr' ? lDecl : dir === 'rtl' ? rDecl : [cloneRule(decl, 'ltr').append(lDecl), cloneRule(decl, 'rtl').append(rDecl)] : /^inline-end$/i.test(decl.value) ? dir === 'ltr' ? rDecl : dir === 'rtl' ? lDecl : [cloneRule(decl, 'ltr').append(rDecl), cloneRule(decl, 'rtl').append(lDecl)] : null; | ||
}); | ||
@@ -224,3 +227,3 @@ | ||
})]; | ||
return isLTR || 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
return isLTR || dir === 'ltr' ? ltrDecls : dir === 'rtl' ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
}); | ||
@@ -259,3 +262,3 @@ | ||
const isLTR = 1 === values.length || 2 === values.length && values[0] === values[1]; | ||
return isLTR ? ltrDecls : 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
return isLTR ? ltrDecls : dir === 'ltr' ? ltrDecls : dir === 'rtl' ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
}, | ||
@@ -266,3 +269,3 @@ // inset-inline-start, margin-inline-start, padding-inline-start | ||
const rtlDecl = cloneDecl(decl, '-right', decl.value); | ||
return 'ltr' === dir ? ltrDecl : 'rtl' === dir ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
return dir === 'ltr' ? ltrDecl : dir === 'rtl' ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
}, | ||
@@ -273,41 +276,17 @@ // inset-inline-end, margin-inline-end, padding-inline-end | ||
const rtlDecl = cloneDecl(decl, '-left', decl.value); | ||
return 'ltr' === dir ? ltrDecl : 'rtl' === dir ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
}, | ||
// inset-start, margin-start, padding-start | ||
'start': (decl, values, dir) => { | ||
const ltrDecls = [cloneDecl(decl, '-top', values[0]), cloneDecl(decl, '-left', values[1] || values[0])]; | ||
const rtlDecls = [cloneDecl(decl, '-top', values[0]), cloneDecl(decl, '-right', values[1] || values[0])]; | ||
return 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
}, | ||
// inset-end, margin-end, padding-end | ||
'end': (decl, values, dir) => { | ||
const ltrDecls = [cloneDecl(decl, '-bottom', values[0]), cloneDecl(decl, '-right', values[1] || values[0])]; | ||
const rtlDecls = [cloneDecl(decl, '-bottom', values[0]), cloneDecl(decl, '-left', values[1] || values[0])]; | ||
return 'ltr' === dir ? ltrDecls : 'rtl' === dir ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
return dir === 'ltr' ? ltrDecl : dir === 'rtl' ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
} | ||
}; | ||
var matchSize = /^(min-|max-)?(block|inline)-(size)$/i; | ||
var transformSize = (decl => { | ||
decl.prop = decl.prop.replace(matchSize, ($0, minmax, flow) => `${minmax || ''}${'block' === flow ? 'height' : 'width'}`); | ||
}); | ||
var transformSpacing = ((decl, values, dir) => { | ||
if ('logical' !== values[0]) { | ||
return null; | ||
var transformSize = { | ||
// block-size | ||
'block-size': decl => { | ||
decl.prop = 'width'; | ||
}, | ||
// inline-size | ||
'inline-size': decl => { | ||
decl.prop = 'height'; | ||
} | ||
}; | ||
const isLTR = !values[4] || values[4] === values[2]; | ||
const ltrDecl = decl.clone({ | ||
value: [values[1], values[4] || values[2] || values[1], values[3] || values[1], values[2] || values[1]].join(' ') | ||
}); | ||
const rtlDecl = decl.clone({ | ||
value: [values[1], values[2] || values[1], values[3] || values[1], values[4] || values[2] || values[1]].join(' ') | ||
}); | ||
return isLTR ? decl.clone({ | ||
value: decl.value.replace(/^\s*logical\s+/i, '') | ||
}) : 'ltr' === dir ? ltrDecl : 'rtl' === dir ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
}); | ||
var transformTextAlign = ((decl, values, dir) => { | ||
@@ -320,3 +299,3 @@ const lDecl = decl.clone({ | ||
}); | ||
return /^start$/i.test(decl.value) ? 'ltr' === dir ? lDecl : 'rtl' === dir ? rDecl : [cloneRule(decl, 'ltr').append(lDecl), cloneRule(decl, 'rtl').append(rDecl)] : /^end$/i.test(decl.value) ? 'ltr' === dir ? rDecl : 'rtl' === dir ? lDecl : [cloneRule(decl, 'ltr').append(rDecl), cloneRule(decl, 'rtl').append(lDecl)] : null; | ||
return /^start$/i.test(decl.value) ? dir === 'ltr' ? lDecl : dir === 'rtl' ? rDecl : [cloneRule(decl, 'ltr').append(lDecl), cloneRule(decl, 'rtl').append(rDecl)] : /^end$/i.test(decl.value) ? dir === 'ltr' ? rDecl : dir === 'rtl' ? lDecl : [cloneRule(decl, 'ltr').append(rDecl), cloneRule(decl, 'rtl').append(lDecl)] : null; | ||
}); | ||
@@ -330,5 +309,2 @@ | ||
} | ||
function splitBySlash(string, isTrimmed) { | ||
return splitByRegExp(string, /^\/$/, isTrimmed); | ||
} | ||
@@ -422,9 +398,94 @@ function splitByRegExp(string, re, isTrimmed) { | ||
}); | ||
return ltrValues.length && 'ltr' === dir ? ltrDecl : rtlValues.length && 'rtl' === dir ? rtlDecl : ltrDecl.value !== rtlDecl.value ? [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)] : null; | ||
return ltrValues.length && dir === 'ltr' ? ltrDecl : rtlValues.length && dir === 'rtl' ? rtlDecl : ltrDecl.value !== rtlDecl.value ? [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)] : null; | ||
}); | ||
const valueMap = { | ||
'border-block': { | ||
ltr: ['border-top', 'border-bottom'], | ||
rtl: ['border-top', 'border-bottom'] | ||
// Logical Height and Logical Width | ||
'block-size': { | ||
ltr: ['height'], | ||
rtl: ['height'] | ||
}, | ||
'inline-size': { | ||
ltr: ['width'], | ||
rtl: ['width'] | ||
}, | ||
// Flow-relative Margins | ||
'margin-block-end': { | ||
ltr: ['margin-bottom'], | ||
rtl: ['margin-bottom'] | ||
}, | ||
'margin-block-start': { | ||
ltr: ['margin-top'], | ||
rtl: ['margin-top'] | ||
}, | ||
'margin-block': { | ||
ltr: ['margin-top', 'margin-bottom'], | ||
rtl: ['margin-top', 'margin-bottom'] | ||
}, | ||
'margin-inline-end': { | ||
ltr: ['margin-right'], | ||
rtl: ['margin-left'] | ||
}, | ||
'margin-inline-start': { | ||
ltr: ['margin-left'], | ||
rtl: ['margin-right'] | ||
}, | ||
'margin-inline': { | ||
ltr: ['margin-left', 'margin-right'], | ||
rtl: ['margin-left', 'margin-right'] | ||
}, | ||
// Flow-relative Offsets | ||
'inset-block-end': { | ||
ltr: ['bottom'], | ||
rtl: ['bottom'] | ||
}, | ||
'inset-block-start': { | ||
ltr: ['top'], | ||
rtl: ['top'] | ||
}, | ||
'inset-block': { | ||
ltr: ['top', 'bottom'], | ||
rtl: ['top', 'bottom'] | ||
}, | ||
'inset-inline-end': { | ||
ltr: ['right'], | ||
rtl: ['left'] | ||
}, | ||
'inset-inline-start': { | ||
ltr: ['left'], | ||
rtl: ['right'] | ||
}, | ||
'inset-inline': { | ||
ltr: ['left', 'right'], | ||
rtl: ['left', 'right'] | ||
}, | ||
'inset': { | ||
ltr: ['top', 'right', 'bottom', 'left'], | ||
rtl: ['top', 'right', 'bottom', 'left'] | ||
}, | ||
// Flow-relative Padding | ||
'padding-block-end': { | ||
ltr: ['padding-bottom'], | ||
rtl: ['padding-bottom'] | ||
}, | ||
'padding-block-start': { | ||
ltr: ['padding-top'], | ||
rtl: ['padding-top'] | ||
}, | ||
'padding-block': { | ||
ltr: ['padding-top', 'padding-bottom'], | ||
rtl: ['padding-top', 'padding-bottom'] | ||
}, | ||
'padding-inline-end': { | ||
ltr: ['padding-right'], | ||
rtl: ['padding-left'] | ||
}, | ||
'padding-inline-start': { | ||
ltr: ['padding-left'], | ||
rtl: ['padding-right'] | ||
}, | ||
'padding-inline': { | ||
ltr: ['padding-left', 'padding-right'], | ||
rtl: ['padding-left', 'padding-right'] | ||
}, | ||
// Flow-relative Borders | ||
'border-block-color': { | ||
@@ -434,6 +495,2 @@ ltr: ['border-top-color', 'border-bottom-color'], | ||
}, | ||
'border-block-end': { | ||
ltr: ['border-bottom'], | ||
rtl: ['border-bottom'] | ||
}, | ||
'border-block-end-color': { | ||
@@ -451,5 +508,5 @@ ltr: ['border-bottom-color'], | ||
}, | ||
'border-block-start': { | ||
ltr: ['border-top'], | ||
rtl: ['border-top'] | ||
'border-block-end': { | ||
ltr: ['border-bottom'], | ||
rtl: ['border-bottom'] | ||
}, | ||
@@ -468,2 +525,6 @@ 'border-block-start-color': { | ||
}, | ||
'border-block-start': { | ||
ltr: ['border-top'], | ||
rtl: ['border-top'] | ||
}, | ||
'border-block-style': { | ||
@@ -477,22 +538,6 @@ ltr: ['border-top-style', 'border-bottom-style'], | ||
}, | ||
'border-end': { | ||
ltr: ['border-bottom', 'border-right'], | ||
rtl: ['border-bottom', 'border-left'] | ||
'border-block': { | ||
ltr: ['border-top', 'border-bottom'], | ||
rtl: ['border-top', 'border-bottom'] | ||
}, | ||
'border-end-color': { | ||
ltr: ['border-bottom-color', 'border-right-color'], | ||
rtl: ['border-bottom-color', 'border-left-color'] | ||
}, | ||
'border-end-style': { | ||
ltr: ['border-bottom-style', 'border-right-style'], | ||
rtl: ['border-bottom-style', 'border-left-style'] | ||
}, | ||
'border-end-width': { | ||
ltr: ['border-bottom-width', 'border-right-width'], | ||
rtl: ['border-bottom-width', 'border-left-width'] | ||
}, | ||
'border-inline': { | ||
ltr: ['border-left', 'border-right'], | ||
rtl: ['border-left', 'border-right'] | ||
}, | ||
'border-inline-color': { | ||
@@ -502,6 +547,2 @@ ltr: ['border-left-color', 'border-right-color'], | ||
}, | ||
'border-inline-end': { | ||
ltr: ['border-right'], | ||
rtl: ['border-left'] | ||
}, | ||
'border-inline-end-color': { | ||
@@ -519,5 +560,5 @@ ltr: ['border-right-color'], | ||
}, | ||
'border-inline-start': { | ||
ltr: ['border-left'], | ||
rtl: ['border-right'] | ||
'border-inline-end': { | ||
ltr: ['border-right'], | ||
rtl: ['border-left'] | ||
}, | ||
@@ -536,2 +577,6 @@ 'border-inline-start-color': { | ||
}, | ||
'border-inline-start': { | ||
ltr: ['border-left'], | ||
rtl: ['border-right'] | ||
}, | ||
'border-inline-style': { | ||
@@ -545,220 +590,133 @@ ltr: ['border-left-style', 'border-right-style'], | ||
}, | ||
'border-start': { | ||
ltr: ['border-top', 'border-left'], | ||
rtl: ['border-top', 'border-right'] | ||
'border-inline': { | ||
ltr: ['border-left', 'border-right'], | ||
rtl: ['border-left', 'border-right'] | ||
}, | ||
'border-start-color': { | ||
ltr: ['border-top-color', 'border-left-color'], | ||
rtl: ['border-top-color', 'border-right-color'] | ||
// Flow-relative Corner Rounding | ||
'border-end-end-radius': { | ||
ltr: ['border-bottom-right-radius'], | ||
rtl: ['border-bottom-left-radius'] | ||
}, | ||
'border-start-style': { | ||
ltr: ['border-top-style', 'border-left-style'], | ||
rtl: ['border-top-style', 'border-right-style'] | ||
'border-end-start-radius': { | ||
ltr: ['border-bottom-left-radius'], | ||
rtl: ['border-bottom-right-radius'] | ||
}, | ||
'border-start-width': { | ||
ltr: ['border-top-width', 'border-left-width'], | ||
rtl: ['border-top-width', 'border-right-width'] | ||
'border-start-end-radius': { | ||
ltr: ['border-top-right-radius'], | ||
rtl: ['border-top-left-radius'] | ||
}, | ||
'block-size': { | ||
ltr: ['height'], | ||
rtl: ['height'] | ||
}, | ||
'inline-size': { | ||
ltr: ['width'], | ||
rtl: ['width'] | ||
}, | ||
'inset': { | ||
ltr: ['top', 'right', 'bottom', 'left'], | ||
rtl: ['top', 'right', 'bottom', 'left'] | ||
}, | ||
'inset-block': { | ||
ltr: ['top', 'bottom'], | ||
rtl: ['top', 'bottom'] | ||
}, | ||
'inset-block-start': { | ||
ltr: ['top'], | ||
rtl: ['top'] | ||
}, | ||
'inset-block-end': { | ||
ltr: ['bottom'], | ||
rtl: ['bottom'] | ||
}, | ||
'inset-end': { | ||
ltr: ['bottom', 'right'], | ||
rtl: ['bottom', 'left'] | ||
}, | ||
'inset-inline': { | ||
ltr: ['left', 'right'], | ||
rtl: ['left', 'right'] | ||
}, | ||
'inset-inline-start': { | ||
ltr: ['left'], | ||
rtl: ['right'] | ||
}, | ||
'inset-inline-end': { | ||
ltr: ['right'], | ||
rtl: ['left'] | ||
}, | ||
'inset-start': { | ||
ltr: ['top', 'left'], | ||
rtl: ['top', 'right'] | ||
}, | ||
'margin-block': { | ||
ltr: ['margin-top', 'margin-bottom'], | ||
rtl: ['margin-top', 'margin-bottom'] | ||
}, | ||
'margin-block-start': { | ||
ltr: ['margin-top'], | ||
rtl: ['margin-top'] | ||
}, | ||
'margin-block-end': { | ||
ltr: ['margin-bottom'], | ||
rtl: ['margin-bottom'] | ||
}, | ||
'margin-end': { | ||
ltr: ['margin-bottom', 'margin-right'], | ||
rtl: ['margin-bottom', 'margin-left'] | ||
}, | ||
'margin-inline': { | ||
ltr: ['margin-left', 'margin-right'], | ||
rtl: ['margin-left', 'margin-right'] | ||
}, | ||
'margin-inline-start': { | ||
ltr: ['margin-left'], | ||
rtl: ['margin-right'] | ||
}, | ||
'margin-inline-end': { | ||
ltr: ['margin-right'], | ||
rtl: ['margin-left'] | ||
}, | ||
'margin-start': { | ||
ltr: ['margin-top', 'margin-left'], | ||
rtl: ['margin-top', 'margin-right'] | ||
}, | ||
'padding-block': { | ||
ltr: ['padding-top', 'padding-bottom'], | ||
rtl: ['padding-top', 'padding-bottom'] | ||
}, | ||
'padding-block-start': { | ||
ltr: ['padding-top'], | ||
rtl: ['padding-top'] | ||
}, | ||
'padding-block-end': { | ||
ltr: ['padding-bottom'], | ||
rtl: ['padding-bottom'] | ||
}, | ||
'padding-end': { | ||
ltr: ['padding-bottom', 'padding-right'], | ||
rtl: ['padding-bottom', 'padding-left'] | ||
}, | ||
'padding-inline': { | ||
ltr: ['padding-left', 'padding-right'], | ||
rtl: ['padding-left', 'padding-right'] | ||
}, | ||
'padding-inline-start': { | ||
ltr: ['padding-left'], | ||
rtl: ['padding-right'] | ||
}, | ||
'padding-inline-end': { | ||
ltr: ['padding-right'], | ||
rtl: ['padding-left'] | ||
}, | ||
'padding-start': { | ||
ltr: ['padding-top', 'padding-left'], | ||
rtl: ['padding-top', 'padding-right'] | ||
'border-start-start-radius': { | ||
ltr: ['border-top-left-radius'], | ||
rtl: ['border-top-right-radius'] | ||
} | ||
}; | ||
var matchSupportedProperties = /^(?:(inset|margin|padding)(?:-(block|block-start|block-end|inline|inline-start|inline-end|start|end))|(min-|max-)?(block|inline)-(size))$/i; | ||
// tooling | ||
const transforms = { | ||
'border': transformBorder['border'], | ||
'border-width': transformBorder['border'], | ||
'border-style': transformBorder['border'], | ||
'border-color': transformBorder['border'], | ||
// Flow-Relative Values | ||
'clear': transformFloat, | ||
'float': transformFloat, | ||
'resize': transformResize, | ||
'text-align': transformTextAlign, | ||
// Logical Height and Logical Width | ||
'block-size': transformSize['block-size'], | ||
'inline-size': transformSize['inline-size'], | ||
// Flow-relative Margins | ||
'margin': transformDirectionalShorthands, | ||
'margin-inline': transformSide['inline'], | ||
'margin-inline-end': transformSide['inline-end'], | ||
'margin-inline-start': transformSide['inline-start'], | ||
'margin-block': transformSide['block'], | ||
'margin-block-end': transformSide['block-end'], | ||
'margin-block-start': transformSide['block-start'], | ||
// Flow-relative Offsets | ||
'inset': transformInset, | ||
'inset-inline': transformSide['inline'], | ||
'inset-inline-end': transformSide['inline-end'], | ||
'inset-inline-start': transformSide['inline-start'], | ||
'inset-block': transformSide['block'], | ||
'inset-block-end': transformSide['block-end'], | ||
'inset-block-start': transformSide['block-start'], | ||
// Flow-relative Padding | ||
'padding': transformDirectionalShorthands, | ||
'padding-inline': transformSide['inline'], | ||
'padding-inline-end': transformSide['inline-end'], | ||
'padding-inline-start': transformSide['inline-start'], | ||
'padding-block': transformSide['block'], | ||
'padding-block-end': transformSide['block-end'], | ||
'padding-block-start': transformSide['block-start'], | ||
// Flow-relative Borders | ||
'border-block': transformBorder['border-block'], | ||
'border-block-color': transformBorder['border-block'], | ||
'border-block-style': transformBorder['border-block'], | ||
'border-block-width': transformBorder['border-block'], | ||
'border-block-style': transformBorder['border-block'], | ||
'border-block-color': transformBorder['border-block'], | ||
'border-block-end': transformBorder['border-block-end'], | ||
'border-block-end-color': transformBorder['border-block-end'], | ||
'border-block-end-style': transformBorder['border-block-end'], | ||
'border-block-end-width': transformBorder['border-block-end'], | ||
'border-block-start': transformBorder['border-block-start'], | ||
'border-block-start-color': transformBorder['border-block-start'], | ||
'border-block-start-style': transformBorder['border-block-start'], | ||
'border-block-start-width': transformBorder['border-block-start'], | ||
'border-block-start-style': transformBorder['border-block-start'], | ||
'border-block-start-color': transformBorder['border-block-start'], | ||
'border-block-end': transformBorder['border-block-end'], | ||
'border-block-end-width': transformBorder['border-block-end'], | ||
'border-block-end-style': transformBorder['border-block-end'], | ||
'border-block-end-color': transformBorder['border-block-end'], | ||
'border-inline': transformBorder['border-inline'], | ||
'border-inline-color': transformBorder['border-inline'], | ||
'border-inline-style': transformBorder['border-inline'], | ||
'border-inline-width': transformBorder['border-inline'], | ||
'border-inline-style': transformBorder['border-inline'], | ||
'border-inline-color': transformBorder['border-inline'], | ||
'border-inline-end': transformBorder['border-inline-end'], | ||
'border-inline-end-color': transformBorder['border-inline-end'], | ||
'border-inline-end-style': transformBorder['border-inline-end'], | ||
'border-inline-end-width': transformBorder['border-inline-end'], | ||
'border-inline-start': transformBorder['border-inline-start'], | ||
'border-inline-start-color': transformBorder['border-inline-start'], | ||
'border-inline-start-style': transformBorder['border-inline-start'], | ||
'border-inline-start-width': transformBorder['border-inline-start'], | ||
'border-inline-start-style': transformBorder['border-inline-start'], | ||
'border-inline-start-color': transformBorder['border-inline-start'], | ||
'border-inline-end': transformBorder['border-inline-end'], | ||
'border-inline-end-width': transformBorder['border-inline-end'], | ||
'border-inline-end-style': transformBorder['border-inline-end'], | ||
'border-inline-end-color': transformBorder['border-inline-end'], | ||
'border-start': transformBorder['border-start'], | ||
'border-start-width': transformBorder['border-start'], | ||
'border-start-style': transformBorder['border-start'], | ||
'border-start-color': transformBorder['border-start'], | ||
'border-end': transformBorder['border-end'], | ||
'border-end-width': transformBorder['border-end'], | ||
'border-end-style': transformBorder['border-end'], | ||
'border-end-color': transformBorder['border-end'], | ||
'clear': transformFloat, | ||
'inset': transformInset, | ||
'margin': transformSpacing, | ||
'padding': transformSpacing, | ||
'block': transformSide['block'], | ||
'block-start': transformSide['block-start'], | ||
'block-end': transformSide['block-end'], | ||
'inline': transformSide['inline'], | ||
'inline-start': transformSide['inline-start'], | ||
'inline-end': transformSide['inline-end'], | ||
'start': transformSide['start'], | ||
'end': transformSide['end'], | ||
'float': transformFloat, | ||
'resize': transformResize, | ||
'size': transformSize, | ||
'text-align': transformTextAlign, | ||
// Flow-relative Corner Rounding | ||
'border-end-end-radius': transformBorderRadius, | ||
'border-end-start-radius': transformBorderRadius, | ||
'border-start-end-radius': transformBorderRadius, | ||
'border-start-start-radius': transformBorderRadius, | ||
// Four-Directional Shorthand Border Properties | ||
'border-color': transformDirectionalShorthands, | ||
'border-style': transformDirectionalShorthands, | ||
'border-width': transformDirectionalShorthands, | ||
// Transition helpers | ||
'transition': transformTransition, | ||
'transition-property': transformTransition | ||
}; // properties that will be split by slash | ||
}; | ||
const transformsRegExp = new RegExp(`^(${Object.keys(transforms).join('|')})$`, 'i'); // properties whose values will not be split | ||
const splitBySlashPropRegExp = /^border(-block|-inline|-start|-end)?(-width|-style|-color)?$/i; // plugin | ||
const unsplitPropRegExp = /^(border-block|border-block-end|border-block-start|border-inline|border-inline-end|border-inline-start)$/i; // plugin | ||
var index = postcss.plugin('postcss-logical-properties', opts => { | ||
const preserve = Boolean(Object(opts).preserve); | ||
const dir = !preserve && typeof Object(opts).dir === 'string' ? /^rtl$/i.test(opts.dir) ? 'rtl' : 'ltr' : false; | ||
opts = Object(opts); | ||
const preserve = Boolean(opts.preserve); | ||
const dir = !preserve && typeof opts.dir === 'string' ? /^rtl$/i.test(opts.dir) ? 'rtl' : 'ltr' : false; | ||
return root => { | ||
root.walkDecls(decl => { | ||
root.walkDecls(transformsRegExp, decl => { | ||
const parent = decl.parent; | ||
const values = splitBySlashPropRegExp.test(decl.prop) ? splitBySlash(decl.value, true) : splitBySpace(decl.value, true); | ||
const prop = decl.prop.replace(matchSupportedProperties, '$2$5').toLowerCase(); | ||
const values = unsplitPropRegExp.test(decl.prop) ? [decl.value] : splitBySpace(decl.value, true); | ||
const prop = decl.prop.toLowerCase(); | ||
const replacer = transforms[prop](decl, values, dir); | ||
if (prop in transforms) { | ||
const replacer = transforms[prop](decl, values, dir); | ||
if (!replacer) { | ||
return; | ||
} | ||
if (replacer) { | ||
[].concat(replacer).forEach(replacement => { | ||
if (replacement.type === 'rule') { | ||
parent.before(replacement); | ||
} else { | ||
decl.before(replacement); | ||
} | ||
}); | ||
[].concat(replacer).forEach(replacement => { | ||
if (replacement.type === 'rule') { | ||
parent.before(replacement); | ||
} else { | ||
decl.before(replacement); | ||
} | ||
}); | ||
if (!preserve) { | ||
decl.remove(); | ||
if (preserve) { | ||
return; | ||
} | ||
if (!parent.nodes.length) { | ||
parent.remove(); | ||
} | ||
} | ||
} | ||
decl.remove(); | ||
if (!parent.nodes.length) { | ||
parent.remove(); | ||
} | ||
@@ -765,0 +723,0 @@ }); |
{ | ||
"name": "postcss-logical", | ||
"version": "3.0.0", | ||
"version": "4.0.0", | ||
"description": "Use logical properties and values in CSS", | ||
@@ -11,38 +11,49 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"main": "index.cjs.js", | ||
"module": "index.es.mjs", | ||
"module": "index.esm.mjs", | ||
"files": [ | ||
"index.cjs.js", | ||
"index.cjs.js.map", | ||
"index.es.mjs", | ||
"index.es.mjs.map" | ||
"index.esm.mjs", | ||
"index.esm.mjs.map" | ||
], | ||
"scripts": { | ||
"build": "rollup --config .rollup.js --silent", | ||
"prepublishOnly": "npm test", | ||
"pretest": "rollup -c .rollup.js --silent", | ||
"test": "echo 'Running tests...'; npm run test:ec && npm run test:js && npm run test:tape", | ||
"pretest:tape": "npm run build", | ||
"test": "npm run test:ec && npm run test:js && npm run test:tape", | ||
"test:ec": "echint --ignore index.*.js test", | ||
"test:js": "eslint *.js --cache --ignore-path .gitignore --quiet", | ||
"test:js": "eslint src/{*,**/*}.js --cache --ignore-path .gitignore --quiet", | ||
"test:tape": "postcss-tape" | ||
}, | ||
"engines": { | ||
"node": ">=6.0.0" | ||
"node": ">=8.0.0" | ||
}, | ||
"dependencies": { | ||
"postcss": "^7.0.2" | ||
"postcss": "^7.0.16" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.1.0", | ||
"@babel/preset-env": "^7.1.0", | ||
"babel-eslint": "^9.0.0", | ||
"echint": "^4.0.1", | ||
"eslint": "^5.6.0", | ||
"eslint-config-dev": "^2.0.0", | ||
"postcss-tape": "^2.2.0", | ||
"@babel/core": "^7.4.5", | ||
"@babel/preset-env": "^7.4.5", | ||
"babel-eslint": "^10.0.1", | ||
"echint": "^4.0.2", | ||
"eslint": "^5.16.0", | ||
"postcss-tape": "^5.0.0", | ||
"pre-commit": "^1.2.2", | ||
"rollup": "^0.66.1", | ||
"rollup-plugin-babel": "^4.0.3" | ||
"rollup": "^1.14.2", | ||
"rollup-plugin-babel": "^4.3.2" | ||
}, | ||
"eslintConfig": { | ||
"extends": "dev", | ||
"parser": "babel-eslint" | ||
"env": { | ||
"browser": true, | ||
"es6": true, | ||
"node": true | ||
}, | ||
"extends": "eslint:recommended", | ||
"parser": "babel-eslint", | ||
"parserOptions": { | ||
"ecmaVersion": 2018, | ||
"impliedStrict": true, | ||
"sourceType": "module" | ||
}, | ||
"root": true | ||
}, | ||
@@ -49,0 +60,0 @@ "keywords": [ |
@@ -85,3 +85,4 @@ # PostCSS Logical Properties and Values [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
`border-inline-start-width`, `border-inline-end-width`, `border-start-width`, | ||
`border-end-width` | ||
`border-end-width`, `border-start-start-radius`, `border-start-end-radius`, | ||
`border-end-start-radius`, `border-end-end-radius` | ||
@@ -88,0 +89,0 @@ #### Logical Offsets |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
9
200
157371
1297
1
Updatedpostcss@^7.0.16