fix: nextjs inject css styles

ccontrols · Mar 13, 2021 · f997c9c · f997c9c
1 parent b3f2144
commit f997c9c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/integrations/nextjs-plugin/src/build.ts b/integrations/nextjs-plugin/src/build.ts
@@ -1,3 +1,4 @@
+import fs from 'fs';
 import { BuildProps, RuleOptions } from '@component-controls/core';
 import { getCSSBundleName } from '@component-controls/core/node-utils';
 import {
@@ -29,8 +30,13 @@ module.exports = ({
     async headers() {
       await buildBundle({
         options: buildOptions,
-        onEndBuild: ({ store }) =>
-          (process.env.NEXT_CC_CSS_FILENAME = getCSSBundleName(store.config)),
+        onEndBuild: ({ store }) => {
+          const cssBundle = getCSSBundleName(store.config);
+          if (fs.existsSync(cssBundle)) {
+            const cssStyles = fs.readFileSync(cssBundle, 'utf8');
+            process.env.NEXT_PUBLIC_CC_CSS = JSON.stringify(cssStyles);
+          }
+        },
       });
       return [];
     },

diff --git a/integrations/nextjs-plugin/src/components/NextLayout.tsx b/integrations/nextjs-plugin/src/components/NextLayout.tsx
@@ -4,11 +4,26 @@ import { Layout, LayoutProps } from '@component-controls/base-integration';
 import { NextLink } from './NextLink';
 
 export const NextLayout: FC<Omit<LayoutProps, 'Helmet' | 'Link'>> = props => {
+  let head;
+  console.log('process.env.NEXT_PUBLIC_CC_CSS', process.env.NEXT_PUBLIC_CC_CSS);
+  if (typeof process.env.NEXT_PUBLIC_CC_CSS === 'string') {
+    head = (
+      <Helmet>
+        <style key="controls-styles">
+          {JSON.parse(process.env.NEXT_PUBLIC_CC_CSS)}
+        </style>
+      </Helmet>
+    );
+  }
+
   return (
-    <Layout
-      {...props}
-      Helmet={Helmet as LayoutProps['Helmet']}
-      Link={NextLink}
-    />
+    <>
+      {head}
+      <Layout
+        {...props}
+        Helmet={Helmet as LayoutProps['Helmet']}
+        Link={NextLink}
+      />
+    </>
   );
 };