Handle number theme values (#261)

Internal utilities assumed theme values would always be `string` typed,
but in some cases they may be `number`s.

Fixes #260

Author: stormwarning

.changeset/free-geckos-decide.md

@@ -0,0 +1,7 @@
+---
+'tailwindcss-capsize': patch
+---
+
+Handle `number` theme values
+
+Internal utilities assumed theme values would always be `string` typed, but in some cases they may be `number`s.

__tests__/plugin.test.ts

@@ -328,7 +328,7 @@ describe('Plugin', () => {
 					},
 					lineHeight: {
 						sm: '100%',
-						md: '1.5',
+						md: 1.5,
 					},
 				},
 			}).then((result) =>

__tests__/utilities.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest'
+
+import { getRelativeValue, isRelativeValue, normalizeValue } from '../src/utilities.js'
+
+describe('isRelativeValue', () => {
+	it('returns true for a percentage value', () => {
+		expect(isRelativeValue('0%')).toBe(true)
+		expect(isRelativeValue('100%')).toBe(true)
+		expect(isRelativeValue('150%')).toBe(true)
+		expect(isRelativeValue('20px')).toBe(false)
+		expect(isRelativeValue('1.5rem')).toBe(false)
+	})
+	it('returns true for a unitless value', () => {
+		expect(isRelativeValue('')).toBe(false)
+		expect(isRelativeValue('0')).toBe(true)
+		expect(isRelativeValue('1.5')).toBe(true)
+		expect(isRelativeValue(0)).toBe(true)
+		expect(isRelativeValue(1.5)).toBe(true)
+	})
+})
+
+describe('getRelativeValue', () => {
+	it('returns a floating point number from a percentage value', () => {
+		expect(getRelativeValue('0%')).toBe(0)
+		expect(getRelativeValue('100%')).toBe(1)
+		expect(getRelativeValue('150%')).toBe(1.5)
+		expect(getRelativeValue('20px')).toBe(20)
+		expect(getRelativeValue('1.5rem')).toBe(1.5)
+	})
+	it('returns a floating point number from a unitless value', () => {
+		expect(getRelativeValue('0')).toBe(0)
+		expect(getRelativeValue('1')).toBe(1)
+		expect(getRelativeValue('1.5')).toBe(1.5)
+		expect(getRelativeValue('150')).toBe(150)
+		expect(getRelativeValue(0)).toBe(0)
+		expect(getRelativeValue(1)).toBe(1)
+		expect(getRelativeValue(1.5)).toBe(1.5)
+		expect(getRelativeValue(150)).toBe(150)
+		expect(getRelativeValue('20px')).toBe(20)
+		expect(getRelativeValue('1.5rem')).toBe(1.5)
+	})
+})
+
+describe('normalizeValue', () => {
+	it('returns a number from a pixel value', () => {
+		expect(normalizeValue('0px', 16)).toBe(0)
+		expect(normalizeValue('20px', 16)).toBe(20)
+	})
+	it('returns a number from a rem value', () => {
+		expect(normalizeValue('0rem', 16)).toBe(0)
+		expect(normalizeValue('1rem', 16)).toBe(16)
+		expect(normalizeValue('1.5rem', 16)).toBe(24)
+	})
+	it('returns a number from a number value', () => {
+		expect(normalizeValue(0, 16)).toBe(0)
+		expect(normalizeValue(20, 16)).toBe(20)
+	})
+})

src/utilities.ts

@@ -1,30 +1,30 @@
-type FontSizeValue = [string, Record<'lineHeight', string>]
+type FontSizeValue = string | number | [string | number, Record<'lineHeight', string | number>]
+
+export function isRelativeValue(value: string | number) {
+	value = String(value)
 
-export function isRelativeValue(value: string) {
 	let isPercentValue = value.endsWith('%')
 	let isUnitlessValue = /\d$/.test(value)
 
 	return isPercentValue || isUnitlessValue
 }
 
-export function getRelativeValue(value: string) {
+export function getRelativeValue(value: string | number) {
+	value = String(value)
+
 	let isPercentValue = value.endsWith('%')
 
 	return isPercentValue
 		? Number.parseInt(value.replace('%', ''), 10) / 100
 		: Number.parseFloat(value)
 }
 
-export function normalizeValue(value: string | FontSizeValue, root: number, fs?: number): number {
-	value = Array.isArray(value) ? value[0] : value
+export function normalizeValue(value: FontSizeValue, root: number): number {
+	value = Array.isArray(value) ? String(value[0]) : String(value)
 
 	if (value.endsWith('px')) return Number.parseFloat(value.replace('px', ''))
 	if (value.endsWith('rem')) return root * Number.parseFloat(value.replace('rem', ''))
 
-	if (isRelativeValue(value) && fs !== undefined) {
-		return fs * getRelativeValue(value)
-	}
-
 	return Number.parseInt(value, 10)
 }