CSS-in-JS

[omgovich]

A lot of projects having trouble installing react-colorful because they do not have any CSS-loader.
Also, it blocks many developers from including our library as part of their public component libraries since most of them are 100% CSS-in-JS.

For example, I wanted to add react-colorful to react-three-gui but this project bundles via tsdx and do not support .css at all.

Solution: move the styles of our picker to JS.

[github-actions]

Size Change: -7 B (0%)

Total Size: 3.98 kB

Filename	Size	Change
./dist/index.css	0 B	-687 B (removed)	🏆
dist/index.module.js	3.98 kB	+680 B (+21%)	🚨

_{compressed-size-action}

[omgovich]

@molefrog Can you take a look?

[omgovich]

@rschristian I would be glad to hear your opinion as well ❤️

[codecov-io]

Codecov Report

Merging #101 (a9abf22) into master (f84802a) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master      #101   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           31        32    +1     
  Lines          402       411    +9     
  Branches        53        54    +1     
=========================================
+ Hits           402       411    +9     

Impacted Files	Coverage Δ
src/components/common/AlphaColorPicker.tsx	100.00% <100.00%> (ø)
src/components/common/ColorPicker.tsx	100.00% <100.00%> (ø)
src/hooks/useStyleSheet.ts	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f84802a...a9abf22. Read the comment docs.

[molefrog]

All looks good! Just a thought: if I decide to override the styles with my own ones, how will I be able to tell react-colorful to ignore the default styles? I mean I would have to deal with conflicting CSS in that case, right?

[omgovich]

Right. But, at the same point, the component's styles are too complex to write from scratch.

[molefrog]

@omgovich Yeah, you are right. I guess for the sake of backward-compatibility, the proposed solution is really good!

The only downside is that once you upgrade, you're going to see an error that the styles are missing. But imo, with a good migration message in the README, this might be doable.

[molefrog]

So I see two options here:

• Publish a new major release
• Don't remove the styles.css file yet in the next minor release, but make them redundant with a proper warning (will that be even possible?). And then remove the styles completely after everyone has migrated to the latest version.

[omgovich]

My plan is to release it as v5.

[rschristian]

By all means, looks great to me.