build: move styled-jsx to dependencies

package.json

@@ -76,11 +76,12 @@
     "react-color": "^2.18.0",
     "react-dom": "^16.13.0",
     "react-live": "^2.2.2",
-    "styled-jsx": "^3.2.5",
     "ts-jest": "^25.3.1",
     "typescript": "^3.8.2",
     "webpack": "^4.41.6",
     "webpack-cli": "^3.3.11"
   },
-  "dependencies": {}
-}
+  "dependencies": {
+    "styled-jsx": "^3.2.5"
+  }
+}

scripts/webpack.config.js

@@ -2,65 +2,79 @@ const fs = require('fs-extra')
 const path = require('path')
 const componentsPath = path.join(__dirname, '../components')
 
-module.exports = async () => {
+module.exports = async() => {
   const files = await fs.readdir(componentsPath)
   
   const components = await Promise.all(files.map(async name => {
     const comPath = path.join(componentsPath, name)
     const entry = path.join(comPath, 'index.ts')
-
+    
     const stat = await fs.stat(comPath)
     if (!stat.isDirectory()) return null
-
+    
     const hasFile = await fs.pathExists(entry)
     if (!hasFile) return null
-
+    
     return { name, url: entry }
   }))
   
   const componentsEntries = components
     .filter(r => r)
     .reduce((pre, current) => {
-    return Object.assign({}, pre, { [current.name]: current.url })
-  }, { index: path.join(componentsPath, 'index.ts') })
+      return Object.assign({}, pre, { [current.name]: current.url })
+    }, { index: path.join(componentsPath, 'index.ts') })
   
   console.log(`\n${Object.keys(componentsEntries).length} Components in total have been collected.`)
   console.log('Bundle now...')
 
   return {
     mode: 'production',
-  
+    
     entry: componentsEntries,
-  
+    
     output: {
       filename: '[name].js',
       path: path.resolve(__dirname, '../dist'),
       library: '',
       libraryTarget: 'commonjs',
     },
-  
+    
     resolve: {
       extensions: ['.ts', '.tsx', '.js'],
       alias: {
         components: componentsPath,
       },
     },
-  
-    externals: {
-      react: {
-        root: 'React',
-        commonjs2: 'react',
-        commonjs: 'react',
-        amd: 'react'
+    
+    externals: [
+      {
+        react: {
+          root: 'React',
+          commonjs2: 'react',
+          commonjs: 'react',
+          amd: 'react',
+        },
+        'react-dom': {
+          root: 'ReactDOM',
+          commonjs2: 'react-dom',
+          commonjs: 'react-dom',
+          amd: 'react-dom',
+        },
+        // '/styled-jsx/': {
+        //   root: '_JSXStyle',
+        //   commonjs2: 'styled-jsx',
+        //   commonjs: 'styled-jsx',
+        //   amd: 'styled-jsx',
+        // },
       },
-      'react-dom': {
-        root: 'ReactDOM',
-        commonjs2: 'react-dom',
-        commonjs: 'react-dom',
-        amd: 'react-dom'
-      }
-    },
-  
+      function(context, request, done) {
+        if (/^styled-jsx/.test(request)){
+          return done(null, 'commonjs ' + request)
+        }
+        done()
+      },
+    ],
+    
     module: {
       rules: [
         {