build: use bunchee for bundling (#802)

* Use bunchee for bundling

* update snapshot

* bump deps

* update babel cli dep

* bump bundler

* update bunchee with swc compiler

* rm no-sourcemap flag

* upgrade and change arg

* update to stable

* fix build

* bundle stylis

* update exports

* update babel exports

* fix export

babel.js

@@ -1 +1 @@
-module.exports = require('./dist/babel')
+module.exports = require('./dist/babel').default

package.json

@@ -23,10 +23,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 --runtime node -e react -e babel-plugin-macros -o dist/babel/index.js",
+    "build-webpack": "bunchee src/webpack.js -f cjs --runtime node -e react -e babel-plugin-macros -o dist/webpack/index.js",
+    "build-index": "bunchee src/index.js -f cjs --runtime node -o dist/index/index.js",
     "test": "ava",
     "lint": "eslint ./src",
     "format": "prettier --write \"./{src,test}/**/*.{js,css}\"",
@@ -65,7 +65,7 @@
     }
   },
   "devDependencies": {
-    "@babel/cli": "7.12.1",
+    "@babel/cli": "7.18.10",
     "@babel/core": "7.12.3",
     "@babel/plugin-proposal-object-rest-spread": "7.12.1",
     "@babel/plugin-syntax-jsx": "7.14.5",
@@ -77,9 +77,9 @@
     "@babel/register": "7.12.1",
     "@babel/runtime": "7.12.5",
     "@babel/types": "7.15.0",
-    "@vercel/ncc": "0.33.1",
     "ava": "4.3.1",
     "babel-plugin-macros": "2.8.0",
+    "bunchee": "2.0.3",
     "convert-source-map": "1.7.0",
     "eslint": "7.32.0",
     "eslint-config-prettier": "4.0.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,12 +16,15 @@ import {
 } from './_utils'
 import { STYLE_COMPONENT } from './_constants'
 
+import { default as babelMacro } from './macro'
+import { default as babelTest } from './babel-test'
+
 export function macro() {
-  return require('./macro')
+  return babelMacro
 }
 
 export function test() {
-  return require('./babel-test')
+  return babelTest
 }
 
 export default function({ types: t }) {

src/lib/style-transform.js

@@ -1,5 +1,5 @@
-const Stylis = require('stylis')
-const stylisRuleSheet = require('stylis-rule-sheet')
+import Stylis from 'stylis'
+import stylisRuleSheet from 'stylis-rule-sheet'
 
 const stylis = new Stylis()
 
@@ -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))

test/snapshots/external.js.md

@@ -236,8 +236,8 @@ Generated by [AVA](https://avajs.dev).
 
 > Snapshot 1
 
-    `import { jsx as _jsx } from "react/jsx-runtime";␊
-    import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXStyle from "styled-jsx/style";␊
+    import { jsx as _jsx } from "react/jsx-runtime";␊
     const A = {␊
       styles: /*#__PURE__*/_jsx(_JSXStyle, {␊
         id: "2723508961",␊

test/snapshots/index.js.md

@@ -367,7 +367,7 @@ Generated by [AVA](https://avajs.dev).
     ␊
     };`
 
-## works with existing identifier for \_JSXStyle
+## works with existing identifier for _JSXStyle
 
 > Snapshot 1
 

test/snapshots/plugins.js.md

@@ -42,6 +42,6 @@ Generated by [AVA](https://avajs.dev).
     const color = 'red';␊
     export default (() => <div className={\`jsx-${styles.__hash}\` + " " + _JSXStyle.dynamic([["2799750516", [color, otherColor]]])}>␊
         <p className={\`jsx-${styles.__hash}\` + " " + _JSXStyle.dynamic([["2799750516", [color, otherColor]]])}>test</p>␊
-        <_JSXStyle id={"2799750516"} dynamic={[color, otherColor]}>{".test.__jsx-style-dynamic-selector{content:\\"{\\"foo\\":false,\\"babel\\":{\\"location\\":{\\"start\\":{\\"line\\":7,\\"column\\":16},\\"end\\":{\\"line\\":11,\\"column\\":5}},\\"vendorPrefixes\\":false,\\"sourceMaps\\":false,\\"isGlobal\\":false}}\\";}"}</_JSXStyle>␊
+        <_JSXStyle id={"2799750516"} dynamic={[color, otherColor]}>{".test.__jsx-style-dynamic-selector{content:\\"{\\"foo\\":false,\\"babel\\":{\\"location\\":{\\"start\\":{\\"line\\":7,\\"column\\":16,\\"index\\":114},\\"end\\":{\\"line\\":11,\\"column\\":5,\\"index\\":180}},\\"vendorPrefixes\\":false,\\"sourceMaps\\":false,\\"isGlobal\\":false}}\\";}"}</_JSXStyle>␊
         <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊
       </div>);`