postcss-merge-longhand - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

dist/lib/decl/borders.js

@@ -63,2 +63,6 @@ 'use strict';
 
+var _getLastNode = require('../getLastNode');
+
+var _getLastNode2 = _interopRequireDefault(_getLastNode);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -93,13 +97,40 @@
 
-function getColorValue(decl) {
-    let values = _postcss.list.space(decl.value);
+const widths = ['thin', 'medium', 'thick'];
+const styles = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset'];
 
-    if (decl.prop === 'border') {
-        return values[2];
+function isStyle(value) {
+    return !!~styles.indexOf(value);
+}
+
+function isWidth(value) {
+    return !!~widths.indexOf(value) || /^(\d+(\.\d+)?|\.\d+)(\w+)?$/.test(value);
+}
+
+function parseWsc(value) {
+    if (value === 'none' || value === 'none none' || value === 'none none currentColor') {
+        return ['none', 'none', 'currentColor'];
     }
 
-    if (!!~directions.indexOf(decl.prop)) {
-        return values[2];
+    let [width, style, color] = defaults;
+
+    const values = _postcss.list.space(value);
+    if (values.length > 1 && isStyle(values[1]) && values[0] === 'none') {
+        values.unshift();
+        width = 'none';
     }
 
+    values.forEach(v => {
+        if (isStyle(v)) {
+            style = v;
+        } else if (isWidth(v)) {
+            width = v;
+        } else {
+            color = v;
+        }
+    });
+
+    return [width, style, color];
+}
+
+function getColorValue(decl) {
     if (decl.prop.substr(-5) === 'color') {
@@ -109,23 +140,48 @@ return decl.value;
 
-    return null;
+    return parseWsc(decl.value)[2];
 }
 
-function mergeRedundant({ values, nextValues, decl, nextDecl, index, position, prop }) {
+function diffingProps(values, nextValues) {
+    const diff = wsc.reduce((prev, curr, i) => {
+        if (values[i] === nextValues[i]) {
+            return prev;
+        }
+        return [...prev, curr];
+    }, []);
+    return diff;
+}
+
+function mergeRedundant({ values, nextValues, decl, nextDecl, index }) {
     if ((0, _stylehacks.detect)(decl) || (0, _stylehacks.detect)(nextDecl)) {
         return;
     }
+    const diff = diffingProps(values, nextValues);
+    if (diff.length > 1) {
+        return;
+    }
+    const prop = diff.pop();
+    const position = wsc.indexOf(prop);
+
+    const prop1 = `${nextDecl.prop}-${prop}`;
+    const prop2 = `border-${prop}`;
+
     let props = (0, _parseTrbl2.default)(values[position]);
     props[index] = nextValues[position];
-    values.splice(position, 1);
-    let borderValue = values.join(' ');
-    let propertyValue = (0, _minifyTrbl2.default)(props);
 
-    let origLength = (decl.value + nextDecl.prop + nextDecl.value).length;
-    let newLength = borderValue.length + 12 + propertyValue.length;
+    const borderValue2 = values.filter((e, i) => i !== position).join(' ');
+    const propValue2 = (0, _minifyTrbl2.default)(props);
 
-    if (newLength < origLength) {
-        decl.value = borderValue;
-        nextDecl.prop = prop;
-        nextDecl.value = propertyValue;
+    const origLength = (decl.value + nextDecl.prop + nextDecl.value).length;
+    const newLength1 = decl.value.length + prop1.length + nextValues[position].length;
+    const newLength2 = borderValue2.length + prop2.length + propValue2.length;
+
+    if (newLength1 < newLength2 && newLength1 < origLength) {
+        nextDecl.prop = prop1;
+        nextDecl.value = nextValues[position];
     }
+    if (newLength2 < newLength1 && newLength2 < origLength) {
+        decl.value = borderValue2;
+        nextDecl.prop = prop2;
+        nextDecl.value = propValue2;
+    }
 }
@@ -167,7 +223,7 @@
         if (directions.some(direction => prop === direction)) {
-            let values = _postcss.list.space(decl.value);
+            let values = parseWsc(decl.value);
             wsc.forEach((d, i) => {
                 (0, _insertCloned2.default)(decl.parent, decl, {
                     prop: `${prop}-${d}`,
-                    value: values[i] || defaults[i]
+                    value: values[i]
                 });
@@ -291,9 +347,8 @@ });
         if (reduced.length === 2 && reduced[0] === none || reduced[1] === none) {
-            const noOfNones = mapped.filter(value => value === none).length;
             rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
                 prop: 'border',
-                value: noOfNones > 2 ? 'none' : mapped.filter(value => value !== none)[0]
+                value: mapped[1] === none ? 'none' : mapped.filter(value => value !== none)[0]
             }));
             directions.forEach((dir, i) => {
-                if (noOfNones > 2 && mapped[i] !== none) {
+                if (mapped[1] === none && mapped[i] !== none) {
                     rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
@@ -304,3 +359,3 @@ prop: dir,
                 }
-                if (noOfNones <= 2 && mapped[i] === none) {
+                if (mapped[1] !== none && mapped[i] === none) {
                     rule.insertBefore(lastNode, Object.assign(lastNode.clone(), {
@@ -323,3 +378,8 @@ prop: dir,
             const names = directions.filter(name => name !== lastNode.prop).map(name => `${name}-${d}`);
-            const props = rule.nodes.filter(node => node.prop && ~names.indexOf(node.prop) && node.important === lastNode.important);
+            let nodes = rule.nodes.slice(0, rule.nodes.indexOf(lastNode));
+            const border = (0, _getLastNode2.default)(nodes, 'border');
+            if (border) {
+                nodes = nodes.slice(nodes.indexOf(border));
+            }
+            const props = nodes.filter(node => node.prop && ~names.indexOf(node.prop) && node.important === lastNode.important);
             const rules = (0, _getRules2.default)(props, names);
@@ -362,4 +422,4 @@ if ((0, _hasAllProps2.default)(rules, ...names) && !rules.some(_stylehacks.detect)) {
         }
-        const values = _postcss.list.space(decl.value);
-        const nextValues = _postcss.list.space(nextDecl.value);
+        const values = parseWsc(decl.value);
+        const nextValues = parseWsc(nextDecl.value);
 
@@ -374,22 +434,3 @@ const config = {
 
-        if (values[0] === nextValues[0] && values[2] === nextValues[2]) {
-            return mergeRedundant(Object.assign({}, config, {
-                position: 1,
-                prop: 'border-style'
-            }));
-        }
-
-        if (values[1] === nextValues[1] && values[2] === nextValues[2]) {
-            return mergeRedundant(Object.assign({}, config, {
-                position: 0,
-                prop: 'border-width'
-            }));
-        }
-
-        if (values[0] === nextValues[0] && values[1] === nextValues[1] && values[2] && nextValues[2]) {
-            return mergeRedundant(Object.assign({}, config, {
-                position: 2,
-                prop: 'border-color'
-            }));
-        }
+        return mergeRedundant(config);
     });
@@ -399,4 +440,4 @@
     rule.walkDecls(/^border($|-(top|right|bottom|left))/, decl => {
-        const value = [..._postcss.list.space(decl.value), ''].reduceRight((prev, cur, i) => {
-            if (prev === '' && cur === defaults[i]) {
+        const value = [...parseWsc(decl.value), ''].reduceRight((prev, cur, i, arr) => {
+            if (cur === defaults[i] && arr[i - 1] !== cur) {
                 return prev;
@@ -406,3 +447,3 @@ }
         }).trim() || defaults[0];
-        decl.value = (0, _minifyTrbl2.default)(value);
+        decl.value = (0, _minifyTrbl2.default)(value || defaults[0]);
     });
@@ -424,5 +465,6 @@
         const lastNode = decls[decls.length - 1];
+        const lastPart = lastNode.prop.split('-').pop();
 
         // remove properties of lower precedence
-        const lesser = decls.filter(node => !(0, _stylehacks.detect)(lastNode) && !(0, _stylehacks.detect)(node) && node !== lastNode && node.important === lastNode.important && getLevel(node.prop) > getLevel(lastNode.prop));
+        const lesser = decls.filter(node => !(0, _stylehacks.detect)(lastNode) && !(0, _stylehacks.detect)(node) && node !== lastNode && node.important === lastNode.important && getLevel(node.prop) > getLevel(lastNode.prop) && (!!~node.prop.indexOf(lastNode.prop) || node.prop.endsWith(lastPart)));
 
@@ -429,0 +471,0 @@ lesser.forEach(_remove2.default);

dist/lib/getLastNode.js

@@ -8,5 +8,5 @@ "use strict";
 exports.default = (rule, prop) => {
-    return rule.filter(n => n.prop && ~n.prop.indexOf(prop)).pop();
+    return rule.filter(n => n.prop && n.prop === prop).pop();
 };
 
 module.exports = exports["default"];

package.json

 {
   "name": "postcss-merge-longhand",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Merge longhand properties into shorthand with PostCSS.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

39341

increased by3.22%

Lines of code

852

increased by4.16%

No dependency changes