Merge pull request #67 from cssinjs/rollup

Build bundles with rollup

Author: kof

.size-snapshot.json

@@ -0,0 +1,36 @@
+{
+  "dist/css-vendor.js": {
+    "bundled": 15626,
+    "minified": 4984,
+    "gzipped": 1907
+  },
+  "dist/css-vendor.min.js": {
+    "bundled": 15626,
+    "minified": 4984,
+    "gzipped": 1907
+  },
+  "./lib/index": {
+    "bundled": 14406,
+    "minified": 6274,
+    "gzipped": 2186
+  },
+  "./dist/css-vendor.cjs.js": {
+    "bundled": 13753,
+    "minified": 5745,
+    "gzipped": 1985
+  },
+  "./dist/css-vendor.esm.js": {
+    "bundled": 13434,
+    "minified": 5484,
+    "gzipped": 1894,
+    "treeshaked": {
+      "rollup": {
+        "code": 3041,
+        "import_statements": 89
+      },
+      "webpack": {
+        "code": 4192
+      }
+    }
+  }
+}

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = (api) => {
   api.cache(true)
-  const presets = ['@babel/env']
+  const presets = [['@babel/env', {loose: true}]]
   const plugins = [
     'transform-es2015-spread',
     'transform-es3-member-expression-literals',

package.json

@@ -21,14 +21,15 @@
     "css-in-js"
   ],
   "engines": {},
+  "main": "./dist/css-vendor.cjs.js",
+  "module": "./dist/css-vendor.esm.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "all": "yarn lint && yarn test && yarn build",
-    "build": "yarn clean && yarn build:lib && yarn build:dist",
-    "build:lib": "babel src --out-dir lib",
-    "build:dist": "yarn build:dist:max && yarn build:dist:min",
-    "build:dist:max": "cross-env webpack --mode=development src/index.js --output-filename=css-vendor.js",
-    "build:dist:min": "cross-env webpack --mode=production src/index.js --output-filename=css-vendor.min.js",
-    "clean": "rimraf {lib,dist,tmp}/*",
+    "build": "yarn clean && yarn rollup -c",
+    "clean": "rimraf {dist,tmp}/*",
     "lint": "eslint ./src ./tests --fix",
     "lint:staged": "lint-staged",
     "test": "cross-env NODE_ENV=test karma start --single-run ",
@@ -37,9 +38,9 @@
     "prepublishOnly": "yarn all"
   },
   "license": "MIT",
-  "main": "./lib/index",
   "devDependencies": {
     "@babel/core": "^7.2.2",
+    "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.3",
     "autoprefixer": "^9.3.1",
     "babel-cli": "^6.5.1",
@@ -76,10 +77,17 @@
     "postcss-js": "^2.0.0",
     "pre-commit": "^1.1.3",
     "rimraf": "^2.6.2",
+    "rollup": "^1.1.2",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-size-snapshot": "^0.8.0",
+    "rollup-plugin-terser": "^4.0.3",
     "webpack": "^4.15.1",
     "webpack-cli": "^3.0.8"
   },
   "dependencies": {
+    "@babel/runtime": "^7.3.1",
     "is-in-browser": "^1.0.2"
   },
   "lint-staged": {
@@ -88,9 +96,5 @@
       "git add"
     ]
   },
-  "pre-commit": "lint:staged",
-  "files": [
-    "dist",
-    "lib"
-  ]
+  "pre-commit": "lint:staged"
 }

rollup.config.js

@@ -0,0 +1,65 @@
+import nodeResolve from 'rollup-plugin-node-resolve'
+import babel from 'rollup-plugin-babel'
+import replace from 'rollup-plugin-replace'
+import {terser} from 'rollup-plugin-terser'
+import {sizeSnapshot} from 'rollup-plugin-size-snapshot'
+import pkg from './package.json'
+
+const input = './src/index.js'
+
+const name = 'cssVendor'
+
+const external = id => !id.startsWith('.') && !id.startsWith('/')
+
+const getBabelOptions = ({useESModules}) => ({
+  exclude: /node_modules/,
+  runtimeHelpers: true,
+  plugins: [
+    ['@babel/transform-runtime', {useESModules}]
+  ]
+})
+
+export default [
+  {
+    input,
+    output: {file: `dist/${pkg.name}.js`, format: 'umd', name},
+    plugins: [
+      nodeResolve(),
+      babel(getBabelOptions({useESModules: true})),
+      replace({'process.env.NODE_ENV': JSON.stringify('development')}),
+      sizeSnapshot()
+    ]
+  },
+
+  {
+    input,
+    output: {file: `dist/${pkg.name}.min.js`, format: 'umd', name},
+    plugins: [
+      nodeResolve(),
+      babel(getBabelOptions({useESModules: true})),
+      replace({'process.env.NODE_ENV': JSON.stringify('production')}),
+      sizeSnapshot(),
+      terser()
+    ]
+  },
+
+  {
+    input,
+    output: {file: pkg.main, format: 'cjs'},
+    external,
+    plugins: [
+      babel(getBabelOptions({useESModules: false})),
+      sizeSnapshot()
+    ]
+  },
+
+  {
+    input,
+    output: {file: pkg.module, format: 'esm'},
+    external,
+    plugins: [
+      babel(getBabelOptions({useESModules: true})),
+      sizeSnapshot()
+    ]
+  },
+]

src/index.js

@@ -11,13 +11,6 @@ import supportedKeyframes from './supported-keyframes'
 import supportedProperty from './supported-property'
 import supportedValue from './supported-value'
 
-export default {
-  prefix,
-  supportedKeyframes,
-  supportedProperty,
-  supportedValue
-}
-
 export {
   prefix,
   supportedKeyframes,

src/supported-property.js

@@ -1,5 +1,5 @@
 import isInBrowser from 'is-in-browser'
-import {propertyDetectors, noPrefill} from './plugins'
+import {propertyDetectors, noPrefill} from './plugins/index.js'
 
 let el
 const cache = {}