Minify styles during prerendering on the server side. (#302)

Co-authored-by: Golo Roden <golo.roden@thenativeweb.io>
thenativeweb · Feb 5, 2020 · b81fe79 · b81fe79
1 parent e1a49b3
commit b81fe79
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/lib/styles/ServerSideStyles.tsx b/lib/styles/ServerSideStyles.tsx
@@ -1,4 +1,5 @@
 import { GenerateId } from 'jss';
+import { minifyCss } from './minifyCss';
 import { createGenerateId, SheetsRegistry } from 'react-jss';
 import React, { ReactElement } from 'react';
 
@@ -13,8 +14,12 @@ class ServerSideStyles {
   }
 
   public generateStyleTag (): ReactElement {
+    const styles = this.registry.toString();
+
+    const minifiedStyles = minifyCss(styles);
+
     return (
-      <style id='server-side-styles' dangerouslySetInnerHTML={{ __html: this.registry.toString() }} />
+      <style id='server-side-styles' dangerouslySetInnerHTML={{ __html: minifiedStyles }} />
     );
   }
 }

diff --git a/lib/styles/StaticGlobalStyles.tsx b/lib/styles/StaticGlobalStyles.tsx
@@ -1,4 +1,4 @@
-import { oneLine } from 'common-tags';
+import { minifyCss } from './minifyCss';
 import { Theme } from '..';
 import React, { ReactElement } from 'react';
 
@@ -10,13 +10,16 @@ class StaticGlobalStyles {
   }
 
   public generateStyleTag (): ReactElement {
+    const styles = this.buildStyles();
+    const minfiedStyles = minifyCss(styles);
+
     return (
-      <style id='static-global-styles' dangerouslySetInnerHTML={{ __html: this.buildStyles() }} />
+      <style id='static-global-styles' dangerouslySetInnerHTML={{ __html: minfiedStyles }} />
     );
   }
 
   private buildStyles (): string {
-    return oneLine`
+    return `
       @import url(${this.theme.font.import});
 
       body, html  {

diff --git a/lib/styles/minifyCss.ts b/lib/styles/minifyCss.ts
@@ -0,0 +1,7 @@
+import { oneLine } from 'common-tags';
+
+const minifyCss = function (css: string): string {
+  return oneLine(css);
+};
+
+export { minifyCss };