Minify styled-components SSR styles into a single line

[monsieurnebo]

Hi folks,

I'm trying to minify production build styled components CSS output to reach a single line.

I'm already using babel-plugin-styled-components with its default minify: true option.

For instance, going from:

@media (min-width:768px){.kWNFhR{max-width:220px;}}/*!sc*/
data-styled.g37[id="sc-u5khna-3"]{content:"kWNFhR,"}/*!sc*/
// ~200 more lines

To:

@media (min-width:768px){.kWNFhR{max-width:220px;}}/*!sc*/ data-styled.g37[id="sc-u5khna-3"]{content:"kWNFhR,"}/*!sc*/

The idea would be to do something like this:

// _document.js (Next.js)

import { ServerStyleSheet } from 'styled-components';

const sheet = new ServerStyleSheet();
const styleElement = sheet.getStyleElement();
const cssString = styleElement[0].props.dangerouslySetInnerHTML. __html;
const singleLineCssString = cssString.replace(/\n/g, " ");

// Inject the following tag in the SSR page:
<style 
  data-styled="true" 
  data-styled-version="5.3.5" 
  dangerouslySetInnerHTML={{ _html: singleLineCssString }}
/>

Is replacing line breaks with spaces an issue? (e.g. breaking rehydration) ? 🤔

---

Related to: https://github.com/styled-components/styled-components/issues/1217

[monsieurnebo]

@probablyup said: Probably yes. Gzip eliminates most of the benefit of whitespace minification so I’d just skip it

[ahmetkuslular]

Has there been any development regarding this?

[monsieurnebo]

Has there been any development regarding this?

https://github.com/styled-components/styled-components/issues/1217#issuecomment-1179030032

[dfiedlerx]

Does anyone have a production or hosted example of how this works with gzip? I tried getting a local example but it doesn't seem to work as gzip appears to run on the server output.

My css looks like the image, and if I perform any minification like: str.replace(/\/\*.*\*\//g, ' ').replace(/\s+/g, ' ')

Now I have a problem with leaving and re-entering CSS in hydration. The css starts correctly applied, then it exits and comes back again.

[monsieurnebo]

Does anyone have a production or hosted example of how this works with gzip? I tried getting a local example but it doesn't seem to work as gzip appears to run on the server output.

My css looks like the image, and if I perform any minification like: str.replace(/\/\*.*\*\//g, ' ').replace(/\s+/g, ' ')

Now I have a problem with leaving and re-entering CSS in hydration. The css starts correctly applied, then it exits and comes back again.

From my understanding, Gzip will not do any code minification but will compress your files in order to have better performances.

If you want a live example, this very page we're discussing on (GitHub issue) is using it:

[dfiedlerx]

Does anyone have a production or hosted example of how this works with gzip? I tried getting a local example but it doesn't seem to work as gzip appears to run on the server output. My css looks like the image, and if I perform any minification like: str.replace(/\/\*.*\*\//g, ' ').replace(/\s+/g, ' ') Now I have a problem with leaving and re-entering CSS in hydration. The css starts correctly applied, then it exits and comes back again.

From my understanding, Gzip will not do any code minification but will compress your files in order to have better performances.

If you want a live example, this very page we're discussing on (GitHub issue) is using it:

Oh yes, as I'm developing an ecommerce, I need something very compliant with web vitals and with extreme speed. But when opening the github issues, I realized that not even the html is minified. So I'm questioning whether this extreme concern even with line breaks in CSS is so beneficial. But we have to recognize that gzip itself is not the solution to this CSS minification issue, despite improving this situation.