diff --git a/src/destructure-box-shadow.test.ts b/src/destructure-box-shadow.test.ts index 1352009..a5d43fb 100644 --- a/src/destructure-box-shadow.test.ts +++ b/src/destructure-box-shadow.test.ts @@ -1,27 +1,20 @@ import { test, expect, describe } from 'vitest' import { destructure_box_shadow } from './destructure-box-shadow.js' -import { ColorToken, EXTENSION_AUTHORED_AS } from './types.js' +import { ColorValue, EXTENSION_AUTHORED_AS } from './types.js' import { color_to_token } from './colors.js' -function create_px_length(value: number): { value: number, unit: string, $type: 'dimension' } { +function create_px_length(value: number): { value: number, unit: string } { return { - $type: 'dimension', value, unit: 'px' } } -function create_color_token(): ColorToken { +function create_color_value(): ColorValue { return { - $type: 'color', - $value: { - colorSpace: 'srgb', - components: [0, 0, 0], - alpha: 1, - }, - $extensions: { - [EXTENSION_AUTHORED_AS]: '#000' - } + colorSpace: 'srgb', + components: [0, 0, 0], + alpha: 1, } } @@ -37,7 +30,7 @@ test('handles invalid input', () => { test('0px 0px 0px 0px #000', () => { expect(destructure_box_shadow('0px 0px 0px 0px #000')).toEqual([ { - color: create_color_token(), + color: create_color_value(), offsetX: create_px_length(0), offsetY: create_px_length(0), blur: create_px_length(0), @@ -50,7 +43,7 @@ test('0px 0px 0px 0px #000', () => { test('adds units when omitted: 0 0 0 0 #000', () => { expect(destructure_box_shadow('0 0 0 0 #000')).toEqual([ { - color: create_color_token(), + color: create_color_value(), offsetX: create_px_length(0), offsetY: create_px_length(0), blur: create_px_length(0), @@ -63,7 +56,7 @@ test('adds units when omitted: 0 0 0 0 #000', () => { test('offsetX and offsetY: 2px 4px #000', () => { expect(destructure_box_shadow('2px 4px #000')).toEqual([ { - color: create_color_token(), + color: create_color_value(), offsetX: create_px_length(2), offsetY: create_px_length(4), blur: create_px_length(0), @@ -76,7 +69,7 @@ test('offsetX and offsetY: 2px 4px #000', () => { test('offsetX, offsetY and blur: 2px 4px 6px #000', () => { expect(destructure_box_shadow('2px 4px 6px #000')).toEqual([ { - color: create_color_token(), + color: create_color_value(), offsetX: create_px_length(2), offsetY: create_px_length(4), blur: create_px_length(6), @@ -89,7 +82,7 @@ test('offsetX, offsetY and blur: 2px 4px 6px #000', () => { test('offsetX, offsetY, blur and spread: 2px 4px 6px 8px #000', () => { expect(destructure_box_shadow('2px 4px 6px 8px #000')).toEqual([ { - color: create_color_token(), + color: create_color_value(), offsetX: create_px_length(2), offsetY: create_px_length(4), blur: create_px_length(6), @@ -102,7 +95,7 @@ test('offsetX, offsetY, blur and spread: 2px 4px 6px 8px #000', () => { test('inset: 2px 4px 6px 8px #000 inset', () => { expect(destructure_box_shadow('2px 4px 6px 8px #000 inset')).toEqual([ { - color: create_color_token(), + color: create_color_value(), offsetX: create_px_length(2), offsetY: create_px_length(4), blur: create_px_length(6), @@ -115,7 +108,7 @@ test('inset: 2px 4px 6px 8px #000 inset', () => { test('INSET: 2px 4px 6px 8px #000 inset', () => { expect(destructure_box_shadow('2px 4px 6px 8px #000 INSET')).toEqual([ { - color: create_color_token(), + color: create_color_value(), offsetX: create_px_length(2), offsetY: create_px_length(4), blur: create_px_length(6), @@ -128,7 +121,7 @@ test('INSET: 2px 4px 6px 8px #000 inset', () => { test('color in a different order: #000 2px 4px 6px 8px', () => { expect(destructure_box_shadow('#000 2px 4px 6px 8px')).toEqual([ { - color: create_color_token(), + color: create_color_value(), offsetX: create_px_length(2), offsetY: create_px_length(4), blur: create_px_length(6), @@ -141,7 +134,7 @@ test('color in a different order: #000 2px 4px 6px 8px', () => { test('multiple shadows', () => { expect(destructure_box_shadow('2px 4px 6px 8px #000, 0 0 0 0 #fff inset')).toEqual([ { - color: create_color_token(), + color: create_color_value(), offsetX: create_px_length(2), offsetY: create_px_length(4), blur: create_px_length(6), @@ -149,7 +142,7 @@ test('multiple shadows', () => { inset: false }, { - color: color_to_token('#fff'), + color: color_to_token('#fff')?.$value, offsetX: create_px_length(0), offsetY: create_px_length(0), blur: create_px_length(0), @@ -172,7 +165,7 @@ describe('color formats', () => { test(`1px ${color}`, () => { expect(destructure_box_shadow(`1px ${color}`)).toEqual([ { - color: color_to_token(color), + color: color_to_token(color)?.$value, offsetX: create_px_length(1), offsetY: create_px_length(0), blur: create_px_length(0), diff --git a/src/destructure-box-shadow.ts b/src/destructure-box-shadow.ts index 3247218..3a35c66 100644 --- a/src/destructure-box-shadow.ts +++ b/src/destructure-box-shadow.ts @@ -1,6 +1,6 @@ import { parse, type CssNode, type Value } from 'css-tree' import { named_colors, system_colors, color_functions, color_to_token } from './colors.js' -import type { ColorToken, UnparsedToken } from './types.js' +import type { ColorToken, ColorValue } from './types.js' type CssLength = { value: number @@ -8,7 +8,7 @@ type CssLength = { } export type DestructuredShadow = { - color: ColorToken | UnparsedToken | undefined + color: ColorValue | undefined offsetX: CssLength | undefined offsetY: CssLength | undefined blur: CssLength | undefined @@ -53,19 +53,17 @@ export function destructure_box_shadow(value: string): null | DestructuredShadow current_shadow.inset = true } else if (named_colors.has(node.name) || system_colors.has(node.name)) { let color_token = color_to_token(node.name) - if (color_token === null) { + if (color_token === null || color_token.$type !== 'color') { return } - current_shadow.color = color_token + current_shadow.color = color_token.$value } } else if (node.type === 'Dimension' || (node.type === 'Number' && node.value === '0')) { let length = node.type === 'Dimension' ? { - $type: 'dimension', value: Number(node.value), unit: node.unit } : { - $type: 'dimension', value: 0, unit: 'px', } @@ -83,24 +81,24 @@ export function destructure_box_shadow(value: string): null | DestructuredShadow else if (node.type === 'Function') { if (color_functions.has(node.name)) { let color_token = color_to_token(generate(node)) - if (color_token === null) { + if (color_token === null || color_token.$type !== 'color') { return } - current_shadow.color = color_token + current_shadow.color = color_token.$value } else if (node.name.toLowerCase() === 'var' && !current_shadow.color) { let color_token = color_to_token(generate(node)) - if (color_token === null) { + if (color_token === null || color_token.$type !== 'color') { return } - current_shadow.color = color_token + current_shadow.color = color_token.$value } } else if (node.type === 'Hash') { let color_token = color_to_token(generate(node)) - if (color_token === null) { + if (color_token === null || color_token.$type !== 'color') { return } - current_shadow.color = color_token + current_shadow.color = color_token.$value } else if (node.type === 'Operator' && node.value === ',') { // Start a new shadow, but only after we've made sure that the current shadow is valid @@ -116,7 +114,6 @@ export function destructure_box_shadow(value: string): null | DestructuredShadow } const DIMENSION_ZERO = { - $type: 'dimension', value: 0, unit: 'px' } @@ -140,7 +137,7 @@ function complete_shadow_token(token: DestructuredShadow) { token.spread = DIMENSION_ZERO } if (!token.color) { - token.color = color_to_token('#000')! + token.color = (color_to_token('#000') as ColorToken)?.$value } return token } diff --git a/src/index.test.ts b/src/index.test.ts index 4dbaa69..8d892a8 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -318,36 +318,26 @@ describe('css_to_tokens', () => { $type: 'shadow', $value: { offsetX: { - $type: 'dimension', value: 0, unit: 'px' }, offsetY: { - $type: 'dimension', value: 0, unit: 'px' }, blur: { - $type: 'dimension', value: 10, unit: 'px' }, spread: { - $type: 'dimension', value: 0, unit: 'px' }, inset: false, color: { - $type: 'color', - $value: { - colorSpace: 'srgb', - components: [0, 0, 0], - alpha: 0.5, - }, - $extensions: { - [EXTENSION_AUTHORED_AS]: 'rgba(0, 0, 0, 0.5)' - } + colorSpace: 'srgb', + components: [0, 0, 0], + alpha: 0.5, }, }, $extensions: { @@ -369,70 +359,50 @@ describe('css_to_tokens', () => { $value: [ { offsetX: { - $type: 'dimension', value: 0, unit: 'px' }, offsetY: { - $type: 'dimension', value: 0, unit: 'px' }, blur: { - $type: 'dimension', value: 10, unit: 'px' }, spread: { - $type: 'dimension', value: 0, unit: 'px' }, inset: false, color: { - $type: 'color', - $value: { - colorSpace: 'srgb', - components: [0, 0, 0], - alpha: 0.5, - }, - $extensions: { - [EXTENSION_AUTHORED_AS]: 'rgba(0, 0, 0, 0.5)' - } + colorSpace: 'srgb', + components: [0, 0, 0], + alpha: 0.5, }, }, { offsetX: { - $type: 'dimension', value: 0, unit: 'px' }, offsetY: { - $type: 'dimension', value: 0, unit: 'px' }, blur: { - $type: 'dimension', value: 10, unit: 'px' }, spread: { - $type: 'dimension', value: 0, unit: 'px' }, inset: false, color: { - $type: 'color', - $value: { - colorSpace: 'srgb', - components: [0, 0, 0], - alpha: 0.5, - }, - $extensions: { - [EXTENSION_AUTHORED_AS]: 'rgba(0, 0, 0, 0.5)' - } + colorSpace: 'srgb', + components: [0, 0, 0], + alpha: 0.5, }, } ], diff --git a/src/types.ts b/src/types.ts index c5761ae..20032e4 100644 --- a/src/types.ts +++ b/src/types.ts @@ -44,12 +44,14 @@ export type ColorToken = BaseToken & { } } +export type DimensionValue = { + value: number + unit: string +} + export type DimensionToken = BaseToken & { $type: 'dimension' - $value: { - value: number - unit: string - } + $value: DimensionValue } export type NumberToken = BaseToken & { diff --git a/vite.config.js b/vite.config.js index 78c59d5..69f32e2 100644 --- a/vite.config.js +++ b/vite.config.js @@ -10,7 +10,7 @@ export default defineConfig({ formats: ["es"], }, rollupOptions: { - external: Object.keys(pkg.dependencies), + external: Object.keys(pkg.dependencies).concat('colorjs.io/fn'), }, }, plugins: [