diff --git a/src/printer-postcss.js b/src/printer-postcss.js index 9695adf79..54f2f278b 100644 --- a/src/printer-postcss.js +++ b/src/printer-postcss.js @@ -60,10 +60,21 @@ function genericPrint(path, options, print) { ]); } case "css-decl": { + // When the following less construct &:extend(.foo); is parsed with scss, + // it will put a space after `:` and break it. Ideally we should parse + // less files with less, but we can hardcode this to work with scss as + // well. + const isValueExtend = + n.value.type === "value-root" && + n.value.group.type === "value-value" && + n.value.group.group.type === "value-func" && + n.value.group.group.value === "extend"; + return concat([ n.raws.before.replace(/[\s;]/g, ""), n.prop, - ": ", + ":", + isValueExtend ? "" : " ", path.call(print, "value"), n.important ? " !important" : "", n.nodes diff --git a/tests/css_extend/__snapshots__/jsfmt.spec.js.snap b/tests/css_extend/__snapshots__/jsfmt.spec.js.snap new file mode 100644 index 000000000..d2cf29d03 --- /dev/null +++ b/tests/css_extend/__snapshots__/jsfmt.spec.js.snap @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`extend.css 1`] = ` +.foobar { + &:extend(.foo); +} + +.thing { + &:hover { + background-color: blue; + .thing-child { + } + } +} +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +.foobar { + &:extend(.foo); +} + +.thing { + &:hover { + background-color: blue; + .thing-child { + } + } +} + +`; diff --git a/tests/css_extend/extend.css b/tests/css_extend/extend.css new file mode 100644 index 000000000..19ff013b9 --- /dev/null +++ b/tests/css_extend/extend.css @@ -0,0 +1,11 @@ +.foobar { + &:extend(.foo); +} + +.thing { + &:hover { + background-color: blue; + .thing-child { + } + } +} diff --git a/tests/css_extend/jsfmt.spec.js b/tests/css_extend/jsfmt.spec.js new file mode 100644 index 000000000..a7d303b6c --- /dev/null +++ b/tests/css_extend/jsfmt.spec.js @@ -0,0 +1 @@ +run_spec(__dirname, { parser: "postcss" });