fix: make Length type spec-compliant; expose color_to_token(); `col… (#38)

* fix: make Length type spec-compliant; expose `color_to_token()`; `colorSpace` is no longer a string

* fix: casing

Author: bartveneman

src/colors.ts

@@ -1,5 +1,5 @@
 import { colorKeywords as color_keywords, cssKeywords as css_keywords } from '@projectwallace/css-analyzer'
-import { EXTENSION_AUTHORED_AS, type ColorToken, type ColorValue, type UnparsedToken } from './types.js'
+import { type ColorValue, type ColorSpace as tColorSpace } from './types.js'
 import {
 	parse,
 	ColorSpace,
@@ -25,7 +25,7 @@ import {
 	OKLab,
 	OKLCH,
 	OKLrab,
-} from "colorjs.io/fn"
+} from 'colorjs.io/fn'
 
 // Register color spaces for parsing and converting
 ColorSpace.register(sRGB) // Parses keywords and hex colors
@@ -77,13 +77,9 @@ export function color_to_token(color: string): ColorValue | null {
 		let [component_a, component_b, component_c] = parsed_color.coords
 
 		return {
-			colorSpace: parsed_color.spaceId,
-			components: [
-				component_a ?? 'none',
-				component_b ?? 'none',
-				component_c ?? 'none',
-			],
-			alpha: parsed_color.alpha ?? 0,
+			colorSpace: parsed_color.spaceId as tColorSpace,
+			components: [component_a ?? 'none', component_b ?? 'none', component_c ?? 'none'],
+			alpha: parsed_color.alpha ?? 1,
 		}
 	} catch (error) {
 		// A catch for edge cases that we don't support yet.

src/destructure-line-height.test.ts

@@ -27,14 +27,20 @@ test('number', () => {
 	expect.soft(destructure_line_height('1e2')).toEqual(100)
 })
 
-test('length', () => {
+test('lengths with spec-compliant units', () => {
 	expect.soft(destructure_line_height('1px')).toEqual({ value: 1, unit: 'px' })
-	expect.soft(destructure_line_height('1em')).toEqual({ value: 1, unit: 'em' })
 	expect.soft(destructure_line_height('1rem')).toEqual({ value: 1, unit: 'rem' })
-	expect.soft(destructure_line_height('1cm')).toEqual({ value: 1, unit: 'cm' })
-
 	expect.soft(destructure_line_height('1.1px')).toEqual({ value: 1.1, unit: 'px' })
-	expect.soft(destructure_line_height('1e2em')).toEqual({ value: 100, unit: 'em' })
+	expect.soft(destructure_line_height('100px')).toEqual({ value: 100, unit: 'px' })
+	expect.soft(destructure_line_height('1e2rem')).toEqual({ value: 100, unit: 'rem' })
+	expect.soft(destructure_line_height('1REM')).toEqual({ value: 1, unit: 'rem' })
+	expect.soft(destructure_line_height('1PX')).toEqual({ value: 1, unit: 'px' })
+})
+
+test('lenghts with unsupported units', () => {
+	expect.soft(destructure_line_height('1em')).toEqual(null)
+	expect.soft(destructure_line_height('1cm')).toEqual(null)
+	expect.soft(destructure_line_height('1e2em')).toEqual(null)
 })
 
 test('zero', () => {

src/destructure-line-height.ts

@@ -1,9 +1,7 @@
 import { parse, type Value } from 'css-tree'
+import { type Length, type Unit } from './types'
 
-type Length = {
-	value: number
-	unit: string
-}
+const ALLOWED_UNITS = new Set(['px', 'rem'])
 
 /**
  * @description Destructure a line-height from a string
@@ -25,10 +23,14 @@ export function destructure_line_height(value: string): Length | number | null {
 			if (value === 0) {
 				return 0
 			}
-			return {
-				value,
-				unit: maybe_dimension.unit
+			let unit = maybe_dimension.unit.toLowerCase()
+			if (ALLOWED_UNITS.has(unit)) {
+				return {
+					value,
+					unit: unit as Unit,
+				}
 			}
+			return null
 		}
 		case 'Number': {
 			return Number(maybe_dimension.value)
@@ -47,4 +49,4 @@ export function destructure_line_height(value: string): Length | number | null {
 	}
 
 	return null
-}
+}

src/index.ts

@@ -22,6 +22,7 @@ import {
 	type ShadowToken,
 } from './types.js'
 import { color_to_token } from './colors.js'
+export { color_to_token } from './colors.js'
 
 export {
 	EXTENSION_AUTHORED_AS,

src/types.ts

@@ -16,6 +16,13 @@ export type BaseToken = {
 	}
 }
 
+export type Unit = 'rem' | 'px'
+
+export type Length = {
+	value: number
+	unit: Unit
+}
+
 export type DurationValue = {
 	value: number
 	unit: 'ms'
@@ -32,7 +39,6 @@ export type UnparsedToken = BaseToken & {
 }
 
 export type ColorSpace =
-	| string
 	| 'srgb'
 	| 'display-p3'
 	| 'hsl'
@@ -67,7 +73,7 @@ export type ColorToken = BaseToken & {
 
 export type DimensionValue = {
 	value: number
-	unit: string
+	unit: Unit
 }
 
 export type DimensionToken = BaseToken & {