Material-ui: Minified CSS output

[arsen]

When I am using MUI with next.js the styles that are generated on the server are not minified.
Even the nextjs example in the repo is not minifying CSS output when it is built for production.

The docs site actually has minified CSS, but I couldn't figure out how it is doing it.

Anyone knows how to make MUI/JSS to minify CSS output?

[oliviertassinari]

The Next.js example aims to be as simple as possible. We don't minify the output CSS.
Regarding the documentation website, it's done here:
https://github.com/mui-org/material-ui/blob/a9f185712f3f4bf1221f383b21c1bd6834c13c2b/docs/pages/_document.js#L9-L27

[virzak]

@oliviertassinari, this works for next.js 5, but I can't for the life of me figure out why this doesn't work for next.js 6. The problem seems to be cssnano:
https://github.com/mui-org/material-ui/blob/a88a405eaf4e57fb2ff8cb88599ecaf31e786b77/pages/_document.js#L15

I was able to work around this by using postcss-csso instead.

[oliviertassinari]

@virzak I couldn't upgrade to Next.js v6 yet because of Babel. I have no clue.

[oliviertassinari]

@virzak I was able to upgrade Next to v6 in #10964. I'm not sure what's your problem is.

[virzak]

@oliviertassinari This is the error I was getting:

This dependency was not found:

* fs in ./node_modules/browserslist/index.js, ./node_modules/svgo/lib/svgo/config.js

Repeating this:

https://github.com/mui-org/material-ui/blob/v1-beta/next.config.js#L32-L34

made it work. Thank you!!! I guess knowing Webpack really well is a must.

[samkelleher]

I come from "isomorphic-style-loader" world where the CSS per component is autoprefixed/cssnanod etc at build time and injected into the page as and when required at runtime.

The proposed solution here with CSSinJS is to do this minifcation/prefixing at runtime making something like cssnano a dependency rather than a devdepdencency.

Have I understood correctly? It seems a little strange to me vs the way isomorphic-style-loader works.

I ended up here because I haven't found a nextjs website that has an example of minified css when using cssinjs. One example I did find (above) is for static generated sites.

[oliviertassinari]

@samkelleher Your analysis is correct. It's an area of improvement. I'm wondering how the alternative CSS-in-JS solutions handle the problem. cc @kof.

[eps1lon]

Isn't the CSS for the client only generated at runtime? Minification wouldn't add much value in that case as far as I can tell. This is especially true for dynamic styles. You could make an argument for static CSS that does not depend on a theme but this would require something like prepack to execute the code at build time to create minified css.

[kof]

I think JSS should remove whitespaces in production. More advanced minification is out of scope.

[kof]

I think the biggest minification one could do is rendering atomic css. I always wanted to try that out for SSR.

[LucasMatuszewski]

Hello :)
Any update about minified CSS in main html document SSRendered by Next.js ?

Now I have:

• 1 line with Next.js headers.
• 735 lines of jss/css/Mui (not minified)
• 1 line for whole the rest of my App ;P

Any link to example / documentation would be appreciated.
If changing the class names at runtime is a blocker, maybe we could just remove white spaces? Better this than nothing :D

thx in advance for any help.

[kof]

You def. shouldn't have 735 lines of critical css from 1 line of your app.

[samkelleher]

In the short term I wrapped cssnano in the HtmlDocument to minify the css being injected into the page at runtime. After this, I moved away from NextJS and did this minification during webpack build.

[oliviertassinari]

On the Gatsby side, the plugin minify and prefix at build time.

[tiotdev]

Same issue here with next.js, would be great to have an up to data advanced example with minification

[modbender]

Is this actually done? I don't see any documentation update. @oliviertassinari

[oliviertassinari]

@modbender Which problem are you trying to solve? I assume you are doing server-side rendering and hosting the pages on a CDN. If not, ignore this matter, minification harms performance.

[modbender]

@oliviertassinari I was talking about sheets.getStyleElement() minification, but yeah I do know it harms performance, just wanted to confirm, ty.

[oliviertassinari]

@modbender By "harms performance", I meant that if it's done at runtime for each request, sending the CSS non-minified will be faster overall. On the other hand, caching the CSS minified can help a bit.

[modbender]

@oliviertassinari Oh, sorry I don't know much about caching CSS so could you point me to some doc to do it, i'm using nextjs, and with nextjs I think it will take time only while running build right?
I tried using ServerStyleSheet from styled-components didn't extract any css for SSR.