search

Wondermarin / react-color-palette

🎨 Lightweight Color Picker component for React.
https://codesandbox.io/s/react-color-palette-2zw8q
MIT License
287 stars 32 forks source link

Mark CSS files as side effects #68

Closed kossidts closed 6 months ago

kossidts commented 7 months ago

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 7 months ago

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

Wondermarin commented 7 months ago

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.

g-hor commented 7 months ago

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 6 months ago

Should be fixed in v7.1.1