From 5c69a82651de1cffa7cc7e54a17ddc1d4ba61b85 Mon Sep 17 00:00:00 2001 From: Dmitriy Lodyanov Date: Mon, 28 Aug 2017 12:23:51 +0300 Subject: [PATCH 1/2] SHA-1: 5c79bca33d742cd60ed4df894620b06e44c0db2e * Partial fix https://github.com/morishitter/stylefmt/issues/86 Now when css contain new lines in decl value, stylefmt only format and collaps spaces, but keep new lines Example: -- before: .test { font: 'italic small-caps bold 12px arial, sans-serif',14px; background: red, green , yellow; background-color: rgba(0, 0, 0, .4), rgba(0, 0, 0, 0); } -- actual: .test { font: 'italic small-caps bold 12px arial, sans-serif',14px; background: red, green, yellow; background-color: rgba(0, 0, 0, .4), rgba(0, 0, 0, 0); } And there result is (expected, fixed now): .test { font: 'italic small-caps bold 12px arial, sans-serif',14px; background: red, green, yellow; background-color: rgba(0, 0, 0, .4), rgba(0, 0, 0, 0); } --- lib/formatDecls.js | 8 +++-- lib/formatValues.js | 30 +++++++++++++++---- test/stylelint/extends/extends.out.css | 8 +++-- test/stylelint/extends2/extends2.out.css | 8 +++-- test/stylelint/extends3/extends3.out.css | 8 +++-- .../indentation-2space-severity.out.css | 3 +- .../indentation-2space.out.css | 3 +- .../indentation-4space-severity.out.css | 3 +- .../indentation-4space.out.css | 3 +- .../indentation-tab-severity.out.css | 3 +- .../indentation-tab/indentation-tab.out.css | 3 +- 11 files changed, 61 insertions(+), 19 deletions(-) diff --git a/lib/formatDecls.js b/lib/formatDecls.js index dd18178..d20160a 100644 --- a/lib/formatDecls.js +++ b/lib/formatDecls.js @@ -22,7 +22,11 @@ function formatDecls (rule, indent, indentWidth, stylelint) { decl.prop = decl.raws.before.trim().replace(/\n/g, '') + decl.prop } - decl.raws.between = ': ' + if (decl.raws.between.indexOf('\n') !== -1) { + decl.raws.between = ':\n' + indent + indentWidth.repeat(2) + } else { + decl.raws.between = ': ' + } decl.raws.before = declarationEmptyLineBefore(stylelint, decl, indent, indentWidth, isSingleLine) if (getProperty(stylelint, 'declaration-colon-space-before')) { @@ -33,7 +37,7 @@ function formatDecls (rule, indent, indentWidth, stylelint) { decl.raws.between = declarationColonSpaceAfter(stylelint, decl.raws.between) } - formatValues(decl, stylelint) + formatValues(decl, indent, indentWidth, stylelint) }) } diff --git a/lib/formatValues.js b/lib/formatValues.js index c23ace3..93fec0b 100644 --- a/lib/formatValues.js +++ b/lib/formatValues.js @@ -2,9 +2,10 @@ var formatTransforms = require('./formatTransforms') var formatColors = require('./formatColors') var formatZeros = require('./formatZeros') var formatShorthand = require('./formatShorthand') +var valueParser = require('postcss-value-parser') var getProperty = require('./util').getProperty -function formatvalues (decl, stylelint) { +function formatValues (decl, indent, indentWidth, stylelint) { var isDataUrl = /data:.+\/(.+);base64,(.*)/.test(decl.value) var isVarNotation = /var\s*\(.*\)/.test(decl.value) var isString = /^("|').*("|')$/.test(decl.value) @@ -15,7 +16,25 @@ function formatvalues (decl, stylelint) { } if (!isString) { - decl.value = decl.value.trim().replace(/\s+/g, ' ') + var parsedValue = valueParser(decl.value) + decl.value = '' + parsedValue.nodes.map(function (node) { + var value = valueParser.stringify(node) + value = value.replace(/\s+/g, ' ') + if (node.before && node.before.indexOf('\n') !== -1) { + decl.value += '\n' + } + decl.value += value + if (node.after && node.after.indexOf('\n') !== -1) { + decl.value += '\n' + } + }) + + decl.value = decl.value.trim().replace(/[^\S\n]+/g, ' ') + decl.value = decl.value.replace(/\n /, '\n') + decl.value = decl.value.replace(/ \n/, '\n') + decl.value = decl.value.replace( + /\n+/g, '\n' + indent + indentWidth.repeat(2)) } switch (getProperty(stylelint, 'string-quotes')) { @@ -32,13 +51,14 @@ function formatvalues (decl, stylelint) { } if (decl.prop === 'font-family') { - decl.value = decl.value.trim().replace(/\s+,\s/g, ', ') + decl.value = decl.value.trim().replace(/[^\S\n]+,[^\S\n]/g, ', ') return decl } if (!isDataUrl) { // Remove spaces before commas and keep only one space after. - decl.value = decl.value.trim().replace(/(\s+)?,(\s)*/g, ', ') + decl.value = decl.value.trim().replace(/([^\S\n]+)?,[^\S\n]*/g, ',') + decl.value = decl.value.replace(/,([^\n])/g, ', $1') } if (isVarNotation) { @@ -75,4 +95,4 @@ function formatvalues (decl, stylelint) { } -module.exports = formatvalues +module.exports = formatValues diff --git a/test/stylelint/extends/extends.out.css b/test/stylelint/extends/extends.out.css index 343e5a4..e8f5803 100644 --- a/test/stylelint/extends/extends.out.css +++ b/test/stylelint/extends/extends.out.css @@ -50,10 +50,14 @@ @media screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .selector { - background-image: repeating-linear-gradient(-45deg, transparent, #fff 25px, rgba(255, 255, 255, 1) 50px); + background-image: + repeating-linear-gradient(-45deg, transparent, #fff 25px, rgba(255, 255, 255, 1) 50px); margin: 10px; margin-bottom: 5px; - box-shadow: 0 1px 1px #000, 0 1px 0 #fff, 2px 2px 1px 1px #ccc inset; + box-shadow: + 0 1px 1px #000, + 0 1px 0 #fff, + 2px 2px 1px 1px #ccc inset; height: 10rem; } /* Flush nested single line comment */ diff --git a/test/stylelint/extends2/extends2.out.css b/test/stylelint/extends2/extends2.out.css index 8fbc027..571af62 100644 --- a/test/stylelint/extends2/extends2.out.css +++ b/test/stylelint/extends2/extends2.out.css @@ -48,10 +48,14 @@ @media screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .selector { - background-image: repeating-linear-gradient(-45deg, transparent, #fff 25px, rgba(255, 255, 255, 1) 50px); + background-image: + repeating-linear-gradient(-45deg, transparent, #fff 25px, rgba(255, 255, 255, 1) 50px); margin: 10px; margin-bottom: 5px; - box-shadow: 0 1px 1px #000, 0 1px 0 #fff, 2px 2px 1px 1px #ccc inset; + box-shadow: + 0 1px 1px #000, + 0 1px 0 #fff, + 2px 2px 1px 1px #ccc inset; height: 10rem; } /* Flush nested single line comment */ diff --git a/test/stylelint/extends3/extends3.out.css b/test/stylelint/extends3/extends3.out.css index 8fbc027..571af62 100644 --- a/test/stylelint/extends3/extends3.out.css +++ b/test/stylelint/extends3/extends3.out.css @@ -48,10 +48,14 @@ @media screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .selector { - background-image: repeating-linear-gradient(-45deg, transparent, #fff 25px, rgba(255, 255, 255, 1) 50px); + background-image: + repeating-linear-gradient(-45deg, transparent, #fff 25px, rgba(255, 255, 255, 1) 50px); margin: 10px; margin-bottom: 5px; - box-shadow: 0 1px 1px #000, 0 1px 0 #fff, 2px 2px 1px 1px #ccc inset; + box-shadow: + 0 1px 1px #000, + 0 1px 0 #fff, + 2px 2px 1px 1px #ccc inset; height: 10rem; } /* Flush nested single line comment */ diff --git a/test/stylelint/indentation-2space-severity/indentation-2space-severity.out.css b/test/stylelint/indentation-2space-severity/indentation-2space-severity.out.css index 61d1567..745531e 100644 --- a/test/stylelint/indentation-2space-severity/indentation-2space-severity.out.css +++ b/test/stylelint/indentation-2space-severity/indentation-2space-severity.out.css @@ -1,5 +1,6 @@ @media print { a { - background-position: top left, top right; + background-position: top left, + top right; } } diff --git a/test/stylelint/indentation-2space/indentation-2space.out.css b/test/stylelint/indentation-2space/indentation-2space.out.css index 61d1567..745531e 100644 --- a/test/stylelint/indentation-2space/indentation-2space.out.css +++ b/test/stylelint/indentation-2space/indentation-2space.out.css @@ -1,5 +1,6 @@ @media print { a { - background-position: top left, top right; + background-position: top left, + top right; } } diff --git a/test/stylelint/indentation-4space-severity/indentation-4space-severity.out.css b/test/stylelint/indentation-4space-severity/indentation-4space-severity.out.css index 61d7a6f..d27b265 100644 --- a/test/stylelint/indentation-4space-severity/indentation-4space-severity.out.css +++ b/test/stylelint/indentation-4space-severity/indentation-4space-severity.out.css @@ -1,5 +1,6 @@ @media print { a { - background-position: top left, top right; + background-position: top left, + top right; } } diff --git a/test/stylelint/indentation-4space/indentation-4space.out.css b/test/stylelint/indentation-4space/indentation-4space.out.css index 61d7a6f..d27b265 100644 --- a/test/stylelint/indentation-4space/indentation-4space.out.css +++ b/test/stylelint/indentation-4space/indentation-4space.out.css @@ -1,5 +1,6 @@ @media print { a { - background-position: top left, top right; + background-position: top left, + top right; } } diff --git a/test/stylelint/indentation-tab-severity/indentation-tab-severity.out.css b/test/stylelint/indentation-tab-severity/indentation-tab-severity.out.css index 7f5ae50..5250ef7 100644 --- a/test/stylelint/indentation-tab-severity/indentation-tab-severity.out.css +++ b/test/stylelint/indentation-tab-severity/indentation-tab-severity.out.css @@ -1,5 +1,6 @@ @media print { a { - background-position: top left, top right; + background-position: top left, + top right; } } diff --git a/test/stylelint/indentation-tab/indentation-tab.out.css b/test/stylelint/indentation-tab/indentation-tab.out.css index 7f5ae50..5250ef7 100644 --- a/test/stylelint/indentation-tab/indentation-tab.out.css +++ b/test/stylelint/indentation-tab/indentation-tab.out.css @@ -1,5 +1,6 @@ @media print { a { - background-position: top left, top right; + background-position: top left, + top right; } } From f956b22091010b7d8f729cc1541d92b4a9920b6a Mon Sep 17 00:00:00 2001 From: Dmitriy Lodyanov Date: Mon, 28 Aug 2017 14:24:39 +0300 Subject: [PATCH 2/2] replace map for foreach fix --- lib/formatValues.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/formatValues.js b/lib/formatValues.js index 93fec0b..0be7f87 100644 --- a/lib/formatValues.js +++ b/lib/formatValues.js @@ -18,7 +18,7 @@ function formatValues (decl, indent, indentWidth, stylelint) { if (!isString) { var parsedValue = valueParser(decl.value) decl.value = '' - parsedValue.nodes.map(function (node) { + parsedValue.nodes.forEach(function (node) { var value = valueParser.stringify(node) value = value.replace(/\s+/g, ' ') if (node.before && node.before.indexOf('\n') !== -1) {