Stylex with webpack ssr

[tienlx97]

I use webpack ssr to render react. That mean I have to file webpack.server.dev.js and webpack.client.dev.js

Should I add stylex config to webpack.server.dev.js ? This is my webpack.server.dev.js file :

/**
 * @fileoverview
 * Copyright (c) Xuan Tien and affiliated entities.
 * All rights reserved. This source code is licensed under the MIT license.
 * See the LICENSE file in the root directory for details.
 */

const nodeExternals = require("webpack-node-externals");
const webpack = require("webpack");
const { paths } = require("../scripts/utils");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const LoadablePlugin = require("@loadable/webpack-plugin");

module.exports = {
  mode: "development",
  target: "node",
  entry: {
    server: [paths.srcServer],
  },
  output: {
    path: paths.serverBuild,
    filename: "index.js",
    publicPath: paths.publicPath,
    libraryTarget: "commonjs2",
  },
  resolve: {
    modules: [paths.src, "node_modules"],
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: require("./loaders.server.js"),
  plugins: [
    new LoadablePlugin(),
    new MiniCssExtractPlugin(),
    new webpack.DefinePlugin({
      "process.env.BROWSER": "false",
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
      "process.env.BACKEND_BASE_URL": JSON.stringify(
        process.env.BACKEND_BASE_URL
      ),
      "process.env.ASSETS_URL": JSON.stringify(process.env.ASSETS_URL),
    }),
  ],
  externals: [nodeExternals()],
  stats: "minimal",
};

• loaders.server.js

const path = require("path");
const { paths } = require("../scripts/utils");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: "babel-loader",
    },
    {
      test: /\.(ts|tsx)?$/,
      use: ["babel-loader"],
      exclude: /node_modules/,
    },
    {
      test: /\.css$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
        },
        {
          loader: "css-loader",
          options: { onlyLocals: true }, // We don't want the static files in the server build, no need of that
        },
        {
          loader: "postcss-loader",
          options: {
            plugins: [require("autoprefixer")],
          },
        },
      ],
    },
    {
      test: /\.(png|jpe?g|gif|ico)$/,
      exclude: [path.join(paths.src, "/assets/images/icons/")],
      use: [
        {
          loader: "url-loader",
          options: {
            limit: 150000,
            outputPath: "assets/images",
            name: "[name].[ext]",
            emitFile: false, // We don't want the static files in the server build, no need of that
          },
        },
      ],
    },
    {
      test: /\.(png|jpe?g|gif|ico)$/,
      include: [path.join(paths.src, "/assets/images/icons/")],
      use: [
        {
          loader: "file-loader",
          options: {
            outputPath: "assets/images/icons",
            name: "[name].[ext]",
            emitFile: false, // We don't want the static files in the server build, no need of that
          },
        },
      ],
    },
    {
      // test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            outputPath: "assets/fonts",
            mimetype: "application/font-woff",
            name: "[name].[ext]",
            emitFile: false, // We don't want the static files in the server build, no need of that
          },
        },
      ],
    },
    {
      test: /\.svg$/,
      use: [
        "@svgr/webpack",
        {
          loader: "url-loader",
          options: {
            limit: 150000,
            outputPath: "assets/images",
            name: "[name].[ext]",
            emitFile: false, // We don't want the static files in the server build, no need of that
          },
        },
      ],
    },
  ],
};

[nmn]

I don't have enough context about how your project is structured but broadly speaking this is what a bundler for StyleX needs to do:

1. Transform all JS files that use StyleX with the Babel plugin
2. Collect the styles in the metadata.stylex while transforming those files
3. Generate a CSS file from all the collected styles

So, if all your files are being bundled by both the server and client webpack configs, you can configure either one of them to use the StyleX plugin and just use the Babel plugin in the other one.

If, however, if the two webpack configs deal with files are that are partially exclusive, (like with RSCs), you'll need to do something custom and I suggest using the CLI in that case instead.