import MiniCssExtractPlugin from "mini-css-extract-plugin";

import config from "../config";

const styleRules = [
  {
    loader: config.isProd ? MiniCssExtractPlugin.loader : "style-loader",
    options: {
      esModule: false,
    },
  },
  { loader: "css-loader" },
  { loader: "postcss-loader" },
];

export default [
  {
    test: /\.(ts|tsx)$/,
    exclude: /node_modules/,
    use: {
      loader: "esbuild-loader",
      options: {
        loader: "tsx",
        target: "es2015",
      },
    },
  },
  {
    test: /\.html$/,
    exclude: /node_modules/,
    use: {
      loader: "html-loader",
    },
  },
  {
    test: /\.(gif|png|jpg|jpeg|webp)$/i,
    exclude: /node_modules/,
    type: "asset/resource",
  },
  {
    test: /\.(woff(2)?|eot|ttf|otf|)$/,
    exclude: /node_modules/,
    type: "asset/inline",
  },
  {
    test: /\.s([ca])ss$/,
    use: [
      ...styleRules,
      { loader: "fast-sass-loader" },
    ],
  },
  {
    test: /\.css$/,
    use: styleRules,
  },
];