There should be a pre-build check to ensure equivalence of scss, less, stylus versions

[benwiley4000]

It would be much harder to commit less, scss and stylus files out of sync with one another if the build process first compiled all three versions in memory and checked for equivalent output.

If there are differences, the build should cancel and a diff should be printed to the console.

Would help to resolve #36 in a sane manner (no one wants to validate all the differences with their eyeballs).

[jkjustjoshing]

This is a much harder problem than it sounds like. I just tried doing this with css-semdiff, which seems perfect for the job. But due to the different compilation edge cases, there are a lot of false positives.

For example, take the following code:

a {
    position: absolute;
    position: absolute;
}

When you compile this with the SASS compiler, you get the same output as the input. However, when you compile it with the LESS compiler, it gets rid of the 1st occurrence of the duplicate rule and only leaves you with the 2nd. The .icono-home:after selector triggers this issue.

Another issue is this scss code:

%foo {
  position: absolute;
}

[id] {
  &.b {
    @extend %foo;
  }
}

The output of this (with the current SASS compiler for this project) is:

/* Current output */
.b[id]:before {
    position: absolute;
}
/* Expected output (that matches Stylus and LESS) */
[id].b:before {
    position: absolute;
}

These are equivalent functionally, but css-semdiff sees them as different.

[jkjustjoshing]

One potential solution would be to check a known diff into source control (where we've verified no changes are functional), and verify the diff doesn't change (similar to how Jest snapshots work for unit testing)