postcss-logical - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

CHANGELOG.md

 # 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 @@

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 @@ });

package.json

 {
   "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 <[e-mail]>",
   "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": [

README.md

@@ -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

New alerts

License Policy Violation

License

This 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 risk

Package 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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

9

decreased by-10%

Number of lines in readme file

200

increased by0.5%

Worsened metrics

Total package byte prevSize

157371

decreased by-13%

Lines of code

1297

decreased by-8.14%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedpostcss@^7.0.16