const CracoAntDesignPlugin = require('craco-antd');
const colors = require('./src/client/UIKit/colors');

const { ProvidePlugin } = require('webpack');
const CracoEsbuildPlugin = require('craco-esbuild');

module.exports = {
  webpack: {
    plugins: [
      new ProvidePlugin({
        React: 'react',
      }),
    ],
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          '@primary-color': colors.primary,
        },
        babelPluginImportOptions: {
          libraryDirectory: 'es',
        },
      },
    },
    { plugin: CracoEsbuildPlugin },
  ],
  babel: {
    plugins: [
      [
        'transform-imports',
        {
          lodash: {
            transform: 'lodash/${member}',
            preventFullImport: true,
          },
        },
      ],
      ['babel-plugin-styled-components'],
    ],
  },
};