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

Configurable Gulp tasks for use in Gravity Forms projects.

const gulp = require( 'gulp' );
const postcss = require( 'gulp-postcss' );
const sourcemaps = require( 'gulp-sourcemaps' );
const rename = require( 'gulp-rename' );
const gulpif = require( 'gulp-if' );
const concat = require( 'gulp-concat' );
const browserSync = require( 'browser-sync' );
const getConfig = require('../../config');
const { config } = getConfig();

const commonPlugins = require( '../postcss/plugins/common' );
const adminPlugins = require( '../postcss/plugins/admin' );
const adminThemePlugins = require( '../postcss/plugins/adminTheme' );
const themePlugins = require( '../postcss/plugins/theme' );
const themeFrameworkPlugins = require( '../postcss/plugins/themeFramework' );

/**
 * @param {object}          options            {
 *                                             src = [],
 *                                             dest = config.paths.core_admin_css,
 *                                             plugins = adminPlugins,
 *                                             bundleName = 'empty.css',
 *                                             }
 * @param {Array<string>}   options.src
 * @param {string}          options.dest
 * @param {Array<Function>} options.plugins
 * @param {string}          options.bundleName
 * @return
 */
function cssProcess( {
	src = [],
	dest = config.paths.css_dist,
	plugins = adminPlugins,
	bundleName = 'empty.css', // Needs to be a valid filename else concat errors
} ) {
	const server = browserSync.get( config?.browserSync?.serverName || 'gravity-dev' );
	return gulp.src( src )
		.pipe( sourcemaps.init() )
		.pipe( postcss( plugins ) )
		.pipe( rename( { extname: '.css' } ) )
		.pipe( gulpif(
			bundleName !== 'empty.css',
			concat( bundleName )
		) )
		.pipe( sourcemaps.write( '.' ) )
		.pipe( gulp.dest( dest ) )
		.pipe( gulpif( server.active, server.reload( { stream: true } ) ) );
}

module.exports = Object.assign( {}, {
	commonCss() {
		return cssProcess( {
			src: config?.postcss?.commonCss?.src || [
				`${ config.paths.css_src }/common/common.pcss`,
			],
			dest: config?.postcss?.commonCss?.dest || config.paths.css_dist,
			plugins: commonPlugins,
		} );
	},
	commonComponentsCss() {
		return cssProcess( {
			src: config?.postcss?.commonComponentsCss?.src || [
				`${ config.paths.css_src }/common/common-components.pcss`,
			],
			dest: config?.postcss?.commonCss?.dest || config.paths.css_dist,
			plugins: commonPlugins,
		} );
	},
	adminCss() {
		return cssProcess( {
			src: config?.postcss?.adminCss?.src || [
				`${ config.paths.css_src }/admin/admin.pcss`,
			],
			dest: config?.postcss?.adminCss?.dest || config.paths.css_dist,
		} );
	},
	adminThemeCss() {
		return cssProcess( {
			src: config?.postcss?.adminThemeCss?.src || [
				`${ config.paths.css_src }/admin/admin-theme.pcss`,
			],
			dest: config?.postcss?.adminThemeCss?.dest || config.paths.css_dist,
			plugins: adminThemePlugins,
		} );
	},
	adminComponentsCss() {
		return cssProcess( {
			src: config?.postcss?.adminComponentsCss?.src || [
				`${ config.paths.css_src }/admin/admin-components.pcss`,
			],
			dest: config?.postcss?.adminComponentsCss?.dest || config.paths.css_dist,
		} );
	},
	themeComponentsCss() {
		return cssProcess( {
			src: config?.postcss?.themeComponentsCss?.src || [
				`${ config.paths.css_src }/theme/theme-components.pcss`,
			],
			dest: config?.postcss?.themeComponentsCss?.dest || config.paths.css_dist,
			plugins: themePlugins,
		} );
	},
	themeCss() {
		return cssProcess( {
			src: config?.postcss?.themeCss?.src || [
				`${ config.paths.css_src }/theme/theme.pcss`,
			],
			dest: config?.postcss?.themeCss?.dest || config.paths.css_dist,
			plugins: themePlugins,
		} );
	},
	themeFrameworkCss() {
		return cssProcess( {
			src: config?.postcss?.themeFrameworkCss?.src || [
				`${ config.paths.css_src }/theme/framework/theme-framework.pcss`,
			],
			dest: config?.postcss?.themeFrameworkCss?.dest || config.paths.css_dist,
			plugins: themeFrameworkPlugins,
		} );
	},
	componentsAdminDistCss() {
		return cssProcess( {
			src: [
				`${ config.paths.npm_packages }/components/css/admin/**/*.css`,
			],
			dest: `${ config.paths.npm_packages }/components/dist/css/admin/`,
		} );
	},
	componentsCommonDistCss() {
		return cssProcess( {
			src: [
				`${ config.paths.npm_packages }/components/css/common/**/*.css`,
			],
			dest: `${ config.paths.npm_packages }/components/dist/css/common/`,
			plugins: commonPlugins,
		} );
	},
	componentsThemeDistCss() {
		return cssProcess( {
			src: [
				`${ config.paths.npm_packages }/components/css/theme/**/*.css`,
			],
			dest: `${ config.paths.npm_packages }/components/dist/css/theme/`,
			plugins: themePlugins,
		} );
	},
}, config?.tasks?.builtins?.postcss || {} );