Wondermarin/react-color-palette

Mark CSS files as side effects

kossidts opened this issue · 4 comments

kossidts commented

When setting "sideEffects": false in the package.json file of this package, it leads to an issue where the CSS file is excluded from the resulting bundle, essentially shaken out from the tree. This is a known issue that affects many packages.

As described in the webpack documentation on Tree Shaking, I believe a better solution might be to specify specific files that should be treated as side effects e.g. "sideEffects": ["*.css"] ensuring that the CSS file is included in the bundle and not eliminated during the tree shaking process.

I have created a PR #69 fixing this issue.

g-hor commented

Thanks for opening this issue! I was about to open one of my own when I realized none of the stylesheets were applying. It took me a while to figure out that they were getting shaken out. Cheers for your fix

  • 👍1
Wondermarin commented

I will merge your PR and close the issue as soon as possible (within the next couple of days). Apologies for any inconvenience this may cause. Thank you for your patience and contribution.

  • 👍1
g-hor commented

In case anyone else runs into this same issue before it's fixed, one workaround that I found to work for me was to import the stylesheet via require() rather than import():

// This gets tree-shaken from build >> no styles applied
import 'react-color-palette/css';

// ✅ This does not get tree-shaken from build >> styles applied
require('react-color-palette/css');
Wondermarin commented

Should be fixed in v7.1.1

  • ❤️1