diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 7456f35ae..ea7d75956 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -44,6 +44,7 @@ const hasComposesValueNode = utils.hasComposesValueNode; const hasLessExtendValueNode = utils.hasLessExtendValueNode; const hasParensAroundValueNode = utils.hasParensAroundValueNode; const maybeToLowerCase = utils.maybeToLowerCase; +const isPostcssSimpleVar = utils.isPostcssSimpleVar; function genericPrint(path, options, print) { const node = path.getValue(); @@ -409,6 +410,9 @@ function genericPrint(path, options, print) { const iNextNode = node.groups[i + 1]; const iNextNextNode = node.groups[i + 2]; + if (isPostcssSimpleVar(iNode, iNextNode)) { + continue; + } // Ignore after latest node (i.e. before semicolon) if (!iNextNode) { continue; diff --git a/src/language-css/utils.js b/src/language-css/utils.js index 91a296071..34946f639 100644 --- a/src/language-css/utils.js +++ b/src/language-css/utils.js @@ -211,6 +211,15 @@ function hasParensAroundValueNode(node) { ); } +function isPostcssSimpleVar(currentNode, nextNode) { + return ( + currentNode.value === "$$" && + currentNode.type === "value-func" && + nextNode && + nextNode.type === "value-word" && + !nextNode.raws.before + ); +} module.exports = { getAncestorCounter, getAncestorNode, @@ -237,5 +246,6 @@ module.exports = { maybeToLowerCase, hasLessExtendValueNode, hasComposesValueNode, - hasParensAroundValueNode + hasParensAroundValueNode, + isPostcssSimpleVar }; diff --git a/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap b/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap index cd6544af6..8a6bb902c 100644 --- a/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap @@ -552,3 +552,26 @@ a { } `; + +exports[`postcss-simple-vars.css 1`] = ` +background-color: $$(style)Color; +background-color: $$(style)Color Color122; +color: @@color; +font: 100% $font-stack; +background-color: darken(@link-color, 10%); +border: 1px solid var(--border-color); +color: $(style)color; +color: @@(style) color123; +color: @@(style)color123; +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +background-color: $$(style)Color; +background-color: $$(style)Color Color122; +color: @@color; +font: 100% $font-stack; +background-color: darken(@link-color, 10%); +border: 1px solid var(--border-color); +color: $(style) color; +color: @@(style) color123; +color: @@(style) color123; + +`; diff --git a/tests/css_postcss_plugins/postcss-simple-vars.css b/tests/css_postcss_plugins/postcss-simple-vars.css new file mode 100644 index 000000000..a2d3d24d6 --- /dev/null +++ b/tests/css_postcss_plugins/postcss-simple-vars.css @@ -0,0 +1,9 @@ +background-color: $$(style)Color; +background-color: $$(style)Color Color122; +color: @@color; +font: 100% $font-stack; +background-color: darken(@link-color, 10%); +border: 1px solid var(--border-color); +color: $(style)color; +color: @@(style) color123; +color: @@(style)color123;