feat: nextjs css ssr production

ccontrols · Oct 24, 2020 · 01cd343 · 01cd343
1 parent 1ba6eed
commit 01cd343
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/core/webpack-compile/src/utilities.ts b/core/webpack-compile/src/utilities.ts
@@ -8,11 +8,7 @@ import path from 'path';
 import fs from 'fs';
 import { log, error } from '@component-controls/logger';
 import { mergeBuildConfiguration } from '@component-controls/config';
-import {
-  BuildProps,
-  defBundleName,
-  getCSSBundleName,
-} from '@component-controls/core';
+import { BuildProps, defBundleName } from '@component-controls/core';
 import { LoadingStore } from '@component-controls/store';
 import LoaderPlugin from '@component-controls/loader/plugin';
 import {

diff --git a/core/webpack-configs/src/react/index.ts b/core/webpack-configs/src/react/index.ts
@@ -81,7 +81,6 @@ export const react: PresetType = (options: BuildProps) => {
               // Translates CSS into CommonJS
               loader: 'css-loader',
               options: {
-                importLoaders: 1,
                 modules: {
                   localIdentName: '[name].[local].[hash]',
                 },

diff --git a/examples/simple/src/typings.d.ts b/examples/simple/src/typings.d.ts
@@ -0,0 +1 @@
+declare module '*.css';
diff --git a/examples/stories/src/tutorial/getting-started/ssg/nextjs.mdx b/examples/stories/src/tutorial/getting-started/ssg/nextjs.mdx
@@ -124,13 +124,21 @@ Create a new or edit `_document.js` file in the pages folder:
 
 ```js:title=pages/_document.js
 import React from 'react';
+import fs from 'fs';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { extractCritical } from 'emotion-server';
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
     const initialProps = await Document.getInitialProps(ctx);
     const styles = extractCritical(initialProps.html);
+    // following only if you are usng css in your componentes
+    let cssStyles;
+    const cssBundle = process.env.NEXT_CC_CSS_FILENAME;
+    if (cssBundle && fs.existsSync(cssBundle)) {
+      cssStyles = fs.readFileSync(cssBundle, 'utf8');
+    }
+    // end css styles
     return {
       ...initialProps,
       styles: (
@@ -140,6 +148,8 @@ export default class MyDocument extends Document {
             data-emotion-css={styles.ids.join(' ')}
             dangerouslySetInnerHTML={{ __html: styles.css }}
           />
+
+          {cssStyles && <style>{cssStyles}</style>}
         </>
       ),
     };