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

[saidarshan27]

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.

Here are the bundled files

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

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

[saidarshan27]

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

[rotate-life]

try it
minimizer: [new rspack.LightningCssMinimizerRspackPlugin({ removeUnusedLocalIdents: false, })]

[saidarshan27]

no, still the same.

actually the reproduction demo is a dumbed down version of the code.

In the actual codebase, the class definitions from plyr.css are being used.

Let me mention some patterns I have observed.

1. if I import the plyr.css inside another stylesheet and import that here. The styles are being loaded properly, only when I import it directly in index.js, styles aren't being included in the bundled main.css.
2. If I go to node_modules -> plyr-react and delete the package.json from plyr-react folder. The styles are being bundled properly.

So I believe the problem has something to do with package.json of plyr-react which I am not able to decode.

Here is the package.json from plyr-react:

{
  "name": "plyr-react",
  "version": "5.3.0",
  "private": false,
  "description": "A simple HTML5, YouTube and Vimeo player for react using plyr",
  "keywords": [
    "react",
    "plyr",
    "video",
    "vimeo",
    "youtube",
    "accessibility",
    "javascript",
    "player",
    "media"
  ],
  "homepage": "https://chintan9.github.io/plyr-react/",
  "repository": {
    "type": "git",
    "url": "[email protected]:chintan9/plyr-react.git"
  },
  "license": "MIT",
  "author": "Chintan Prajapati",
  "sideEffects": false,
  "exports": {
    "./package.json": "./package.json",
    "./plyr.css": "./plyr.css",
    ".": {
      "types": "./index.d.ts",
      "module": "./esm/index.js",
      "import": "./esm/index.mjs",
      "default": "./index.js"
    }
  },
  "main": "./index.js",
  "types": "./index.d.ts",
  "files": [
    "**"
  ],
  "dependencies": {
    "plyr": "^3.7.7",
    "react-aptor": "^2.0.0"
  },
  "peerDependencies": {
    "plyr": "^3.7.7",
    "react": ">=16.8"
  },
  "peerDependenciesMeta": {
    "plyr": {
      "optional": false
    },
    "react": {
      "optional": true
    }
  },
  "engines": {
    "node": ">=16"
  }
}

[inottn]

This might be related to the value of sideEffects in the package.json.

[saidarshan27]

Yes @inottn , it is related to sideEffects. I removed the sideEffects from package.json of plyr-react.
Now the styles are being bundled properly.
But what changes should I make in my rspack configuration such that, the styles are bundled even though the sideEffects is false

[inottn]

In fact, the sideEffects here should not be set to false because your CSS imports have side effects. You can assign the correct value to sideEffects based on the actual situation.

[saidarshan27]

The problem is I cannot change the package.json of the package. It is a third party package that we are using.

This problem does not occur when I use babel-loader instead of swc-loader. So I was thinking if there was anything I was missing in the rspack configuration that would fix this? @inottn

[saidarshan27]

I tried optimization.sideEffects: true in my configuration but it does not fix the problem.
I wanted to know, why this problem is occurring when I use builtin:swc-loader and not occurring when I use babel-loader.

The rspack config remains the same, the only change is that I am using babel-loader instead of builtin:swc-loader.

[inottn]

Try setting optimization.sideEffects: false?

[saidarshan27]

yes setting it to optimization.sideEffects: false does the job.
But does this any how affect the tree shaking process for other modules?