Update Webpack example to show consuming open props

[narehart]

I'm setting up a monorepo that has packages for a design system with components and tokens. This is built using the following webpack config:

import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const config = (env, argv) => ({
  mode: 'production',
  entry: {
    index: './src/index.ts',
    // Tokens that are meant to be used in in stylex.create() calls must come from a file with the .stylex extension.
    'tokens.stylex': './src/tokens.stylex.ts',
  },
  target: ['web', 'es2020'],
  output: {
    module: true,
    library: { type: 'module' },
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    clean: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  experiments: {
    outputModule: true,
  },
  externals: {
    react: 'react',
    // Consumers of the design-system library will need to setup StyleX in their own application.
    '@stylexjs/stylex': '@stylexjs/stylex',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFile: path.resolve(__dirname, 'tsconfig.json'),
            },
          },
        ],
      },
    ],
  },
});

export default config;

Its then consumed by a web app using the follwing webpack config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StylexPlugin = require('@stylexjs/webpack-plugin');

const rootDir = path.resolve(__dirname, '../..');

const config = (env, argv) => ({
  entry: './src/index.tsx',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  devtool: 'source-map',
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    port: 3000,
    hot: true,
    historyApiFallback: true,
    open: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          // babel-loader is used for transpiling the code.
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-typescript',
                ['@babel/preset-react', { runtime: 'automatic' }],
              ],
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new StylexPlugin({
      filename: 'styles.[contenthash].css',
      // Get webpack mode and set value for dev.
      dev: argv.mode === 'development',
      // Enable runtime injection for development so we can see changes to our styles.
      // Note: it should be possible to use statically generated CSS files even in development mode and get hot reloading of styles.
      runtimeInjection: argv.mode === 'development',
      // Use a unique prefix for generated class names so we can identify them in the DOM.
      classNamePrefix: 'web-',
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html'),
      inject: true,
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
});

module.exports = config;

I'm getting a compilation error that stylex-demo/packages/design-system/dist/index.js: stylex is not a function. I believe its because the plugin is not compiling the esm module. Is there a way to configure it to do so? Having an example of using @stylexjs/open-props in stylex/apps/webpack-example would be really helpful.

[nmn]

We are currently re-evaluating if we should even continue to offer our current webpack plugin as it in need of a major overhaul to be reliable. Today, PostCSS is the most reliable way to set up StyleX.

[narehart]

I resolved the issue. While it may be my own oversight, I was unable to get Webpack 5 to compile the design-system ESM code in a way that could be parsed by @stylexjs/webpack-plugin. I also attempted to use Rollup, but it consistently transformed my exported variable declarations into export specifiers unnecessarily.

Ultimately, I opted to use TypeScript alongside fix-esm-import-path to produce ESM code that is compatible with the plugin.

I noticed in another thread that you recommended avoiding bundlers for design-system code. However, in my case, I wanted to author the code in TypeScript to ensure a good developer experience for TypeScript users while still making it accessible to those who are not using TypeScript.

To help others who may encounter similar challenges, I created a repo that demonstrates my solution. It’s publicly available here: https://github.com/narehart/stylex-monorepo.