postcss-logical
Advanced tools
Comparing version 4.0.2 to 5.0.0
799
index.cjs.js
@@ -1,12 +0,18 @@ | ||
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
'use strict'; | ||
var postcss = _interopDefault(require('postcss')); | ||
var postcss = require('postcss'); | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var postcss__default = /*#__PURE__*/_interopDefaultLegacy(postcss); | ||
var cloneRule = ((decl, dir) => { | ||
const rule = Object(decl.parent).type === 'rule' ? decl.parent.clone({ | ||
const rule = Object(decl.parent).type === 'rule' ? decl.parent.cloneBefore({ | ||
raws: {} | ||
}).removeAll() : postcss.rule({ | ||
}).removeAll() : postcss__default['default'].rule({ | ||
selector: '&' | ||
}); | ||
rule.selectors = rule.selectors.map(selector => `${selector}:dir(${dir})`); | ||
rule.assign({ | ||
'selectors': rule.selectors.map(selector => `${selector}:dir(${dir})`) | ||
}); | ||
return rule; | ||
@@ -18,58 +24,130 @@ }); | ||
// border-block | ||
'border-block': (decl, values) => [decl.clone({ | ||
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[0] | ||
}), decl.clone({ | ||
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[0] | ||
})], | ||
'border-block': (decl, values, dir, preserve) => { | ||
decl.cloneBefore({ | ||
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[0] | ||
}); | ||
decl.cloneBefore({ | ||
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[1] || values[0] | ||
}); | ||
clean$8(decl, preserve); | ||
}, | ||
// border-block-start | ||
'border-block-start': decl => { | ||
decl.prop = `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`; | ||
'border-block-start': (decl, values, dir, preserve) => { | ||
decl.cloneBefore({ | ||
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}` | ||
}); | ||
clean$8(decl, preserve); | ||
}, | ||
// border-block-end | ||
'border-block-end': decl => { | ||
decl.prop = `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`; | ||
'border-block-end': (decl, values, dir, preserve) => { | ||
decl.cloneBefore({ | ||
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}` | ||
}); | ||
clean$8(decl, preserve); | ||
}, | ||
// border-inline | ||
'border-inline': (decl, values, dir) => { | ||
const ltrDecls = [decl.clone({ | ||
prop: `border-left${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-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[0] | ||
}), decl.clone({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[1] || values[0] | ||
})]; | ||
'border-inline': (decl, values, dir, preserve) => { | ||
const ltrDecls = () => { | ||
return [decl.cloneBefore({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[0] | ||
}), decl.cloneBefore({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[1] || values[0] | ||
})]; | ||
}; | ||
const rtlDecls = () => { | ||
return [decl.clone({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[0] | ||
}), decl.clone({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`, | ||
value: values[1] || values[0] | ||
})]; | ||
}; | ||
const isLTR = 1 === values.length || 2 === values.length && values[0] === values[1]; | ||
return isLTR ? ltrDecls : dir === 'ltr' ? ltrDecls : dir === 'rtl' ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
if (isLTR || dir === 'ltr') { | ||
ltrDecls(); | ||
clean$8(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
rtlDecls(); | ||
clean$8(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(ltrDecls()); | ||
cloneRule(decl, 'rtl').append(rtlDecls()); | ||
clean$8(decl, preserve); | ||
return; | ||
} | ||
}, | ||
// border-inline-start | ||
'border-inline-start': (decl, values, dir) => { | ||
const ltrDecl = decl.clone({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}` | ||
}); | ||
const rtlDecl = decl.clone({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}` | ||
}); | ||
return dir === 'ltr' ? ltrDecl : dir === 'rtl' ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
'border-inline-start': (decl, values, dir, preserve) => { | ||
const ltrDecl = () => { | ||
return decl.cloneBefore({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}` | ||
}); | ||
}; | ||
const rtlDecl = () => { | ||
return decl.cloneBefore({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}` | ||
}); | ||
}; | ||
if (dir === 'ltr') { | ||
ltrDecl(); | ||
clean$8(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
rtlDecl(); | ||
clean$8(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(ltrDecl()); | ||
cloneRule(decl, 'rtl').append(rtlDecl()); | ||
clean$8(decl, preserve); | ||
return; | ||
} | ||
}, | ||
// border-inline-end | ||
'border-inline-end': (decl, values, dir) => { | ||
const ltrDecl = decl.clone({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}` | ||
}); | ||
const rtlDecl = decl.clone({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}` | ||
}); | ||
return dir === 'ltr' ? ltrDecl : dir === 'rtl' ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
'border-inline-end': (decl, values, dir, preserve) => { | ||
const ltrDecl = () => { | ||
return decl.cloneBefore({ | ||
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}` | ||
}); | ||
}; | ||
const rtlDecl = () => { | ||
return decl.cloneBefore({ | ||
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}` | ||
}); | ||
}; | ||
if (dir === 'ltr') { | ||
ltrDecl(); | ||
clean$8(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
rtlDecl(); | ||
clean$8(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(ltrDecl()); | ||
cloneRule(decl, 'rtl').append(rtlDecl()); | ||
clean$8(decl, preserve); | ||
return; | ||
} | ||
} | ||
}; | ||
function clean$8(decl, preserve) { | ||
if (!preserve) decl.remove(); | ||
} | ||
const logicalRadii = /^(border-)(end-end|end-start|start-end|start-start)(-radius)$/i; | ||
@@ -88,22 +166,36 @@ const ltrRadii = { | ||
}; | ||
var transformBorderRadius = ((decl, values, dir) => { | ||
const ltrDecl = decl.clone({ | ||
prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${ltrRadii[direction]}${suffix}`) | ||
}); | ||
var transformBorderRadius = ((decl, values, dir, preserve) => { | ||
if (dir === 'ltr') { | ||
return ltrDecl; | ||
lDecl$3(decl); | ||
clean$7(decl, preserve); | ||
return; | ||
} | ||
const rtlDecl = decl.clone({ | ||
prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${rtlRadii[direction]}${suffix}`) | ||
}); | ||
if (dir === 'rtl') { | ||
return rtlDecl; | ||
rDecl$3(decl); | ||
clean$7(decl, preserve); | ||
return; | ||
} | ||
return [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
cloneRule(decl, 'ltr').append(lDecl$3(decl)); | ||
cloneRule(decl, 'rtl').append(rDecl$3(decl)); | ||
clean$7(decl, preserve); | ||
}); | ||
function lDecl$3(decl) { | ||
return decl.cloneBefore({ | ||
prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${ltrRadii[direction]}${suffix}`) | ||
}); | ||
} | ||
function rDecl$3(decl) { | ||
return decl.cloneBefore({ | ||
prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${rtlRadii[direction]}${suffix}`) | ||
}); | ||
} | ||
function clean$7(decl, preserve) { | ||
if (!preserve) decl.remove(); | ||
} | ||
var reduceValues = (values => { | ||
@@ -129,3 +221,3 @@ const reducedValues = values.slice(); // reduce [A, B, C, B] to [A, B, C] | ||
var transformDirectionalShorthands = ((decl, values, dir) => { | ||
var transformDirectionalShorthands = ((decl, values, dir, preserve) => { | ||
if ('logical' !== values[0]) { | ||
@@ -143,10 +235,16 @@ return null; | ||
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 ltrDecl = () => { | ||
return decl.cloneBefore({ | ||
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; | ||
ltrDecl(); | ||
clean$6(decl, preserve); | ||
return; | ||
} // get right-to-left relative directions from logical directions as: | ||
@@ -160,75 +258,171 @@ // → top from all | ||
const rtlValues = reduceValues([all, inline || all, blockEnd || all, inlineEnd || inline || all]); | ||
const rtlDecl = decl.clone({ | ||
value: rtlValues.join(' ') | ||
}); | ||
const rtlDecl = () => { | ||
return decl.cloneBefore({ | ||
value: rtlValues.join(' ') | ||
}); | ||
}; | ||
if (dir === 'rtl') { | ||
return rtlDecl; | ||
rtlDecl(); | ||
clean$6(decl, preserve); | ||
return; | ||
} | ||
return [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
cloneRule(decl, 'ltr').append(ltrDecl()); | ||
cloneRule(decl, 'rtl').append(rtlDecl()); | ||
clean$6(decl, preserve); | ||
}); | ||
var transformFloat = ((decl, values, dir) => { | ||
const lDecl = decl.clone({ | ||
function clean$6(decl, preserve) { | ||
if (!preserve) decl.remove(); | ||
} | ||
var transformFloat = ((decl, values, dir, preserve) => { | ||
if (/^inline-start$/i.test(decl.value)) { | ||
if (dir === 'ltr') { | ||
lDecl$2(decl); | ||
clean$5(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
rDecl$2(decl); | ||
clean$5(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(lDecl$2(decl)); | ||
cloneRule(decl, 'rtl').append(rDecl$2(decl)); | ||
clean$5(decl, preserve); | ||
return; | ||
} | ||
} | ||
if (/^inline-end$/i.test(decl.value)) { | ||
if (dir === 'ltr') { | ||
rDecl$2(decl); | ||
clean$5(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
lDecl$2(decl); | ||
clean$5(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(rDecl$2(decl)); | ||
cloneRule(decl, 'rtl').append(lDecl$2(decl)); | ||
clean$5(decl, preserve); | ||
return; | ||
} | ||
} | ||
}); | ||
function lDecl$2(decl) { | ||
return decl.cloneBefore({ | ||
value: 'left' | ||
}); | ||
const rDecl = decl.clone({ | ||
} | ||
function rDecl$2(decl) { | ||
return decl.cloneBefore({ | ||
value: 'right' | ||
}); | ||
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; | ||
}); | ||
} | ||
var transformInset = ((decl, values, dir) => { | ||
function clean$5(decl, preserve) { | ||
if (!preserve) decl.remove(); | ||
} | ||
var transformInset = ((decl, values, dir, preserve) => { | ||
if ('logical' !== values[0]) { | ||
return [decl.clone({ | ||
decl.cloneBefore({ | ||
prop: 'top', | ||
value: values[0] | ||
}), decl.clone({ | ||
}); | ||
decl.cloneBefore({ | ||
prop: 'right', | ||
value: values[1] || values[0] | ||
}), decl.clone({ | ||
}); | ||
decl.cloneBefore({ | ||
prop: 'bottom', | ||
value: values[2] || values[0] | ||
}), decl.clone({ | ||
}); | ||
decl.cloneBefore({ | ||
prop: 'left', | ||
value: values[3] || values[1] || values[0] | ||
})]; | ||
}); | ||
clean$4(decl, preserve); | ||
return; | ||
} | ||
const isLTR = !values[4] || values[4] === values[2]; | ||
const ltrDecls = [decl.clone({ | ||
if (isLTR || dir === 'ltr') { | ||
lDecl$1(decl, values); | ||
clean$4(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
rDecl$1(decl, values); | ||
clean$4(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(lDecl$1(decl, values)); | ||
cloneRule(decl, 'rtl').append(rDecl$1(decl, values)); | ||
clean$4(decl, preserve); | ||
return; | ||
} | ||
}); | ||
function lDecl$1(decl, values) { | ||
return [decl.cloneBefore({ | ||
prop: 'top', | ||
value: values[1] | ||
}), decl.clone({ | ||
}), decl.cloneBefore({ | ||
prop: 'left', | ||
value: values[2] || values[1] | ||
}), decl.clone({ | ||
}), decl.cloneBefore({ | ||
prop: 'bottom', | ||
value: values[3] || values[1] | ||
}), decl.clone({ | ||
}), decl.cloneBefore({ | ||
prop: 'right', | ||
value: values[4] || values[2] || values[1] | ||
})]; | ||
const rtlDecls = [decl.clone({ | ||
} | ||
function rDecl$1(decl, values) { | ||
return [decl.cloneBefore({ | ||
prop: 'top', | ||
value: values[1] | ||
}), decl.clone({ | ||
}), decl.cloneBefore({ | ||
prop: 'right', | ||
value: values[2] || values[1] | ||
}), decl.clone({ | ||
}), decl.cloneBefore({ | ||
prop: 'bottom', | ||
value: values[3] || values[1] | ||
}), decl.clone({ | ||
}), decl.cloneBefore({ | ||
prop: 'left', | ||
value: values[4] || values[2] || values[1] | ||
})]; | ||
return isLTR || dir === 'ltr' ? ltrDecls : dir === 'rtl' ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
} | ||
function clean$4(decl, preserve) { | ||
if (!preserve) decl.remove(); | ||
} | ||
var transformResize = ((decl, values, dir, preserve) => { | ||
if (/^block$/i.test(decl.value)) { | ||
decl.cloneBefore({ | ||
value: 'vertical' | ||
}); | ||
clean$3(decl, preserve); | ||
return; | ||
} else if (/^inline$/i.test(decl.value)) { | ||
decl.cloneBefore({ | ||
value: 'horizontal' | ||
}); | ||
clean$3(decl, preserve); | ||
return; | ||
} | ||
}); | ||
var transformResize = (decl => /^block$/i.test(decl.value) ? decl.clone({ | ||
value: 'vertical' | ||
}) : /^inline$/i.test(decl.value) ? decl.clone({ | ||
value: 'horizontal' | ||
}) : null); | ||
function clean$3(decl, preserve) { | ||
if (!preserve) decl.remove(); | ||
} | ||
@@ -239,3 +433,3 @@ var matchSide = /^(inset|margin|padding)(?:-(block|block-start|block-end|inline|inline-start|inline-end|start|end))$/i; | ||
var cloneDecl = ((decl, suffix, value) => decl.clone({ | ||
var cloneDeclBefore = ((decl, suffix, value) => decl.cloneBefore({ | ||
prop: `${decl.prop.replace(matchSide, '$1')}${suffix}`.replace(matchInsetPrefix, ''), | ||
@@ -247,48 +441,166 @@ value | ||
// inset-block, margin-block, padding-block | ||
'block': (decl, values) => [cloneDecl(decl, '-top', values[0]), cloneDecl(decl, '-bottom', values[1] || values[0])], | ||
'block': (decl, values, dir, preserve) => { | ||
cloneDeclBefore(decl, '-top', values[0]); | ||
cloneDeclBefore(decl, '-bottom', values[1] || values[0]); | ||
clean$2(decl, preserve); | ||
}, | ||
// inset-block-start, margin-block-start, padding-block-start | ||
'block-start': decl => { | ||
decl.prop = decl.prop.replace(matchSide, '$1-top').replace(matchInsetPrefix, ''); | ||
'block-start': (decl, values, dir, preserve) => { | ||
decl.cloneBefore({ | ||
prop: decl.prop.replace(matchSide, '$1-top').replace(matchInsetPrefix, '') | ||
}); | ||
clean$2(decl, preserve); | ||
}, | ||
// inset-block-end, margin-block-end, padding-block-end | ||
'block-end': decl => { | ||
decl.prop = decl.prop.replace(matchSide, '$1-bottom').replace(matchInsetPrefix, ''); | ||
'block-end': (decl, values, dir, preserve) => { | ||
decl.cloneBefore({ | ||
prop: decl.prop.replace(matchSide, '$1-bottom').replace(matchInsetPrefix, '') | ||
}); | ||
clean$2(decl, preserve); | ||
}, | ||
// inset-inline, margin-inline, padding-inline | ||
'inline': (decl, values, dir) => { | ||
const ltrDecls = [cloneDecl(decl, '-left', values[0]), cloneDecl(decl, '-right', values[1] || values[0])]; | ||
const rtlDecls = [cloneDecl(decl, '-right', values[0]), cloneDecl(decl, '-left', values[1] || values[0])]; | ||
'inline': (decl, values, dir, preserve) => { | ||
const ltrDecls = () => { | ||
return [cloneDeclBefore(decl, '-left', values[0]), cloneDeclBefore(decl, '-right', values[1] || values[0])]; | ||
}; | ||
const rtlDecls = () => { | ||
return [cloneDeclBefore(decl, '-right', values[0]), cloneDeclBefore(decl, '-left', values[1] || values[0])]; | ||
}; | ||
const isLTR = 1 === values.length || 2 === values.length && values[0] === values[1]; | ||
return isLTR ? ltrDecls : dir === 'ltr' ? ltrDecls : dir === 'rtl' ? rtlDecls : [cloneRule(decl, 'ltr').append(ltrDecls), cloneRule(decl, 'rtl').append(rtlDecls)]; | ||
if (isLTR || dir === 'ltr') { | ||
ltrDecls(); | ||
clean$2(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
rtlDecls(); | ||
clean$2(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(ltrDecls()); | ||
cloneRule(decl, 'rtl').append(rtlDecls()); | ||
clean$2(decl, preserve); | ||
return; | ||
} | ||
}, | ||
// inset-inline-start, margin-inline-start, padding-inline-start | ||
'inline-start': (decl, values, dir) => { | ||
const ltrDecl = cloneDecl(decl, '-left', decl.value); | ||
const rtlDecl = cloneDecl(decl, '-right', decl.value); | ||
return dir === 'ltr' ? ltrDecl : dir === 'rtl' ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
'inline-start': (decl, values, dir, preserve) => { | ||
const ltrDecl = () => { | ||
return cloneDeclBefore(decl, '-left', decl.value); | ||
}; | ||
const rtlDecl = () => { | ||
return cloneDeclBefore(decl, '-right', decl.value); | ||
}; | ||
if (dir === 'ltr') { | ||
ltrDecl(); | ||
clean$2(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
rtlDecl(); | ||
clean$2(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(ltrDecl()); | ||
cloneRule(decl, 'rtl').append(rtlDecl()); | ||
clean$2(decl, preserve); | ||
return; | ||
} | ||
}, | ||
// inset-inline-end, margin-inline-end, padding-inline-end | ||
'inline-end': (decl, values, dir) => { | ||
const ltrDecl = cloneDecl(decl, '-right', decl.value); | ||
const rtlDecl = cloneDecl(decl, '-left', decl.value); | ||
return dir === 'ltr' ? ltrDecl : dir === 'rtl' ? rtlDecl : [cloneRule(decl, 'ltr').append(ltrDecl), cloneRule(decl, 'rtl').append(rtlDecl)]; | ||
'inline-end': (decl, values, dir, preserve) => { | ||
const ltrDecl = () => { | ||
return cloneDeclBefore(decl, '-right', decl.value); | ||
}; | ||
const rtlDecl = () => { | ||
return cloneDeclBefore(decl, '-left', decl.value); | ||
}; | ||
if (dir === 'ltr') { | ||
ltrDecl(); | ||
clean$2(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
rtlDecl(); | ||
clean$2(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(ltrDecl()); | ||
cloneRule(decl, 'rtl').append(rtlDecl()); | ||
clean$2(decl, preserve); | ||
return; | ||
} | ||
} | ||
}; | ||
function clean$2(decl, preserve) { | ||
if (!preserve) decl.remove(); | ||
} | ||
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 transformSize = ((decl, values, dir, preserve) => { | ||
decl.cloneBefore({ | ||
prop: decl.prop.replace(matchSize, ($0, minmax, flow) => `${minmax || ''}${'block' === flow ? 'height' : 'width'}`) | ||
}); | ||
if (!preserve) { | ||
decl.remove(); | ||
} | ||
}); | ||
var transformTextAlign = ((decl, values, dir) => { | ||
const lDecl = decl.clone({ | ||
var transformTextAlign = ((decl, values, dir, preserve) => { | ||
if (/^start$/i.test(decl.value)) { | ||
if (dir === 'ltr') { | ||
lDecl(decl); | ||
clean$1(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
rDecl(decl); | ||
clean$1(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(lDecl(decl)); | ||
cloneRule(decl, 'rtl').append(rDecl(decl)); | ||
clean$1(decl, preserve); | ||
return; | ||
} | ||
} else if (/^end$/i.test(decl.value)) { | ||
if (dir === 'ltr') { | ||
rDecl(decl); | ||
clean$1(decl, preserve); | ||
return; | ||
} else if (dir === 'rtl') { | ||
lDecl(decl); | ||
clean$1(decl, preserve); | ||
return; | ||
} else { | ||
cloneRule(decl, 'ltr').append(rDecl(decl)); | ||
cloneRule(decl, 'rtl').append(lDecl(decl)); | ||
clean$1(decl, preserve); | ||
return; | ||
} | ||
} | ||
}); | ||
function lDecl(decl) { | ||
return decl.cloneBefore({ | ||
value: 'left' | ||
}); | ||
const rDecl = decl.clone({ | ||
} | ||
function rDecl(decl) { | ||
return decl.cloneBefore({ | ||
value: 'right' | ||
}); | ||
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; | ||
}); | ||
} | ||
function clean$1(decl, preserve) { | ||
if (!preserve) decl.remove(); | ||
} | ||
function splitByComma(string, isTrimmed) { | ||
@@ -346,3 +658,3 @@ return splitByRegExp(string, /^,$/, isTrimmed); | ||
var transformTransition = ((decl, notValues, dir) => { | ||
var transformTransition = ((decl, notValues, dir, preserve) => { | ||
const ltrValues = []; | ||
@@ -383,10 +695,37 @@ const rtlValues = []; | ||
}); | ||
const ltrDecl = decl.clone({ | ||
value: ltrValues.join('') | ||
}); | ||
const rtlDecl = decl.clone({ | ||
value: rtlValues.join('') | ||
}); | ||
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; | ||
if (ltrValues.length && dir === 'ltr') { | ||
if (preserve) { | ||
decl.cloneBefore({}); | ||
} | ||
decl.assign({ | ||
value: ltrValues.join('') | ||
}); | ||
return; | ||
} else if (rtlValues.length && dir === 'rtl') { | ||
if (preserve) { | ||
decl.cloneBefore({}); | ||
} | ||
decl.assign({ | ||
value: rtlValues.join('') | ||
}); | ||
return; | ||
} else if (ltrValues.join('') !== rtlValues.join('')) { | ||
cloneRule(decl, 'ltr').append(decl.cloneBefore({ | ||
value: ltrValues.join('') | ||
})); | ||
cloneRule(decl, 'rtl').append(decl.cloneBefore({ | ||
value: rtlValues.join('') | ||
})); | ||
clean(decl, preserve); | ||
return; | ||
} | ||
}); | ||
function clean(decl, preserve) { | ||
if (!preserve) decl.remove(); | ||
} | ||
const valueMap = { | ||
@@ -597,120 +936,114 @@ // Logical Height and Logical Width | ||
// tooling | ||
const transforms = { | ||
// Flow-Relative Values | ||
'clear': transformFloat, | ||
'float': transformFloat, | ||
'resize': transformResize, | ||
'text-align': transformTextAlign, | ||
// Logical Height and Logical Width | ||
'block-size': transformSize, | ||
'max-block-size': transformSize, | ||
'min-block-size': transformSize, | ||
'inline-size': transformSize, | ||
'max-inline-size': transformSize, | ||
'min-inline-size': transformSize, | ||
// 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-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-inline': transformBorder['border-inline'], | ||
'border-inline-color': transformBorder['border-inline'], | ||
'border-inline-style': transformBorder['border-inline'], | ||
'border-inline-width': 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'], | ||
// 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 | ||
}; | ||
const transformsRegExp = new RegExp(`^(${Object.keys(transforms).join('|')})$`, 'i'); // properties whose values will not be split | ||
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 => { | ||
function postcssLogicalProperties(opts) { | ||
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(transformsRegExp, decl => { | ||
const makeTransform = transform => { | ||
return decl => { | ||
const parent = decl.parent; | ||
const values = unsplitPropRegExp.test(decl.prop) ? [decl.value] : splitBySpace(decl.value, true); | ||
const prop = decl.prop.toLowerCase(); | ||
const replacer = transforms[prop](decl, values, dir); | ||
const values = splitBySpace(decl.value, true); | ||
transform(decl, values, dir, preserve); | ||
if (!replacer) { | ||
return; | ||
if (!parent.nodes.length) { | ||
parent.remove(); | ||
} | ||
}; | ||
}; | ||
[].concat(replacer).forEach(replacement => { | ||
if (replacement.type === 'rule') { | ||
parent.before(replacement); | ||
} else { | ||
decl.before(replacement); | ||
} | ||
}); | ||
const makeTransformWithoutSplittingValues = transform => { | ||
return decl => { | ||
const parent = decl.parent; | ||
const values = [decl.value]; | ||
transform(decl, values, dir, preserve); | ||
if (preserve) { | ||
return; | ||
} | ||
decl.remove(); | ||
if (!parent.nodes.length) { | ||
parent.remove(); | ||
} | ||
}); | ||
}; | ||
}; | ||
}); | ||
module.exports = index; | ||
return { | ||
postcssPlugin: 'postcss-logical-properties', | ||
Declaration: { | ||
// Flow-Relative Values | ||
'clear': makeTransform(transformFloat), | ||
'float': makeTransform(transformFloat), | ||
'resize': makeTransform(transformResize), | ||
'text-align': makeTransform(transformTextAlign), | ||
// Logical Height and Logical Width | ||
'block-size': makeTransform(transformSize), | ||
'max-block-size': makeTransform(transformSize), | ||
'min-block-size': makeTransform(transformSize), | ||
'inline-size': makeTransform(transformSize), | ||
'max-inline-size': makeTransform(transformSize), | ||
'min-inline-size': makeTransform(transformSize), | ||
// Flow-relative Margins | ||
'margin': makeTransform(transformDirectionalShorthands), | ||
'margin-inline': makeTransform(transformSide['inline']), | ||
'margin-inline-end': makeTransform(transformSide['inline-end']), | ||
'margin-inline-start': makeTransform(transformSide['inline-start']), | ||
'margin-block': makeTransform(transformSide['block']), | ||
'margin-block-end': makeTransform(transformSide['block-end']), | ||
'margin-block-start': makeTransform(transformSide['block-start']), | ||
// Flow-relative Offsets | ||
'inset': makeTransform(transformInset), | ||
'inset-inline': makeTransform(transformSide['inline']), | ||
'inset-inline-end': makeTransform(transformSide['inline-end']), | ||
'inset-inline-start': makeTransform(transformSide['inline-start']), | ||
'inset-block': makeTransform(transformSide['block']), | ||
'inset-block-end': makeTransform(transformSide['block-end']), | ||
'inset-block-start': makeTransform(transformSide['block-start']), | ||
// Flow-relative Padding | ||
'padding': makeTransform(transformDirectionalShorthands), | ||
'padding-inline': makeTransform(transformSide['inline']), | ||
'padding-inline-end': makeTransform(transformSide['inline-end']), | ||
'padding-inline-start': makeTransform(transformSide['inline-start']), | ||
'padding-block': makeTransform(transformSide['block']), | ||
'padding-block-end': makeTransform(transformSide['block-end']), | ||
'padding-block-start': makeTransform(transformSide['block-start']), | ||
// Flow-relative Borders | ||
'border-block': makeTransformWithoutSplittingValues(transformBorder['border-block']), | ||
'border-block-color': makeTransform(transformBorder['border-block']), | ||
'border-block-style': makeTransform(transformBorder['border-block']), | ||
'border-block-width': makeTransform(transformBorder['border-block']), | ||
'border-block-end': makeTransformWithoutSplittingValues(transformBorder['border-block-end']), | ||
'border-block-end-color': makeTransform(transformBorder['border-block-end']), | ||
'border-block-end-style': makeTransform(transformBorder['border-block-end']), | ||
'border-block-end-width': makeTransform(transformBorder['border-block-end']), | ||
'border-block-start': makeTransformWithoutSplittingValues(transformBorder['border-block-start']), | ||
'border-block-start-color': makeTransform(transformBorder['border-block-start']), | ||
'border-block-start-style': makeTransform(transformBorder['border-block-start']), | ||
'border-block-start-width': makeTransform(transformBorder['border-block-start']), | ||
'border-inline': makeTransformWithoutSplittingValues(transformBorder['border-inline']), | ||
'border-inline-color': makeTransform(transformBorder['border-inline']), | ||
'border-inline-style': makeTransform(transformBorder['border-inline']), | ||
'border-inline-width': makeTransform(transformBorder['border-inline']), | ||
'border-inline-end': makeTransformWithoutSplittingValues(transformBorder['border-inline-end']), | ||
'border-inline-end-color': makeTransform(transformBorder['border-inline-end']), | ||
'border-inline-end-style': makeTransform(transformBorder['border-inline-end']), | ||
'border-inline-end-width': makeTransform(transformBorder['border-inline-end']), | ||
'border-inline-start': makeTransformWithoutSplittingValues(transformBorder['border-inline-start']), | ||
'border-inline-start-color': makeTransform(transformBorder['border-inline-start']), | ||
'border-inline-start-style': makeTransform(transformBorder['border-inline-start']), | ||
'border-inline-start-width': makeTransform(transformBorder['border-inline-start']), | ||
// Flow-relative Corner Rounding | ||
'border-end-end-radius': makeTransform(transformBorderRadius), | ||
'border-end-start-radius': makeTransform(transformBorderRadius), | ||
'border-start-end-radius': makeTransform(transformBorderRadius), | ||
'border-start-start-radius': makeTransform(transformBorderRadius), | ||
// Four-Directional Shorthand Border Properties | ||
'border-color': makeTransform(transformDirectionalShorthands), | ||
'border-style': makeTransform(transformDirectionalShorthands), | ||
'border-width': makeTransform(transformDirectionalShorthands), | ||
// Transition helpers | ||
'transition': makeTransform(transformTransition), | ||
'transition-property': makeTransform(transformTransition) | ||
} | ||
}; | ||
} | ||
postcssLogicalProperties.postcss = true; | ||
module.exports = postcssLogicalProperties; | ||
//# sourceMappingURL=index.cjs.js.map |
{ | ||
"name": "postcss-logical", | ||
"version": "4.0.2", | ||
"version": "5.0.0", | ||
"description": "Use logical properties and values in CSS", | ||
@@ -22,4 +22,3 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"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": "npm run test:js && npm run test:tape", | ||
"test:js": "eslint src/{*,**/*}.js --cache --ignore-path .gitignore --quiet", | ||
@@ -29,17 +28,16 @@ "test:tape": "postcss-tape" | ||
"engines": { | ||
"node": ">=8.0.0" | ||
"node": ">=12" | ||
}, | ||
"dependencies": { | ||
"postcss": "^7.0.17" | ||
"peerDependencies": { | ||
"postcss": "^8.3" | ||
}, | ||
"devDependencies": { | ||
"@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": "^1.14.6", | ||
"rollup-plugin-babel": "^4.3.2" | ||
"@babel/core": "7.15.5", | ||
"@babel/preset-env": "7.15.6", | ||
"@rollup/plugin-babel": "5.3.0", | ||
"eslint": "7.32.0", | ||
"postcss": "8.3.6", | ||
"postcss-tape": "6.0.1", | ||
"pre-commit": "1.2.2", | ||
"rollup": "2.56.3" | ||
}, | ||
@@ -53,5 +51,4 @@ "eslintConfig": { | ||
"extends": "eslint:recommended", | ||
"parser": "babel-eslint", | ||
"parserOptions": { | ||
"ecmaVersion": 2018, | ||
"ecmaVersion": 2020, | ||
"impliedStrict": true, | ||
@@ -58,0 +55,0 @@ "sourceType": "module" |
@@ -12,2 +12,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] | ||
[!['Can I use' table](https://caniuse.bitsofco.de/image/css-logical-props.png)](https://caniuse.com/#feat=css-logical-props) | ||
```pcss | ||
@@ -109,3 +111,3 @@ .banner { | ||
- `block-size`, `inline-size` | ||
- `block-size`, `max-block-size`, `min-block-size`, `inline-size`, `max-inline-size`, `min-inline-size` | ||
@@ -189,4 +191,4 @@ #### Flow-Relative Values | ||
[css-url]: https://cssdb.org/#logical-properties-and-values | ||
[cli-img]: https://img.shields.io/travis/csstools/postcss-logical/master.svg | ||
[cli-url]: https://travis-ci.org/csstools/postcss-logical | ||
[cli-img]: https://github.com/csstools/postcss-logical/workflows/test/badge.svg | ||
[cli-url]: https://github.com/csstools/postcss-logical/actions/workflows/test.yml?query=workflow/test | ||
[git-img]: https://img.shields.io/badge/support-chat-blue.svg | ||
@@ -193,0 +195,0 @@ [git-url]: https://gitter.im/postcss/postcss |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
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
201930
8
1875
202
7
+ Addednanoid@3.3.7(transitive)
+ Addedpicocolors@1.1.1(transitive)
+ Addedpostcss@8.4.47(transitive)
+ Addedsource-map-js@1.2.1(transitive)
- Removedpostcss@^7.0.17
- Removedpicocolors@0.2.1(transitive)
- Removedpostcss@7.0.39(transitive)
- Removedsource-map@0.6.1(transitive)