Replace manual CSS vendor prefixes with PHP Autoprefixer

[davwheat]

Feature Request

Linked to flarum/framework#2762

At the moment, we need to manually specify vendor prefixes in our Less stylesheets, but this leads to inconsistent behaviour between extensions and core (and even within core itself!).

We should deprecate vendor prefixes within our stylesheets and instead implement a PHP-based version of Autoprefixer. The original version of Autoprefixer is for Node.js and is recommended by Google, and used in Twitter and Alibaba.

Using Autoprefixer, we can specify a list of browsers using browserslist syntax. For us this should be something like this.

$css = "body { background: black; }"

// This covers ~92% of browsers as of 2021-04-10
$autoprefixer = new Autoprefixer([
    'last 2 versions',
    'not ie > 0',
    'firefox ESR', // Firefox Extended Support Release (mainly for enterprise)
    'not dead',
    'ios_saf >= 10',
    'safari >= 12'
]);

$compiled_css = $autoprefixer->compile($css)

We can also pass a specific browserslist query as a 2nd parameter to compile(), meaning we could even only supply the CSS needed for specific browsers if we wanted to, but this is something for way in the future.

[tankerkiller125]

This is an excellent idea, this I think would greatly simplify the LESS for both us, theme devs, and extension devs.