Feature Request: Multiple output files?

[nring]

Thanks for creating this plugin! It's been a massive help in figuring out how to assemble all these moving pieces together.

Would it be possible to leverage your plugin to allow for multiple outputted files at build time? I have a use case where I have multiple white label tenants each requiring their own primary colors on top of the application defaults. I think the naive approach would to be to style each white label tenant's styles individually, overwriting defaults. But I'd have to update that every time Ant releases a new component.

What I'd love to do is to be able to specify multiple files, each using a custom lessVarsFilePath. I would then import the appropriate pre-built CSS file in my app. At least that way I could depend on a custom @primary-color per white label tenant.

Something like this as a next.config.js:

const withPlugins = require('next-compose-plugins');
const withAntdLess = require('next-plugin-antd-less');

const tenant1 = withAntdLess({
  lessVarsFilePath: './src/styles/antd-custom-tenant1.less',
  cssLoaderOptions: {
  webpack(config) {
    return config;
  },
});
const tenant2 = withAntdLess({
  lessVarsFilePath: './src/styles/antd-custom-tenant2.less',
  cssLoaderOptions: {
  webpack(config) {
    return config;
  },
});

module.exports = withPlugins([tenant1, tenant2], {
    // ...next config
  },
});

I know the above does not work, it just defaults to whatever variables were defined in my tenant2 config.

[SolidZORO]

yes, tenant2 will overwrite tenant1.

you can try CSS Variables replace Less Variables?

[nring]

I thought about going the CSS Variables route, like this project did, but then there's a lot of re-write that needs to happen. It also makes upgrading Ant near impossible.

Are you suggesting another way with your plugin?

[SolidZORO]

keyword: less css namespace.

https://stackoverflow.com/questions/13106722/in-less-css-is-it-possible-to-use-a-namespaced-variable-in-a-call-to-another-mi

[nring]

Thanks for the link, I wasn't aware of this Less feature.

I might be misunderstanding how you're implying I use it, but I still think it won't work for my problem. At build time, Webpack and Next won't know what tenant is visiting the application at the time Webpack is building the Ant Design CSS from the variables file.