Use bunchee for bundling

package.json

@@ -21,10 +21,10 @@
   ],
   "typings": "./index.d.ts",
   "scripts": {
-    "build": "rm -rf dist && rm -rf out && babel src --out-dir out && yarn build-babel && yarn build-webpack && yarn build-index",
-    "build-babel": "ncc build out/babel.js -e react -e babel-plugin-macros --target es5 -o dist/babel",
-    "build-webpack": "ncc build out/webpack.js -e react -e babel-plugin-macros --target es5 -o dist/webpack",
-    "build-index": "ncc build out/index.js -e react -e babel-plugin-macros --target es5 -o dist/index",
+    "build": "rm -rf dist && rm -rf out && yarn build-babel && yarn build-webpack && yarn build-index",
+    "build-babel": "bunchee src/babel.js -f cjs --target node -e react -e babel-plugin-macros -o dist/babel/index.js --no-sourcemap",
+    "build-webpack": "bunchee src/webpack.js -f cjs --target node -o dist/webpack/index.js --no-sourcemap",
+    "build-index": "bunchee src/index.js -f cjs --target node -e react -o dist/index/index.js --no-sourcemap",
     "test": "ava",
     "lint": "eslint ./src",
     "format": "prettier --write \"./{src,test}/**/*.{js,css}\"",
@@ -75,7 +75,6 @@
     "@babel/register": "7.12.1",
     "@babel/runtime": "7.12.5",
     "@babel/types": "7.15.0",
-    "@vercel/ncc": "0.33.1",
     "ava": "1.2.1",
     "babel-plugin-macros": "2.8.0",
     "convert-source-map": "1.7.0",
@@ -120,5 +119,8 @@
     "zeit",
     "css-in-js",
     "css"
-  ]
+  ],
+  "dependencies": {
+    "bunchee": "1.9.0"
+  }
 }

src/babel.js

@@ -1,8 +1,6 @@
-// Packages
 import jsx from '@babel/plugin-syntax-jsx'
 
 import { visitor as externalStylesVisitor } from './babel-external'
-
 import {
   isGlobalEl,
   isStyledJsx,
@@ -18,13 +16,8 @@ import {
 } from './_utils'
 import { STYLE_COMPONENT } from './_constants'
 
-export function macro() {
-  return require('./macro')
-}
-
-export function test() {
-  return require('./babel-test')
-}
+export { default as macro } from './macro'
+export { default as test } from './babel-test'
 
 export default function({ types: t }) {
   const jsxVisitors = {

src/lib/style-transform.js

@@ -113,4 +113,4 @@ function transform(hash, styles, settings = {}) {
   return splitRules.join('')
 }
 
-module.exports = transform
+export default transform

src/webpack.js

@@ -1,8 +1,8 @@
-const loaderUtils = require('loader-utils')
+import loaderUtils from 'loader-utils'
 
 const types = ['scoped', 'global', 'resolve']
 
-module.exports = function(content) {
+export default function(content) {
   if (this.cacheable) this.cacheable()
   this.addDependency(this.resourcePath)
   const options = Object.assign({}, loaderUtils.getOptions(this))