Dark mode improvements (#950)

Co-authored-by: Robert-Jan de Dreu <robertjandreu@gmail.com>

gulpfile.js

@@ -12,7 +12,7 @@ const gulp = require('gulp'),
 	rollupStream = require('@rollup/stream'),
 	rollupBabel = require('rollup-plugin-babel'),
 	rollupCleanup = require('rollup-plugin-cleanup'),
-	{nodeResolve} = require('@rollup/plugin-node-resolve'),
+	{ nodeResolve } = require('@rollup/plugin-node-resolve'),
 	rollupCommonjs = require('@rollup/plugin-commonjs'),
 	rollupReplace = require('@rollup/plugin-replace'),
 	vinylSource = require('vinyl-source-stream'),
@@ -28,24 +28,23 @@ const gulp = require('gulp'),
 	cp = require('child_process'),
 	pkg = require('./package.json'),
 	year = new Date().getFullYear(),
-	argv = yargs(process.argv).argv;
-
+	argv = yargs(process.argv).argv
 
 let BUILD = false,
 	distDir = './.tmp',
 	demoDir = './.tmp',
-	srcDir = './src';
+	srcDir = './src'
 
 /**
  * Enable BUILD mode and set directories
  */
 gulp.task('build-on', (cb) => {
-	BUILD = true;
-	distDir = './dist';
-	demoDir = './demo';
+	BUILD = true
+	distDir = './dist'
+	demoDir = './demo'
 
-	cb();
-});
+	cb()
+})
 
 /**
  * Return banner added to CSS and JS dist files
@@ -59,8 +58,8 @@ const getBanner = () => {
 * Copyright 2018-${year} codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
-`;
-};
+`
+}
 
 /**
  * Array.flat polyfill
@@ -69,10 +68,10 @@ if (!Array.prototype.flat) {
 	Object.defineProperty(Array.prototype, 'flat', {
 		value: function (depth = 1) {
 			return this.reduce(function (flat, toFlatten) {
-				return flat.concat((Array.isArray(toFlatten) && (depth > 1)) ? toFlatten.flat(depth - 1) : toFlatten);
-			}, []);
+				return flat.concat((Array.isArray(toFlatten) && (depth > 1)) ? toFlatten.flat(depth - 1) : toFlatten)
+			}, [])
 		}
-	});
+	})
 }
 
 /**
@@ -80,54 +79,54 @@ if (!Array.prototype.flat) {
  */
 gulp.task('svg-icons', (cb) => {
 	const prepareSvgFile = (svg) => {
-		return svg.replace(/\n/g, '').replace(/>\s+</g, '><');
-	};
+		return svg.replace(/\n/g, '').replace(/>\s+</g, '><')
+	}
 
 	const generateIconsYml = (dir, filename) => {
-		const files = glob.sync(dir);
-		let svgList = {};
+		const files = glob.sync(dir)
+		let svgList = {}
 
 		files.forEach((file) => {
-			const basename = path.basename(file, '.svg');
-			svgList[basename] = prepareSvgFile(fs.readFileSync(file).toString());
-		});
+			const basename = path.basename(file, '.svg')
+			svgList[basename] = prepareSvgFile(fs.readFileSync(file).toString())
+		})
 
-		fs.writeFileSync(filename, YAML.stringify(svgList));
-	};
+		fs.writeFileSync(filename, YAML.stringify(svgList))
+	}
 
-	generateIconsYml("./node_modules/@tabler/icons/icons/*.svg", `${srcDir}/pages/_data/icons.yml`);
+	generateIconsYml("./node_modules/@tabler/icons/icons/*.svg", `${srcDir}/pages/_data/icons.yml`)
 
-	cb();
-});
+	cb()
+})
 
 /**
  * Check unused Jekyll partials
  */
 gulp.task('unused-files', (cb) => {
-	let foundFiles = [];
+	let foundFiles = []
 
 	glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
-		let fileContent = fs.readFileSync(file);
+		let fileContent = fs.readFileSync(file)
 
 		fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, (f, c, filename) => {
-			filename = `${srcDir}/pages/_includes/${filename}`;
+			filename = `${srcDir}/pages/_includes/${filename}`
 
 			if (!foundFiles.includes(filename)) {
-				foundFiles.push(filename);
+				foundFiles.push(filename)
 			}
-		});
-	});
+		})
+	})
 
-	let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`);
+	let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`)
 
 	includeFiles.forEach((file) => {
 		if (!foundFiles.includes(file)) {
-			console.log('file', file);
+			console.log('file', file)
 		}
-	});
+	})
 
-	cb();
-});
+	cb()
+})
 
 /**
  * Clean `dist` folder before build
@@ -135,13 +134,13 @@ gulp.task('unused-files', (cb) => {
 gulp.task('clean-dirs', () => {
 	return gulp
 		.src(`{${distDir}/*,${demoDir}/*}`, { read: false })
-		.pipe(clean());
-});
+		.pipe(clean())
+})
 
 gulp.task('clean-jekyll', (cb) => {
 	return spawn('bundle', ['exec', 'jekyll', 'clean'], { stdio: 'inherit' })
-		.on('close', cb);
-});
+		.on('close', cb)
+})
 
 /**
  * Compile SASS to CSS and move it to dist directory
@@ -155,10 +154,10 @@ gulp.task('sass', () => {
 			precision: 7,
 			importer: (url, prev, done) => {
 				if (url[0] === '~') {
-					url = path.resolve('node_modules', url.substr(1));
+					url = path.resolve('node_modules', url.substr(1))
 				}
 
-				return { file: url };
+				return { file: url }
 			},
 		}).on('error', sass.logError))
 		.pipe(postcss([
@@ -170,36 +169,41 @@ gulp.task('sass', () => {
 		}))
 		.pipe(rtlcss())
 		.pipe(rename((path) => {
-			path.basename += '.rtl';
+			path.basename += '.rtl'
 		}))
-		.pipe(gulp.dest(`${distDir}/css/`));
-});
+		.pipe(gulp.dest(`${distDir}/css/`))
+})
 
 /**
  * CSS minify
  */
-gulp.task('css-minify', function(){
+gulp.task('css-minify', function () {
 	return gulp.src(`${distDir}/css/!(*.min).css`)
 		.pipe(debug())
 		.pipe(cleanCSS())
 		.pipe(rename((path) => {
-			path.basename += '.min';
+			path.basename += '.min'
 		}))
-		.pipe(gulp.dest(`${distDir}/css/`));
-});
-
+		.pipe(gulp.dest(`${distDir}/css/`))
+})
 
 /**
  * Compile JS files to dist directory
  */
-let cache;
-gulp.task('js', () => {
+let cache = {}
+
+const compileJs = function (name, mjs = false) {
+	if (!cache[name]) {
+		cache[name] = null
+	}
+
 	const g = rollupStream({
-		input: `${srcDir}/js/tabler.js`,
-		cache,
+		input: `${srcDir}/js/${name}.js`,
+		cache: cache[name],
 		output: {
-			name: 'tabler.js',
-			format: 'umd',
+			name: `${name}.js`,
+			format: mjs ? 'es' : 'umd',
+			...(mjs ? { exports: 'named' } : {})
 		},
 		plugins: [
 			rollupReplace({
@@ -215,17 +219,17 @@ gulp.task('js', () => {
 		]
 	})
 		.on('bundle', (bundle) => {
-			cache = bundle;
+			cache[name] = bundle
 		})
-		.pipe(vinylSource('tabler.js'))
+		.pipe(vinylSource(`${name}.js`))
 		.pipe(vinylBuffer())
 		.pipe(rename((path) => {
-			path.dirname = '';
+			path.dirname = ''
 		}))
 		.pipe(gulp.dest(`${distDir}/js/`))
 		.pipe(browserSync.reload({
 			stream: true,
-		}));
+		}))
 
 	if (BUILD) {
 		g.pipe(minifyJS({
@@ -234,16 +238,31 @@ gulp.task('js', () => {
 				min: '.min.js'
 			},
 		}))
-			.pipe(gulp.dest(`${distDir}/js/`));
+			.pipe(gulp.dest(`${distDir}/js/`))
 	}
 
-	return g;
-});
+	return g
+}
+
+/**
+ * Compile JS files to dist directory
+ */
+gulp.task('js', () => {
+	return compileJs('tabler')
+})
+
+gulp.task('js-demo', () => {
+	return compileJs('demo')
+})
 
 /**
  * Compile JS module files to dist directory
  */
-let cacheEsm;
+gulp.task('mjs', () => {
+	return compileJs('tabler.esm', true)
+})
+
+let cacheEsm
 gulp.task('mjs', () => {
 	const g = rollupStream({
 		input: `${srcDir}/js/tabler.esm.js`,
@@ -267,17 +286,17 @@ gulp.task('mjs', () => {
 		]
 	})
 		.on('bundle', (bundle) => {
-			cacheEsm = bundle;
+			cacheEsm = bundle
 		})
 		.pipe(vinylSource('tabler.esm.js'))
 		.pipe(vinylBuffer())
 		.pipe(rename((path) => {
-			path.dirname = '';
+			path.dirname = ''
 		}))
 		.pipe(gulp.dest(`${distDir}/js/`))
 		.pipe(browserSync.reload({
 			stream: true,
-		}));
+		}))
 
 	if (BUILD) {
 		g.pipe(minifyJS({
@@ -286,46 +305,48 @@ gulp.task('mjs', () => {
 				min: '.min.js'
 			},
 		}))
-			.pipe(gulp.dest(`${distDir}/js/`));
+			.pipe(gulp.dest(`${distDir}/js/`))
 	}
 
-	return g;
-});
+	return g
+})
 
 /**
  * Watch Jekyll files and build it to demo directory
  */
 gulp.task('watch-jekyll', (cb) => {
-	browserSync.notify('Building Jekyll');
+	browserSync.notify('Building Jekyll')
 	return spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--destination', demoDir, '--trace'], { stdio: 'inherit' })
-		.on('close', cb);
-});
+		.on('close', cb)
+})
 
 /**
  * Build Jekyll files do demo directory
  */
 gulp.task('build-jekyll', (cb) => {
-	var env = Object.create(process.env);
+	var env = Object.create(process.env)
 
-	if(argv.preview) {
-		env.JEKYLL_ENV = 'preview';
-	}
-	else {
-		env.JEKYLL_ENV = 'production';
+	if (argv.preview) {
+		env.JEKYLL_ENV = 'preview'
+	} else {
+		env.JEKYLL_ENV = 'production'
 	}
 
-	return spawn('bundle', ['exec', 'jekyll', 'build', '--destination', demoDir, '--trace'], { env: env, stdio: 'inherit' })
-		.on('close', cb);
-});
+	return spawn('bundle', ['exec', 'jekyll', 'build', '--destination', demoDir, '--trace'], {
+		env: env,
+		stdio: 'inherit'
+	})
+		.on('close', cb)
+})
 
 gulp.task('build-cleanup', () => {
 	return gulp
 		.src(`${demoDir}/redirects.json`, { read: false, allowEmpty: true })
-		.pipe(clean());
-});
+		.pipe(clean())
+})
 
 gulp.task('build-purgecss', (cb) => {
-	if(argv.preview) {
+	if (argv.preview) {
 		return gulp.src('demo/dist/{libs,css}/**/*.css')
 			.pipe(purgecss({
 				content: ['demo/**/*.html']
@@ -333,11 +354,11 @@ gulp.task('build-purgecss', (cb) => {
 			.pipe(gulp.dest('demo/dist/css'))
 	}
 
-	cb();
-});
+	cb()
+})
 
 gulp.task('build-critical', (cb) => {
-	if(argv.preview) {
+	if (argv.preview) {
 		return gulp
 			.src('demo/**/*.html')
 			.pipe(
@@ -354,22 +375,22 @@ gulp.task('build-critical', (cb) => {
 				})
 			)
 			.on('error', err => {
-				console.log(err.message);
+				console.log(err.message)
 			})
-			.pipe(gulp.dest('demo'));
+			.pipe(gulp.dest('demo'))
 	}
 
-	cb();
-});
+	cb()
+})
 
 /**
  * Watch JS and SCSS files
  */
 gulp.task('watch', (cb) => {
-	gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
-	gulp.watch('./src/js/**/*.js', gulp.series('js', 'mjs'));
-	cb();
-});
+	gulp.watch('./src/scss/**/*.scss', gulp.series('sass'))
+	gulp.watch('./src/js/**/*.js', gulp.parallel('js', 'mjs', 'js-demo'))
+	cb()
+})
 
 /**
  * Create BrowserSync server
@@ -392,38 +413,38 @@ gulp.task('browser-sync', () => {
 		host: 'localhost',
 		notify: false,
 		reloadOnRestart: true
-	});
-});
+	})
+})
 
 /**
  * Copy libs used in tabler from npm to dist directory
  */
 gulp.task('copy-libs', (cb) => {
-	const allLibs = require(`${srcDir}/pages/_data/libs`);
+	const allLibs = require(`${srcDir}/pages/_data/libs`)
 
-	let files = [];
+	let files = []
 
 	Object.keys(allLibs.js).forEach((lib) => {
-		files.push(Array.isArray(allLibs.js[lib]) ? allLibs.js[lib] : [allLibs.js[lib]]);
-	});
+		files.push(Array.isArray(allLibs.js[lib]) ? allLibs.js[lib] : [allLibs.js[lib]])
+	})
 
 	Object.keys(allLibs.css).forEach((lib) => {
-		files.push(Array.isArray(allLibs.css[lib]) ? allLibs.css[lib] : [allLibs.css[lib]]);
-	});
+		files.push(Array.isArray(allLibs.css[lib]) ? allLibs.css[lib] : [allLibs.css[lib]])
+	})
 
-	files = files.flat();
+	files = files.flat()
 
 	files.forEach((file) => {
 		if (!file.match(/^https?/)) {
-			let dirname = path.dirname(file).replace('@', '');
-			let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} ${distDir}/libs/${file.replace('@', '')}`;
+			let dirname = path.dirname(file).replace('@', '')
+			let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} ${distDir}/libs/${file.replace('@', '')}`
 
 			cp.exec(cmd)
 		}
-	});
+	})
 
-	cb();
-});
+	cb()
+})
 
 /**
  * Copy static files (flags, payments images, etc) to dist directory
@@ -431,8 +452,8 @@ gulp.task('copy-libs', (cb) => {
 gulp.task('copy-images', () => {
 	return gulp
 		.src(`${srcDir}/img/**/*`)
-		.pipe(gulp.dest(`${distDir}/img`));
-});
+		.pipe(gulp.dest(`${distDir}/img`))
+})
 
 /**
  * Copy static files (demo images, etc) to demo directory
@@ -440,8 +461,8 @@ gulp.task('copy-images', () => {
 gulp.task('copy-static', () => {
 	return gulp
 		.src(`${srcDir}/static/**/*`)
-		.pipe(gulp.dest(`${demoDir}/static`));
-});
+		.pipe(gulp.dest(`${demoDir}/static`))
+})
 
 /**
  * Copy Tabler dist files to demo directory
@@ -449,8 +470,8 @@ gulp.task('copy-static', () => {
 gulp.task('copy-dist', () => {
 	return gulp
 		.src(`${distDir}/**/*`)
-		.pipe(gulp.dest(`${demoDir}/dist/`));
-});
+		.pipe(gulp.dest(`${demoDir}/dist/`))
+})
 
 /**
  * Add banner to build JS and CSS files
@@ -459,12 +480,12 @@ gulp.task('add-banner', () => {
 	return gulp.src(`${distDir}/{css,js}/**/*.{js,css}`)
 		.pipe(header(getBanner()))
 		.pipe(gulp.dest(`${distDir}`))
-});
+})
 
-gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll'));
+gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll'))
 
-gulp.task('start', gulp.series('clean', 'sass', 'js', 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')));
+gulp.task('start', gulp.series('clean', 'sass', 'js', 'js-demo', 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
 
-gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-minify', 'js', 'mjs', 'copy-images', 'copy-libs', 'add-banner'));
-gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'/*, 'build-critical'*/));
-gulp.task('build', gulp.series('build-core', 'build-demo'));
+gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-minify', 'js', 'js-demo', 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
+gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'/*, 'build-critical'*/))
+gulp.task('build', gulp.series('build-core', 'build-demo'))