@gravityforms/gulp-tasks/src/tasks/replace.js

Configurable Gulp tasks for use in Gravity Forms projects.

const gulp = require( 'gulp' );
const { resolve } = require( 'path' );
const rename = require( 'gulp-rename' );
const replace = require( 'gulp-replace' );
const gulpif = require( 'gulp-if' );
const getConfig = require( '../../config' );
const { config } = getConfig();
const iconConfig = require( '../utils/icon-config' );
const { trailingSlashIt } = require( '../utils/tools' );

const templateStringsConfig = config?.replace?.templateStrings || [];

const designTokensPath = resolve( __dirname, '../../../design-tokens' );

const {
	childDir = '',
	designTokenDir = '',
	fontsPath = '',
	parentDir = '',
	replaceName = '',
	replaceScss = '',
	target = 'admin',
	targetCssDir = '',
	varName = '',
} = iconConfig;

function componentsWrapperPrefix( prefix = '', scope = '', files = [] ) {
	const re = RegExp( `\\.gform-${ scope }`, 'g' );
	return gulp.src( files.length ? files : [
		`${ config.paths.css_dist }/${ scope }-components.css`,
		`${ config.paths.css_dist }/${ scope }-components.css.map`,
	] )
		.pipe( gulpif( prefix !== '', replace( re, `.${ prefix }` ) ) )
		.pipe( gulp.dest( `${ config.paths.css_dist }` ) );
}

async function templateStringProcess() {
	for ( const configObj of templateStringsConfig ) {
		await new Promise( ( resolve, reject ) => {
			gulp.src( configObj.files.src )
				.pipe( replace( configObj.replace, configObj.replacement ) )
				.pipe( gulp.dest( configObj.files.dest ) )
				.on( 'end', resolve )
				.on( 'error', reject );
		} );
	}
}

module.exports = Object.assign( {}, {
	adminComponentsIconFontName() {
		const prefix = config?.cssOverrides?.admin?.components?.wrapperClass || '';
		const re = RegExp( 'gravity-components-icons', 'g' );
		return gulp.src( [
			`${ config.paths.css_dist }/admin-components.css`,
			`${ config.paths.css_dist }/admin-components.css.map`,
		] )
			.pipe( gulpif( prefix !== '', replace( re, `${ prefix }-components-icons` ) ) )
			.pipe( gulp.dest( `${ config.paths.css_dist }` ) );
	},

	adminComponentsWrapperPrefix() {
		const prefix = config?.cssOverrides?.admin?.components?.wrapperClass || '';
		const files = config?.replace?.admin?.components?.files || [];
		const scope = config?.replace?.admin?.components?.scope || 'admin';
		return componentsWrapperPrefix( prefix, scope, files );
	},
	commonComponentsWrapperPrefix() {
		const prefix = config?.cssOverrides?.common?.components?.wrapperClass || '';
		const files = config?.replace?.common?.components?.files || [];
		const scope = config?.replace?.common?.components?.scope || 'common';
		return componentsWrapperPrefix( prefix, scope, files );
	},
	themeComponentsWrapperPrefix() {
		const prefix = config?.cssOverrides?.theme?.components?.wrapperClass || '';
		const files = config?.replace?.theme?.components?.files || [];
		const scope = config?.replace?.theme?.components?.scope || 'theme';
		return componentsWrapperPrefix( prefix, scope, files );
	},
	iconsStyle() {
		const parentDirPath = parentDir ? `${ parentDir }/` : '';
		const targetCssDirPath = targetCssDir ? targetCssDir : target;
		const childDirPath = childDir ? `/${ childDir }` : '';
		return gulp.src( [
			`${ config.paths.css_src }/${ parentDirPath }${ targetCssDirPath }${ childDirPath }/icons/_icons.pcss`,
		] )
			.pipe( replace( /url\('fonts\/(.+)'\) /g, `url('${ fontsPath }/$1') ` ) )
			.pipe( replace( / {2}/g, '\t' ) )
			.pipe( replace( /}$\n^\./gm, '}\n\n\.' ) )
			.pipe( replace( replaceName, varName ) )
			.pipe( gulp.dest( `${ config.paths.css_src }/${ parentDirPath }${ targetCssDirPath }${ childDirPath }/icons/` ) );
	},
	iconsVariables() {
		const parentDirPath = parentDir ? `${ parentDir }/` : '';
		const targetCssDirPath = targetCssDir ? targetCssDir : target;
		const childDirPath = childDir ? `/${ childDir }` : '';

		if ( designTokensPath && designTokenDir ) {
			return gulp.src( [
				`${ trailingSlashIt( designTokensPath ) }${ trailingSlashIt( designTokenDir ) }custom-properties/${ parentDirPath }${ target }${ childDirPath }/icons.pcss`,
			] )
				.pipe( replace( /(\\[a-f0-9]+);/g, '"$1";' ) )
				.pipe( replace( /\$icomoon-font-path: "fonts" !default;\n/g, '' ) )
				.pipe( replace( replaceScss, '' ) )
				.pipe( replace( /\$/g, '\t\'--' ) )
				.pipe( replace( /unquote\(/g, '' ) )
				.pipe( replace( /: '"/g, '\': \'"' ) )
				.pipe( replace( /'?(\))'?/g, '' ) )
				.pipe( replace( /;/g, '\',' ) )
				.pipe( rename( 'icons.js' ) )
				.pipe( gulp.dest( `${ trailingSlashIt( designTokensPath ) }${ trailingSlashIt( designTokenDir ) }custom-properties/${ parentDirPath }${ target }${ childDirPath }/` ) );
		} else {
			return gulp.src([
				`${config.paths.css_src}/${parentDirPath}${targetCssDirPath}${childDirPath}/variables/_icons.pcss`,
			])
				.pipe( replace( /(\\[a-f0-9]+);/g, '"$1";' ) )
				.pipe( replace( /\$icomoon-font-path: "fonts" !default;\n/g, '' ) )
				.pipe( replace( replaceScss, '' ) )
				.pipe( replace( /\$/g, '\t--' ) )
				.pipe( replace( /unquote\('/g, '' ) )
				.pipe( replace( /"\\/g, '"' ) )
				.pipe( replace( /"'\)/g, '"' ) )
				.pipe( replace( /;\n\n$/m, ';\n' ) )
				.pipe( gulp.dest( `${config.paths.css_src}/${parentDirPath}${targetCssDirPath}${childDirPath}/variables/` ) );
		}
	},
	templateStrings() {
		return templateStringProcess();
	},
}, config?.tasks?.builtins?.replace || {} );