feat: initial isomorphic css loader

ccontrols · Oct 21, 2020 · 949b132 · 949b132
1 parent 19fc530
commit 949b132
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 8 deletions.
diff --git a/core/render/package.json b/core/render/package.json
@@ -33,13 +33,15 @@
   "license": "MIT",
   "dependencies": {
     "@component-controls/core": "^1.34.0",
+    "isomorphic-style-loader": "^5.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "@component-controls/ts-markdown-docs": "^1.21.0",
     "@types/jest": "^26.0.10",
     "@types/react": "^16.9.34",
+
     "cross-env": "^5.2.1",
     "eslint": "^6.5.1",
     "jest": "^26.4.2",

diff --git a/core/render/rollup.config.js b/core/render/rollup.config.js
@@ -1,5 +1,5 @@
 import { config } from '../../rollup-config';
 
 export default config({
-  input: ['./src/index.ts', './src/react.ts'],
+  input: ['./src/index.ts', './src/react.tsx'],
 });
diff --git a/core/render/src/react.ts → core/render/src/react.tsx b/core/render/src/react.ts → core/render/src/react.tsx
@@ -1,10 +1,12 @@
-import { createElement } from 'react';
+/* eslint-disable react/display-name */
+import React, { createElement } from 'react';
 import {
   StoryRenderFn,
   getControlValues,
   deepMerge,
   FrameworkRenderFn,
 } from '@component-controls/core';
+import StyleContext from 'isomorphic-style-loader/StyleContext';
 
 export const render: FrameworkRenderFn = (story, doc, options: any = {}) => {
   if (!story) {
@@ -41,6 +43,15 @@ export const render: FrameworkRenderFn = (story, doc, options: any = {}) => {
       );
   }
   let node: any = null;
-  node = () => (renderFn as StoryRenderFn)(values, context);
+  const css = new Set();
+  const insertCss = (...styles: any[]) => {
+    console.log(styles);
+    styles.forEach(style => css.add(style._getCss()));
+  };
+  node = () => (
+    <StyleContext.Provider value={{ insertCss }}>
+      {(renderFn as StoryRenderFn)(values, context)}
+    </StyleContext.Provider>
+  );
   return createElement(node);
 };
diff --git a/core/render/src/typings.d.ts b/core/render/src/typings.d.ts
@@ -0,0 +1 @@
+declare module 'isomorphic-style-loader/StyleContext';
diff --git a/core/webpack-configs/package.json b/core/webpack-configs/package.json
@@ -50,8 +50,8 @@
     "cross-env": "^5.2.1",
     "eslint": "^6.5.1",
     "file-loader": "^6.0.0",
+    "isomorphic-style-loader": "^5.1.0",
     "jest": "^26.4.2",
-    "style-loader": "^2.0.0",
     "url-loader": "^4.1.0"
   },
   "jest": {

diff --git a/core/webpack-configs/src/react/index.ts b/core/webpack-configs/src/react/index.ts
@@ -62,8 +62,17 @@ export const react: PresetType = (options?: PresetOptions) => {
           },
         },
         {
-          test: /\.css$/i,
-          use: [require.resolve('style-loader'), require.resolve('css-loader')],
+          test: /\.css$/,
+          use: [
+            'isomorphic-style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+                esModule: false,
+              },
+            },
+          ],
         },
         {
           test: /\.txt$/i,

diff --git a/yarn.lock b/yarn.lock
@@ -13821,7 +13821,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -15215,6 +15215,15 @@ isomorphic-fetch@^2.1.1:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
 
+isomorphic-style-loader@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-style-loader/-/isomorphic-style-loader-5.1.0.tgz#4845f90bb9828f3dfecc82d0574c9ed01bbaba2d"
+  integrity sha512-6KBucdRvmz5U5SMrdDUhDyTQ6nRmCjzjopJBDVkfx1+xsoiyNYVlcY1OqSH1SHKYRzVWhqWXIBGgeTl5L7gViw==
+  dependencies:
+    hoist-non-react-statics "^3.0.0"
+    loader-utils "^1.2.3"
+    react "^16.3.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -20763,7 +20772,7 @@ react-textarea-autosize@^8.1.1:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react@^16.12.0, react@^16.13.1, react@^16.8.0, react@^16.8.3:
+react@^16.12.0, react@^16.13.1, react@^16.3.0, react@^16.8.0, react@^16.8.3:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
   integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		declare module 'isomorphic-style-loader/StyleContext';