Skip to content

BREAKING: make box-shadow color a color value, not a full color token #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 9, 2025
Merged

BREAKING: make box-shadow color a color value, not a full color token #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5ca7cf
BREAKING: remove redundant `$type` from box shadow type
Sep 8, 2025
74e10ca
fix: do not bundle colorjs.io
Sep 8, 2025
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
41 changes: 17 additions & 24 deletions src/destructure-box-shadow.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
}
}

Expand All @@ -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),
Expand All @@ -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),
Expand All @@ -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),
Expand All @@ -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),
Expand All @@ -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),
Expand All @@ -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),
Expand All @@ -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),
Expand All @@ -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),
Expand All @@ -141,15 +134,15 @@ 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),
spread: create_px_length(8),
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),
Expand All @@ -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),
Expand Down
25 changes: 11 additions & 14 deletions src/destructure-box-shadow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
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
unit: string
}

export type DestructuredShadow = {
color: ColorToken | UnparsedToken | undefined
color: ColorValue | undefined
offsetX: CssLength | undefined
offsetY: CssLength | undefined
blur: CssLength | undefined
Expand Down Expand Up @@ -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',
}
Expand All @@ -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
Expand All @@ -116,7 +114,6 @@ export function destructure_box_shadow(value: string): null | DestructuredShadow
}

const DIMENSION_ZERO = {
$type: 'dimension',
value: 0,
unit: 'px'
}
Expand All @@ -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
}
48 changes: 9 additions & 39 deletions src/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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,
},
}
],
Expand Down
10 changes: 6 additions & 4 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 & {
Expand Down
2 changes: 1 addition & 1 deletion vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down