Use ResizeObserver and MutationObserver to detect detach/attach/resize (#7104)

* Use Resize/MutationObserver to detect detach/attach/resize
* Cleanup
* Review update
* Restore infinite resize detection (#6011)

Author: kurkle

docs/getting-started/integration.md

@@ -64,18 +64,3 @@ require(['moment'], function() {
     });
 });
 ```
-
-## Content Security Policy
-
-By default, Chart.js injects CSS directly into the DOM. For webpages secured using [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), this requires to allow `style-src 'unsafe-inline'`. For stricter CSP environments, where only `style-src 'self'` is allowed, the following CSS file needs to be manually added to your webpage:
-
-```html
-<link rel="stylesheet" type="text/css" href="path/to/chartjs/dist/Chart.min.css">
-```
-
-And the style injection must be turned off **before creating the first chart**:
-
-```javascript
-// Disable automatic style injection
-Chart.platform.disableCSSInjection = true;
-```

docs/getting-started/v3-migration.md

@@ -7,6 +7,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
 * Completely rewritten animation system
 * Rewritten filler plugin with numerous bug fixes
 * API Documentation generated and verified by TypeScript
+* No more CSS injection
 * Tons of bug fixes
 
 ## End user migration
@@ -88,6 +89,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 * `Chart.chart.chart`
 * `Chart.Controller`
 * `Chart.prototype.generateLegend`
+* `Chart.platform`. It only contained `disableCSSInjection`. CSS is never injected in v3.
 * `Chart.types`
 * `Chart.Tooltip` is now provided by the tooltip plugin. The positioners can be accessed from `tooltipPlugin.positioners`
 * `DatasetController.addElementAndReset`
@@ -253,6 +255,6 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 
 #### Platform
 
-* `Chart.platform` is no longer the platform object used by charts. It contains only a single configuration option, `disableCSSInjection`. Every chart instance now has a separate platform instance.
+* `Chart.platform` is no longer the platform object used by charts. Every chart instance now has a separate platform instance.
 * `Chart.platforms` is an object that contains two usable platform classes, `BasicPlatform` and `DomPlatform`. It also contains `BasePlatform`, a class that all platforms must extend from.
 * If the canvas passed in is an instance of `OffscreenCanvas`, the `BasicPlatform` is automatically used.

package-lock.json

@@ -34,7 +34,6 @@
     "@babel/plugin-transform-object-assign": "^7.8.3",
     "@babel/preset-env": "^7.8.4",
     "babel-preset-es2015-rollup": "^3.0.0",
-    "clean-css": "^4.2.3",
     "coveralls": "^3.0.9",
     "eslint": "^6.8.0",
     "eslint-config-chartjs": "^0.2.0",
@@ -66,6 +65,7 @@
     "merge-stream": "^1.0.1",
     "moment": "^2.10.2",
     "pixelmatch": "^5.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "rollup": "^1.31.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-cleanup": "^3.1.1",

package.json

@@ -7,7 +7,6 @@ const babel = require('rollup-plugin-babel');
 const cleanup = require('rollup-plugin-cleanup');
 const terser = require('rollup-plugin-terser').terser;
 const optional = require('./rollup.plugins').optional;
-const stylesheet = require('./rollup.plugins').stylesheet;
 const pkg = require('./package.json');
 
 const input = 'src/index.js';
@@ -29,13 +28,12 @@ module.exports = [
 			resolve(),
 			commonjs(),
 			babel(),
-			stylesheet({
-				extract: true
-			}),
 			optional({
 				include: ['moment']
 			}),
-			cleanup(),
+			cleanup({
+				sourcemap: true
+			})
 		],
 		output: {
 			name: 'Chart',
@@ -60,10 +58,6 @@ module.exports = [
 			optional({
 				include: ['moment']
 			}),
-			stylesheet({
-				extract: true,
-				minify: true
-			}),
 			terser({
 				output: {
 					preamble: banner
@@ -93,10 +87,9 @@ module.exports = [
 			resolve(),
 			commonjs(),
 			babel(),
-			stylesheet({
-				extract: true
-			}),
-			cleanup(),
+			cleanup({
+				sourcemap: true
+			})
 		],
 		output: {
 			name: 'Chart',
@@ -118,10 +111,6 @@ module.exports = [
 			resolve(),
 			commonjs(),
 			babel(),
-			stylesheet({
-				extract: true,
-				minify: true
-			}),
 			terser({
 				output: {
 					preamble: banner

rollup.config.js

@@ -1,7 +1,4 @@
-/* eslint-env es6 */
-const cleancss = require('clean-css');
-const path = require('path');
-
+/* eslint-disable import/no-commonjs */
 const UMD_WRAPPER_RE = /(\(function \(global, factory\) \{)((?:\s.*?)*)(\}\(this,)/;
 const CJS_FACTORY_RE = /(module.exports = )(factory\(.*?\))( :)/;
 const AMD_FACTORY_RE = /(define\()(.*?, factory)(\) :)/;
@@ -24,7 +21,7 @@ function optional(config = {}) {
 			let factory = (CJS_FACTORY_RE.exec(content) || [])[2];
 			let updated = false;
 
-			for (let lib of chunk.imports) {
+			for (const lib of chunk.imports) {
 				if (!include || include.indexOf(lib) !== -1) {
 					const regex = new RegExp(`require\\('${lib}'\\)`);
 					if (!regex.test(factory)) {
@@ -58,53 +55,6 @@ function optional(config = {}) {
 	};
 }
 
-// https://github.com/chartjs/Chart.js/issues/5208
-function stylesheet(config = {}) {
-	const minifier = new cleancss();
-	const styles = [];
-
-	return {
-		name: 'stylesheet',
-		transform(code, id) {
-			// Note that 'id' can be mapped to a CJS proxy import, in which case
-			// 'id' will start with 'commonjs-proxy', so let's first check if we
-			// are importing an existing css file (i.e. startsWith()).
-			if (!id.startsWith(path.resolve('.')) || !id.endsWith('.css')) {
-				return;
-			}
-
-			if (config.minify) {
-				code = minifier.minify(code).styles;
-			}
-
-			// keep track of all imported stylesheets (already minified)
-			styles.push(code);
-
-			return {
-				code: 'export default ' + JSON.stringify(code)
-			};
-		},
-		generateBundle(opts, bundle) {
-			if (!config.extract) {
-				return;
-			}
-
-			const entry = Object.keys(bundle).find(v => bundle[v].isEntry);
-			const name = (entry || '').replace(/\.js$/i, '.css');
-			if (!name) {
-				this.error('failed to guess the output file name');
-			}
-
-			this.emitFile({
-				type: 'asset',
-				source: styles.filter(v => !!v).join(''),
-				fileName: name
-			});
-		}
-	};
-}
-
 module.exports = {
-	optional,
-	stylesheet
+	optional
 };

rollup.plugins.js

@@ -244,9 +244,6 @@
 		items: [{
 			title: 'Progress bar',
 			path: 'advanced/progress-bar.html'
-		}, {
-			title: 'Content Security Policy',
-			path: 'advanced/content-security-policy.html'
 		}, {
 			title: 'Polar Area Radial Gradient',
 			path: 'advanced/radial-gradient.html'