@hibi_10000/grunt-webfont 2.0.1

package/dist/webfont.js

@@ -0,0 +1,609 @@
+import { UNICODE_PUA_START, consolaLogger, cssFilePrefixes, fontFormats, fontSrcSeparators, fontsSrcsMap, generatedFontFiles, getFontPath } from "./util/util.js";
+import fontforge_default from "./engines/fontforge.js";
+import node_default from "./engines/node.js";
+import package_default from "./package.js";
+import fs from "node:fs";
+import path from "node:path";
+import crypto from "node:crypto";
+import { globSync } from "glob";
+import chalk from "chalk";
+import _ from "lodash";
+import ttf2woff2 from "ttf2woff2";
+
+//#region tasks/webfont.ts
+var webfont_default = (grunt) => {
+	grunt.registerMultiTask("webfont", "Compile separate SVG files to webfont", function() {
+		/**
+		* Consola to Grunt logger adapter.
+		*/
+		const logger = {
+			log: {
+				warn: (...args) => {
+					grunt.log.warn.apply(null, args);
+				},
+				error: (...args) => {
+					grunt.warn.apply(null, args);
+				},
+				info: (...args) => {
+					grunt.log.writeln.apply(null, args);
+				},
+				verbose: (...args) => {
+					grunt.log.verbose.writeln.apply(null, args);
+				}
+			},
+			fail: { fatal: (...args) => {
+				grunt.fail.fatal.apply(null, args);
+			} }
+		};
+		const allDone = this.async();
+		const params = this.data;
+		const options = this.options(void 0);
+		this.requiresConfig([
+			this.name,
+			this.target,
+			"src"
+		].join("."));
+		webfont(this.name, this.target, this.filesSrc, params, options, logger).finally(allDone);
+	});
+};
+const webfont = async (name, target, filesSrc, params, options, logger) => {
+	if (!logger) logger = consolaLogger;
+	const md5 = crypto.createHash("md5");
+	if (params.dest === void 0 && options.dest === void 0) logger.log.warn(`Required property ${name}.${target}.dest or ${name}.${target}.options.dest missing.`);
+	if (options.skip) {
+		completeTask();
+		return;
+	}
+	const files = filesSrc.filter(isSvgFile);
+	if (!files.length) {
+		logger.log.warn("Specified empty list of source SVG files.");
+		completeTask();
+		return;
+	}
+	if (typeof options.template !== "string") options.template = "";
+	let o = {
+		logger,
+		fontBaseName: options.font || "icons",
+		destCss: options.destCss || params.destCss || params.dest,
+		destScss: options.destScss || params.destScss || params.destCss || params.dest,
+		destSass: options.destSass || params.destSass || params.destCss || params.dest,
+		destLess: options.destLess || params.destLess || params.destCss || params.dest,
+		destStyl: options.destStyl || params.destStyl || params.destCss || params.dest,
+		dest: options.dest || params.dest,
+		relativeFontPath: options.relativeFontPath,
+		fontPathVariables: options.fontPathVariables || false,
+		addHashes: options.hashes !== false,
+		addLigatures: options.ligatures === true,
+		template: options.template,
+		syntax: options.syntax || "bem",
+		templateOptions: options.templateOptions || {},
+		stylesheets: options.stylesheets || [options.stylesheet || path.extname(options.template).replace(/^\./, "") || "css"],
+		htmlDemo: options.htmlDemo !== false,
+		htmlDemoTemplate: options.htmlDemoTemplate,
+		htmlDemoFilename: options.htmlDemoFilename,
+		styles: optionToArray(options.styles, "font,icon"),
+		types: optionToArray(options.types, "eot,woff,ttf"),
+		order: optionToArray(options.order, fontFormats),
+		embed: options.embed === true ? ["woff"] : optionToArray(options.embed, false),
+		rename: options.rename || path.basename,
+		engine: options.engine || "fontforge",
+		autoHint: options.autoHint !== false,
+		codepoints: options.codepoints,
+		codepointsFile: options.codepointsFile,
+		startCodepoint: options.startCodepoint || UNICODE_PUA_START,
+		ie7: options.ie7 === true,
+		normalize: options.normalize === true,
+		optimize: options.optimize === false ? false : true,
+		round: options.round !== void 0 ? options.round : 0x9184e72a000,
+		fontHeight: options.fontHeight !== void 0 ? options.fontHeight : 512,
+		descent: options.descent !== void 0 ? options.descent : 64,
+		version: options.version !== void 0 ? options.version : false,
+		cache: options.cache || path.join(import.meta.dirname, "..", ".cache"),
+		callback: options.callback,
+		customOutputs: options.customOutputs,
+		execMaxBuffer: options.execMaxBuffer || 1024 * 200
+	};
+	o = Object.assign(o, {
+		fontName: o.fontBaseName,
+		destCssPaths: {
+			css: o.destCss,
+			scss: o.destScss,
+			sass: o.destSass,
+			less: o.destLess,
+			styl: o.destStyl
+		},
+		relativeFontPath: o.relativeFontPath || path.relative(o.destCss, o.dest),
+		destHtml: options.destHtml || o.destCss,
+		fontfaceStyles: has(o.styles, "font"),
+		baseStyles: has(o.styles, "icon"),
+		extraStyles: has(o.styles, "extra"),
+		files,
+		glyphs: []
+	});
+	o.hash = getHash();
+	o.fontFilename = template(options.fontFilename || o.fontBaseName, o);
+	o.fontFamilyName = template(options.fontFamilyName || o.fontBaseName, o);
+	o.glyphs = o.files.map((file) => {
+		return o.rename(file).replace(path.extname(file), "");
+	});
+	let currentCodepoint = o.startCodepoint;
+	if (!o.codepoints) o.codepoints = {};
+	if (o.codepointsFile) o.codepoints = readCodepointsFromFile();
+	o.glyphs.forEach((name$1) => {
+		if (!o.codepoints[name$1]) o.codepoints[name$1] = getNextCodepoint();
+	});
+	if (o.codepointsFile) saveCodepointsToFile();
+	const previousHash = readHash(name, target);
+	logger.log.verbose("New hash:", o.hash, "- previous hash:", previousHash);
+	if (o.hash === previousHash) {
+		logger.log.verbose("Config and source files weren’t changed since last run, checking resulting files...");
+		let regenerationNeeded = false;
+		const generatedFiles = generatedFontFiles(o);
+		if (!generatedFiles.length) regenerationNeeded = true;
+		else {
+			generatedFiles.push(getDemoFilePath());
+			o.stylesheets.forEach((stylesheet) => {
+				generatedFiles.push(getCssFilePath(stylesheet));
+			});
+			regenerationNeeded = generatedFiles.some((filename) => {
+				if (!filename) return false;
+				if (!fs.existsSync(filename)) {
+					logger.log.verbose("File", filename, " is missed.");
+					return true;
+				}
+				return false;
+			});
+		}
+		if (!regenerationNeeded) {
+			logger.log.info(`Font ${chalk.cyan(o.fontName)} wasn’t changed since last run.`);
+			completeTask();
+			return;
+		}
+	}
+	saveHash(name, target, o.hash);
+	try {
+		createOutputDirs();
+		cleanOutputDir();
+		await generateFont();
+		generateWoff2Font();
+		generateStylesheets();
+		await generateDemoHtml();
+		generateCustomOutputs();
+		printDone();
+	} finally {
+		completeTask();
+	}
+	/**
+	* Call callback function if it was specified in the options.
+	*/
+	function completeTask() {
+		if (o && typeof o.callback === "function") o.callback(o.fontName, o.types, o.glyphs, o.hash);
+	}
+	/**
+	* Calculate hash to flush browser cache.
+	* Hash is based on source SVG files contents, task options and grunt-webfont version.
+	*/
+	function getHash() {
+		o.files.forEach((file) => {
+			md5.update(fs.readFileSync(file, "utf8"));
+		});
+		md5.update(JSON.stringify(o));
+		md5.update(package_default.version);
+		if (o.template) md5.update(fs.readFileSync(o.template, "utf8"));
+		if (o.htmlDemoTemplate) md5.update(fs.readFileSync(o.htmlDemoTemplate, "utf8"));
+		return md5.digest("hex");
+	}
+	/**
+	* Create output directory
+	*/
+	function createOutputDirs() {
+		o.stylesheets.forEach((stylesheet) => {
+			fs.mkdirSync(option(o.destCssPaths, stylesheet), { recursive: true });
+		});
+		fs.mkdirSync(o.dest, { recursive: true });
+	}
+	/**
+	* Clean output directory
+	*/
+	function cleanOutputDir() {
+		const htmlDemoFileMask = path.posix.join(o.destCss, `${o.fontBaseName}*.{css,html}`);
+		globSync(htmlDemoFileMask).concat(generatedFontFiles(o)).forEach((file) => {
+			fs.unlinkSync(file);
+		});
+	}
+	/**
+	* Generate font using selected engine
+	*/
+	async function generateFont() {
+		const result = await (o.engine === "node" ? node_default : fontforge_default)(o);
+		if (result === false) {
+			completeTask();
+			return;
+		}
+		if (result) o = Object.assign(o, result);
+	}
+	/**
+	* Converts TTF font to WOFF2.
+	*/
+	function generateWoff2Font() {
+		if (!has(o.types, "woff2")) return;
+		const ttfFontPath = getFontPath(o, "ttf");
+		const ttfFont = fs.readFileSync(ttfFontPath);
+		if (!has(o.types, "ttf")) fs.unlinkSync(ttfFontPath);
+		const woffFont = ttf2woff2(ttfFont);
+		const woff2FontPath = getFontPath(o, "woff2");
+		fs.writeFileSync(woff2FontPath, woffFont);
+	}
+	/**
+	* Generate CSS
+	*/
+	function generateStylesheets() {
+		const codepoints = [];
+		o.glyphs.forEach((name$1) => {
+			codepoints.push(o.codepoints[name$1].toString(16));
+		});
+		o.codepoints = codepoints;
+		o.glyphs = o.glyphs.map(classnameize);
+		o.stylesheets.sort((a, b) => {
+			return a === "css" ? 1 : -1;
+		}).forEach(generateStylesheet);
+	}
+	/**
+	* Generate CSS
+	*
+	* @param stylesheet type: css, scss, ...
+	*/
+	function generateStylesheet(stylesheet) {
+		o.relativeFontPath = normalizePath(o.relativeFontPath);
+		const fontSrcs = {
+			0: [],
+			1: []
+		};
+		o.order.forEach((type) => {
+			if (!has(o.types, type)) return;
+			const fontSrc1 = fontsSrcsMap[type][0];
+			if (fontSrc1) fontSrcs[0].push(generateFontSrc(type, fontSrc1, stylesheet));
+			fontSrcs[1].push(generateFontSrc(type, fontsSrcsMap[type][1], stylesheet));
+		});
+		const fontSrcSeparator = option(fontSrcSeparators, stylesheet);
+		o.fontSrc1 = fontSrcs[0].join(fontSrcSeparator);
+		o.fontSrc2 = fontSrcs[1].join(fontSrcSeparator);
+		o.fontRawSrcs = [fontSrcs[0], fontSrcs[1]];
+		const templateJson = readTemplate(o.template, o.syntax, ".json", true);
+		if (templateJson) o = Object.assign(o, JSON.parse(templateJson.template));
+		if (o.templateOptions) o = Object.assign(o, o.templateOptions);
+		const ext = path.extname(o.template) || ".css";
+		o.cssTemplate = readTemplate(o.template, o.syntax, ext);
+		const cssContext = Object.assign(o, {
+			iconsStyles: true,
+			stylesheet
+		});
+		let css = renderTemplate(o.cssTemplate, cssContext);
+		if (has([
+			"sass",
+			"scss",
+			"less",
+			"styl"
+		], stylesheet)) css = css.replace(/\/\* *(.*?) *\*\//g, "// $1");
+		fs.writeFileSync(getCssFilePath(stylesheet), css);
+	}
+	/**
+	* Gets the codepoints from the set filepath in o.codepointsFile
+	*/
+	function readCodepointsFromFile() {
+		if (!o.codepointsFile) return {};
+		if (!fs.existsSync(o.codepointsFile)) {
+			logger.log.verbose("Codepoints file not found");
+			return {};
+		}
+		const buffer = fs.readFileSync(o.codepointsFile);
+		return JSON.parse(buffer.toString());
+	}
+	/**
+	* Saves the codespoints to the set file
+	*/
+	function saveCodepointsToFile() {
+		if (!o.codepointsFile) return;
+		const codepointsToString = JSON.stringify(o.codepoints, null, 4);
+		try {
+			fs.writeFileSync(o.codepointsFile, codepointsToString);
+			logger.log.verbose(`Codepoints saved to file "${o.codepointsFile}".`);
+		} catch (err) {
+			logger.log.error(err.message);
+		}
+	}
+	function prepareBaseTemplateContext() {
+		return Object.assign({}, o);
+	}
+	function prepareHtmlTemplateContext() {
+		let context = prepareBaseTemplateContext();
+		let htmlStyles;
+		const relativeRe = new RegExp(_.escapeRegExp(o.relativeFontPath).replace(/[=!:\/]/g, "\\$&"), "g");
+		const htmlRelativeFontPath = normalizePath(path.relative(o.destHtml, o.dest));
+		const _fontSrc1 = o.fontSrc1.replace(relativeRe, htmlRelativeFontPath);
+		const _fontSrc2 = o.fontSrc2.replace(relativeRe, htmlRelativeFontPath);
+		context = Object.assign(context, {
+			fontSrc1: _fontSrc1,
+			fontSrc2: _fontSrc2,
+			fontfaceStyles: true,
+			baseStyles: true,
+			extraStyles: false,
+			iconsStyles: true,
+			stylesheet: "css"
+		});
+		htmlStyles = renderTemplate(o.cssTemplate, context);
+		context = Object.assign(context, { styles: htmlStyles });
+		return context;
+	}
+	/**
+	* Iterator function used as callback by looping construct below to
+	* render "custom output" via mini configuration objects specified in
+	* the array `options.customOutputs`.
+	*
+	* @param outputConfig
+	*/
+	function generateCustomOutput(outputConfig) {
+		let context = prepareBaseTemplateContext();
+		context = Object.assign(context, outputConfig.context);
+		const templatePath = outputConfig.template;
+		const extension = path.extname(templatePath);
+		const syntax = outputConfig.syntax || "";
+		const template$1 = readTemplate(templatePath, syntax, extension);
+		const output = renderTemplate(template$1, context);
+		const dest = outputConfig.dest || o.dest;
+		let filepath;
+		let destParent;
+		let destName;
+		if (path.extname(dest) === "") {
+			destParent = dest;
+			destName = path.basename(outputConfig.template);
+			filepath = path.join(dest, destName);
+		} else {
+			destParent = path.dirname(dest);
+			filepath = dest;
+		}
+		fs.mkdirSync(destParent, { recursive: true });
+		fs.writeFileSync(filepath, output);
+	}
+	function generateCustomOutputs() {
+		if (!o.customOutputs || o.customOutputs.length < 1) return;
+		o.customOutputs.forEach(generateCustomOutput);
+	}
+	/**
+	* Generate HTML demo page
+	*/
+	async function generateDemoHtml() {
+		if (!o.htmlDemo) return;
+		const context = prepareHtmlTemplateContext();
+		const demoTemplate = readTemplate(o.htmlDemoTemplate, "demo", ".html");
+		const demo = renderTemplate(demoTemplate, context);
+		try {
+			await fs.promises.mkdir(getDemoPath(), { recursive: true });
+		} catch (err) {
+			if (err) {
+				logger.log.info(err);
+				return;
+			}
+		}
+		fs.writeFileSync(getDemoFilePath(), demo);
+	}
+	/**
+	* Print log
+	*/
+	function printDone() {
+		logger.log.info(`Font ${chalk.cyan(o.fontName)} with ${o.glyphs.length} glyphs created.`);
+	}
+	/**
+	* Helpers
+	*/
+	/**
+	* Convert a string of comma separated words into an array
+	*
+	* @param val Input string
+	* @param defVal Default value
+	*/
+	function optionToArray(val, defVal) {
+		if (val === void 0) val = defVal;
+		if (!val) return [];
+		if (typeof val !== "string") return val;
+		return val.split(",").map((value) => value.trim());
+	}
+	/**
+	* Check if a value exists in an array
+	*
+	* @param haystack Array to find the needle in
+	* @param needle Value to find
+	* @return Needle was found
+	*/
+	function has(haystack, needle) {
+		return haystack.indexOf(needle) !== -1;
+	}
+	/**
+	* Return a specified option if it exists in an object or `_default` otherwise
+	*
+	* @param map Options object
+	* @param key Option to find in the object
+	*/
+	function option(map, key) {
+		if (key in map) return map[key];
+		else return map._default;
+	}
+	/**
+	* Find next unused codepoint.
+	*/
+	function getNextCodepoint() {
+		while (Object.values(o.codepoints).includes(currentCodepoint)) currentCodepoint++;
+		return currentCodepoint;
+	}
+	/**
+	* Check whether file is SVG or not
+	*
+	* @param filepath File path
+	*/
+	function isSvgFile(filepath) {
+		return path.extname(filepath).toLowerCase() === ".svg";
+	}
+	/**
+	* Convert font file to data:uri and remove source file
+	*
+	* @param fontFile Font file path
+	* @return Base64 encoded string
+	*/
+	function embedFont(fontFile) {
+		const dataUri = fs.readFileSync(fontFile, "base64");
+		const fontUrl = `data:application/x-font-${path.extname(fontFile).substring(1)};charset=utf-8;base64,${dataUri}`;
+		fs.unlinkSync(fontFile);
+		return fontUrl;
+	}
+	/**
+	* Append a slash to end of a filepath if it not exists and make all slashes forward
+	*
+	* @param filepath File path
+	*/
+	function normalizePath(filepath) {
+		if (!filepath.length) return filepath;
+		filepath = filepath.replace(/\\/g, "/");
+		if (!filepath.endsWith("/")) filepath += "/";
+		return filepath;
+	}
+	/**
+	* Generate URL for @font-face
+	*
+	* @param type Type of font
+	* @param font URL or Base64 string
+	* @param stylesheet type: css, scss, ...
+	*/
+	function generateFontSrc(type, font, stylesheet) {
+		const filename = template(`${o.fontFilename}${font.ext}`, o);
+		let fontPathVariableName = `${o.fontFamilyName}-font-path`;
+		let url;
+		if (font.embeddable && has(o.embed, type)) url = embedFont(path.join(o.dest, filename));
+		else {
+			if (o.fontPathVariables && stylesheet !== "css") {
+				if (stylesheet === "less") {
+					fontPathVariableName = `@${fontPathVariableName}`;
+					o.fontPathVariable = `${fontPathVariableName} : "${o.relativeFontPath}";`;
+				} else {
+					fontPathVariableName = `$${fontPathVariableName}`;
+					o.fontPathVariable = `${fontPathVariableName} : "${o.relativeFontPath}" !default;`;
+				}
+				url = filename;
+			} else url = `${o.relativeFontPath}${filename}`;
+			if (o.addHashes) if (url.indexOf("#iefix") === -1) url = url.replace(/(#|$)/, `?${o.hash}$1`);
+			else url = url.replace(/(#|$)/, `${o.hash}$1`);
+		}
+		let src = `url("${url}")`;
+		if (o.fontPathVariables && stylesheet !== "css") if (stylesheet === "less") src = `url("@{${fontPathVariableName.replace("@", "")}}${url}")`;
+		else src = `url(${fontPathVariableName} + "${url}")`;
+		if (font.format) src += ` format("${font.format}")`;
+		return src;
+	}
+	/**
+	* Read the template file
+	*
+	* @param template Template file path
+	* @param syntax Syntax (bem, bootstrap, etc.)
+	* @param ext Extension of the template
+	* @return \{filename: 'Template filename', template: 'Template code'}
+	*/
+	function readTemplate(template$1, syntax, ext, optional) {
+		const filename = template$1 ? path.resolve(template$1.replace(path.extname(template$1), ext)) : path.join(import.meta.dirname, `../templates/${syntax}${ext}`);
+		if (fs.existsSync(filename)) return {
+			filename,
+			template: fs.readFileSync(filename, "utf8")
+		};
+		else if (!optional) logger.fail.fatal(`Cannot find template at path: ${filename}`);
+	}
+	/**
+	* Render template with error reporting
+	*
+	* @param template {filename: 'Template filename', template: 'Template code'}
+	* @param context Template context
+	*/
+	function renderTemplate(template$1, context) {
+		try {
+			return _.template(template$1.template)(context);
+		} catch (e) {
+			logger.fail.fatal(`Error while rendering template ${template$1.filename}: ${e.message}`);
+		}
+	}
+	/**
+	* Basic template function: replaces {variables}
+	*
+	* @param tmpl Template code
+	* @param context Values object
+	*/
+	function template(tmpl, context) {
+		return tmpl.replace(/\{([^\}]+)\}/g, (m, key) => {
+			return context[key];
+		});
+	}
+	/**
+	* Prepare string to use as CSS class name
+	*
+	* @param str
+	*/
+	function classnameize(str) {
+		return str.trim().replace(/\s+/g, "-");
+	}
+	/**
+	* Return path of CSS file.
+	*
+	* @param stylesheet (css, scss, ...)
+	*/
+	function getCssFilePath(stylesheet) {
+		const cssFilePrefix = option(cssFilePrefixes, stylesheet);
+		return path.join(option(o.destCssPaths, stylesheet), `${cssFilePrefix}${o.fontBaseName}.${stylesheet}`);
+	}
+	/**
+	* Return path of HTML demo file or `null` if its generation was disabled.
+	*/
+	function getDemoFilePath() {
+		if (!o.htmlDemo) return null;
+		const name$1 = o.htmlDemoFilename || o.fontBaseName;
+		return path.join(o.destHtml, `${name$1}.html`);
+	}
+	/**
+	* Return path of HTML demo file or `null` if feature was disabled
+	*/
+	function getDemoPath() {
+		if (!o.htmlDemo) return null;
+		return o.destHtml;
+	}
+	/**
+	* Save hash to cache file.
+	*
+	* @param name Task name (webfont).
+	* @param target Task target name.
+	* @param hash Hash.
+	*/
+	function saveHash(name$1, target$1, hash) {
+		const filepath = getHashPath(name$1, target$1);
+		fs.mkdirSync(path.dirname(filepath), { recursive: true });
+		fs.writeFileSync(filepath, hash);
+	}
+	/**
+	* Read hash from cache file or `null` if file don’t exist.
+	*
+	* @param name Task name (webfont).
+	* @param target Task target name.
+	*/
+	function readHash(name$1, target$1) {
+		const filepath = getHashPath(name$1, target$1);
+		if (fs.existsSync(filepath)) return fs.readFileSync(filepath, "utf8");
+		return null;
+	}
+	/**
+	* Return path to cache file.
+	*
+	* @param name Task name (webfont).
+	* @param target Task target name.
+	*/
+	function getHashPath(name$1, target$1) {
+		return path.join(o.cache, name$1, target$1, "hash");
+	}
+};
+
+//#endregion
+export { webfont_default as default, webfont };
+//# sourceMappingURL=webfont.js.map