with-ant-design-less can't work together with cssModule

Examples bug report

Example name

with-ant-design-less

Describe the bug

Using ant-design-less with cssModule makes all ant design style disappear.

To Reproduce

1. Go to ‘next.config.js’
2. Add this code snippets into withLess option

cssModules: true,
cssLoaderOptions: {
  importLoaders: 1,
  localIdentName: '[local]___[hash:base64:5]',
},

1. Save
2. All ant design style is gone

Expected behavior

The example should apply ant design style when cssModule option is set to true.

Screenshots

Before apply cssModule

After apply cssModule

System information

• OS: macOS
• Browser: Any browser
• Version of Next.js: 9.0.2

[phakphumi]

After taking the time to research I found that setting cssModule to true turn the whole project to use cssModule but some node_modules like antd doesn’t implement by using cssModule.

So, I customized @zeit/next-less to support work like this.

next-antd-less.config.js

var cssLoaderConfig = require('@zeit/next-css/css-loader-config');

module.exports = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack: (config, options) => {
      if (!options.defaultLoaders) {
        throw new Error(
          'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade'
        );
      }

      const { dev, isServer } = options;
      const {
        cssModules,
        cssLoaderOptions,
        postcssLoaderOptions,
        lessLoaderOptions = {},
      } = nextConfig;

      options.defaultLoaders.less = cssLoaderConfig(config, {
        extensions: ['less'],
        cssModules,
        cssLoaderOptions,
        postcssLoaderOptions,
        dev,
        isServer,
        loaders: [
          {
            loader: 'less-loader',
            options: lessLoaderOptions,
          },
        ],
      });

      config.module.rules.push({
        test: /\.less$/,
        exclude: /node_modules/,
        use: options.defaultLoaders.less,
      });

      // disable antd css module
      config.module.rules.push({
        test: /\.less$/,
        include: /node_modules/,
        use: cssLoaderConfig(config, {
          extensions: ['less'],
          cssModules: false,
          cssLoaderOptions: {},
          dev,
          isServer,
          loaders: [
            {
              loader: 'less-loader',
              options: lessLoaderOptions,
            },
          ],
        }),
      });

      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals),
        ];
  
        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader',
        });
      }

      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, options);
      }

      return config;
    }
  });
};

then use it in next.config.js

const withNextAntdLess = require('./next-antd-less.config');
module.exports = withNextAntdLess({
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: '[local]___[hash:base64:5]',
    },
})

In my case, it usually works. Hopefully, It will help someone to solve the problem to work with antd together with cssModule.

Related example/issues/modules which I use to compose the solution. #8054 #7957 with-ant-design-less next-antd-aza-less

Anyway, if there is an official solution for this issue it will be very good. In my opinion, it will be a common issue.

[phucvo0709]

After taking the time to research I found that setting cssModule to true turn the whole project to use cssModule but some node_modules like antd doesn’t implement by using cssModule.

So, I customized @zeit/next-less to support work like this.

next-antd-less.config.js

var cssLoaderConfig = require('@zeit/next-css/css-loader-config');

module.exports = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack: (config, options) => {
      if (!options.defaultLoaders) {
        throw new Error(
          'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade'
        );
      }

      const { dev, isServer } = options;
      const {
        cssModules,
        cssLoaderOptions,
        postcssLoaderOptions,
        lessLoaderOptions = {},
      } = nextConfig;

      options.defaultLoaders.less = cssLoaderConfig(config, {
        extensions: ['less'],
        cssModules,
        cssLoaderOptions,
        postcssLoaderOptions,
        dev,
        isServer,
        loaders: [
          {
            loader: 'less-loader',
            options: lessLoaderOptions,
          },
        ],
      });

      config.module.rules.push({
        test: /\.less$/,
        exclude: /node_modules/,
        use: options.defaultLoaders.less,
      });

      // disable antd css module
      config.module.rules.push({
        test: /\.less$/,
        include: /node_modules/,
        use: cssLoaderConfig(config, {
          extensions: ['less'],
          cssModules: false,
          cssLoaderOptions: {},
          dev,
          isServer,
          loaders: [
            {
              loader: 'less-loader',
              options: lessLoaderOptions,
            },
          ],
        }),
      });

      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals),
        ];
  
        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader',
        });
      }

      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, options);
      }

      return config;
    }
  });
};

then use it in next.config.js

const withNextAntdLess = require('./next-antd-less.config');
module.exports = withNextAntdLess({
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: '[local]___[hash:base64:5]',
    },
})

In my case, it usually works. Hopefully, It will help someone to solve the problem to work with antd together with cssModule.

Related example/issues/modules which I use to compose the solution. #8054 #7957 with-ant-design-less next-antd-aza-less

Anyway, if there is an official solution for this issue it will be very good. In my opinion, it will be a common issue.

how to add withSass in config