lens/packages/infrastructure/webpack/src/get-react-config.js

const getNodeConfig = require("./get-node-config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const path = require("path");

// hack: hard-coded
const sassCommonVars =
  "/Users/maspiala/work/lens/packages/core/src/renderer/components/vars.scss";

module.exports =
  ({ miniCssExtractPluginLoader = MiniCssExtractPlugin.loader } = {}) =>
  ({ entrypointFilePath, outputDirectory }) => {
    const nodeConfig = getNodeConfig({
      entrypointFilePath,
      outputDirectory,
    });

    return {
      ...nodeConfig,

      plugins: [
        ...nodeConfig.plugins,

        new MiniCssExtractPlugin({
          filename: "[name].css",
        }),

        // see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
        new MonacoWebpackPlugin({
          languages: ["json", "yaml"],
          // Hack: should be true only for development.
          globalAPI: true
        }),
      ],

      module: {
        ...nodeConfig.module,

        rules: [
          ...nodeConfig.module.rules,

          {
            test: /\.s?css$/,

            use: [
              miniCssExtractPluginLoader,

              {
                loader: "css-loader",

                options: {
                  sourceMap: false,

                  modules: {
                    auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
                    mode: "local", // :local(.selector) by default
                    localIdentName: "[name]__[local]--[hash:base64:5]",
                  },
                },
              },

              {
                loader: "postcss-loader",
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    // hack: commented
                    // plugins: ["tailwindcss"],
                  },
                },
              },

              {
                loader: "sass-loader",
                options: {
                  sourceMap: false,
                  additionalData: `@import "${path.basename(sassCommonVars)}";`,

                  sassOptions: {
                    includePaths: [path.dirname(sassCommonVars)],
                  },
                },
              },
            ],
          },

          {
            test: /\.(ttf|eot|woff2?)$/,
            type: "asset/resource",
          },

          {
            test: /\.svg$/,
            type: "asset/source", // exports the source code of the asset, so we get XML
          },

          {
            test: /\.(jpg|png|ico)$/,
            type: "asset/resource", // path to file, e.g. "/static/build/assets/*"
          },
        ],
      },
    };
  };