From 38f8d03f49de6c67126516a8d994d1f7a9bc151e Mon Sep 17 00:00:00 2001 From: RubaXa Date: Tue, 31 Oct 2017 18:24:35 +0300 Subject: [PATCH 01/10] #286: Zero-value workaround for pading, margin and etc --- .gitignore | 1 + lib/restructure/4-restructShorthand.js | 21 +++++++++++-------- .../fixture/compress/restructure.margin/4.css | 6 ++++++ .../compress/restructure.margin/4.min.css | 1 + 4 files changed, 20 insertions(+), 9 deletions(-) create mode 100644 test/fixture/compress/restructure.margin/4.css create mode 100644 test/fixture/compress/restructure.margin/4.min.css diff --git a/.gitignore b/.gitignore index e61051f3..1dd46ecb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ /node_modules/ /coverage/ +.idea diff --git a/lib/restructure/4-restructShorthand.js b/lib/restructure/4-restructShorthand.js index 440bc1da..628460fa 100644 --- a/lib/restructure/4-restructShorthand.js +++ b/lib/restructure/4-restructShorthand.js @@ -277,18 +277,12 @@ TRBL.prototype.getValue = function() { sides.bottom, sides.left ]; - var stringValues = [ - translate(sides.top.node), - translate(sides.right.node), - translate(sides.bottom.node), - translate(sides.left.node) - ]; - if (stringValues[LEFT] === stringValues[RIGHT]) { + if (isEqualValuePair(values[LEFT], values[RIGHT])) { values.pop(); - if (stringValues[BOTTOM] === stringValues[TOP]) { + if (isEqualValuePair(values[BOTTOM], values[TOP])) { values.pop(); - if (stringValues[RIGHT] === stringValues[TOP]) { + if (isEqualValuePair(values[RIGHT], values[TOP])) { values.pop(); } } @@ -328,6 +322,15 @@ TRBL.prototype.getDeclaration = function() { }; }; +function isEqualValuePair(left, right) { + return ( + // Zero-value workaround + (left.node.value === '0' && left.node.value === right.node.value) || + // Because `CSSTree` returning `0%`, `0px` and etc, but must just `0` + (translate(left.node) === translate(right.node)) + ); +} + function processRule(rule, shorts, shortDeclarations, lastShortSelector) { var declarations = rule.block.children; var selector = rule.prelude.children.first().id; diff --git a/test/fixture/compress/restructure.margin/4.css b/test/fixture/compress/restructure.margin/4.css new file mode 100644 index 00000000..ee37bced --- /dev/null +++ b/test/fixture/compress/restructure.margin/4.css @@ -0,0 +1,6 @@ +.a { + margin: 0% +} +.b { + margin: 0% 0px 0em 0rem +} diff --git a/test/fixture/compress/restructure.margin/4.min.css b/test/fixture/compress/restructure.margin/4.min.css new file mode 100644 index 00000000..8f31c34b --- /dev/null +++ b/test/fixture/compress/restructure.margin/4.min.css @@ -0,0 +1 @@ +.a,.b{margin:0%} From f16c6ad03afda709e508e1413e269481b7ea59ff Mon Sep 17 00:00:00 2001 From: RubaXa Date: Thu, 2 Nov 2017 10:10:59 +0300 Subject: [PATCH 02/10] + Declaration: Zero-value normalization for margin/padding --- lib/replace/Declaration.js | 17 +++++++++++++++++ lib/replace/index.js | 1 + lib/restructure/4-restructShorthand.js | 21 +++++++++------------ 3 files changed, 27 insertions(+), 12 deletions(-) create mode 100644 lib/replace/Declaration.js diff --git a/lib/replace/Declaration.js b/lib/replace/Declaration.js new file mode 100644 index 00000000..9fafd775 --- /dev/null +++ b/lib/replace/Declaration.js @@ -0,0 +1,17 @@ +var INDENT_PROPS = { + 'margin': true, + 'padding': true +}; + +module.exports = function(node) { + var shortPropertyName = node.property.split('-')[0]; + + if (INDENT_PROPS.hasOwnProperty(shortPropertyName)) { + // Zero-value workaround + node.value.children.each(function(child) { + if (child.value === '0') { + child.type = 'Number'; + } + }); + } +}; diff --git a/lib/replace/index.js b/lib/replace/index.js index 72b867ad..46dd3160 100644 --- a/lib/replace/index.js +++ b/lib/replace/index.js @@ -4,6 +4,7 @@ var handlers = { AttributeSelector: require('./AttributeSelector'), Value: require('./Value'), Dimension: require('./Dimension'), + Declaration: require('./Declaration'), Percentage: require('./Number'), Number: require('./Number'), String: require('./String'), diff --git a/lib/restructure/4-restructShorthand.js b/lib/restructure/4-restructShorthand.js index 628460fa..440bc1da 100644 --- a/lib/restructure/4-restructShorthand.js +++ b/lib/restructure/4-restructShorthand.js @@ -277,12 +277,18 @@ TRBL.prototype.getValue = function() { sides.bottom, sides.left ]; + var stringValues = [ + translate(sides.top.node), + translate(sides.right.node), + translate(sides.bottom.node), + translate(sides.left.node) + ]; - if (isEqualValuePair(values[LEFT], values[RIGHT])) { + if (stringValues[LEFT] === stringValues[RIGHT]) { values.pop(); - if (isEqualValuePair(values[BOTTOM], values[TOP])) { + if (stringValues[BOTTOM] === stringValues[TOP]) { values.pop(); - if (isEqualValuePair(values[RIGHT], values[TOP])) { + if (stringValues[RIGHT] === stringValues[TOP]) { values.pop(); } } @@ -322,15 +328,6 @@ TRBL.prototype.getDeclaration = function() { }; }; -function isEqualValuePair(left, right) { - return ( - // Zero-value workaround - (left.node.value === '0' && left.node.value === right.node.value) || - // Because `CSSTree` returning `0%`, `0px` and etc, but must just `0` - (translate(left.node) === translate(right.node)) - ); -} - function processRule(rule, shorts, shortDeclarations, lastShortSelector) { var declarations = rule.block.children; var selector = rule.prelude.children.first().id; From 5890c1f63e793f730ed38f979ccf86fbd854fffb Mon Sep 17 00:00:00 2001 From: RubaXa Date: Thu, 2 Nov 2017 10:12:46 +0300 Subject: [PATCH 03/10] * typo --- test/fixture/compress/restructure.margin/4.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/fixture/compress/restructure.margin/4.min.css b/test/fixture/compress/restructure.margin/4.min.css index 8f31c34b..904b8858 100644 --- a/test/fixture/compress/restructure.margin/4.min.css +++ b/test/fixture/compress/restructure.margin/4.min.css @@ -1 +1 @@ -.a,.b{margin:0%} +.a,.b{margin:0} From d41462ae0ab4015c09d7c73af7eb8fbbdfe051ba Mon Sep 17 00:00:00 2001 From: RubaXa Date: Thu, 2 Nov 2017 10:27:36 +0300 Subject: [PATCH 04/10] * without split --- lib/replace/Declaration.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/lib/replace/Declaration.js b/lib/replace/Declaration.js index 9fafd775..173b334d 100644 --- a/lib/replace/Declaration.js +++ b/lib/replace/Declaration.js @@ -1,12 +1,16 @@ -var INDENT_PROPS = { - 'margin': true, - 'padding': true -}; +var INDENT_PROPS = ['margin', 'padding'].reduce(function(ind, prop) { + ind[prop] = true; -module.exports = function(node) { - var shortPropertyName = node.property.split('-')[0]; + // TLBR + ['top', 'left', 'bottom', 'right'].forEach(function(side) { + ind[prop + '-' + side] = true; + }); - if (INDENT_PROPS.hasOwnProperty(shortPropertyName)) { + return ind; +}, {}); + +module.exports = function(node) { + if (INDENT_PROPS.hasOwnProperty(node.property)) { // Zero-value workaround node.value.children.each(function(child) { if (child.value === '0') { From 8bd4649362d5b097e777964a22e778dc83112c4f Mon Sep 17 00:00:00 2001 From: RubaXa Date: Thu, 2 Nov 2017 11:40:17 +0300 Subject: [PATCH 05/10] - Declaration and * Dimension --- lib/replace/Declaration.js | 21 ----------- lib/replace/Dimension.js | 75 ++++++++++++++++++++++++++++++++++++-- lib/replace/index.js | 3 +- 3 files changed, 73 insertions(+), 26 deletions(-) delete mode 100644 lib/replace/Declaration.js diff --git a/lib/replace/Declaration.js b/lib/replace/Declaration.js deleted file mode 100644 index 173b334d..00000000 --- a/lib/replace/Declaration.js +++ /dev/null @@ -1,21 +0,0 @@ -var INDENT_PROPS = ['margin', 'padding'].reduce(function(ind, prop) { - ind[prop] = true; - - // TLBR - ['top', 'left', 'bottom', 'right'].forEach(function(side) { - ind[prop + '-' + side] = true; - }); - - return ind; -}, {}); - -module.exports = function(node) { - if (INDENT_PROPS.hasOwnProperty(node.property)) { - // Zero-value workaround - node.value.children.each(function(child) { - if (child.value === '0') { - child.type = 'Number'; - } - }); - } -}; diff --git a/lib/replace/Dimension.js b/lib/replace/Dimension.js index 295155cd..76eef072 100644 --- a/lib/replace/Dimension.js +++ b/lib/replace/Dimension.js @@ -21,13 +21,82 @@ var LENGTH_UNIT = { 'vmax': true, 'vm': true }; +var PERCENTAGE_LENGTH_DELC = { + 'margin': true, + 'margin-top': true, + 'margin-left': true, + 'margin-bottom': true, + 'margin-right': true, + + 'padding': true, + 'padding-top': true, + 'padding-left': true, + 'padding-bottom': true, + 'padding-right': true, + + 'top': true, + 'left': true, + 'botton': true, + 'right': true, + 'position': true, + + '-webkit-mask-box-image': true, + '-webkit-mask-position-x': true, + '-webkit-mask-position-y': true, + + 'background-position-x': true, + 'background-position-y': true, + + 'border': true, + 'border-image-width': true, + + 'border-radius': true, + 'border-bottom-left-radius': true, + 'border-bottom-right-radius': true, + 'border-top-left-radius': true, + 'border-top-right-radius': true, + + 'font-size': true, + 'grid-column-gap': true, + 'grid-row-gap': true, + 'letter-spacing': true, + 'offset-distance': true, + 'scroll-snap-points-x': true, + 'scroll-snap-points-y': true, + 'shape-margin': true, + 'text-indent': true, + 'transform-origin': true, + 'word-spacing': true +}; + +var PERCENTAGE_LENGTH_FN = { + 'inset': true, + 'polygon': true, + 'translate': true, + 'translate3d': true, + 'translateX': true, + 'translateY': true +}; module.exports = function compressDimension(node, item) { var value = packNumber(node.value, item); + var decl = this.declaration.property; + var fnName = this['function'] && this['function'].name; node.value = value; - if (value === '0' && this.declaration !== null && this.atrulePrelude === null) { + if (node.type === 'Percentage') { + if (PERCENTAGE_LENGTH_DELC.hasOwnProperty(decl) || PERCENTAGE_LENGTH_FN.hasOwnProperty(fnName)) { + // Zero-value workaround + if (value === '0') { + item.data = { + type: 'Number', + loc: node.loc, + value: value + }; + } + } + } else if (value === '0' && decl !== null && this.atrulePrelude === null) { var unit = node.unit.toLowerCase(); // only length values can be compressed @@ -36,12 +105,12 @@ module.exports = function compressDimension(node, item) { } // issue #200: don't remove units in flex property as it could change value meaning - if (this.declaration.property === 'flex') { + if (decl === 'flex') { return; } // issue #222: don't remove units inside calc - if (this['function'] && this['function'].name === 'calc') { + if (fnName === 'calc') { return; } diff --git a/lib/replace/index.js b/lib/replace/index.js index 46dd3160..8186bc18 100644 --- a/lib/replace/index.js +++ b/lib/replace/index.js @@ -4,8 +4,7 @@ var handlers = { AttributeSelector: require('./AttributeSelector'), Value: require('./Value'), Dimension: require('./Dimension'), - Declaration: require('./Declaration'), - Percentage: require('./Number'), + Percentage: require('./Dimension'), Number: require('./Number'), String: require('./String'), Url: require('./Url'), From ac35272040fb201657bc8e08d9ba5ddd66abb4ec Mon Sep 17 00:00:00 2001 From: RubaXa Date: Thu, 2 Nov 2017 11:42:38 +0300 Subject: [PATCH 06/10] * border --- lib/replace/Dimension.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/replace/Dimension.js b/lib/replace/Dimension.js index 76eef072..4f88aef3 100644 --- a/lib/replace/Dimension.js +++ b/lib/replace/Dimension.js @@ -48,6 +48,11 @@ var PERCENTAGE_LENGTH_DELC = { 'background-position-y': true, 'border': true, + 'border-width': true, + 'border-top-width': true, + 'border-left-width': true, + 'border-bottom-width': true, + 'border-right-width': true, 'border-image-width': true, 'border-radius': true, @@ -80,7 +85,7 @@ var PERCENTAGE_LENGTH_FN = { module.exports = function compressDimension(node, item) { var value = packNumber(node.value, item); - var decl = this.declaration.property; + var decl = this.declaration === null ? this.declaration.property : null; var fnName = this['function'] && this['function'].name; node.value = value; From 0e5166e86352ec875ffe0884224efe01cac04df0 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Thu, 2 Nov 2017 11:43:33 +0300 Subject: [PATCH 07/10] * upd --- lib/replace/Dimension.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/replace/Dimension.js b/lib/replace/Dimension.js index 4f88aef3..360e78df 100644 --- a/lib/replace/Dimension.js +++ b/lib/replace/Dimension.js @@ -85,8 +85,8 @@ var PERCENTAGE_LENGTH_FN = { module.exports = function compressDimension(node, item) { var value = packNumber(node.value, item); - var decl = this.declaration === null ? this.declaration.property : null; - var fnName = this['function'] && this['function'].name; + var decl = this.declaration !== null ? this.declaration.property : null; + var fnName = this['function'] !== null ? this['function'].name : null; node.value = value; From 362ca2b71b6c38f1212299357e7ed7375c43b185 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Thu, 2 Nov 2017 14:02:32 +0300 Subject: [PATCH 08/10] + Percentage replacer --- lib/replace/Dimension.js | 80 ++------------------------------------- lib/replace/Percentage.js | 80 +++++++++++++++++++++++++++++++++++++++ lib/replace/index.js | 2 +- 3 files changed, 84 insertions(+), 78 deletions(-) create mode 100644 lib/replace/Percentage.js diff --git a/lib/replace/Dimension.js b/lib/replace/Dimension.js index 360e78df..295155cd 100644 --- a/lib/replace/Dimension.js +++ b/lib/replace/Dimension.js @@ -21,87 +21,13 @@ var LENGTH_UNIT = { 'vmax': true, 'vm': true }; -var PERCENTAGE_LENGTH_DELC = { - 'margin': true, - 'margin-top': true, - 'margin-left': true, - 'margin-bottom': true, - 'margin-right': true, - - 'padding': true, - 'padding-top': true, - 'padding-left': true, - 'padding-bottom': true, - 'padding-right': true, - - 'top': true, - 'left': true, - 'botton': true, - 'right': true, - 'position': true, - - '-webkit-mask-box-image': true, - '-webkit-mask-position-x': true, - '-webkit-mask-position-y': true, - - 'background-position-x': true, - 'background-position-y': true, - - 'border': true, - 'border-width': true, - 'border-top-width': true, - 'border-left-width': true, - 'border-bottom-width': true, - 'border-right-width': true, - 'border-image-width': true, - - 'border-radius': true, - 'border-bottom-left-radius': true, - 'border-bottom-right-radius': true, - 'border-top-left-radius': true, - 'border-top-right-radius': true, - - 'font-size': true, - 'grid-column-gap': true, - 'grid-row-gap': true, - 'letter-spacing': true, - 'offset-distance': true, - 'scroll-snap-points-x': true, - 'scroll-snap-points-y': true, - 'shape-margin': true, - 'text-indent': true, - 'transform-origin': true, - 'word-spacing': true -}; - -var PERCENTAGE_LENGTH_FN = { - 'inset': true, - 'polygon': true, - 'translate': true, - 'translate3d': true, - 'translateX': true, - 'translateY': true -}; module.exports = function compressDimension(node, item) { var value = packNumber(node.value, item); - var decl = this.declaration !== null ? this.declaration.property : null; - var fnName = this['function'] !== null ? this['function'].name : null; node.value = value; - if (node.type === 'Percentage') { - if (PERCENTAGE_LENGTH_DELC.hasOwnProperty(decl) || PERCENTAGE_LENGTH_FN.hasOwnProperty(fnName)) { - // Zero-value workaround - if (value === '0') { - item.data = { - type: 'Number', - loc: node.loc, - value: value - }; - } - } - } else if (value === '0' && decl !== null && this.atrulePrelude === null) { + if (value === '0' && this.declaration !== null && this.atrulePrelude === null) { var unit = node.unit.toLowerCase(); // only length values can be compressed @@ -110,12 +36,12 @@ module.exports = function compressDimension(node, item) { } // issue #200: don't remove units in flex property as it could change value meaning - if (decl === 'flex') { + if (this.declaration.property === 'flex') { return; } // issue #222: don't remove units inside calc - if (fnName === 'calc') { + if (this['function'] && this['function'].name === 'calc') { return; } diff --git a/lib/replace/Percentage.js b/lib/replace/Percentage.js new file mode 100644 index 00000000..2cc43dad --- /dev/null +++ b/lib/replace/Percentage.js @@ -0,0 +1,80 @@ +var packNumber = require('./Number').pack; +var PERCENTAGE_LENGTH_DELC = { + 'margin': true, + 'margin-top': true, + 'margin-left': true, + 'margin-bottom': true, + 'margin-right': true, + + 'padding': true, + 'padding-top': true, + 'padding-left': true, + 'padding-bottom': true, + 'padding-right': true, + + 'top': true, + 'left': true, + 'botton': true, + 'right': true, + 'position': true, + + '-webkit-mask-box-image': true, + '-webkit-mask-position-x': true, + '-webkit-mask-position-y': true, + + 'background-position-x': true, + 'background-position-y': true, + + 'border': true, + 'border-width': true, + 'border-top-width': true, + 'border-left-width': true, + 'border-bottom-width': true, + 'border-right-width': true, + 'border-image-width': true, + + 'border-radius': true, + 'border-bottom-left-radius': true, + 'border-bottom-right-radius': true, + 'border-top-left-radius': true, + 'border-top-right-radius': true, + + 'font-size': true, + 'grid-column-gap': true, + 'grid-row-gap': true, + 'letter-spacing': true, + 'offset-distance': true, + 'scroll-snap-points-x': true, + 'scroll-snap-points-y': true, + 'shape-margin': true, + 'text-indent': true, + 'transform-origin': true, + 'word-spacing': true +}; +var PERCENTAGE_LENGTH_FN = { + 'inset': true, + 'polygon': true, + 'translate': true, + 'translate3d': true, + 'translateX': true, + 'translateY': true +}; + +module.exports = function compressPercentage(node, item) { + var value = packNumber(node.value, item); + var decl = this.declaration !== null ? this.declaration.property : null; + var fnName = this['function'] !== null ? this['function'].name : null; + + node.value = value; + + if (PERCENTAGE_LENGTH_DELC.hasOwnProperty(decl) || PERCENTAGE_LENGTH_FN.hasOwnProperty(fnName)) { + // Zero-value workaround + if (value === '0') { + item.data = { + type: 'Number', + loc: node.loc, + value: value + }; + } + } +}; diff --git a/lib/replace/index.js b/lib/replace/index.js index 8186bc18..d9007d45 100644 --- a/lib/replace/index.js +++ b/lib/replace/index.js @@ -4,7 +4,7 @@ var handlers = { AttributeSelector: require('./AttributeSelector'), Value: require('./Value'), Dimension: require('./Dimension'), - Percentage: require('./Dimension'), + Percentage: require('./Percentage'), Number: require('./Number'), String: require('./String'), Url: require('./Url'), From 3ce29334a4dea90788065a8c22fd10224eefdc01 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Thu, 2 Nov 2017 14:20:09 +0300 Subject: [PATCH 09/10] * null check --- lib/replace/Percentage.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/replace/Percentage.js b/lib/replace/Percentage.js index 2cc43dad..a9ed029f 100644 --- a/lib/replace/Percentage.js +++ b/lib/replace/Percentage.js @@ -67,8 +67,10 @@ module.exports = function compressPercentage(node, item) { node.value = value; - if (PERCENTAGE_LENGTH_DELC.hasOwnProperty(decl) || PERCENTAGE_LENGTH_FN.hasOwnProperty(fnName)) { - // Zero-value workaround + if ( + (decl !== null && PERCENTAGE_LENGTH_DELC.hasOwnProperty(decl)) || + (fnName !== null && PERCENTAGE_LENGTH_FN.hasOwnProperty(fnName)) + ) { if (value === '0') { item.data = { type: 'Number', From f314bfb0d5225528e566576167db722be5e429e0 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Thu, 2 Nov 2017 16:13:12 +0300 Subject: [PATCH 10/10] * ABBR -> FULLNAME --- lib/replace/Percentage.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/replace/Percentage.js b/lib/replace/Percentage.js index a9ed029f..e7886632 100644 --- a/lib/replace/Percentage.js +++ b/lib/replace/Percentage.js @@ -1,5 +1,5 @@ var packNumber = require('./Number').pack; -var PERCENTAGE_LENGTH_DELC = { +var PERCENTAGE_LENGTH_PROPERTY = { 'margin': true, 'margin-top': true, 'margin-left': true, @@ -51,7 +51,7 @@ var PERCENTAGE_LENGTH_DELC = { 'transform-origin': true, 'word-spacing': true }; -var PERCENTAGE_LENGTH_FN = { +var PERCENTAGE_LENGTH_FUNCTION = { 'inset': true, 'polygon': true, 'translate': true, @@ -68,8 +68,8 @@ module.exports = function compressPercentage(node, item) { node.value = value; if ( - (decl !== null && PERCENTAGE_LENGTH_DELC.hasOwnProperty(decl)) || - (fnName !== null && PERCENTAGE_LENGTH_FN.hasOwnProperty(fnName)) + (decl !== null && PERCENTAGE_LENGTH_PROPERTY.hasOwnProperty(decl)) || + (fnName !== null && PERCENTAGE_LENGTH_FUNCTION.hasOwnProperty(fnName)) ) { if (value === '0') { item.data = {