Add support for unpkg.com and upgrade build setup (#101)

* Add support for unkpg.com and upgrade build setup

* Remove unsed package and syntax fix

Author: asvny

.babelrc

@@ -1,22 +1,22 @@
 {
   "presets": [
     [
-      "env", {
+      "@babel/env", {
+        "modules": false,
         "exclude": [
-          "transform-es2015-typeof-symbol"
+          "transform-typeof-symbol"
         ]
       }
     ],
-    "react"
+    "@babel/react"
   ],
-  "plugins": [
-    [
-      "module-resolver",
-      {
-        "alias": {
-          "cxs": "./src"
-        }
-      }
-    ]
-  ]
-}
+
+  "env": {
+    "test": { 
+      "plugins": [
+        "add-module-exports",
+        "transform-es2015-modules-commonjs"
+      ],
+    }
+  }
+}

.gitignore

@@ -3,3 +3,6 @@ coverage
 dist
 package-lock.json
 coverage.lcov
+node_modules
+tmp
+yarn-error.log

package.json

@@ -3,8 +3,9 @@
   "version": "6.2.0",
   "description": "Fast af css-in-js in under 1kb",
   "main": "dist/index.js",
+  "unpkg": "dist/index.js",
   "scripts": {
-    "prepublish": "babel src -d dist",
+    "prepublish": "rollup -c",
     "build": "node docs/build.js",
     "start": "webpack-dev-server",
     "size": "npm run prepublish && bundlesize",
@@ -13,36 +14,61 @@
     "test": "nyc ava"
   },
   "keywords": [],
+  "files": [
+    "dist/component.js",
+    "dist/component.min.js",
+    "dist/createTheme.js",
+    "dist/createTheme.min.js",
+    "dist/index.js",
+    "dist/index.min.js",
+    "dist/monocomponent.js",
+    "dist/monocomponent.min.js",
+    "dist/monolithic.js",
+    "dist/monolithic.min.js",
+    "dist/ThemeProvider.js",
+    "dist/ThemeProvider.min.js"
+  ],
   "author": "Brent Jackson",
   "license": "MIT",
   "devDependencies": {
-    "ava": "^0.21.0",
-    "babel-cli": "^6.24.1",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-module-resolver": "^2.7.1",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.26.0",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "ava": "1.0.0-beta.1",
+    "babel-loader": "^8.0.2",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "browser-env": "^3.1.0",
     "bundlesize": "^0.12.1",
     "bytes": "^2.5.0",
-    "codecov": "^2.3.0",
+    "codecov": "^3.1.0",
     "loglevel": "^1.4.1",
-    "nyc": "^11.0.3",
+    "nyc": "^13.0.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-live": "^1.7.0",
     "react-test-renderer": "^15.6.1",
+    "rollup": "^0.65.2",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.1.6",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-uglify": "^5.0.2",
     "standard": "^10.0.2",
     "styled-system": "^1.0.0-12",
     "webpack": "^3.3.0",
     "webpack-dev-server": "^2.6.0"
   },
   "ava": {
     "require": [
-      "babel-register"
+      "@babel/register"
     ],
-    "babel": "inherit"
+    "babel": {
+      "testOptions": {
+        "babelrc": true
+      }
+    }
   },
   "nyc": {
     "exclude": [
@@ -68,7 +94,7 @@
     },
     {
       "path": "./dist/component.js",
-      "maxSize": "0.7 kb"
+      "maxSize": "0.75 kb"
     },
     {
       "path": "./dist/monolithic.js",

rollup.config.js

@@ -0,0 +1,49 @@
+import babel from 'rollup-plugin-babel'
+import { uglify } from 'rollup-plugin-uglify'
+import commonjs from 'rollup-plugin-commonjs'
+import resolve from 'rollup-plugin-node-resolve'
+import path from 'path'
+
+let cxsIndex = path.resolve(__dirname, 'src/index.js')
+let cxsMonolithic = path.resolve(__dirname, 'src/monolithic.js')
+let cxsCreateTheme = path.resolve(__dirname, 'src/createTheme.js')
+
+function inputFactory (input, name, isProduction) {
+  let pluginForProduction = isProduction ? [uglify()] : []
+  let outputName = input + (isProduction ? '.min' : '')
+
+  return {
+    input: path.resolve(__dirname, `src/${input}.js`),
+    output: {
+      file: path.resolve(__dirname, `dist/${outputName}.js`),
+      format: 'umd',
+      name,
+      globals: {
+        'react': 'React',
+        'react-dom': 'ReactDOM',
+        'prop-types': 'PropTypes',
+        [cxsIndex]: 'cxs',
+        [cxsCreateTheme]: 'cxsCreateTheme',
+        [cxsMonolithic]: 'cxsMonolithic'
+      }
+    },
+    plugins: [ resolve(), commonjs(), babel() ].concat(pluginForProduction),
+    external: ['react', 'react-dom', 'prop-types', cxsIndex, cxsMonolithic, cxsCreateTheme]
+  }
+}
+
+export default [
+  inputFactory('index', 'cxs'),
+  inputFactory('component', 'cxsComponent'),
+  inputFactory('createTheme', 'cxsCreateTheme'),
+  inputFactory('monocomponent', 'cxsMonocomponent'),
+  inputFactory('monolithic', 'cxsMonolithic'),
+  inputFactory('ThemeProvider', 'cxsThemeProvider'),
+
+  inputFactory('index', 'cxs', true),
+  inputFactory('component', 'cxsComponent', true),
+  inputFactory('createTheme', 'cxsCreateTheme', true),
+  inputFactory('monocomponent', 'cxsMonocomponent', true),
+  inputFactory('monolithic', 'cxsMonolithic', true),
+  inputFactory('ThemeProvider', 'cxsThemeProvider', true)
+]

src/ThemeProvider.js

@@ -1,6 +1,7 @@
-const React = require('react')
-const PropTypes = require('prop-types')
-const createTheme = require('./createTheme')
+import createTheme from './createTheme'
+import PropTypes from 'prop-types'
+import React from 'react'
+
 const h = React.createElement
 
 class ThemeProvider extends React.Component {
@@ -24,4 +25,4 @@ ThemeProvider.childContextTypes = {
   ])
 }
 
-module.exports = ThemeProvider
+export default ThemeProvider

src/component.js

@@ -1,40 +1,46 @@
-const h = require('react').createElement
-const PropTypes = require('prop-types')
-const cxs = require('./index')
-
-module.exports = C => (...args) => {
-  const Comp = (props, context = {}) => {
-    const stylePropKeys = [
-      ...Object.keys(Comp.propTypes || {}),
-      'css'
-    ]
-    const styleProps = Object.assign({ theme: context.theme || {} }, props)
-
-    const next = {}
-    for (let key in props) {
-      if (stylePropKeys.includes(key)) continue
-      next[key] = props[key]
-    }
-    next.className = [
-      next.className,
-      ...args.map(a => typeof a === 'function' ? a(styleProps) : a)
+import _cxs from './index'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const h = React.createElement
+
+function cxs (C) {
+  return (...args) => {
+    const Comp = (props, context = {}) => {
+      const stylePropKeys = [
+        ...Object.keys(Comp.propTypes || {}),
+        'css'
+      ]
+      const styleProps = Object.assign({ theme: context.theme || {} }, props)
+
+      const next = {}
+      for (let key in props) {
+        if (stylePropKeys.includes(key)) continue
+        next[key] = props[key]
+      }
+      next.className = [
+        next.className,
+        ...args.map(a => typeof a === 'function' ? a(styleProps) : a)
         .filter(s => !!s)
-        .map(s => cxs(s)),
-      cxs(props.css || {})
-    ].join(' ').trim()
+        .map(s => _cxs(s)),
+        _cxs(props.css || {})
+      ].join(' ').trim()
 
-    return h(C, next)
-  }
+      return h(C, next)
+    }
 
-  Comp.contextTypes = {
-    theme: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.func
-    ])
-  }
+    Comp.contextTypes = {
+      theme: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func
+      ])
+    }
 
-  return Comp
+    return Comp
+  }
 }
 
-module.exports.css = cxs.css
-module.exports.reset = cxs.reset
+cxs.css = _cxs.css
+cxs.reset = _cxs.reset
+
+export default cxs

src/createTheme.js

@@ -1,4 +1,8 @@
-module.exports = theme => Object.assign(function (keys) {
-  return keys.split('.')
+function createTheme (theme) {
+  return Object.assign(function (keys) {
+    return keys.split('.')
     .reduce((a, b) => (a && a[b]) ? a[b] : null, theme)
-}, theme)
+  }, theme)
+}
+
+export default createTheme

src/index.js

@@ -25,18 +25,21 @@ const parse = (obj, child = '', media) =>
   })
     .join(' ')
 
-module.exports = (...styles) =>
-  styles.map(style => parse(style))
-  .join(' ').trim()
+function cxs (...styles) {
+  return styles
+    .map(style => parse(style))
+    .join(' ')
+    .trim()
+}
 
-module.exports.css = () => rules.sort().join('')
+cxs.css = () => rules.sort().join('')
 
-module.exports.reset = () => {
+cxs.reset = () => {
   cache = {}
   while (rules.length) rules.pop()
 }
 
-module.exports.prefix = val => prefix = val
+cxs.prefix = val => (prefix = val)
 
 if (typeof document !== 'undefined') {
   const sheet = document.head.appendChild(
@@ -47,3 +50,5 @@ if (typeof document !== 'undefined') {
     sheet.insertRule(rule, sheet.cssRules.length)
   }
 }
+
+export default cxs