PF4 include components styles inside the JS output file.

Describe the issue Currently, compiled components do not include related CSS. Instead of living inside the component JS file, they are built into a separate CSS file and imported.

This has negative effects when using the react-core repository.

Users have to include several different builder plugins in order to use the react-core package. These packages are not an auto-include for every react app there-fore devs should not be required to include them if they want to use the react-core library.

• style-loader (for css)
• resolve-url-loader (for additional references in css files)
• url-loader (for images included inside the library)

Probably a bigger issue is the fact that the CSS imports disable Server Side Rendering. Usually, modules for the browser part of the app are excluded from the server node_modules. In order to work around the CSS imports, these modules have to be included in the server part of the application which increases the bundle size and has a negative impact on performance and mainly on the time to first render and bandwidth usage. We have to basically duplicate the client-side of the app on the server-side.

How does the build look like now

there is this one line in every component chunk which requires related CSS files. this one is for the button:

var _button = _interopRequireDefault(require("@patternfly/react-styles/css/components/Button/button"));

Proposed usage

Use standard CSS inject method for JS files. Styles should be simple strings living in the component and the component should inject the styles when the file is loaded. Depending on the build tool, there is some inject function inside the component (pasted rollup example, but every build tool have some alternative):

// ___$insertStyle(`button {color: 'red'}`)
function ___$insertStyle(e){if(e&&"undefined"!=typeof window){var t=document.createElement("style");return t.setAttribute("type","text/css"),t.innerHTML=e,document.head.appendChild(t),e}}

Another example might be postcss babel plugin, which adds the option to remove the styles imports: https://github.com/gajus/babel-plugin-react-css-modules#options (see the removeImport option)

EDIT:

How to replicate? Try and use react-core with some server-side framework like next.js (https://nextjs.org/)

[Hyperkid123]

TypeError: The ‘compilation’ argument must be an instance of Compilation

@altwarg ah and this. Try installing webpack@4 directly in your dependencies. I recall this issue was happening with some of our loaders when upgrading to webpack 5. I think it might work. I think it might have something to do with the deprecated CSS decorator.

[evwilkin]

@Hyperkid123 @karelhala thanks for flagging this - I believe we’ve had a conversation around this that was put on hold with some of the current changes being implemented, but can take another look as soon as those are behind us