Minify mui css

revskill10 · Nov 3, 2018 · cf32272 · cf32272 · vercel · Nov 3, 2018
1 parent f68515a
commit cf32272
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -9,9 +9,7 @@
     "test": "jest",
     "analyze": "BUNDLE_ANALYZE=both next build",
     "analyze:server": "BUNDLE_ANALYZE=server next build",
-    "analyze:browser": "BUNDLE_ANALYZE=browser next build",
-    "release": "npx semantic-release",
-    "semantic-release": "semantic-release"
+    "analyze:browser": "BUNDLE_ANALYZE=browser next build"
   },
   "dependencies": {
     "@material-ui/core": "3.3.2",
@@ -36,6 +34,7 @@
     "axios": "0.18.0",
     "cookie": "0.3.1",
     "cookie-parser": "1.4.3",
+    "csso": "3.5.1",
     "dotenv": "6.1.0",
     "exceljs": "1.6.2",
     "express": "4.16.4",

diff --git a/packages/containers/next-document.js b/packages/containers/next-document.js
@@ -1,7 +1,8 @@
 import { Head, Main, NextScript } from 'next/document'
 
-const Document = ({styleTags, pageContext}) =>
-  <html lang="en" dir="ltr">
+const Document = ({styleTags, pageContext}) => {  
+  return (
+    <html lang="en" dir="ltr">
     <Head>
       <meta charSet="utf-8" />
       {/* Use minimum-scale=1 to enable GPU rasterization */}
@@ -22,5 +23,8 @@ const Document = ({styleTags, pageContext}) =>
       <NextScript />
     </body>
   </html>
+  )
+}
+
 
 export default Document
diff --git a/packages/lib/hocs/with-document.js b/packages/lib/hocs/with-document.js
@@ -2,6 +2,7 @@ import Document from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 import flush from 'styled-jsx/server';
 import PropTypes from 'prop-types';
+import csso from 'csso'
 
 export const withDocument = Container =>
   class extends Document {
@@ -45,6 +46,10 @@ export const withDocument = Container =>
       });
 
       const styleTags = sheet.getStyleElement()
+      const css = pageContext.sheetsRegistry.toString()
+      const ast = csso.syntax.parse(css);
+      const compressedAst = csso.compress(ast).ast;
+      const minifiedCss = csso.syntax.generate(compressedAst);
       return { 
         ...page, 
         pageContext,
@@ -54,7 +59,7 @@ export const withDocument = Container =>
             <style
               id="jss-server-side"
               // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
+              dangerouslySetInnerHTML={{ __html: minifiedCss }}
             />
             {flush() || null}
           </React.Fragment>