Move cropper CSS import from main bundle to upload plugin

[gu-stav]

What does it do?

Moves the cropperjs CSS import from the main bundle into the upload plugin.

Why is it needed?

• it belongs in the plugin, because it is only used as part the edit asset dialog
• decreases size of the main bundle by about ~30kb because the upload plugin is code-splitted

How to test it?

1. Navigate to the media library
2. Edit an asset
3. Crop the asset
4. Verify everything works as expected

Related issue(s)/PR(s)

• Follow up of Remove fontawesome dependency #15133

[ronronscelestes]

neat!
cropped assets in upload/CM and upload/ML without issues 👌

[codecov]

Codecov Report

Base: 60.52% // Head: 60.52% // Decreases project coverage by -0.00% ⚠️

Coverage data is based on head (79571b4) compared to base (8d51c78).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15235      +/-   ##
==========================================
- Coverage   60.52%   60.52%   -0.01%     
==========================================
  Files        1352     1352              
  Lines       33172    33170       -2     
  Branches     6334     6334              
==========================================
- Hits        20078    20076       -2     
  Misses      11263    11263              
  Partials     1831     1831              

Flag	Coverage Δ
back	50.36% <ø> (ø)
front	65.09% <100.00%> (-0.01%)	⬇️
unit_back	50.36% <ø> (ø)
unit_front	65.09% <100.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...re/admin/admin/src/components/GlobalStyle/index.js	66.66% <ø> (-16.67%)	⬇️
...src/components/EditAssetDialog/PreviewBox/index.js	67.82% <100.00%> (+0.28%)	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[soupette]

I wonder if moving it to the upload plugin will cause some flickering since it will be reimported each time the ML is mounted?

[gu-stav]

👋🏼

If we used a dynamic import, it would create a separate chunk which then could load late and lead to flickering - I agree, but we don't do that. A sync import will be bundled together with the PreviewBox component, and as soon as it has loaded, the styles will be there immediately. It increases the size of the chunk a bit, but since it is pretty much isolated, I don't see a big problem in this. Also: the Modal containing the PreviewBox could be moved into its own webpack chunk, if we would want to do this.