Use named exports for gradient parser types

Author: noahtallen

packages/components/src/custom-gradient-picker/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type gradientParser from 'gradient-parser';
+import type { LinearGradientNode } from 'gradient-parser';
 
 /**
  * WordPress dependencies
@@ -82,7 +82,7 @@ const GradientTypePicker = ( {
 					? undefined
 					: HORIZONTAL_GRADIENT_ORIENTATION,
 				type: 'linear-gradient',
-			} as gradientParser.LinearGradientNode )
+			} as LinearGradientNode )
 		);
 	};
 

packages/components/src/custom-gradient-picker/serializer.ts

@@ -1,12 +1,9 @@
 /**
  * External dependencies
  */
-import type gradientParser from 'gradient-parser';
+import type { ColorStop, GradientNode } from 'gradient-parser';
 
-export function serializeGradientColor( {
-	type,
-	value,
-}: gradientParser.ColorStop ) {
+export function serializeGradientColor( { type, value }: ColorStop ) {
 	if ( type === 'literal' ) {
 		return value;
 	}
@@ -16,9 +13,7 @@ export function serializeGradientColor( {
 	return `${ type }(${ value.join( ',' ) })`;
 }
 
-export function serializeGradientPosition(
-	position: gradientParser.ColorStop[ 'length' ]
-) {
+export function serializeGradientPosition( position: ColorStop[ 'length' ] ) {
 	if ( ! position ) {
 		return '';
 	}
@@ -30,15 +25,15 @@ export function serializeGradientColorStop( {
 	type,
 	value,
 	length,
-}: gradientParser.ColorStop ) {
+}: ColorStop ) {
 	return `${ serializeGradientColor( {
 		type,
 		value,
-	} as gradientParser.ColorStop ) } ${ serializeGradientPosition( length ) }`;
+	} as ColorStop ) } ${ serializeGradientPosition( length ) }`;
 }
 
 export function serializeGradientOrientation(
-	orientation: gradientParser.GradientNode[ 'orientation' ]
+	orientation: GradientNode[ 'orientation' ]
 ) {
 	if (
 		Array.isArray( orientation ) ||
@@ -54,13 +49,11 @@ export function serializeGradient( {
 	type,
 	orientation,
 	colorStops,
-}: gradientParser.GradientNode ) {
+}: GradientNode ) {
 	const serializedOrientation = serializeGradientOrientation( orientation );
 	const serializedColorStops = colorStops
 		.sort( ( colorStop1, colorStop2 ) => {
-			const getNumericStopValue = (
-				colorStop: gradientParser.ColorStop
-			) => {
+			const getNumericStopValue = ( colorStop: ColorStop ) => {
 				return colorStop?.length?.value === undefined
 					? 0
 					: parseInt( colorStop.length.value );

packages/components/src/custom-gradient-picker/types.ts

@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
-import type gradientParser from 'gradient-parser';
+import type {
+	LinearGradientNode,
+	RepeatingLinearGradientNode,
+	GradientNode,
+} from 'gradient-parser';
 
 export type CustomGradientPickerProps = {
 	/**
@@ -33,15 +37,13 @@ export type CustomGradientPickerProps = {
 };
 
 export type GradientAnglePickerProps = {
-	gradientAST:
-		| gradientParser.LinearGradientNode
-		| gradientParser.RepeatingLinearGradientNode;
+	gradientAST: LinearGradientNode | RepeatingLinearGradientNode;
 	hasGradient: boolean;
 	onChange: ( gradient: string ) => void;
 };
 
 export type GradientTypePickerProps = {
-	gradientAST: gradientParser.GradientNode;
+	gradientAST: GradientNode;
 	hasGradient: boolean;
 	onChange: ( gradient: string ) => void;
 };