.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?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!