facebook / stylex

StyleX is the styling system for ambitious user interfaces.
https://stylexjs.com
MIT License
8.22k stars 303 forks source link

The Webpack plugin interferes with Webpack's tree shaking. #476

Open polywock opened 3 months ago

polywock commented 3 months ago

Describe the issue

The code below is the entire entry file, but the output is 1.6MB. All of react-icons is being included in the output, even though no icon is being used. Tree shaking would remove it, but the StylexPlugin seems to be interfering.

import { FaRegCircleQuestion } from "react-icons/fa6"
import * as x from "@stylexjs/stylex"

If you remove the second line, the size shrinks down to 0 bytes. Interestingly, if you remove the StylexPlugin from Webpack entirely, the output is around 3KB.

My webpack.config.js

const { env } = require("process")
const StylexPlugin = require('@stylexjs/webpack-plugin');

const common = {
  entry: "./App.js",
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  },
  plugins: [
    new StylexPlugin({
      filename: 'styles.css',
      dev: env.NODE_ENV === 'development',
      runtimeInjection: false,

      unstable_moduleResolution: {
        type: 'commonJS',
        rootDir: __dirname,
      },
    })
  ]
}

if (env.NODE_ENV === "production") {
  module.exports = {
    ...common,
    mode: "production"
  }
} else {
  module.exports = {
    ...common,
    mode: "development"
  }
}

Expected behavior

The @stylexjs/webpack-plugin doesn't interfere with Webpack's tree shaking and optimization.

Steps to reproduce

npm install npm run prod

minimalExample.zip

Test case

No response

Additional comments

No response

polywock commented 3 months ago

@nmn This issue pretty much nullifies the webpack plugin's usefulness for production. On the StyleX docs, maybe it's time to provide an additional disclaimer for the Webpack plugin.

https://stylexjs.com/docs/learn/installation/