Skip to content

Add resolver #113

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
asamuzaK merged 1 commit into from
May 17, 2026
Merged

Add resolver #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
79 changes: 42 additions & 37 deletions src/js/color.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

import { createCacheKey, getCache, setCache } from './cache';
import { isString } from './common';
import { resolveColor } from './resolve';
import { interpolateHue, roundToPrecision, splitValue } from './util';
import {
ColorChannels,
Expand Down Expand Up @@ -406,13 +405,13 @@ export const resolveInvalidColorValue = (
/**
* validate color components
* @param arr - color components
* @param [opt] - options
* @param [opt.alpha] - alpha channel
* @param [opt.minLength] - min length
* @param [opt.maxLength] - max length
* @param [opt.minRange] - min range
* @param [opt.maxRange] - max range
* @param [opt.validateRange] - validate range
* @param opt - options
* @param opt.alpha - alpha channel
* @param opt.minLength - min length
* @param opt.maxLength - max length
* @param opt.minRange - min range
* @param opt.maxRange - max range
* @param opt.validateRange - validate range
* @returns result - validated color components
*/
export const validateColorComponents = (
Expand Down Expand Up @@ -1238,7 +1237,7 @@ export const convertHexToXyz = (value: string): ColorChannels => {
/**
* parse rgb()
* @param value - rgb color value
* @param [opt] - options
* @param opt - options
* @returns parsed color - ['rgb', r, g, b, alpha], '(empty)', null
*/
export const parseRgb = (
Expand Down Expand Up @@ -1300,7 +1299,7 @@ export const parseRgb = (
/**
* parse hsl()
* @param value - hsl color value
* @param [opt] - options
* @param opt - options
* @returns parsed color - ['rgb', r, g, b, alpha], '(empty)', null
*/
export const parseHsl = (
Expand Down Expand Up @@ -1371,7 +1370,7 @@ export const parseHsl = (
/**
* parse hwb()
* @param value - hwb color value
* @param [opt] - options
* @param opt - options
* @returns parsed color - ['rgb', r, g, b, alpha], '(empty)', null
*/
export const parseHwb = (
Expand Down Expand Up @@ -1442,7 +1441,7 @@ export const parseHwb = (
/**
* parse lab()
* @param value - lab color value
* @param [opt] - options
* @param opt - options
* @returns parsed color
* - [xyz-d50, x, y, z, alpha], ['lab', l, a, b, alpha], '(empty)', null
*/
Expand Down Expand Up @@ -1531,7 +1530,7 @@ export const parseLab = (
/**
* parse lch()
* @param value - lch color value
* @param [opt] - options
* @param opt - options
* @returns parsed color
* - ['xyz-d50', x, y, z, alpha], ['lch', l, c, h, alpha], '(empty)', null
*/
Expand Down Expand Up @@ -1601,7 +1600,7 @@ export const parseLch = (
/**
* parse oklab()
* @param value - oklab color value
* @param [opt] - options
* @param opt - options
* @returns parsed color
* - ['xyz-d65', x, y, z, alpha], ['oklab', l, a, b, alpha], '(empty)', null
*/
Expand Down Expand Up @@ -1675,7 +1674,7 @@ export const parseOklab = (
/**
* parse oklch()
* @param value - oklch color value
* @param [opt] - options
* @param opt - options
* @returns parsed color
* - ['xyz-d65', x, y, z, alpha], ['oklch', l, c, h, alpha], '(empty)', null
*/
Expand Down Expand Up @@ -1754,7 +1753,7 @@ export const parseOklch = (
/**
* parse color()
* @param value - color function value
* @param [opt] - options
* @param opt - options
* @returns parsed color
* - ['xyz-(d50|d65)', x, y, z, alpha], [cs, r, g, b, alpha], '(empty)', null
*/
Expand Down Expand Up @@ -1904,7 +1903,7 @@ export const parseColorFunc = (
/**
* parse color value
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns parsed color
* - ['xyz-(d50|d65)', x, y, z, alpha], ['rgb', r, g, b, alpha]
* - value, '(empty)', null
Expand Down Expand Up @@ -2058,7 +2057,7 @@ export const parseColorValue = (
/**
* resolve color value
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns resolved color
* - [cs, v1, v2, v3, alpha], value, '(empty)', null
*/
Expand Down Expand Up @@ -2216,7 +2215,7 @@ export const resolveColorValue = (
/**
* resolve color()
* @param value - color function value
* @param [opt] - options
* @param opt - options
* @returns resolved color - [cs, v1, v2, v3, alpha], '(empty)', null
*/
export const resolveColorFunc = (
Expand Down Expand Up @@ -2275,7 +2274,7 @@ export const resolveColorFunc = (
/**
* convert color value to linear rgb
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns ColorChannels | null - [r, g, b, alpha] r|g|b|alpha: 0..1
*/
export const convertColorToLinearRgb = (
Expand Down Expand Up @@ -2334,7 +2333,7 @@ export const convertColorToLinearRgb = (
/**
* convert color value to rgb
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns ColorChannels | null - [r, g, b, alpha] r|g|b: 0..255 alpha: 0..1
*/
export const convertColorToRgb = (
Expand Down Expand Up @@ -2386,7 +2385,7 @@ export const convertColorToRgb = (
/**
* convert color value to xyz
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns ColorChannels | null - [x, y, z, alpha]
*/
export const convertColorToXyz = (
Expand Down Expand Up @@ -2441,7 +2440,7 @@ export const convertColorToXyz = (
/**
* convert color value to hsl
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns ColorChannels | null - [h, s, l, alpha], hue may be powerless
*/
export const convertColorToHsl = (
Expand Down Expand Up @@ -2491,7 +2490,7 @@ export const convertColorToHsl = (
/**
* convert color value to hwb
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns ColorChannels | null - [h, w, b, alpha], hue may be powerless
*/
export const convertColorToHwb = (
Expand Down Expand Up @@ -2541,7 +2540,7 @@ export const convertColorToHwb = (
/**
* convert color value to lab
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns ColorChannels | null - [l, a, b, alpha]
*/
export const convertColorToLab = (
Expand Down Expand Up @@ -2590,7 +2589,7 @@ export const convertColorToLab = (
/**
* convert color value to lch
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns ColorChannels | null - [l, c, h, alpha], hue may be powerless
*/
export const convertColorToLch = (
Expand Down Expand Up @@ -2639,7 +2638,7 @@ export const convertColorToLch = (
/**
* convert color value to oklab
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns ColorChannels | null - [l, a, b, alpha]
*/
export const convertColorToOklab = (
Expand Down Expand Up @@ -2683,7 +2682,7 @@ export const convertColorToOklab = (
/**
* convert color value to oklch
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @returns ColorChannels | null - [l, c, h, alpha], hue may be powerless
*/
export const convertColorToOklch = (
Expand Down Expand Up @@ -2727,12 +2726,14 @@ export const convertColorToOklch = (
/**
* resolve color-mix()
* @param value - color-mix color value
* @param [opt] - options
* @param opt - options
* @param resolver - resolver function
* @returns resolved color - [cs, v1, v2, v3, alpha], '(empty)', null
*/
export const resolveColorMix = (
value: string,
opt: Options = {}
opt: Options = {},
resolver: (v: string, o?: Options) => string | null = () => null
): SpecifiedColorChannels | string | null => {
if (isString(value)) {
value = value.toLowerCase().trim();
Expand Down Expand Up @@ -2766,9 +2767,13 @@ export const resolveColorMix = (
const items = value.match(REG_MIX_NEST) as RegExpMatchArray;
for (const item of items) {
if (item) {
let val = resolveColorMix(item, {
format: format === VAL_SPEC ? format : VAL_COMP
}) as ComputedColorChannels | string;
let val = resolveColorMix(
item,
{
format: format === VAL_SPEC ? format : VAL_COMP
},
resolver
) as ComputedColorChannels | string;
// computed value
if (Array.isArray(val)) {
const [cs, v1, v2, v3, v4] = val as ComputedColorChannels;
Expand Down Expand Up @@ -2811,10 +2816,10 @@ export const resolveColorMix = (
});
const [colorPartA = '', pctPartA = ''] = splitValue(partA);
const [colorPartB = '', pctPartB = ''] = splitValue(partB);
const specifiedColorA = resolveColor(colorPartA, {
const specifiedColorA = resolver(colorPartA, {
format: VAL_SPEC
}) as string;
const specifiedColorB = resolveColor(colorPartB, {
const specifiedColorB = resolver(colorPartB, {
format: VAL_SPEC
}) as string;
if (REG_MIX_IN_CS.test(csPart) && specifiedColorA && specifiedColorB) {
Expand All @@ -2838,8 +2843,8 @@ export const resolveColorMix = (
.replace(colorPartB, specifiedColorB);
parsed = true;
} else {
const resolvedColorA = resolveColor(colorPartA, opt);
const resolvedColorB = resolveColor(colorPartB, opt);
const resolvedColorA = resolver(colorPartA, opt);
const resolvedColorB = resolver(colorPartB, opt);
if (isString(resolvedColorA) && isString(resolvedColorB)) {
value = value
.replace(colorPartA, resolvedColorA)
Expand Down
29 changes: 18 additions & 11 deletions src/js/relative-color.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { createCacheKey, getCache, setCache } from './cache';
import { NAMED_COLORS, convertColorToRgb } from './color';
import { isString, isStringOrNumber } from './common';
import { resolveDimension, serializeCalc } from './css-calc-var';
import { resolveColor } from './resolve';
import { roundToPrecision, splitValue } from './util';
import {
ColorChannels,
Expand Down Expand Up @@ -312,12 +311,14 @@ export function resolveColorChannels(
/**
* extract origin color
* @param value - CSS color value
* @param [opt] - options
* @param opt - options
* @param resolver - resolver function
* @returns origin color value
*/
export function extractOriginColor(
value: string,
opt: Options = {}
opt: Options = {},
resolver: (v: string, o?: Options) => string | null = () => null
): string | null {
const { colorScheme = 'normal', currentColor = '', format = '' } = opt;
if (isString(value)) {
Expand Down Expand Up @@ -361,20 +362,23 @@ export function extractOriginColor(
.replace(new RegExp(`^${colorSpace}\\(`), '')
.replace(/\)$/, '');
const [, originColor = ''] = splitValue(colorParts);
const specifiedOriginColor = resolveColor(originColor, {
const specifiedOriginColor = resolver(originColor, {
colorScheme,
format: VAL_SPEC
}) as string;
if (specifiedOriginColor === '') {
if (!specifiedOriginColor) {
setCache(cacheKey, null);
return null;
}
if (format === VAL_SPEC) {
value = value.replace(originColor, specifiedOriginColor);
} else {
const resolvedOriginColor = resolveColor(specifiedOriginColor, opt);
const resolvedOriginColor = resolver(specifiedOriginColor, opt);
if (isString(resolvedOriginColor)) {
value = value.replace(originColor, resolvedOriginColor);
} else {
setCache(cacheKey, null);
return null;
}
}
}
Expand All @@ -390,7 +394,7 @@ export function extractOriginColor(
return null;
}
} else if (format === VAL_SPEC) {
const resolvedOriginColor = resolveColor(originColor, opt);
const resolvedOriginColor = resolver(originColor, opt);
if (isString(resolvedOriginColor)) {
value = value.replace(originColor, resolvedOriginColor);
}
Expand Down Expand Up @@ -462,7 +466,8 @@ export function extractOriginColor(
}
const resolvedOriginColor = resolveRelativeColor(
originColor.join('').trim(),
opt
opt,
resolver
);
if (resolvedOriginColor === null) {
setCache(cacheKey, null);
Expand All @@ -489,12 +494,14 @@ export function extractOriginColor(
/**
* resolve relative color
* @param value - CSS relative color value
* @param [opt] - options
* @param opt - options
* @param resolver - resolver function
* @returns resolved value
*/
export function resolveRelativeColor(
value: string,
opt: Options = {}
opt: Options = {},
resolver: (v: string, o?: Options) => string | null = () => null
): string | null {
const { format = '' } = opt;
if (isString(value)) {
Expand Down Expand Up @@ -523,7 +530,7 @@ export function resolveRelativeColor(
if (cachedResult !== false) {
return cachedResult.item as string | null;
}
const originColor = extractOriginColor(value, opt);
const originColor = extractOriginColor(value, opt, resolver);
if (originColor === null) {
setCache(cacheKey, null);
return null;
Expand Down
Loading
Loading