CIF-1547 - [React Components] Fix CSS reusability

[dplaton]

Description

The styles used by the client-side components could not be overwritten because they were embedded in the JS bundle. This causes the styles to be added to the page using a <style> tag, which means that it took precedence over any styling that was added using custom CSS in other client libraries.

To address this I did two things:

• drop the style-loader from the Webpack configuration and use MiniCssExtractPlugin to extract the CSS in a separate file.
• change the name of the generated CSS classes to scope them to the component, i.e. .header__root from the minicart becomes .cmp-Minicart__header__root.

Related Issue

CIF-1547

Motivation and Context

Allow the styling of our client-side components

How Has This Been Tested?

Functional testing

Screenshots (if appropriate):

Types of changes

[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes and the overall coverage did not decrease.
• All unit tests pass on CircleCi.
• I ran all tests locally and they pass.

[codecov]

Codecov Report

Merging #359 into master will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master     #359   +/-   ##
=========================================
  Coverage     84.52%   84.52%           
  Complexity      852      852           
=========================================
  Files           174      174           
  Lines          4400     4400           
  Branches        587      587           
=========================================
  Hits           3719     3719           
  Misses          555      555           
  Partials        126      126           

Flag	Coverage Δ	Complexity Δ
#integration	66.86% <ø> (ø)	628.00 <ø> (ø)
#jest	77.36% <ø> (ø)	0.00 <ø> (ø)
#karma	93.93% <ø> (ø)	0.00 <ø> (ø)
#unittests	85.81% <ø> (ø)	821.00 <ø> (ø)

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

---

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 51c0f71...03bf648. Read the comment docs.