@automattic/charts 1.0.1 → 1.1.0

package/src/utils/resolve-font-size.ts

@@ -0,0 +1,37 @@
+/**
+ * Resolve a theme `fontSize` value into a plain number suitable for
+ * canvas-based measurement (e.g. `getStringWidth`).
+ *
+ * Accepts:
+ * - A number — returned as-is
+ * - A pixel string like `"12px"` — parsed and returned as a number
+ *
+ * Returns `undefined` for any other input (missing value, NaN, or
+ * relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
+ * their own default. Relative units are intentionally rejected because
+ * we cannot resolve them to absolute pixels here without a parent
+ * computed style, and silently returning the unitless prefix
+ * (`parseFloat("0.875rem") === 0.875`) would produce nearly-zero
+ * widths in measurement code.
+ * @param val - Raw font size value from a theme, axis style, or props
+ * @return Parsed numeric font size in pixels, or `undefined` when unresolvable
+ */
+export const resolveFontSize = ( val?: number | string ): number | undefined => {
+	if ( typeof val === 'number' ) {
+		return isNaN( val ) ? undefined : val;
+	}
+
+	if ( typeof val === 'string' ) {
+		// Only accept plain numeric strings or pixel values.
+		// Reject rem, em, %, vh, vw, etc. — they cannot be resolved to
+		// absolute pixels without a computed style context.
+		const match = val.trim().match( /^(-?\d+\.?\d*|-?\.\d+)(px)?$/ );
+		if ( ! match ) {
+			return undefined;
+		}
+		const parsed = parseFloat( match[ 1 ] );
+		return isNaN( parsed ) ? undefined : parsed;
+	}
+
+	return undefined;
+};

package/src/utils/test/resolve-css-var.test.ts

@@ -414,9 +414,8 @@ describe( 'resolveCssVariable', () => {
 				if ( element === themedElement ) {
 					return {
 						getPropertyValue: ( prop: string ) => {
-							// eslint-disable-next-line @wordpress/no-unknown-ds-tokens -- Thinks this is a use rather than a test.
-							if ( prop === '--wpds-color-bg-interactive-brand-weak' ) {
-								return '#c029dc'; // User's custom accent color
+							if ( prop === '--custom-accent-color' ) {
+								return '#c029dc';
 							}
 							return '';
 						},
@@ -428,8 +427,7 @@ describe( 'resolveCssVariable', () => {
 			} );
 			window.getComputedStyle = mockGetComputedStyle as unknown as typeof window.getComputedStyle;
 
-			// eslint-disable-next-line @wordpress/no-unknown-ds-tokens -- Thinks this is a use rather than a test.
-			const result = resolveCssVariable( '--wpds-color-bg-interactive-brand-weak', themedElement );
+			const result = resolveCssVariable( '--custom-accent-color', themedElement );
 			expect( result ).toBe( '#c029dc' );
 		} );
 	} );

package/src/utils/test/resolve-font-size.test.ts

@@ -0,0 +1,66 @@
+import { resolveFontSize } from '../resolve-font-size';
+
+describe( 'resolveFontSize', () => {
+	describe( 'numeric input', () => {
+		it( 'returns whole numbers as-is', () => {
+			expect( resolveFontSize( 12 ) ).toBe( 12 );
+			expect( resolveFontSize( 0 ) ).toBe( 0 );
+		} );
+
+		it( 'returns decimal numbers as-is', () => {
+			expect( resolveFontSize( 13.5 ) ).toBe( 13.5 );
+		} );
+
+		it( 'returns undefined for NaN', () => {
+			expect( resolveFontSize( NaN ) ).toBeUndefined();
+		} );
+	} );
+
+	describe( 'string input', () => {
+		it( 'parses bare numeric strings', () => {
+			expect( resolveFontSize( '12' ) ).toBe( 12 );
+			expect( resolveFontSize( '13.5' ) ).toBe( 13.5 );
+		} );
+
+		it( 'parses pixel strings', () => {
+			expect( resolveFontSize( '12px' ) ).toBe( 12 );
+			expect( resolveFontSize( '13.5px' ) ).toBe( 13.5 );
+		} );
+
+		it( 'trims whitespace before parsing', () => {
+			expect( resolveFontSize( '  14px  ' ) ).toBe( 14 );
+		} );
+
+		it( 'rejects rem values rather than returning the unitless prefix', () => {
+			expect( resolveFontSize( '0.875rem' ) ).toBeUndefined();
+		} );
+
+		it( 'rejects em, %, vh, vw and other relative units', () => {
+			expect( resolveFontSize( '1em' ) ).toBeUndefined();
+			expect( resolveFontSize( '100%' ) ).toBeUndefined();
+			expect( resolveFontSize( '2vh' ) ).toBeUndefined();
+			expect( resolveFontSize( '2vw' ) ).toBeUndefined();
+		} );
+
+		it( 'rejects keywords like inherit, initial, unset', () => {
+			expect( resolveFontSize( 'inherit' ) ).toBeUndefined();
+			expect( resolveFontSize( 'initial' ) ).toBeUndefined();
+			expect( resolveFontSize( 'medium' ) ).toBeUndefined();
+		} );
+
+		it( 'returns undefined for empty string', () => {
+			expect( resolveFontSize( '' ) ).toBeUndefined();
+		} );
+
+		it( 'returns undefined for unparseable strings', () => {
+			expect( resolveFontSize( 'abc' ) ).toBeUndefined();
+			expect( resolveFontSize( 'pxpx' ) ).toBeUndefined();
+		} );
+	} );
+
+	describe( 'missing input', () => {
+		it( 'returns undefined for undefined', () => {
+			expect( resolveFontSize( undefined ) ).toBeUndefined();
+		} );
+	} );
+} );

package/dist/chunk-EMMSS5I5.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-EMMSS5I5.cjs"],"names":[],"mappings":"AAAA,6EAAI,SAAS,EAAE,MAAM,CAAC,MAAM;AAC5B,IAAI,UAAU,EAAE,MAAM,CAAC,cAAc;AACrC,IAAI,iBAAiB,EAAE,MAAM,CAAC,wBAAwB;AACtD,IAAI,kBAAkB,EAAE,MAAM,CAAC,mBAAmB;AAClD,IAAI,aAAa,EAAE,MAAM,CAAC,cAAc;AACxC,IAAI,aAAa,EAAE,MAAM,CAAC,SAAS,CAAC,cAAc;AAClD,IAAI,WAAW,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,SAAS,SAAS,CAAC,EAAE;AACnD,EAAE,OAAO,IAAI,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO;AACpG,CAAC;AACD,IAAI,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG;AAChC,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG;AACtB,IAAI,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;AACjE,CAAC;AACD,IAAI,YAAY,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG;AAC9C,EAAE,GAAG,CAAC,KAAK,GAAG,OAAO,KAAK,IAAI,SAAS,GAAG,OAAO,KAAK,IAAI,UAAU,EAAE;AACtE,IAAI,IAAI,CAAC,IAAI,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC;AAC3C,MAAM,GAAG,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,MAAM;AACvD,QAAQ,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;AAC1H,EAAE;AACF,EAAE,OAAO,EAAE;AACX,CAAC;AACD,IAAI,QAAQ,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW;AAChH;AACA;AACA;AACA;AACA,EAAE,WAAW,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,MAAM;AACjH,EAAE;AACF,CAAC,CAAC;AACF;AACA;AACE;AACA;AACA;AACF,wFAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-EMMSS5I5.cjs"}