Threescale 3057 disable pf inline styles injection

[damianpm]

What this PR does / why we need it:

PF4/React by default injects css inline, it pollutes our markup and is difficult to find errors happening in our CI

Which issue(s) this PR fixes

https://issues.jboss.org/browse/THREESCALE-3057

Verification steps
rm -rf node_modules
npm install

Special notes for your reviewer:

[damianpm]

@didierofrivia Maybe you can help me
I've followed the steps described here
But I still see a lot of tags in the header
Am I missing something, maybe in the webpacker config ?

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (master@c9643b6). Click here to learn what that means.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #1019   +/-   ##
=========================================
  Coverage          ?   92.29%           
=========================================
  Files             ?     2397           
  Lines             ?    77850           
  Branches          ?        0           
=========================================
  Hits              ?    71848           
  Misses            ?     6002           
  Partials          ?        0

---

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 c9643b6...9aaeb7a. Read the comment docs.

[damianpm]

@didierofrivia Maybe you can help me
I've followed the steps described here
But I still see a lot of tags in the header
Am I missing something, maybe in the webpacker config ?

UPDATE:
I talked with PF Team, and there are some styles that can't be moved from now because of an external dependency (tippy). They are working on that and will be fixed in a future release,
Anyway, this PR reduces the amount of styles injected, I think we can move forward

[josemigallas]

I don't think all those stylesheets should be added by default in pf4BaseStyles.js. Those belong to individual components that we don't use in some cases and are messing with the main.css.
We should add them in Rails' assets pipeline like so that we have actual control of what we want and what we don't want to include. Generally speaking we should be very careful when adding styles to avoid unexpected changes.

[damianpm]

We should add them in Rails' assets pipeline like so that we have actual control of what we want and what we don't want to include.

First, we need to agree if we are moving all assets to Rails pipeline or if we keep some assets in the webpacker scope.

Then, if we decide to move everything to Rails we need to decide if we:

1. Copy all PF4 assets to rails assets directory, maybe in assets/vendor
2. Import directly from node_modules
   2.1 As rails doesn't include node_modules in the assets pipeline, we may need to add an additional package like node-sass-package-importer or node-sass-import.

WDYT @didierofrivia @josemigallas @3scale/system

[didierofrivia]

I don't think all those stylesheets should be added by default in pf4BaseStyles.js. Those belong to individual components that we don't use in some cases and are messing with the main.css.
We should add them in Rails' assets pipeline like so that we have actual control of what we want and what we don't want to include. Generally speaking we should be very careful when adding styles to avoid unexpected changes.

We should not involve the assets pipeline, but we should definitely be precise and use only the modules required, not everything.

Webpack should take care of all the node assets, you could also use the webpacker stylesheet_pack_tag helper with a customized bundle to selectively include them in the views.

[damianpm]

I don't think all those stylesheets should be added by default in pf4BaseStyles.js. Those belong to individual components that we don't use in some cases and are messing with the main.css.
We should add them in Rails' assets pipeline like so that we have actual control of what we want and what we don't want to include. Generally speaking we should be very careful when adding styles to avoid unexpected changes.

We should not involve the assets pipeline, but we should definitely be precise and use only the modules required, not everything.

Webpack should take care of all the node assets, you could also use the webpacker stylesheet_pack_tag helper with a customized bundle to selectively include them in the views.

Agree, let's do webpacker deal with node_modules