Plugin syntax for Webpack v2

[josh18]

var LessPluginCleanCSS = require('less-plugin-clean-css');

module.exports = {
  ...
  lessLoader: {
    lessPlugins: [
      new LessPluginCleanCSS({advanced: true})
    ]
  }
};

This code doesn't seem to work in Webpack v2, any idea what the correct syntax should be? Currently I get this error message:

throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);

[SpaceK33z]

One of these should work (note: untested, don't have the time):

test: /\.less$/,
use: [{
    loader: 'less-loader',
    options: {
        lessPlugins: [...]
    },
}, ...]

test: /\.less$/,
use: [{
    loader: 'less-loader',
    options: {
        config: { lessPlugins: [...] }
    },
}, ...]

[josh18]

Tested those and still can't get it to work unfortunately. No error messages, just doesn't seem to do anything.

options: {
    strictMath: true
}

is working though so the options are getting through.

What are you expecting inside lessPlugins: [...]? new LessPluginCleanCSS()? I've also tried 'cleanCss' and 'less-plugin-clean-cs'.

My uneducated guess is that options gets converted to JSON so the plugin instance doesn't get transferred and the less loader is expecting an instance. But I don't really know how any of this works so I am probably wrong.

[SpaceK33z]

My uneducated guess is that options gets converted to JSON so the plugin instance doesn't get transferred and the less loader is expecting an instance.

No, that was the case in webpack v1. Since v2 the options don't get serialized. Unfortunately I don't know any other way. You could place some logs in node_modules/less-loader/index.js to find out where it fails.

[josh18]

Are you sure it works like that? I have somewhat got it working by changing this.options -> config here and then making my config look like this:

loader: 'less-loader',
options: {
    lessLoader: {
        lessPlugins: [
            new LessPluginAutoprefix(),
            new LessPluginCleanCSS()
        ]
    }
}

However I get the error message plugin.install is not a function when I try to run it.

When I test config[configKey].lessPlugins[0] instanceof LessPluginAutoprefix it is false. config[configKey].lessPlugins[0] is an object of the options that I passed in my config so it exists, it just looks like it has been flattened.

If I force it something like config[configKey].lessPlugins[0] = new LessPluginAutoprefix() it works perfectly. Note that I'm using the latest version of the webpack beta.

[josh18]

This is one way we could fix it, add this after line 49:

config.plugins = config.plugins.map(function(plugin) {
    let pluginObject = require(plugin.name);

    // If the plugin returns a function we need to call it before we pass it on
    if (typeof pluginObject === 'function') {
        if (plugin.options) {
            return new pluginObject(plugin.options);
        } else {
            return new pluginObject();
        }
    }

    return pluginObject;
});

and then the config would be:

options: {
    plugins: [
        {
            name: 'less-plugin-autoprefix'
        },
        {
            name: 'less-plugin-clean-css',
            options: {
                advanced: true
            }
        }
    ]
}

Thoughts?

[josh18]

Sorry, I know you are busy but are you able to have a quick look at the above and let me know if you want me to create a pull request?

Or if that solution doesn't look good let me know what direction you want to head in and I'll see what I can do.

[wujohns]

issue #128 has the solution,But you need to use webpack.LoaderOptionsPlugin method to set the param lessPlugins.It is caused by the param parsing strategy of webpack. Maybe we should add a issue to webpack(2.x)

[josh18]

Closing, the correct syntax is something like:

const lessPluginAutoPrefix = require('less-plugin-autoprefix');

test: /\.less$/,
use: [{
    loader: 'less-loader',
    options: {
        plugins: [new lessPluginAutoPrefix({browsers: ['last 2 versions']})]
    },
}, ...]

(options.plugins instead of options.lessPlugins)

[bazineta]

@josh18 While this is closed, I'd love to know how you got past the plugin.install is not a function issues with this syntax.

[josh18]

@bazineta Sorry I don't think I ever got that issue. Make sure you look at the docs for the plugin you are using and check that you are using the correct syntax. Some will be new lessPluginEtc(options) and I believe others are just lessPlugin.

[bazineta]

@josh18 I suspect you might be using a version that works; in my testing of 3.0.0, this just does not seem to work at all, nor is the documentation in the README even accurate; 'lessPlugins' does absolutely nothing, though this was all merged just 5 days ago. Using 'plugins' does at least seem to use the plugins, but there seems no way to move beyond the plugin install is not a function issues.

[bazineta]

I think the problems here are several.

Firstly, lessPlugins doesn't appear to actually do anything.

If you specify less plugins in plugins, the cloneDeep() call in the loader's options processing will wipe the install function from each plugin; that's where my plugin.install is not a function issues are coming from in that case.

What seems to work, assuming that lessPlugins is the desired approach, is adding this:

if (options.lessPlugins) {
    options.plugins.push.apply(options.plugins, loaderUtils.getOptions(this).lessPlugins);
}

immediately after the line:

options.plugins.push(webpackPlugin);

In the loader.

I'd guess that cloneDeep() is not actually what's desired here, but this approach matches the README.

[josh18]

Can you post your webpack config and relevant node module versions?