@eightshift/frontend-libs-tailwind 1.2.0 → 1.3.0

package/scripts/editor/registration.js

@@ -84,7 +84,11 @@ export const registerBlocks = (
 
 			// Get Block Transforms component from block name and transformsComponentPath.
 			if (transformsComponentPath !== null) {
-				const blockTransformsComponent = getBlockGenericComponent(blockManifest.blockName, transformsComponentPath, 'transforms');
+				const blockTransformsComponent = getBlockGenericComponent(
+					blockManifest.blockName,
+					transformsComponentPath,
+					'transforms',
+				);
 
 				if (blockTransformsComponent !== null) {
 					blockManifest.transforms = blockTransformsComponent;
@@ -93,7 +97,11 @@ export const registerBlocks = (
 
 			// Get Block Deprecations component from block name and deprecationsComponentPath.
 			if (deprecationsComponentPath !== null) {
-				const blockDeprecationsComponent = getBlockGenericComponent(blockManifest.blockName, deprecationsComponentPath, 'deprecations');
+				const blockDeprecationsComponent = getBlockGenericComponent(
+					blockManifest.blockName,
+					deprecationsComponentPath,
+					'deprecations',
+				);
 
 				if (blockDeprecationsComponent !== null) {
 					blockManifest.deprecated = blockDeprecationsComponent;
@@ -111,7 +119,11 @@ export const registerBlocks = (
 
 			// Get Block Overrides component from block name and overridesComponentPath.
 			if (overridesComponentPath !== null) {
-				const blockOverridesComponent = getBlockGenericComponent(blockManifest.blockName, overridesComponentPath, 'overrides');
+				const blockOverridesComponent = getBlockGenericComponent(
+					blockManifest.blockName,
+					overridesComponentPath,
+					'overrides',
+				);
 
 				if (blockOverridesComponent !== null) {
 					blockManifest = Object.assign(blockManifest, blockOverridesComponent);
@@ -119,7 +131,14 @@ export const registerBlocks = (
 			}
 
 			// Pass data to registerBlock helper to get final output for registerBlockType.
-			const blockDetails = registerBlock(globalManifest, wrapperManifest, componentsManifest, blockManifest, wrapperComponent, blockComponent);
+			const blockDetails = registerBlock(
+				globalManifest,
+				wrapperManifest,
+				componentsManifest,
+				blockManifest,
+				wrapperComponent,
+				blockComponent,
+			);
 
 			// Format the 'deprecated' attribute details to match the format Gutenberg wants.
 			if (blockDetails?.options?.deprecated) {
@@ -145,7 +164,10 @@ export const registerBlocks = (
 							};
 						},
 
-						isEligible: deprecation?.isEligible ?? ((attributes) => Object.keys(deprecation.oldAttributes).every((v) => Object.keys(attributes).includes(v))),
+						isEligible:
+							deprecation?.isEligible ??
+							((attributes) =>
+								Object.keys(deprecation.oldAttributes).every((v) => Object.keys(attributes).includes(v))),
 						save: blockDetails.options.save,
 					};
 				});
@@ -196,7 +218,12 @@ export const registerBlocks = (
  * );
  * ```
  */
-export const registerVariations = (globalManifest = {}, variationsManifestPath, blocksManifestPath = null, overridesComponentPath = null) => {
+export const registerVariations = (
+	globalManifest = {},
+	variationsManifestPath,
+	blocksManifestPath = null,
+	overridesComponentPath = null,
+) => {
 	const variationsManifests = variationsManifestPath.keys().map(variationsManifestPath);
 
 	// Set all store values.
@@ -210,7 +237,11 @@ export const registerVariations = (globalManifest = {}, variationsManifestPath,
 		if (active) {
 			// Get Block Overrides component from block name and overridesComponentPath.
 			if (overridesComponentPath !== null) {
-				const blockOverridesComponent = getBlockGenericComponent(variationManifest.name, overridesComponentPath, 'overrides');
+				const blockOverridesComponent = getBlockGenericComponent(
+					variationManifest.name,
+					overridesComponentPath,
+					'overrides',
+				);
 
 				if (blockOverridesComponent !== null) {
 					variationManifest = Object.assign(variationManifest, blockOverridesComponent);
@@ -218,7 +249,11 @@ export const registerVariations = (globalManifest = {}, variationsManifestPath,
 			}
 
 			// Pass data to registerVariation helper to get final output for registerBlockVariation.
-			const blockDetails = registerVariation(globalManifest, variationManifest, blocksManifestPath !== null ? blocksManifestPath.keys().map(blocksManifestPath) : []);
+			const blockDetails = registerVariation(
+				globalManifest,
+				variationManifest,
+				blocksManifestPath !== null ? blocksManifestPath.keys().map(blocksManifestPath) : [],
+			);
 
 			// Native WP method for block registration.
 			registerBlockVariation(blockDetails.blockName, blockDetails.options);
@@ -248,11 +283,15 @@ export const getBlockEditComponent = (blockName, paths, fileName) => {
 	const pathsKeys = paths.keys();
 
 	// Get Block edit component from block name and pathsKeys.
-	const editComponent = pathsKeys.filter((filePath) => filePath === `./${blockName}/${blockName}-${fileName}.js`).map(paths)[0];
+	const editComponent = pathsKeys
+		.filter((filePath) => filePath === `./${blockName}/${blockName}-${fileName}.js`)
+		.map(paths)[0];
 
 	// If edit component is missing throw and error.
 	if (typeof editComponent === 'undefined') {
-		throw Error(`It looks like you are missing block edit component for block: ${blockName}, please check if you have ${blockName}-block.js file in your block folder.`);
+		throw Error(
+			`It looks like you are missing block edit component for block: ${blockName}, please check if you have ${blockName}-block.js file in your block folder.`,
+		);
 	}
 
 	// No mater if class of functional component is used fetch the first item in an object.
@@ -260,7 +299,9 @@ export const getBlockEditComponent = (blockName, paths, fileName) => {
 
 	// If edit component callback is missing throw and error.
 	if (typeof editCallback === 'undefined') {
-		throw Error(`It looks like you are missing block edit component for block: ${blockName}, please check if you have ${blockName}-block.js file in your block folder.`);
+		throw Error(
+			`It looks like you are missing block edit component for block: ${blockName}, please check if you have ${blockName}-block.js file in your block folder.`,
+		);
 	}
 
 	return editCallback;
@@ -283,7 +324,9 @@ export const getBlockGenericComponent = (blockName, paths, fileName) => {
 	const pathsKeys = paths.keys();
 
 	// Get Block edit component from block name and pathsKeys.
-	const editComponent = pathsKeys.filter((filePath) => filePath === `./${blockName}/${blockName}-${fileName}.js`).map(paths)[0];
+	const editComponent = pathsKeys
+		.filter((filePath) => filePath === `./${blockName}/${blockName}-${fileName}.js`)
+		.map(paths)[0];
 
 	// If edit component is missing throw and error.
 	if (typeof editComponent === 'undefined') {
@@ -492,7 +535,14 @@ export const getIconOptions = (globalManifest, blockManifest) => {
  *
  * @returns {object}
  */
-export const prepareComponentAttribute = (manifest, newName, realName, isExample = false, parent = '', currentAttributes = false) => {
+export const prepareComponentAttribute = (
+	manifest,
+	newName,
+	realName,
+	isExample = false,
+	parent = '',
+	currentAttributes = false,
+) => {
 	const output = {};
 
 	// Define different data point for attributes or example.
@@ -563,17 +613,30 @@ export const prepareComponentAttributes = (componentsManifest, manifest, isExamp
 
 		// Bailout if component doesn't exist.
 		if (!component) {
-			throw Error(`Component specified in "${name}" manifest doesn't exist in your components list. Please check if you project has "${realComponentName}" component.`);
+			throw Error(
+				`Component specified in "${name}" manifest doesn't exist in your components list. Please check if you project has "${realComponentName}" component.`,
+			);
 		}
 
 		let outputAttributes = {};
 
 		// If component has more components do recursive loop.
 		if (component?.components) {
-			outputAttributes = prepareComponentAttributes(componentsManifest, component, isExample, `${newParent}${upperFirst(camelCase(newComponentName))}`);
+			outputAttributes = prepareComponentAttributes(
+				componentsManifest,
+				component,
+				isExample,
+				`${newParent}${upperFirst(camelCase(newComponentName))}`,
+			);
 		} else {
 			// Output the component attributes if there is no nesting left, and append the parent prefixes.
-			outputAttributes = prepareComponentAttribute(component, newComponentName, realComponentName, isExample, newParent);
+			outputAttributes = prepareComponentAttribute(
+				component,
+				newComponentName,
+				realComponentName,
+				isExample,
+				newParent,
+			);
 		}
 
 		// Populate the output recursively.
@@ -752,7 +815,14 @@ export const registerVariation = (globalManifest = {}, variationManifest = {}) =
  *
  * @returns {object}
  */
-export const registerBlock = (globalManifest = {}, wrapperManifest = {}, componentsManifest = {}, blockManifest = {}, wrapperComponent, blockComponent) => {
+export const registerBlock = (
+	globalManifest = {},
+	wrapperManifest = {},
+	componentsManifest = {},
+	blockManifest = {},
+	wrapperComponent,
+	blockComponent,
+) => {
 	// Block Icon option.
 	blockManifest['icon'] = getIconOptions(globalManifest, blockManifest);
 

package/scripts/editor/tailwindcss.js

@@ -21,10 +21,15 @@ import { clsx } from '@eightshift/ui-components/utilities';
  */
 export const getTwPart = (part, manifest, ...custom) => {
 	if (!part || !manifest || !manifest?.tailwind || Object.keys(manifest?.tailwind ?? {}).length === 0) {
-		return '';
+		return clsx(...custom);
 	}
 
-	const partClasses = manifest?.tailwind?.parts?.[part]?.twClassesEditor ?? manifest?.tailwind?.parts?.[part]?.twClasses ?? '';
+	let partClasses =
+		manifest?.tailwind?.parts?.[part]?.twClassesEditor ?? manifest?.tailwind?.parts?.[part]?.twClasses ?? '';
+
+	if (Array.isArray(partClasses)) {
+		partClasses = partClasses.join(' ');
+	}
 
 	return clsx(partClasses, ...custom);
 };
@@ -50,46 +55,56 @@ export const getTwPart = (part, manifest, ...custom) => {
  */
 export const getTwDynamicPart = (part, attributes, manifest, ...custom) => {
 	if (!part || !manifest || !manifest?.tailwind || Object.keys(manifest?.tailwind ?? {}).length === 0) {
-		return '';
+		return clsx(...custom);
 	}
 
-	const baseClasses = manifest?.tailwind?.parts?.[part]?.twClassesEditor ?? manifest?.tailwind?.parts?.[part]?.twClasses ?? '';
+	const baseClasses =
+		manifest?.tailwind?.parts?.[part]?.twClassesEditor ?? manifest?.tailwind?.parts?.[part]?.twClasses ?? '';
 
-	const mainClasses = Object.entries(manifest?.tailwind?.options ?? {}).reduce((current, [attributeName, { responsive, twClasses, twClassesEditor, part: partName }]) => {
-		if (partName !== part) {
-			return current;
-		}
+	const mainClasses = Object.entries(manifest?.tailwind?.options ?? {}).reduce(
+		(current, [attributeName, { responsive, twClasses, twClassesEditor, part: partName }]) => {
+			if (partName !== part) {
+				return current;
+			}
 
-		const value = checkAttr(attributeName, attributes, manifest, true);
+			const value = checkAttr(attributeName, attributes, manifest, true);
 
-		if (!value) {
-			return current;
-		}
+			if (!value) {
+				return current;
+			}
 
-		if (!responsive) {
-			return [...current, twClassesEditor?.[value] ?? twClasses?.[value]];
-		}
+			if (!responsive) {
+				const currentClasses = twClassesEditor?.[value] ?? twClasses?.[value];
 
-		const responsiveClasses = Object.keys(value).reduce((curr, breakpoint) => {
-			if (breakpoint === '_desktopFirst') {
-				return curr;
+				if (Array.isArray(currentClasses)) {
+					return [...current, ...currentClasses];
+				}
+
+				return [...current, currentClasses];
 			}
 
-			const currentClasses = twClassesEditor?.[value[breakpoint]] ?? twClasses?.[value[breakpoint]];
+			const responsiveClasses = Object.keys(value).reduce((curr, breakpoint) => {
+				if (breakpoint === '_desktopFirst') {
+					return curr;
+				}
+
+				let currentClasses = twClassesEditor?.[value[breakpoint]] ?? twClasses?.[value[breakpoint]];
 
-			if (breakpoint === '_default') {
-				return [...curr, currentClasses];
-			}
+				if (!Array.isArray(currentClasses)) {
+					currentClasses = [currentClasses];
+				}
 
-			if (Array.isArray(currentClasses)) {
-				return [...curr, ...currentClasses.split(' ').map((currentClass) => `${breakpoint}:${currentClass}`)];
-			}
+				if (breakpoint === '_default') {
+					return [...curr, ...currentClasses];
+				}
 
-			return [...curr, `${breakpoint}:${currentClasses}`];
-		}, []);
+				return [...curr, ...currentClasses.split(' ').map((currentClass) => `${breakpoint}:${currentClass}`)];
+			}, []);
 
-		return [...current, ...responsiveClasses];
-	}, []);
+			return [...current, ...responsiveClasses];
+		},
+		[],
+	);
 
 	return clsx(baseClasses, ...mainClasses, ...custom);
 };
@@ -112,46 +127,59 @@ export const getTwDynamicPart = (part, attributes, manifest, ...custom) => {
  */
 export const getTwClasses = (attributes, manifest, ...custom) => {
 	if (!attributes || !manifest || !manifest?.tailwind || Object.keys(manifest?.tailwind ?? {}).length === 0) {
-		return '';
+		return clsx(...custom);
 	}
 
-	const baseClasses = manifest?.tailwind?.base?.twClassesEditor ?? manifest?.tailwind?.base?.twClasses ?? '';
-
-	const mainClasses = Object.entries(manifest?.tailwind?.options ?? {}).reduce((current, [attributeName, { responsive, twClasses, twClassesEditor, part: partName }]) => {
-		if (partName) {
-			return current;
-		}
+	let baseClasses = manifest?.tailwind?.base?.twClassesEditor ?? manifest?.tailwind?.base?.twClasses ?? '';
 
-		const value = checkAttr(attributeName, attributes, manifest, true);
+	if (Array.isArray(baseClasses)) {
+		baseClasses = baseClasses.join(' ');
+	}
 
-		if (!value) {
-			return current;
-		}
+	const mainClasses = Object.entries(manifest?.tailwind?.options ?? {}).reduce(
+		(current, [attributeName, { responsive, twClasses, twClassesEditor, part: partName }]) => {
+			if (partName) {
+				return current;
+			}
 
-		if (!responsive) {
-			return [...current, twClassesEditor?.[value] ?? twClasses?.[value]];
-		}
+			const value = checkAttr(attributeName, attributes, manifest, true);
 
-		const responsiveClasses = Object.keys(value).reduce((curr, breakpoint) => {
-			if (breakpoint === '_desktopFirst') {
-				return curr;
+			if (!value) {
+				return current;
 			}
 
-			const currentClasses = twClassesEditor?.[value[breakpoint]] ?? twClasses?.[value[breakpoint]];
+			if (!responsive) {
+				let currentClasses = twClassesEditor?.[value] ?? twClasses?.[value];
 
-			if (breakpoint === '_default') {
-				return [...curr, currentClasses];
-			}
+				if (Array.isArray(currentClasses)) {
+					currentClasses = currentClasses.join(' ');
+				}
 
-			if (Array.isArray(currentClasses)) {
-				return [...curr, ...currentClasses.split(' ').map((currentClass) => `${breakpoint}:${currentClass}`)];
+				return [...current, currentClasses];
 			}
 
-			return [...curr, `${breakpoint}:${currentClasses}`];
-		}, []);
+			const responsiveClasses = Object.keys(value).reduce((curr, breakpoint) => {
+				if (breakpoint === '_desktopFirst') {
+					return curr;
+				}
+
+				let currentClasses = twClassesEditor?.[value[breakpoint]] ?? twClasses?.[value[breakpoint]];
+
+				if (!Array.isArray(currentClasses)) {
+					currentClasses = [currentClasses];
+				}
+
+				if (breakpoint === '_default') {
+					return [...curr, ...currentClasses];
+				}
 
-		return [...current, ...responsiveClasses];
-	}, []);
+				return [...curr, ...currentClasses.map((currentClass) => `${breakpoint}:${currentClass}`)];
+			}, []);
+
+			return [...current, ...responsiveClasses];
+		},
+		[],
+	);
 
 	const combinationClasses =
 		manifest?.tailwind?.combinations?.reduce((current, { attributes: conditions, twClasses, twClassesEditor }) => {
@@ -171,7 +199,13 @@ export const getTwClasses = (attributes, manifest, ...custom) => {
 				}
 			}
 
-			return [...current, twClassesEditor ?? twClasses];
+			let currentClasses = twClassesEditor ?? twClasses;
+
+			if (!Array.isArray(currentClasses)) {
+				currentClasses = [currentClasses];
+			}
+
+			return [...current, ...currentClasses];
 		}, []) ?? [];
 
 	return clsx(baseClasses, ...mainClasses, ...combinationClasses, ...custom);
@@ -297,9 +331,13 @@ function* extractKeys(obj, parentKey = '', isResponsive = false) {
 }
 
 const combineAndRemoveDuplicates = (results) => {
-	return results.reduce((acc, { key, value, responsive }) => {
+	return results.reduce((acc, { value, responsive }) => {
 		acc[responsive] = acc[responsive] ? `${acc[responsive]} ${value}` : value;
 
+		if (Array.isArray(acc[responsive])) {
+			acc[responsive] = acc[responsive].join(' ');
+		}
+
 		return acc;
 	}, {});
 };

package/scripts/helpers/index.js

@@ -1,5 +1,11 @@
 // All exports are sorted in alphabetical order.
 
-export { getBreakpointData, getBreakpointNames, getGlobalManifest, getBreakpointUiData, getResponsiveData } from './breakpoints';
+export {
+	getBreakpointData,
+	getBreakpointNames,
+	getGlobalManifest,
+	getBreakpointUiData,
+	getResponsiveData,
+} from './breakpoints';
 export { cookies } from './cookies';
 export { dynamicImport } from './dynamic-import';

package/scripts/index.js

@@ -15,10 +15,23 @@ export * from './editor/fetch';
 export * from './editor/options';
 export * from './editor/utility';
 export * from './editor/tailwindcss';
-export { getAttributes, getExample, getFullBlockName, getFullBlockNameVariation, registerBlocks, registerVariations } from './editor/registration';
+export {
+	getAttributes,
+	getExample,
+	getFullBlockName,
+	getFullBlockNameVariation,
+	registerBlocks,
+	registerVariations,
+} from './editor/registration';
 export { STORE_NAME, BUILD_VERSION, setStore, setStoreGlobalWindow, setConfigFlags } from './editor/store';
 
 // Helpers.
-export { getBreakpointData, getBreakpointNames, getGlobalManifest, getBreakpointUiData, getResponsiveData } from './helpers/breakpoints';
+export {
+	getBreakpointData,
+	getBreakpointNames,
+	getGlobalManifest,
+	getBreakpointUiData,
+	getResponsiveData,
+} from './helpers/breakpoints';
 export { cookies } from './helpers/cookies';
 export { dynamicImport } from './helpers/dynamic-import';

package/webpack/base.mjs

@@ -26,7 +26,9 @@ export default (options) => {
 	if (!options.overrides.includes('definePlugin')) {
 		plugins.push(
 			new webpack.DefinePlugin({
-				'process.env.VERSION': JSON.stringify(Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)),
+				'process.env.VERSION': JSON.stringify(
+					Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
+				),
 				'process.browser': true,
 			}),
 		);

package/webpack/helpers.mjs

@@ -25,7 +25,9 @@ function getConfig(
 	blocksManifestSettingsPath = 'src/Blocks/manifest.json',
 ) {
 	if (typeof projectDir === 'undefined') {
-		throw Error('projectDir parameter is empty, please provide. This key represents: Current project directory absolute path. For example: __dirname');
+		throw Error(
+			'projectDir parameter is empty, please provide. This key represents: Current project directory absolute path. For example: __dirname',
+		);
 	}
 
 	if (typeof projectPathConfig === 'undefined') {
@@ -57,8 +59,16 @@ function getConfig(
 		applicationEntry: path.resolve(absolutePath, assetsPathConfigClean, 'application.js'),
 		applicationAdminEntry: path.resolve(absolutePath, assetsPathConfigClean, 'application-admin.js'),
 		applicationBlocksEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks.js'),
-		applicationBlocksEditorEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks-editor.js'),
-		applicationBlocksFrontendEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks-frontend.js'),
+		applicationBlocksEditorEntry: path.resolve(
+			absolutePath,
+			blocksAssetsPathConfigClean,
+			'application-blocks-editor.js',
+		),
+		applicationBlocksFrontendEntry: path.resolve(
+			absolutePath,
+			blocksAssetsPathConfigClean,
+			'application-blocks-frontend.js',
+		),
 
 		blocksManifestSettingsPath: path.resolve(absolutePath, blocksManifestSettingsPathClean),
 	};

package/webpack/project.mjs

@@ -34,12 +34,18 @@ export default (options) => {
 	}
 
 	// Load ApplicationBlocksEditor Entrypoint.
-	if (!options.overrides.includes('applicationBlocksEditor') && fs.existsSync(options.config.applicationBlocksEditorEntry)) {
+	if (
+		!options.overrides.includes('applicationBlocksEditor') &&
+		fs.existsSync(options.config.applicationBlocksEditorEntry)
+	) {
 		entry.applicationBlocksEditor = options.config.applicationBlocksEditorEntry;
 	}
 
 	// Load applicationBlocksFrontend Entrypoint.
-	if (!options.overrides.includes('applicationBlocksFrontend') && fs.existsSync(options.config.applicationBlocksFrontendEntry)) {
+	if (
+		!options.overrides.includes('applicationBlocksFrontend') &&
+		fs.existsSync(options.config.applicationBlocksFrontendEntry)
+	) {
 		entry.applicationBlocksFrontend = options.config.applicationBlocksFrontendEntry;
 	}