web-infra-dev / rspack

The fast Rust-based web bundler with webpack-compatible API 🦀️
https://rspack.dev
MIT License
9.49k stars 550 forks source link

.css file not bundled while using builtin:swc-loader #8167

Open saidarshan27 opened 3 hours ago

saidarshan27 commented 3 hours ago

I am using a package called plyr-react for video player support in an application. plyr-react exports a plyr.css file, which is not being included in my final bundle even after being referenced in the entry file.

Here is my rspack config

module.exports = {
  mode: "development",
  entry: './src/javascripts/index/index.js',
  output: {
    filename: "main.[contenthash].js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new rspack.CssExtractRspackPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[name].[contenthash].css'
    }),
    new HTMLWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
    }),
    new CleanWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [rspack.CssExtractRspackPlugin.loader, "css-loader"],
      },
      {
        test: /\.scss$/,
        use: [rspack.CssExtractRspackPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /\.js(x)?$/,
        exclude:
          /node_modules/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              jsc: {
                parser: {
                  syntax: "ecmascript",
                  jsx: true,
                },
                transform: {
                  react: {
                    pragma: 'React.createElement',
                    pragmaFrag: 'React.Fragment',
                    throwIfNamespace: true,
                    development: false,
                    useBuiltins: false
                  }
                },
              },
            }
          },
        ],
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false,
      maxInitialRequests: 25,
      maxAsyncRequests: 25,
    },
  },
}; 

And here you can see me referencing plyr.css along with css-component.css.

Image

Here are the bundled files

Image

And here you can see the bundled main.css, which does not include CSS code from plyr.css

Image

This issue does not occur when I use babel-loader.

saidarshan27 commented 3 hours ago

Node - v18.12.0; yarn - 1.22.19; @rspack/core - 1.0.11; @rspack/cli - 1.0.8;

Here is a reproduction demo: https://github.com/saidarshan27/swc-plyr-css