Material-ui: Extract css to separate file with webpack and mini-css-extract-plugin

[LKay]

I want to exclude bundled style from js files and put them in separate css file (chunk). Did some searching about this matter but couldn't find anything working and exactly pointing to the issue.

In my app I can extract styles using mini-css-extract-plugin when they are defined outside js in css/scss files but have no success in extracting MUI styles. Is there any way to achieve that?

[oliviertassinari]

@LKay This is not supported. I have done a quick exploration months ago in this direction: https://github.com/oliviertassinari/material-ui-generate-css-file. I wish we could support https://github.com/callstack/linaria in the future. It could help.

But, why would you want to do that? Is this needed?

[mwld]

But, why would you want to do that? I believe that it's not needed.

I’m looking for something similar for building a component library that provides its components in React and HTML versions.

The purpose is restyling multiple applications that use different frontend technologies (React, AngularJS 1.x, Angular >= 2, Python Jinja2 templates, Plain HTML). Most of those apps cannot be easily migrated to a React stack and should therefore use a plain CSS version.

The idea is to maintain only one version of the library in React (based on modified Material UI components) the plain CSS version should ideally be generated in a build step by extracting the styles from all components and bundling them in one global CSS file.

[oliviertassinari]

@mwld Interesting, It remembers me a similar use case I had in the past, I had to bridge between a 100% server-side env (Ruby on Rails templates) and React. It has worked OK for simple stuff. In your case, for Angular support, I would suspect that bridges would be better adapted. You also want to retain the JavaScript logic, we rely on it. CSS won't always be enough.

I was curious to see how the generated CSS changed between v4.0.0-alpha and the latest version, so I have updated https://github.com/oliviertassinari/material-ui-generate-css-file.

[seprich]

But, why would you want to do that? I believe that it's not needed.

For one thing the inability to extract CSS to be separate from JS will compromise security. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src . Importing material-ui into project means that the safe defaults of "script-src: 'self'" and "style-src: 'self'" are suddenly no longer sufficient and must be compromised with 'unsafe-inline' and maybe even 'unsafe-eval'.

[oliviertassinari]

@seprich For the CSP, consider: #17566.