Support for NextJS now working

mintuz · mintuz · commit c5b67108fc49 · 2018-12-23T19:39:39.000Z
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ You can also define your own styles using the styles function which should retur
 ```
 /* ./app.js */
 import React from 'react';
-import {StaticCSS as CSS} from '@mintuz/react-css-loader';
+import { StaticCSS as CSS } from '@mintuz/react-css-loader';
 
 const MyComponent = () => {
     return <div className="my-custom-element"/>;
@@ -47,7 +47,8 @@ The file system adapter will resolve css files from your local file system and a
 
 ```
 import App from './app'; /* React application */
-import {Resolver, FileSystemAdapter} from '@mintuz/react-css-loader/server';
+import { Resolver } from '@mintuz/react-css-loader';
+import FileSystemAdapter from '@mintuz/react-css-loader/file';
 
 const cssResolver = new Resolver(React.createElement(App), new FileSystemAdapter({
     folderPath: `${__dirname}/styles/`,
@@ -74,7 +75,8 @@ console.log(cssString);
 
 ```
 import App from './app';
-import {Resolver, FileSystemAdapter} from '@mintuz/react-css-loader/server';
+import { Resolver } from '@mintuz/react-css-loader';
+import FileSystemAdapter from '@mintuz/react-css-loader/file';
 
 const cssResolver = new Resolver(React.createElement(App), new FileSystemAdapter({
     folderPath: `${__dirname}/styles/`,
@@ -99,7 +101,8 @@ If you serve your CSS via a CDN, this is for you. Rather than resolving the CSS
 
 ```
 import App from './app';
-import {Resolver, CDNAdapter} from '@mintuz/react-css-loader/server';
+import { Resolver } from '@mintuz/react-css-loader';
+import CDNAdapter from '@mintuz/react-css-loader/cdn';
 
 const cssResolver = new Resolver(React.createElement(App), new CDNAdapter({
     cdnRoot: 'https://my-cdn.com'
diff --git a/cdn.js b/cdn.js
@@ -0,0 +1,2 @@
+import CDNAdapter from './dist/adapter/cdn';
+export default CDNAdapter;
diff --git a/examples/express-cdn/src/App/Body.js b/examples/express-cdn/src/App/Body.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StaticCSS as CSS } from '../../../../index';
+import { StaticCSS as CSS } from '../../../../';
 
 function Body(props) {
     return (
diff --git a/examples/express-cdn/src/App/Header.js b/examples/express-cdn/src/App/Header.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StaticCSS as CSS } from '../../../../index';
+import { StaticCSS as CSS } from '../../../../';
 
 function Header() {
     return (
diff --git a/examples/express-cdn/src/App/index.js b/examples/express-cdn/src/App/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Header from './Header';
 import Body from './Body';
-import { StaticCSS as CSS } from '../../../../index';
+import { StaticCSS as CSS } from '../../../../';
 
 function Root(props) {
     return (
diff --git a/examples/express-cdn/src/index.js b/examples/express-cdn/src/index.js
@@ -2,7 +2,8 @@ import express from 'express';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import App from './App';
-import { Resolver, CDNAdapter } from '../../../server';
+import { Resolver } from '../../../';
+import CDNAdapter from '../../../cdn';
 
 const app = express();
 
diff --git a/examples/express-file-system/src/App/Body.js b/examples/express-file-system/src/App/Body.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StaticCSS as CSS } from '../../../../index';
+import { StaticCSS as CSS } from '../../../../';
 
 function Body(props) {
     return (
diff --git a/examples/express-file-system/src/App/Header.js b/examples/express-file-system/src/App/Header.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StaticCSS as CSS } from '../../../../index';
+import { StaticCSS as CSS } from '../../../../';
 
 function Header() {
     return (
diff --git a/examples/express-file-system/src/App/index.js b/examples/express-file-system/src/App/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Header from './Header';
 import Body from './Body';
-import { StaticCSS as CSS } from '../../../../index';
+import { StaticCSS as CSS } from '../../../../';
 
 function Root(props) {
     return (
diff --git a/examples/express-file-system/src/index.js b/examples/express-file-system/src/index.js
@@ -3,7 +3,8 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { path } from 'app-root-path';
 import App from './App';
-import { Resolver, FileSystemAdapter } from '../../../server';
+import { Resolver } from '../../../';
+import FileSystemAdapter from '../../../file';
 
 const app = express();
 
diff --git a/examples/nextjs-cdn/components/Header.js b/examples/nextjs-cdn/components/Header.js
@@ -0,0 +1,13 @@
+import { StaticCSS as CSS } from '../../../';
+
+function Header() {
+    return (
+        <div className="example-header">
+            My example Header
+        </div>
+    );
+}
+
+Header.displayName = "Header";
+
+export default CSS(Header);
diff --git a/examples/nextjs-cdn/pages/_app.js b/examples/nextjs-cdn/pages/_app.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import App, { Container } from 'next/app';
+import Head from 'next/head';
+import { Resolver } from '../../../';
+import CDNAdapter from '../../../cdn';
 
 export default class MyApp extends App {
   static async getInitialProps({ Component, ctx }) {
@@ -9,33 +12,39 @@ export default class MyApp extends App {
       pageProps = await Component.getInitialProps(ctx);
     }
 
-    return import('../../../server').then(async ({Resolver, CDNAdapter}) => {
-      const cssResolver = new Resolver(Component, new CDNAdapter());
-      const css = await cssResolver.render();
-
-      return { pageProps, css };
-    }).catch(() => {
-      return { pageProps };
-    });
-
-    // console.log(CSS);
+    const cssResolver = new Resolver(
+      React.createElement(Component, pageProps),
+      new CDNAdapter({
+        cdnRoot: '/static', /* Map to nextjs static folder */
+      }),
+    );
 
+    /* Rather than use .render(), lets return the raw response so we can trasnform it. */
+    const rawStyles = await cssResolver.resolve();
 
+    /* We don't want everything sent down to the client, let's only send this. */
+    const styles = rawStyles.map(style => {
+      return style.path;
+    });
 
-    // const cssResolver = new Resolver(Component, new CDNAdapter());
-    // const css = await cssResolver.render();
-
-    // console.log(css);
-
-    return { pageProps };
+    return { pageProps, styles };
   }
 
   render () {
-    const { Component, pageProps, css } = this.props;
-    console.log(css);
+    const { Component, pageProps, styles } = this.props;
 
     return (
       <Container>
+        <Head>
+          {
+            styles.map(style => {
+              /* Render a link style using react for each stylesheet found */
+              return (
+                <link rel="stylesheet" href={style} />
+              );
+            })
+          }
+        </Head>
         <Component {...pageProps} />
       </Container>
     )
diff --git a/examples/nextjs-cdn/pages/index.js b/examples/nextjs-cdn/pages/index.js
@@ -1,10 +1,15 @@
+import React from 'react';
 import { StaticCSS as CSS } from '../../../index';
+import Header from '../components/Header';
 
 function Homepage() {
     return (
-        <div>
-            My example homepage
-        </div>
+        <React.Fragment>
+            <Header />
+            <div>
+                My example homepage
+            </div>
+        </React.Fragment>
     );
 }
 
diff --git a/examples/nextjs-cdn/static/Header.css b/examples/nextjs-cdn/static/Header.css
@@ -0,0 +1,6 @@
+.example-header {
+    background-color: red;
+    color: black;
+    padding: 16px;
+    margin-bottom: 16px;
+}
diff --git a/examples/nextjs-cdn/static/Homepage.css b/examples/nextjs-cdn/static/Homepage.css
@@ -2,4 +2,6 @@ html,
 body {
     background-color: black;
     color: white;
+    padding: 0;
+    margin: 0;
 }
diff --git a/file.js b/file.js
@@ -0,0 +1,3 @@
+
+import FileAdapter from './dist/adapter/file';
+export default FileAdapter;
diff --git a/index.js b/index.js
@@ -1,2 +1,3 @@
 export { default as StaticCSS } from './dist/static-container';
 export { default as DynamicCSS } from './dist/dynamic-container';
+export { default as Resolver } from './dist/resolver';
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mintuz/react-css-loader",
-  "version": "2.0.1",
-  "main": "server.js",
+  "version": "3.0.0",
+  "main": "index.js",
   "private": false,
   "description": "A React high order component that provides functionality for tree shaking CSS per component",
   "homepage": "http://github.com/mintuz/react-css-loader/tree/master",
diff --git a/server.js b/server.js
diff --git a/src/__test__/index.spec.js b/src/__test__/index.spec.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { StaticCSS as CSS, DynamicCSS } from '../../index';
-import { Resolver, FileSystemAdapter, CDNAdapter } from '../../server';
+import { StaticCSS as CSS, DynamicCSS, Resolver } from '../../index';
+import FileSystemAdapter from '../../file';
+import CDNAdapter from '../../cdn';
 
 function buildComponent(displayName) {
     function MyComponent(props) {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+import CDNAdapter from './dist/adapter/cdn';`
	`2`	`+export default CDNAdapter;`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,6 @@ html,`
`2`	`2`	`body {`
`3`	`3`	`background-color: black;`
`4`	`4`	`color: white;`
	`5`	`+ padding: 0;`
	`6`	`+ margin: 0;`
`5`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+`
	`2`	`+import FileAdapter from './dist/adapter/file';`
	`3`	`+export default FileAdapter;`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export { default as StaticCSS } from './dist/static-container';`
`2`	`2`	`export { default as DynamicCSS } from './dist/dynamic-container';`
	`3`	`+export { default as Resolver } from './dist/resolver';`