less / less-plugin-autoprefix

Adds the ability for less to be post-processed by autoprefixer
Apache License 2.0
170 stars 32 forks source link

Browser usage is not supported at this time #22

Open roelvanduijnhoven opened 8 years ago

roelvanduijnhoven commented 8 years ago

My current situation does need this functionality. The LESS files are compiled on the client, and we use modifyVars after a settings is changed by the user.

Do you hava an idea how this library could theortically be extended for this to work? I would be willing to contribute.

As less.modifyVars does not return the result, but adapts the DOM, it is not easy to chain an autoprefix after it. A solution could be to look at the latest introduced <style> tag and autoprefix it. Howver that feels really hacky.

lukeapage commented 8 years ago

plugins are supported browserside, all you'd need to do is package this plugin and auto prefixer (say using browserify) into a file and set a window.less.plugins before less.js is loaded.

roelvanduijnhoven commented 8 years ago

Thanks for the input.

I bundled using:

browserify --standalone AutoprefixProcessor main.js -o bundle.js

And then registered as:

less.plugins = [
    new window.AutoprefixProcessor({
        browsers: ['> 0.5% in NL', 'last 3 versions', 'Firefox ESR']
    })
];

But gives no input.

Most likely related to version 1.7.2 of Less I am running. First need to upgrade that.

lukeapage commented 8 years ago

yes, it needs a v2..

roelvanduijnhoven commented 8 years ago

Thanks for helping out. So we upgraded from the 1.7.2 release (which was long due ;))!

Using the dutch set does not work. It fails

Uncaught (in promise) Error: Cannot find module 'caniuse-db/region-usage-json/NL'

Even though I explicitly required it in my main.js file and the set seems to be present in the bundle:

var usage = require('caniuse-db/region-usage-json/NL');
module.exports = require('./lib/index.js');

The JS file that I build this way has a minimized file size of 1.2MB :fearful:

roelvanduijnhoven commented 8 years ago

There is a clean solution for this now. That is using postcss using the less syntax. That we I can generate a autoprefixed LESS file that I serve to the front-end.

You +1 on closing this one @lukeapage?