@gravityforms/design-tokens/scripts/generate-css-utils.js

Design tokens as PostCSS variables, media queries, and mixins for Gravity Forms development.

#!/usr/bin/env node

const path = require( 'path' );
const { trailingSlashIt, writeCssFile } = require( './utils' );
const { config } = require( '../config' );

const [ productName, scope ] = process.argv.slice( 2 );

const boxShadow = require( `../${ productName }/custom-properties/${ scope }/box-shadow` );
const colors = require( `../${ productName }/custom-properties/${ scope }/colors` );
const transitions = require( `../${ productName }/custom-properties/${ scope }/transitions` );

const cssPath = config?.paths?.[ `css_${ scope }_src` ] || `../../../../assets/css/src/${ scope }`;
const headerFileName = `${ scope }-css-utilities.css`;
const headerMessage = 'This file is auto generated by @gravityforms/design-tokens. Do not modify it.';
const utilPath = path.join( trailingSlashIt( cssPath ), 'util' );

const data = [
	{
		data: colors,
		fileName: '_bg-colors.pcss',
		headerFileName,
		headerTitle: 'Background Color Utility Classes',
		headerMessage,
		nameReplaceSearch: '-color-',
		nameReplaceValue: '-background-color-',
		path: utilPath,
		projectSlug: 'gform',
		root: false,
		ruleProperty: 'background-color',
		scope,
	},
	{
		data: boxShadow,
		fileName: '_box-shadow.pcss',
		headerFileName,
		headerTitle: 'Box Shadow Utility Classes',
		headerMessage,
		path: utilPath,
		projectSlug: 'gform',
		root: false,
		ruleProperty: 'box-shadow',
		scope,
	},
	{
		data: colors,
		fileName: '_colors.pcss',
		headerFileName,
		headerTitle: 'Color Utility Classes',
		headerMessage,
		path: utilPath,
		projectSlug: 'gform',
		root: false,
		ruleProperty: 'color',
		scope,
	},
	{
		data: transitions,
		fileName: '_transitions.pcss',
		headerFileName,
		headerTitle: 'Transition Utility Classes',
		headerMessage,
		path: utilPath,
		projectSlug: 'gform',
		root: false,
		ruleProperty: 'transition',
		scope,
	},
];

const createContent = () =>
	data.map( ( entry ) => `\n@import "./util/${ entry.fileName }";` ).join( '' ) + '\n';

data.push( {
	content: createContent(),
	fileName: `${ scope }-css-utilities.pcss`,
	headerFileName: `${ scope }-css-utilities.css`,
	headerTitle: `Gravity Forms ${ scope.charAt( 0 ).toUpperCase() + scope.slice( 1 ) } Utility Styles`,
	path: cssPath,
} );

data.forEach( ( entry ) => {
	writeCssFile( entry );
} );