feat: handled gatsby ssr css production

core/webpack-compile/src/utilities.ts

@@ -8,7 +8,11 @@ import path from 'path';
 import fs from 'fs';
 import { log, error } from '@component-controls/logger';
 import { mergeBuildConfiguration } from '@component-controls/config';
-import { BuildProps, defBundleName } from '@component-controls/core';
+import {
+  BuildProps,
+  defBundleName,
+  getCSSBundleName,
+} from '@component-controls/core';
 import { LoadingStore } from '@component-controls/store';
 import LoaderPlugin from '@component-controls/loader/plugin';
 import {

core/webpack-configs/src/react/index.ts

@@ -7,7 +7,6 @@ import {
 } from '@component-controls/core';
 
 export const react: PresetType = (options: BuildProps) => {
-  const isProd = process.env.NODE_ENV === 'production';
   return {
     plugins: [
       new MiniCssExtractPlugin({
@@ -76,11 +75,8 @@ export const react: PresetType = (options: BuildProps) => {
           test: /\.css$/,
           use: [
             // Creates `style` nodes from JS strings
-            isProd
-              ? MiniCssExtractPlugin.loader
-              : {
-                  loader: 'style-loader',
-                },
+            // will export to a consolidated css file
+            MiniCssExtractPlugin.loader,
             {
               // Translates CSS into CommonJS
               loader: 'css-loader',

examples/simple/docs/buildtime.js

@@ -1,4 +1,5 @@
 module.exports = {
   stories: ['./src/*.@(mdx|tsx)'],
   siteUrl: `https://component-controls-gatsby.netlify.app`,
+  cssFileName: 'globals.css',
 };

examples/simple/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

examples/simple/next.config.js

@@ -0,0 +1,6 @@
+const withStories = require('@component-controls/nextjs-plugin/build');
+
+module.exports = withStories({
+  configPath: 'docs',
+  distDir: 'dist',
+});

examples/simple/package.json

@@ -7,11 +7,16 @@
   "license": "MIT",
   "scripts": {
     "build-sample": "gatsby build",
-    "start": "gatsby develop"
+    "start": "gatsby develop",
+    "build-next": "rm -rf .next && rm -rf dist && rm -rf out && next build && next export",
+    "start-next": "next -p 9031"
   },
   "dependencies": {
     "@component-controls/gatsby-theme-stories": "^1.35.1",
+    "emotion": "^10.0.27",
+    "emotion-server": "^10.0.27",
     "gatsby": "^2.23.11",
+    "next": "^9.5.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

examples/simple/pages/[doctype].tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import { GetStaticProps, GetStaticPaths } from 'next';
+import { DocType, defDocType } from '@component-controls/core';
+import { DocumentHomePage } from '@component-controls/app';
+import {
+  Layout,
+  store,
+  getHomePagesPaths,
+  getDocHomePage,
+} from '@component-controls/nextjs-plugin';
+
+interface PageListProps {
+  type: DocType;
+  docId?: string;
+  storyId?: string;
+}
+
+const DocHomeTemplate: FC<PageListProps> = ({
+  type = defDocType,
+  docId,
+  storyId,
+}) => {
+  return (
+    <Layout docId={docId} storyId={storyId}>
+      <DocumentHomePage type={type} />
+    </Layout>
+  );
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return { paths: getHomePagesPaths(store), fallback: false };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const { doctype: basepath } = params as { doctype: string };
+  const page = getDocHomePage(store, basepath);
+  const { type = null, docId = null, storyId = null } = page || {};
+  return { props: { docId, storyId, type } };
+};
+
+export default DocHomeTemplate;

examples/simple/pages/[doctype]/[...docid].tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+import { GetStaticProps, GetStaticPaths } from 'next';
+import { DocPage } from '@component-controls/app';
+import { DocType } from '@component-controls/core';
+import {
+  Layout,
+  store,
+  getDocPagesPaths,
+  getDocPage,
+} from '@component-controls/nextjs-plugin';
+
+interface DocPageProps {
+  docId?: string;
+  storyId?: string;
+  type: DocType;
+  activeTab?: string;
+  category?: string;
+}
+
+const DocPageTemplate: FC<DocPageProps> = ({
+  docId,
+  storyId,
+  type,
+  category,
+  activeTab,
+}) => {
+  return (
+    <Layout docId={docId} storyId={storyId} activeTab={activeTab}>
+      <DocPage type={type} category={category} />
+    </Layout>
+  );
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return { paths: getDocPagesPaths(store), fallback: false };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const { doctype, docid } = params as { doctype: string; docid: string[] };
+  const page = getDocPage(store, doctype, docid);
+  const {
+    type = null,
+    docId = null,
+    storyId = null,
+    category = null,
+    activeTab = null,
+  } = page || {};
+  return { props: { docId, type, storyId, category, activeTab } };
+};
+
+export default DocPageTemplate;

examples/simple/pages/_app.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import NextApp from 'next/app';
+import { CacheProvider } from '@emotion/core';
+
+// Use only { cache } from 'emotion'. Don't use { css }.
+import { cache } from 'emotion';
+
+export default class App extends NextApp {
+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <CacheProvider value={cache}>
+        <Component {...pageProps} />
+      </CacheProvider>
+    );
+  }
+}

examples/simple/pages/_document.js

@@ -0,0 +1,42 @@
+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);
+    let cssStyles;
+    const cssBundle = process.env.NEXT_CC_CSS_FILENAME;
+    if (cssBundle && fs.existsSync(cssBundle)) {
+      cssStyles = fs.readFileSync(cssBundle, 'utf8');
+    }
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <style
+            data-emotion-css={styles.ids.join(' ')}
+            dangerouslySetInnerHTML={{ __html: styles.css }}
+          />
+
+          {cssStyles && <style>{cssStyles}</style>}
+        </>
+      ),
+    };
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}

examples/simple/pages/index.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { GetStaticProps } from 'next';
+import { DocType, defDocType } from '@component-controls/core';
+import { DocPage } from '@component-controls/app';
+import { Layout, store, getIndexPage } from '@component-controls/nextjs-plugin';
+
+interface PageListProps {
+  type: DocType;
+  docId?: string;
+  storyId?: string;
+}
+
+const HomePage: FC<PageListProps> = ({ type = defDocType, docId, storyId }) => {
+  return (
+    <Layout docId={docId} storyId={storyId}>
+      <DocPage type={type} />
+    </Layout>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async () => {
+  const homePage = getIndexPage(store);
+  const { docId = null, type = null, storyId = null } = homePage;
+  return { props: { docId, type, storyId } };
+};
+
+export default HomePage;

examples/simple/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

integrations/gatsby-theme-stories/gatsby-ssr.js

@@ -0,0 +1,2 @@
+const { onPreRenderHTML } = require('./dist/gatsby-ssr');
+exports.onPreRenderHTML = onPreRenderHTML;

integrations/gatsby-theme-stories/package.json

@@ -15,7 +15,8 @@
     "package.json",
     "README.md",
     "gatsby-config.js",
-    "gatsby-node.js"
+    "gatsby-node.js",
+    "gatsby-ssr.js"
   ],
   "scripts": {
     "build": "yarn cross-env NODE_ENV=production rollup -c",

integrations/gatsby-theme-stories/rollup.config.js

@@ -1,5 +1,5 @@
 import { config } from '../../rollup-config';
 
 export default config({
-  input: ['./src/index.ts', './src/gatsby-node.ts'],
+  input: ['./src/index.ts', './src/gatsby-node.ts', './src/gatsby-ssr.tsx'],
 });

integrations/gatsby-theme-stories/src/gatsby-node.ts

@@ -10,8 +10,10 @@ import {
   BuildProps,
   defaultCompileProps,
   getBundleName,
+  getCSSBundleName,
   Store,
 } from '@component-controls/core';
+import { mergeBuildConfiguration } from '@component-controls/config';
 
 import {
   CreatePagesArgs,
@@ -116,6 +118,7 @@ export const createPagesStatefully = async (
         log('creating sitemap', sitemapname);
         fs.writeFileSync(sitemapname, sitemap, 'utf8');
       }
+      process.env.GATSBY_CC_CSS_FILENAME = getCSSBundleName(store.config);
     }
 
     doneCb(null, null);
@@ -130,6 +133,10 @@ exports.onCreateWebpackConfig = (
 ) => {
   //inject store bundle name
   actions.setWebpackConfig({
-    plugins: [new StorePlugin({ bundleFileName: getBundleName(options) })],
+    plugins: [
+      new StorePlugin({
+        bundleFileName: getBundleName(mergeBuildConfiguration(options)),
+      }),
+    ],
   });
 };

integrations/gatsby-theme-stories/src/gatsby-ssr.tsx

@@ -0,0 +1,16 @@
+import fs from 'fs';
+import React from 'react';
+import { PreRenderHTMLArgs } from 'gatsby';
+
+export const onPreRenderHTML = ({
+  getHeadComponents,
+  replaceHeadComponents,
+}: PreRenderHTMLArgs) => {
+  const headComponents = getHeadComponents();
+  const cssBundle = process.env.GATSBY_CC_CSS_FILENAME;
+  if (cssBundle && fs.existsSync(cssBundle)) {
+    const cssStyles = fs.readFileSync(cssBundle, 'utf8');
+    headComponents.push(<style key="controls-styles">{cssStyles}</style>);
+  }
+  replaceHeadComponents(headComponents);
+};

integrations/nextjs-plugin/src/build.ts

@@ -6,7 +6,11 @@ import {
   CompilerCallbackFn,
 } from '@component-controls/webpack-compile';
 import { log } from '@component-controls/logger';
-import { BuildProps, defaultCompileProps } from '@component-controls/core';
+import {
+  BuildProps,
+  defaultCompileProps,
+  getCSSBundleName,
+} from '@component-controls/core';
 import { Store } from '@component-controls/core';
 import { loadStore, getSiteMap } from '@component-controls/store';
 
@@ -56,6 +60,7 @@ module.exports = ({
             log('creating sitemap', sitemapname);
             fs.writeFileSync(sitemapname, sitemap, 'utf8');
           }
+          process.env.NEXT_CC_CSS_FILENAME = getCSSBundleName(store.config);
         }
       };
       const compiler =