webpack5 ，sideEffects globs in node_modules/package.json is not work

[yc507]

I have a component library that was published to npm, but the sideEffects configured in packageion.json in the component library became invalid, and the CSS style of the component library was lost.

"sideEffects": [
"*.css",
"*.less"
]，

Using only Boolean is useful
"sideEffects":true, It's useful.

[alexander-akait]

Please provide reproducible test repo and never ignore the issue template, thank you

[yc507]

Bug report

What is the current behavior?

config sideEffects in libDemo/package.json

"sideEffects": [
    "*.css",
    "**/button2/index.js"
  ]

// index.js
import "./common.css";
export { default as Button } from "./button";
export { default as Button2 } from "./button2";

// Button.jsx
import React from "react";

export default () => {
  return <button className="demobutton">test button</button>;
};

// common.css
.demobutton {
  background-color: red;
}
.demobutton2 {
  background-color: blue;
}

We used 'libdemo' in the demo project;

import { Button, Button2 } from "libdemo";
import React from "react";
import { Button, Button2 } from "libdemo";
export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Button />
        <div>demo content </div>
      </div>
    );
  }
}

webpack.dev.js
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = merge(common, {
  mode: "development",
  optimization: {
    usedExports: true,
    sideEffects: true,
  },
  devServer: {
    static: {
      directory: "./dist",
      publicPath: "/assets/",
    },
  },
  devtool: "eval-source-map",
});

this common.css has been tree shaked.

What is the expected behavior?
sideEffects takes effect in 'libdemo' ，common.css is always being used

Other relevant information:
webpack version: "^5.94.0",
Node.js version: "18.20.3"
Operating System: mac os
Additional tools:
This is my demo repository

[alexander-akait]

You literally have import "./common.css"; in index.js

[yc507]

index.js has sideEffect too, add "dist/index.js" to the package.json sideEffects, it's worked，thank you.
has webpack considered recognizing files within sideEffects as a sideEffect without requiring me to manually add them?

[yc507]

I remove the optimization in the "development" mode,

optimization: {
    usedExports: true,
    sideEffects: true,
  }

the libdemo/package.json sideEffects

"sideEffects": [
    "*.css",
    "**/button2/index.js"
  ]

the common.css is lost, I think tree shaking is enabled by default in development mode.

but after I added this "dist/index.js" to libdemo/package.json sideEffects and removed optimization in the "development" mode, this tree shaking became ineffective.

"sideEffects": [
    "*.css",
    "**/button2/index.js",
    "dist/index.js"
  ]

I am confused about the default optimization in webpack5

[alexander-akait]

has webpack considered recognizing files within sideEffects as a sideEffect without requiring me to manually add them?

No, it is impossible

I think tree shaking is enabled by default in development mode

It enabled but only for package.json (i.e. F(optimization, "sideEffects", () => (production ? true : "flag"));)

this tree shaking became ineffective

I recommend to move utils/common function to own file.

To be honestly most of libraries never import CSS files itself, they have styles and recommend to library import them before library import on an application side, there is not CSS import in JS, also it allows developers to override and write own CSS files if they will want other styles

[yc507]

Thank you for your suggestions and answers.