Support both config object or argument (#1)

Author: Petter Walbø Johnsgård

Diff for: README.md

@@ -39,18 +39,21 @@ clamp('1rem', '2rem');
  */
 
 // 'clamp(0.5rem, 0.3239rem + 0.5634vw, 1rem)'
+clamp(16, 32, 400, 1000);
 clamp(16, 32, {
 	minWidth: 400,
 	maxWidth: 1000,
 });
 
 // 'clamp(0.5rem, 0.3239rem + 0.5634vw, 1rem)'
+clamp('16px', '32px', '400px', '1000px');
 clamp('16px', '32px', {
 	minWidth: '400px',
 	maxWidth: '1000px',
 });
 
 // 'clamp(0.5rem, 0.3239rem + 0.5634vw, 1rem)'
+clamp('1rem', '2rem', '25rem', '62.5rem');
 clamp('1rem', '2rem', {
 	minWidth: '25rem',
 	maxWidth: '62.5rem',

Diff for: __tests__/index.test.ts

@@ -37,22 +37,53 @@ describe('clamp', () => {
 	});
 
 	it('should handle different widths', () => {
+		const expected = 'clamp(0.5rem, 0rem + 8vw, 1rem)';
+
+		// With config object
 		expect(
 			clamp(8, 16, {
 				minWidth: 100,
 				maxWidth: 200,
 			}),
-		).toBe('clamp(0.5rem, 0rem + 8vw, 1rem)');
+		).toBe(expected);
+
+		// With minWidth and maxWidth
+		expect(clamp(8, 16, 100, 200)).toBe(expected);
 	});
 
 	it('should handle different root', () => {
+		const expected = 'clamp(0.4rem, 0rem + 8vw, 0.8rem)';
+
+		// With config object
 		expect(
 			clamp(8, 16, {
 				minWidth: 100,
 				maxWidth: 200,
 				root: 20,
 			}),
-		).toBe('clamp(0.4rem, 0rem + 8vw, 0.8rem)');
+		).toBe(expected);
+
+		// With minWidth and maxWidth
+		expect(clamp(8, 16, 100, 200, 20)).toBe(expected);
+	});
+
+	it('should ignore 4th and 5th arguments if 3rd is an object', () => {
+		const expected = 'clamp(0.5rem, 0rem + 8vw, 1rem)';
+
+		// With config object
+		expect(
+			clamp(
+				8,
+				16,
+				// @ts-expect-error Testing invalid arguments
+				{
+					minWidth: 100,
+					maxWidth: 200,
+				},
+				900,
+				24,
+			),
+		).toBe(expected);
 	});
 
 	it('should throw a warning if a unsupported unit is passed', () => {

Diff for: src/index.ts

@@ -18,30 +18,65 @@ const defaultConfig: Config = {
 	maxWidth: 1920,
 };
 
+// Function Overloads
+function clamp(
+	minSize: string | number,
+	maxSize: string | number,
+	config?: Partial<Config>,
+): string;
+
+function clamp(
+	minSize: string | number,
+	maxSize: string | number,
+	minWidth?: string | number,
+	maxWidth?: string | number,
+	root?: string | number,
+): string;
+
 /**
  * Creates a CSS clamp() function that is supported by all modern browsers.
  */
 function clamp(
 	minSize: string | number,
 	maxSize: string | number,
-	config: Partial<Config> = {},
+	configOrMinWidth?: Partial<Config> | string | number,
+	maxWidth?: string | number,
+	root?: string | number,
 ): string {
 	if (!minSize || !maxSize) {
 		return '';
 	}
 
+	let userConfig: Partial<Config> = {};
+
+	if (typeof configOrMinWidth === 'object') {
+		userConfig = configOrMinWidth;
+	} else {
+		if (!!configOrMinWidth) {
+			userConfig.minWidth = configOrMinWidth;
+		}
+
+		if (!!maxWidth) {
+			userConfig.maxWidth = maxWidth;
+		}
+
+		if (!!root) {
+			userConfig.root = root;
+		}
+	}
+
 	// Merge the global and local config
 	const mergedConfig = {
 		...getConfig(),
-		...config,
+		...userConfig,
 	};
 
-	const root = parseFloat(String(mergedConfig.root));
+	const rootSize = parseFloat(String(mergedConfig.root));
 
-	const minSizeRem = convertToRem(minSize, root);
-	const maxSizeRem = convertToRem(maxSize, root);
-	const minWidthRem = convertToRem(mergedConfig.minWidth, root);
-	const maxWidthRem = convertToRem(mergedConfig.maxWidth, root);
+	const minSizeRem = convertToRem(minSize, rootSize);
+	const maxSizeRem = convertToRem(maxSize, rootSize);
+	const minWidthRem = convertToRem(mergedConfig.minWidth, rootSize);
+	const maxWidthRem = convertToRem(mergedConfig.maxWidth, rootSize);
 
 	if (
 		[minSizeRem, maxSizeRem, minWidthRem, maxWidthRem].some((v) => isNaN(v))