feat: rewrite build

.babelrc

@@ -1,14 +0,0 @@
-{
-  "presets": [
-    ["latest", {
-      "es2015": {
-        "modules": false
-      }
-    }]
-  ],
-  "env": {
-    "test": {
-      "presets": ["env"]
-    }
-  }
-}

.eslintrc.json

@@ -30,4 +30,4 @@
     "globals": {
         "ENV": true
     }
-}
+}

dist/frappe-charts.min.css

@@ -1 +1,104 @@
-.chart-container{position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .legend-dataset-text{fill:#6c7680;font-weight:600}.graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ol,.graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}
+.chart-container {
+  position: relative;
+  /* for absolutely positioned tooltip */
+  /* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; }
+  .chart-container .axis, .chart-container .chart-label {
+    fill: #313B44; }
+    .chart-container .axis line, .chart-container .chart-label line {
+      stroke: #E2E6E9; }
+  .chart-container .dataset-units circle {
+    stroke: #fff;
+    stroke-width: 2; }
+  .chart-container .dataset-units path {
+    fill: none;
+    stroke-opacity: 1;
+    stroke-width: 2px; }
+  .chart-container .dataset-path {
+    stroke-width: 2px; }
+  .chart-container .path-group path {
+    fill: none;
+    stroke-opacity: 1;
+    stroke-width: 2px; }
+  .chart-container line.dashed {
+    stroke-dasharray: 5, 3; }
+  .chart-container .axis-line .specific-value {
+    text-anchor: start; }
+  .chart-container .axis-line .y-line {
+    text-anchor: end; }
+  .chart-container .axis-line .x-line {
+    text-anchor: middle; }
+  .chart-container .legend-dataset-text {
+    fill: #6c7680;
+    font-weight: 600; }
+
+.graph-svg-tip {
+  position: absolute;
+  z-index: 99999;
+  padding: 10px;
+  font-size: 12px;
+  text-align: center;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 40px 30px -30px rgba(17, 43, 66, 0.1);
+  border-radius: 6px; }
+  .graph-svg-tip ul {
+    padding-left: 0;
+    display: flex; }
+  .graph-svg-tip ol {
+    padding-left: 0;
+    display: flex; }
+  .graph-svg-tip ul.data-point-list li {
+    min-width: 90px;
+    font-weight: 600; }
+  .graph-svg-tip .svg-pointer {
+    position: absolute;
+    height: 12px;
+    width: 12px;
+    border-radius: 2px;
+    background: white;
+    transform: rotate(45deg);
+    margin-top: -7px;
+    margin-left: -6px; }
+  .graph-svg-tip.comparison {
+    text-align: left;
+    padding: 0px;
+    pointer-events: none; }
+    .graph-svg-tip.comparison .title {
+      display: block;
+      padding: 16px;
+      margin: 0;
+      color: #313B44;
+      font-weight: 600;
+      line-height: 1;
+      pointer-events: none;
+      text-transform: uppercase; }
+    .graph-svg-tip.comparison ul {
+      margin: 0;
+      white-space: nowrap;
+      list-style: none; }
+      .graph-svg-tip.comparison ul.tooltip-grid {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 5px; }
+    .graph-svg-tip.comparison li {
+      display: inline-block;
+      display: flex;
+      flex-direction: row;
+      font-weight: 600;
+      line-height: 1;
+      padding: 5px 15px 15px 15px; }
+      .graph-svg-tip.comparison li .tooltip-legend {
+        height: 12px;
+        width: 12px;
+        margin-right: 8px;
+        border-radius: 2px; }
+      .graph-svg-tip.comparison li .tooltip-label {
+        margin-top: 4px;
+        font-size: 11px;
+        max-width: 100px;
+        color: #313B44;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap; }
+      .graph-svg-tip.comparison li .tooltip-value {
+        color: #192734; }

package.json

@@ -1,11 +1,12 @@
 {
   "name": "frappe-charts",
-  "version": "1.5.5",
+  "version": "1.5.2",
+  "main": "dist/frappe-charts.cjs.js",
+  "common": "dist/frappe-charts.cjs.js",
+  "module": "dist/frappe-charts.esm.js",
+  "browser": "dist/frappe-charts.umd.js",
+  "unpkg": "dist/frappe-charts.umd.js",
   "description": "https://frappe.github.io/charts",
-  "main": "dist/frappe-charts.min.cjs.js",
-  "module": "dist/frappe-charts.min.esm.js",
-  "src": "dist/frappe-charts.esm.js",
-  "browser": "dist/frappe-charts.min.iife.js",
   "directories": {
     "doc": "docs"
   },
@@ -34,35 +35,14 @@
   },
   "homepage": "https://github.com/frappe/charts#readme",
   "devDependencies": {
-    "autoprefixer": "^8.2.0",
-    "babel-core": "^6.26.3",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-istanbul": "^5.1.4",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-latest": "^6.24.1",
-    "babel-register": "^6.26.0",
-    "clean-css": "^4.1.11",
-    "coveralls": "^3.0.0",
-    "cross-env": "^5.1.4",
-    "cssnano": "^4.1.10",
-    "eslint": "^4.18.2",
-    "mocha": "^5.0.5",
-    "node-sass": "^4.12.0",
-    "npm-run-all": "^4.1.1",
-    "nyc": "^14.1.1",
-    "postcss": "^6.0.21",
-    "postcss-cssnext": "^3.0.2",
-    "postcss-nested": "^2.1.2",
-    "precss": "^3.1.2",
-    "rollup": "^0.50.0",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-eslint": "^6.0.0",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "rollup-plugin-postcss": "^2.0.3",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-uglify": "^2.0.1",
-    "rollup-plugin-uglify-es": "0.0.1",
-    "rollup-watch": "^4.3.1"
-  },
-  "dependencies": {}
-}
+    "@babel/core": "^7.10.5",
+    "@babel/preset-env": "^7.10.4",
+    "rollup": "^2.21.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-eslint": "^7.0.0",
+    "rollup-plugin-postcss": "^3.1.3",
+    "rollup-plugin-scss": "^2.5.0",
+    "rollup-plugin-terser": "^6.1.0"
+  }
+}

rollup.config.js

@@ -1,195 +1,43 @@
 import pkg from './package.json';
 
-// Rollup plugins
+import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
-import { eslint } from 'rollup-plugin-eslint';
-import replace from 'rollup-plugin-replace';
-import uglify from 'rollup-plugin-uglify-es';
-import sass from 'node-sass';
+import postcss from 'rollup-plugin-postcss';
+import scss from 'rollup-plugin-scss';
+import { terser } from 'rollup-plugin-terser';
 
-// PostCSS plugins
-import postcssPlugin from 'rollup-plugin-postcss';
-import nested from 'postcss-nested';
-import cssnext from 'postcss-cssnext';
-import cssnano from 'cssnano';
-
-import postcss from 'postcss';
-import precss from 'precss';
-import CleanCSS from 'clean-css';
-import autoprefixer from 'autoprefixer';
-import fs from 'fs';
-
-fs.readFile('src/css/charts.scss', (err, css) => {
-    postcss([precss, autoprefixer])
-        .process(css, { from: 'src/css/charts.scss', to: 'src/css/charts.css' })
-        .then(result => {
-			let options = {
-				level: {
-					1: {
-						removeQuotes: false,
-					}
-				}
-			}
-			let output = new CleanCSS(options).minify(result.css);
-			let res = JSON.stringify(output.styles).replace(/"/g, "'");
-			let js = `export const CSSTEXT = "${res.slice(1, -1)}";`;
-            fs.writeFile('src/css/chartsCss.js', js);
-        });
-});
 
 export default [
+	// browser-friendly UMD build
 	{
 		input: 'src/js/index.js',
-		sourcemap: true,
-		output: [
-			{
-				file: 'docs/assets/js/frappe-charts.min.js',
-				format: 'iife',
-			},
-			{
-				file: pkg.browser,
-				format: 'iife',
-			}
-		],
-		name: 'frappe',
-		plugins: [
-			postcssPlugin({
-				preprocessor: (content, id) => new Promise((resolve, reject) => {
-					const result = sass.renderSync({ file: id })
-					resolve({ code: result.css.toString() })
-				}),
-				extensions: [ '.scss' ],
-				plugins: [
-					nested(),
-					cssnext({ warnForDuplicates: false }),
-					cssnano()
-				]
-			}),
-			eslint({
-				exclude: [
-					'src/css/**'
-				]
-			}),
-			babel({
-				exclude: 'node_modules/**',
-				plugins: ['external-helpers']
-			}),
-			replace({
-				exclude: 'node_modules/**',
-				ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
-			}),
-			uglify()
-		]
-	},
-	{
-		input: 'docs/assets/js/index.js',
-		sourcemap: true,
-		output: [
-			{
-				file: 'docs/assets/js/index.min.js',
-				format: 'iife',
-			}
-		],
-		name: 'frappe',
+		output: {
+			name: 'frappe-charts',
+			file: pkg.browser,
+			format: 'umd'
+		},
 		plugins: [
-			postcssPlugin({
-				preprocessor: (content, id) => new Promise((resolve, reject) => {
-					const result = sass.renderSync({ file: id })
-					resolve({ code: result.css.toString() })
-				}),
-				extensions: [ '.scss' ],
-				plugins: [
-					nested(),
-					cssnext({ warnForDuplicates: false }),
-					cssnano()
-				]
-			}),
-			eslint({
-				exclude: [
-					'src/css/**'
-				]
-			}),
+			commonjs(),
 			babel({
-				exclude: 'node_modules/**'
+				exclude: ['node_modules/**']
 			}),
-			replace({
-				exclude: 'node_modules/**',
-				ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
-			})
+			terser(),
+			scss({ output: 'dist/frappe-charts.min.css' })
 		]
 	},
+
+	// CommonJS (for Node) and ES module (for bundlers) build.
 	{
 		input: 'src/js/chart.js',
-		sourcemap: true,
 		output: [
-			{
-				file: pkg.main,
-				format: 'cjs',
-			},
-			{
-				file: pkg.module,
-				format: 'es',
-			}
+			{ file: pkg.common, format: 'cjs' },
+			{ file: pkg.module, format: 'es' }
 		],
 		plugins: [
-			postcssPlugin({
-				preprocessor: (content, id) => new Promise((resolve, reject) => {
-					const result = sass.renderSync({ file: id })
-					resolve({ code: result.css.toString() })
-				}),
-				extensions: [ '.scss' ],
-				plugins: [
-					nested(),
-					cssnext({ warnForDuplicates: false }),
-					cssnano()
-				]
-			}),
-			eslint({
-				exclude: [
-					'src/css/**',
-				]
-			}),
 			babel({
-				exclude: 'node_modules/**',
-			}),
-			replace({
-				exclude: 'node_modules/**',
-				ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
-			}),
-			uglify()
-		],
-	},
-	{
-		input: 'src/js/chart.js',
-		output: [
-			{
-				file: pkg.src,
-				format: 'es',
-			}
-		],
-		plugins: [
-			postcssPlugin({
-				preprocessor: (content, id) => new Promise((resolve, reject) => {
-					const result = sass.renderSync({ file: id })
-					resolve({ code: result.css.toString() })
-				}),
-				extensions: [ '.scss' ],
-				extract: 'dist/frappe-charts.min.css',
-				plugins: [
-					nested(),
-					cssnext({ warnForDuplicates: false }),
-					cssnano()
-				]
-			}),
-			eslint({
-				exclude: [
-					'src/css/**',
-				]
+				exclude: ['node_modules/**']
 			}),
-			replace({
-				exclude: 'node_modules/**',
-				ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
-			})
-		],
+			postcss()
+		]
 	}
-];
+];

src/.babelrc

@@ -0,0 +1,10 @@
+{
+	"presets": [
+		["@babel/preset-env", {
+			"targets": {
+				"browsers": ["last 2 versions", "safari >= 7"]
+			},
+			"modules": false
+		}]
+	]
+}