-webkit and -moz browser prefixes are eaten by SASS

[PandaWhisperer]

I've noticed this problem while working with a SASS stylesheet. Not sure if this applies to all prefixed names or values, but certainly to some. Here's a minimal example to reproduce the issue:

Create a new file bug.scss in a blank directory with the following content:

.flexbox {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-box !important;
  display: -o-box !important;
  display: box !important;
}

Then run harp server (version 0.14.0) in that directory. In another terminal window, run curl localhost:9000/bug.css. This gives the following output:

.flexbox{display:-ms-box !important;display:-o-box !important;display:box !important;}

Miraculously, the -webkit and -moz prefixed lines have disappeared, but the rest is unchanged (except for whitespace).

Now, I know harp uses terraform, which in turn uses node-sass. To make sure this isn't an issue in the latter, I ran node-sass bug.scss, which creates bug.css, with the following content:

.flexbox {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-box !important;
  display: -o-box !important;
  display: box !important; }

Aha! All the expected lines are there.

I tried this with both node-sass version 1.0.1 (most recent) and 0.9.3 (which terraform uses). Same result each time.

Somewhere along the line, between harp and terraform, the other to prefixes get lost. Not sure why or how.

[PandaWhisperer]

Update: also tried running node-sass with --output-style=compressed, which is what terraform uses. The result is as expected:

.flexbox{display:-webkit-box !important;display:-moz-box !important;display:-ms-box !important;display:-o-box !important;display:box !important;}

[PandaWhisperer]

Further investigation into the terraform code reveals that all generated CSS is run through the autoprefixer. Might that be the culprit? My spidey senses are tingling...

[PandaWhisperer]

Hmmm. Just ran the original SCSS file through the autoprefixer, with the following result:

.flexbox {
  display: -webkit-box !important;
  display: -ms-box !important;
  display: -o-box !important;
  display: box !important;
}

Only the -moz prefix got removed now.

Checked the version information: I was using 3.1.0, but terraform uses 2.2.0. So I installed that. Ran it again. And now we have it:

.flexbox {
  display: -ms-box !important;
  display: -o-box !important;
  display: box !important;
}

Looks like the version of the autoprefixer is a bit outdated. Perhaps we could get a bump? Also, with regards to using legacy (hand-"optimized") stylesheets, might it be a good idea to allow disabling the autoprefixer via a _data.json setting?

I'll file an issue on the terraform project.

[kennethormandy]

Closing in favour of sintaxi/terraform#68