CSS sourcemaps are broken unless the autoprefixer is disabled

[toolness]

Aki noticed recently that CSS sourcemaps are currently broken. I think this occurred in f792847 when we migrated from lessprefixer to gulp-autoprefixer. It seems to be due to sindresorhus/gulp-autoprefixer#10, which is still unresolved.

In #386, Aki tried moving to less-plugin-autoprefix to resolve this problem, but that seems to be plagued by less/less-plugin-autoprefix#7 (see also #386 (comment)).

Potential solutions:

• Move back to lessprefixer. Unfortunately, this will involve changing all our LESS back to lessprefixer's mixins, which may be a bit of a chore at this point.
• Attempt to downgrade our version of LESS, which Aki reportedly had some success with (but may not have committed to her PR, since it's still not working on my end). Can't do this due to v2.0.3 Undefined is not a function gulp-community/gulp-less#140.
• Just live with it until either of the aforementioned bugs in less-plugin-autoprefix or gulp-autoprefixer are fixed. In the meantime, we could potentially offer some kind of environment variable that disables the autoprefixer in favor of having usable sourcemaps (this was done in 38de9d2).

The current workaround for this is to disable the autoprefixer by setting LESS_AUTOPREFIXER to off, which was added in 38de9d2.

[toolness]

Update: I tried minifying the CSS before autoprefixing, which was recommended in sindresorhus/gulp-autoprefixer#10 (comment), and it appeared to work at first glance: CSS rules were no longer always mapped to styles.css. However, upon closer inspection, they were mapped to the wrong line number in the corresponding .less file, and sometimes they were even mapped to the wrong .less file entirely.

[toolness]

I recently watched Andrey Sitnik's CSSConf 2015 talk on PostCSS: the Future after Sass and LESS (bonus: @iamjessklein made an illustration of it) and it brought up two possible solutions:

1. Replace our less-autoprefixer with postcss/autoprefixer.
2. Replace our entire LESS toolchain with PostCSS.

Apparently option 1 is used by Google, and option 2 is used by Twitter, so it's not just some weird experimental new thing we'd be switching to. Based on the talk, I think it could potentially be a good idea... another strategy is to first do option 1 and then do option 2 if we really want.

@mmmavis, if you have time to watch that video (or alternatively read A List Apart article on PostCSS) I'd like to know what you think.

[mmmavis]

i'm horrible at monitoring GitHub mentions... just saw this now. Yup I'll find time to watch that video sometime this week!

[Pomax]

this will be part of #1509