postcss-logical - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

CHANGELOG.md

 # Changes to PostCSS Logical Properties
 
+### 3.0.0 (September 20, 2018)
+
+- Added: Support for logical properties within `transition` and
+  `transition-property`.
+- Changed: Physical rule fallbacks are written as full selectors rather than
+  as nesting selectors.
+
 ### 2.0.0 (September 17, 2018)
@@ -4,0 +11,0 @@

index.cjs.js

@@ -8,18 +8,9 @@ 'use strict';
 var cloneRule = ((decl, dir) => {
-  let node = decl.parent;
-
-  while (node && 'rule' !== node.type) {
-    node = node.parent;
-  }
-
-  if (node) {
-    node = node.clone({
-      raws: {}
-    }).removeAll();
-  } else {
-    node = postcss.rule();
-  }
-
-  node.selector = `&:dir(${dir})`;
-  return node;
+  const rule = Object(decl.parent).type === 'rule' ? decl.parent.clone({
+    raws: {}
+  }).removeAll() : postcss.rule({
+    selector: '&'
+  });
+  rule.selectors = rule.selectors.map(selector => `${selector}:dir(${dir})`);
+  return rule;
 });
@@ -323,2 +314,340 @@
 
+function splitByComma(string, isTrimmed) {
+  return splitByRegExp(string, /^,$/, isTrimmed);
+}
+function splitBySpace(string, isTrimmed) {
+  return splitByRegExp(string, /^\s$/, isTrimmed);
+}
+function splitBySlash(string, isTrimmed) {
+  return splitByRegExp(string, /^\/$/, isTrimmed);
+}
+
+function splitByRegExp(string, re, isTrimmed) {
+  const array = [];
+  let buffer = '';
+  let split = false;
+  let func = 0;
+  let i = -1;
+
+  while (++i < string.length) {
+    const char = string[i];
+
+    if (char === '(') {
+      func += 1;
+    } else if (char === ')') {
+      if (func > 0) {
+        func -= 1;
+      }
+    } else if (func === 0) {
+      if (re.test(char)) {
+        split = true;
+      }
+    }
+
+    if (split) {
+      if (!isTrimmed || buffer.trim()) {
+        array.push(isTrimmed ? buffer.trim() : buffer);
+      }
+
+      if (!isTrimmed) {
+        array.push(char);
+      }
+
+      buffer = '';
+      split = false;
+    } else {
+      buffer += char;
+    }
+  }
+
+  if (buffer !== '') {
+    array.push(isTrimmed ? buffer.trim() : buffer);
+  }
+
+  return array;
+}
+
+var transformTransition = ((decl, notValues, dir) => {
+  const ltrValues = [];
+  const rtlValues = [];
+  splitByComma(decl.value).forEach(value => {
+    let hasBeenSplit = false;
+    splitBySpace(value).forEach((word, index, words) => {
+      if (word in valueMap) {
+        hasBeenSplit = true;
+        valueMap[word].ltr.forEach(replacement => {
+          const clone = words.slice();
+          clone.splice(index, 1, replacement);
+
+          if (ltrValues.length && !/^,$/.test(ltrValues[ltrValues.length - 1])) {
+            ltrValues.push(',');
+          }
+
+          ltrValues.push(clone.join(''));
+        });
+        valueMap[word].rtl.forEach(replacement => {
+          const clone = words.slice();
+          clone.splice(index, 1, replacement);
+
+          if (rtlValues.length && !/^,$/.test(rtlValues[rtlValues.length - 1])) {
+            rtlValues.push(',');
+          }
+
+          rtlValues.push(clone.join(''));
+        });
+      }
+    });
+
+    if (!hasBeenSplit) {
+      ltrValues.push(value);
+      rtlValues.push(value);
+    }
+  });
+  const ltrDecl = decl.clone({
+    value: ltrValues.join('')
+  });
+  const rtlDecl = decl.clone({
+    value: rtlValues.join('')
+  });
+  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;
+});
+const valueMap = {
+  'border-block': {
+    ltr: ['border-top', 'border-bottom'],
+    rtl: ['border-top', 'border-bottom']
+  },
+  'border-block-color': {
+    ltr: ['border-top-color', 'border-bottom-color'],
+    rtl: ['border-top-color', 'border-bottom-color']
+  },
+  'border-block-end': {
+    ltr: ['border-bottom'],
+    rtl: ['border-bottom']
+  },
+  'border-block-end-color': {
+    ltr: ['border-bottom-color'],
+    rtl: ['border-bottom-color']
+  },
+  'border-block-end-style': {
+    ltr: ['border-bottom-style'],
+    rtl: ['border-bottom-style']
+  },
+  'border-block-end-width': {
+    ltr: ['border-bottom-width'],
+    rtl: ['border-bottom-width']
+  },
+  'border-block-start': {
+    ltr: ['border-top'],
+    rtl: ['border-top']
+  },
+  'border-block-start-color': {
+    ltr: ['border-top-color'],
+    rtl: ['border-top-color']
+  },
+  'border-block-start-style': {
+    ltr: ['border-top-style'],
+    rtl: ['border-top-style']
+  },
+  'border-block-start-width': {
+    ltr: ['border-top-width'],
+    rtl: ['border-top-width']
+  },
+  'border-block-style': {
+    ltr: ['border-top-style', 'border-bottom-style'],
+    rtl: ['border-top-style', 'border-bottom-style']
+  },
+  'border-block-width': {
+    ltr: ['border-top-width', 'border-bottom-width'],
+    rtl: ['border-top-width', 'border-bottom-width']
+  },
+  'border-end': {
+    ltr: ['border-bottom', 'border-right'],
+    rtl: ['border-bottom', 'border-left']
+  },
+  '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': {
+    ltr: ['border-left-color', 'border-right-color'],
+    rtl: ['border-left-color', 'border-right-color']
+  },
+  'border-inline-end': {
+    ltr: ['border-right'],
+    rtl: ['border-left']
+  },
+  'border-inline-end-color': {
+    ltr: ['border-right-color'],
+    rtl: ['border-left-color']
+  },
+  'border-inline-end-style': {
+    ltr: ['border-right-style'],
+    rtl: ['border-left-style']
+  },
+  'border-inline-end-width': {
+    ltr: ['border-right-width'],
+    rtl: ['border-left-width']
+  },
+  'border-inline-start': {
+    ltr: ['border-left'],
+    rtl: ['border-right']
+  },
+  'border-inline-start-color': {
+    ltr: ['border-left-color'],
+    rtl: ['border-right-color']
+  },
+  'border-inline-start-style': {
+    ltr: ['border-left-style'],
+    rtl: ['border-right-style']
+  },
+  'border-inline-start-width': {
+    ltr: ['border-left-width'],
+    rtl: ['border-right-width']
+  },
+  'border-inline-style': {
+    ltr: ['border-left-style', 'border-right-style'],
+    rtl: ['border-left-style', 'border-right-style']
+  },
+  'border-inline-width': {
+    ltr: ['border-left-width', 'border-right-width'],
+    rtl: ['border-left-width', 'border-right-width']
+  },
+  'border-start': {
+    ltr: ['border-top', 'border-left'],
+    rtl: ['border-top', 'border-right']
+  },
+  'border-start-color': {
+    ltr: ['border-top-color', 'border-left-color'],
+    rtl: ['border-top-color', 'border-right-color']
+  },
+  'border-start-style': {
+    ltr: ['border-top-style', 'border-left-style'],
+    rtl: ['border-top-style', 'border-right-style']
+  },
+  'border-start-width': {
+    ltr: ['border-top-width', 'border-left-width'],
+    rtl: ['border-top-width', 'border-right-width']
+  },
+  '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']
+  }
+};
+
 var matchSupportedProperties = /^(?:(inset|margin|padding)(?:-(block|block-start|block-end|inline|inline-start|inline-end|start|end))|(min-|max-)?(block|inline)-(size))$/i;
@@ -380,5 +709,9 @@
   'size': transformSize,
-  'text-align': transformTextAlign
-}; // plugin
+  'text-align': transformTextAlign,
+  'transition': transformTransition,
+  'transition-property': transformTransition
+}; // properties that will be split by slash
 
+const splitBySlashPropRegExp = /^border(-block|-inline|-start|-end)?(-width|-style|-color)?$/i; // plugin
+
 var index = postcss.plugin('postcss-logical-properties', opts => {
@@ -389,3 +722,4 @@ const preserve = Boolean(Object(opts).preserve);
     root.walkDecls(decl => {
-      const values = postcss.list.split(decl.value, /^border(-block|-inline|-start|-end)?(-width|-style|-color)?$/i.test(decl.prop) ? '/' : ' ');
+      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();
@@ -397,6 +731,16 @@
         if (replacer) {
-          if (preserve) {
-            decl.before(replacer);
-          } else {
-            decl.replaceWith(replacer);
+          [].concat(replacer).forEach(replacement => {
+            if (replacement.type === 'rule') {
+              parent.before(replacement);
+            } else {
+              decl.before(replacement);
+            }
+          });
+
+          if (!preserve) {
+            decl.remove();
+
+            if (!parent.nodes.length) {
+              parent.remove();
+            }
           }
@@ -403,0 +747,0 @@ }

package.json

 {
   "name": "postcss-logical",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Use logical properties and values in CSS",
@@ -33,4 +33,4 @@ "author": "Jonathan Neal <[e-mail]>",
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/core": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
     "babel-eslint": "^9.0.0",
@@ -42,4 +42,4 @@ "echint": "^4.0.1",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.66.0",
-    "rollup-plugin-babel": "^4.0.1"
+    "rollup": "^0.66.1",
+    "rollup-plugin-babel": "^4.0.3"
   },
@@ -46,0 +46,0 @@ "eslintConfig": {

README.md

@@ -23,14 +23,11 @@ # PostCSS Logical Properties and Values [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-.banner {
-  color: #222222;
-  top: 0; left: 5px; bottom: 10px; right: 5px;
+.banner:dir(ltr) {
+  padding-left: 20px; padding-right: 40px;
+}
 
-  &:dir(ltr) {
-    padding-left: 20px; padding-right: 40px;
-  }
-  
-  &:dir(rtl) {
-    padding-right: 20px; padding-left: 40px;
-  }
+.banner:dir(rtl) {
+  padding-right: 20px; padding-left: 40px;
+}
 
+.banner {
   resize: vertical;
@@ -52,14 +49,13 @@ transition: color 200ms;
 
+.banner:dir(ltr) {
+  padding-left: 20px; padding-right: 40px;
+}
+
+.banner:dir(rtl) {
+  padding-right: 20px; padding-left: 40px;
+}
+
 .banner {
   color: #222222;
   top: 0; left: 5px; bottom: 10px; right: 5px;
-
-  &:dir(ltr) {
-    padding-left: 20px; padding-right: 40px;
-  }
-
-  &:dir(rtl) {
-    padding-right: 20px; padding-left: 40px;
-  }
-
   inset: logical 0 5px 10px;
@@ -66,0 +62,0 @@ padding-inline: 20px 40px;

Fixed alerts

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

Improved metrics

Total package byte prevSize

180876

41.69%

Lines of code

1412

87.27%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Number of lines in readme file

199

-1.97%

No dependency changes