Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions src/colors.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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.
Expand Down
16 changes: 11 additions & 5 deletions src/destructure-line-height.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
18 changes: 10 additions & 8 deletions src/destructure-line-height.ts
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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)
Expand All @@ -47,4 +49,4 @@ export function destructure_line_height(value: string): Length | number | null {
}

return null
}
}
1 change: 1 addition & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 8 additions & 2 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -32,7 +39,6 @@ export type UnparsedToken = BaseToken & {
}

export type ColorSpace =
| string
| 'srgb'
| 'display-p3'
| 'hsl'
Expand Down Expand Up @@ -67,7 +73,7 @@ export type ColorToken = BaseToken & {

export type DimensionValue = {
value: number
unit: string
unit: Unit
}

export type DimensionToken = BaseToken & {
Expand Down