Incorrect LoaderOptionsPlugin format in Readme

[ddgromit]

The readme section for using LoaderOptionsPlugin with Webpack V2 says:

plugins: [
  new webpack.LoaderOptionsPlugin({
    test: /\.styl$/,
    stylus: {
      // You can have multiple stylus configs with other names and use them
      // with `stylus-loader?config=otherConfig`.
      default: {
        use: [stylus_plugin()],
      },
      otherConfig: {
        use: [other_plugin()],
      },
    },
  }),
],

This format is incorrect and the configuration will not get loaded, and not throw any errors about it. Specifically the test field doesn't do anything and the stylus block must be wrapped in an options field. From the webpack docs, here's the correct format:

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      stylus: {
        // You can have multiple stylus configs with other names and use them
        // with `stylus-loader?config=otherConfig`.
        default: {
          use: [stylus_plugin()],
        },
        otherConfig: {
          use: [other_plugin()],
        },
      },
    },
  }),
],

Also referenced in issue #149.

[janein]

Hey @ddgromit , could you post a full working example of your stylus-loader settings and your plugins?

Because I tried it like this and haven't got it working:

function myStylusPlugin() {
  console.log('test #1');
  return function(style) {
    console.log('test #2');

    style.define('custom-color-1', new stylus.nodes.RGBA(1, 0x11, 0x22, 0x33));
  };
}

module.exports = {
   // ...
   plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        stylus: {
          // You can have multiple stylus configs with other names and use them
          // with `stylus-loader?config=otherConfig`.
          default: {
            use: [
              myStylusPlugin()
            ],
          }
        }
      }
    }),
  ]
}

In the output I can see it reaches test #1 twice, but never test #2.

When I try to use the variable in an .styl-file like this, it doesn't get replaced:

$theme := {
  primary: $custom-color-1
}

I don't have much experience with stylus so I'm wondering if it should work this way or if I'm completely wrong^^

[ddgromit]

@janein I don't use default, maybe that will help:

module.exports = {
   plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        stylus: {
          use: [rupture()],
        },
      },
    }),
  ]
}

[janein]

sorry for not responding - seems like I got it working with your help and didn't say thank you :(
Just stumbled upon this issue again and I think it is time to close it.

Thanks again for your help!

[alexander-akait]

LoaderOptionsPlugin was deprecated and removed from docs and code