Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 | 7929x 7929x 7929x 18908x 398x 18510x 7531x 7530x 7530x 7530x 7530x 6920x 610x 399x 399x 399x 211x 4743x 2850x 1890x 960x 474x 474x 190x 186x 4x 4x 2x 2x 760x 2x 758x 758x 758x 665x 3990x 3990x 183x 3990x 95x 95x 94x 94x 95x 475x 475x 474x 95x 95x 95x 2850x 2850x 760x 760x 760x 2850x 95x 2755x 2850x 95x | // SPDX-License-Identifier: MIT
// Helper functions for CSS generation
import { hexToHsl } from '../bulma.js';
import type { ThemeTokens } from '../types.js';
import type {
CSSVariableMapping,
HSLVariableMapping,
HSLColorMapping,
ComponentTokenMapping,
} from './types.js';
/**
* Unified token path resolver options.
*/
interface ResolveTokenOptions {
/** Optional path prefix (e.g., 'components' for component tokens) */
prefix?: string;
/** Fallback path to try if primary path fails */
fallbackPath?: string;
}
/**
* Traverses an object using a dot-separated path.
* Internal helper used by all token resolution functions.
*/
function traversePath(obj: unknown, path: string): unknown {
const parts = path.split('.');
let current = obj;
for (const part of parts) {
if (current === null || current === undefined || typeof current !== 'object') {
return undefined;
}
// Safe: path is from hardcoded TOKEN_MAPPINGS, not user input
// nosemgrep: prototype-pollution-loop
current = (current as Record<string, unknown>)[part];
}
return current;
}
/**
* Unified token path resolver.
* Gets a value from tokens using a dot-separated path with optional prefix and fallback.
*/
export function resolveTokenPath(
tokens: ThemeTokens,
path: string,
options?: ResolveTokenOptions
): string | undefined {
const { prefix, fallbackPath } = options ?? {};
// Build full path with optional prefix
const fullPath = prefix ? `${prefix}.${path}` : path;
// Try primary path
const value = traversePath(tokens, fullPath);
if (typeof value === 'string') {
return value;
}
// Try fallback path if provided
if (fallbackPath) {
const fallbackValue = traversePath(tokens, fallbackPath);
Eif (typeof fallbackValue === 'string') {
return fallbackValue;
}
}
return undefined;
}
/**
* Gets a nested value from an object using a dot-separated path.
* Convenience wrapper around resolveTokenPath.
*/
export function getTokenValue(tokens: ThemeTokens, path: string): string | undefined {
return resolveTokenPath(tokens, path);
}
/**
* Gets a component token value with fallback.
* Convenience wrapper around resolveTokenPath for component tokens.
*/
export function getComponentTokenValue(
tokens: ThemeTokens,
componentPath: string,
fallbackPath: string
): string {
if (!tokens.components) {
return fallbackPath ? (resolveTokenPath(tokens, fallbackPath) ?? '') : '';
}
return (
resolveTokenPath(tokens, componentPath, { prefix: 'components', fallbackPath }) ?? ''
);
}
/**
* Converts a hex color to an HSL string.
*/
export function hexToHslString(hex: string): string {
const hsl = hexToHsl(hex);
return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
}
/**
* Escapes a string for use in CSS selectors.
* Fallback implements CSS.escape algorithm per CSSOM spec when native is unavailable.
*/
export function escapeCssId(id: string): string {
if (typeof CSS !== 'undefined' && CSS.escape) {
return CSS.escape(id);
}
// Fallback: escape per CSSOM spec (simplified for valid identifier chars)
// oxlint-disable-next-line no-control-regex -- intentionally matching control characters
return id.replace(/[\0-\x1f\x7f]|^-?[0-9]|[^a-zA-Z0-9_-]/g, (char) => {
if (char === '\0') return '\uFFFD';
const code = char.charCodeAt(0);
return '\\' + code.toString(16) + ' ';
});
}
/**
* Validates and sanitizes a CSS color value.
* Returns the value if valid, or a transparent fallback if invalid.
*/
export function sanitizeCssColor(value: string | undefined): string {
if (!value || typeof value !== 'string') {
return 'transparent';
}
// Allow hex colors, rgb/rgba/hsl/hsla functions, and named colors
const trimmed = value.trim();
// Hex color validation
Eif (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(trimmed)) {
return trimmed;
}
// RGB/RGBA/HSL/HSLA function validation
if (/^(rgb|rgba|hsl|hsla)\([^)]+\)$/i.test(trimmed)) {
// Additional check: no semicolons or braces in the value
if (!/[;{}]/.test(trimmed)) {
return trimmed;
}
}
// Named color validation (common named colors only)
const namedColors = new Set([
'transparent', 'inherit', 'currentColor', 'initial', 'unset',
'black', 'white', 'red', 'green', 'blue', 'yellow', 'orange',
'purple', 'gray', 'grey', 'pink', 'brown', 'cyan', 'magenta',
]);
if (namedColors.has(trimmed.toLowerCase())) {
return trimmed;
}
// Default fallback for invalid values
return 'transparent';
}
/**
* Generates CSS variable declarations from a mapping array.
*/
export function generateVariables(tokens: ThemeTokens, mappings: CSSVariableMapping[]): string[] {
return mappings.map((mapping) => {
let value = getTokenValue(tokens, mapping.tokenPath);
if (value === undefined && mapping.fallbackPath) {
value = getTokenValue(tokens, mapping.fallbackPath);
}
return ` ${mapping.cssVar}: ${value ?? ''};`;
});
}
/**
* Generates HSL component variables (h, s%, l%).
*/
export function generateHSLComponents(tokens: ThemeTokens, mapping: HSLVariableMapping): string[] {
const hex = getTokenValue(tokens, mapping.tokenPath);
if (!hex) return [];
const hsl = hexToHsl(hex);
return [
` ${mapping.hVar}: ${hsl.h};`,
` ${mapping.sVar}: ${hsl.s}%;`,
` ${mapping.lVar}: ${hsl.l}%;`,
];
}
/**
* Generates HSL color variables.
*/
export function generateHSLColors(tokens: ThemeTokens, mappings: HSLColorMapping[]): string[] {
return mappings.map((mapping) => {
const hex = getTokenValue(tokens, mapping.tokenPath);
if (!hex) return ` ${mapping.cssVar}: ;`;
return ` ${mapping.cssVar}: ${hexToHslString(hex)};`;
});
}
/**
* Generates component token variables with fallbacks.
*/
export function generateComponentVariables(
tokens: ThemeTokens,
mappings: ComponentTokenMapping[]
): string[] {
const lines: string[] = [];
let currentComponent = '';
for (const mapping of mappings) {
const component = mapping.componentPath.split('.')[0] ?? '';
// Add comment for new component section
if (component && component !== currentComponent) {
const componentName = component.charAt(0).toUpperCase() + component.slice(1);
lines.push(` /* ${componentName} component tokens */`);
currentComponent = component;
}
// Special case for modal.bg which has a non-token fallback
let value: string;
if (mapping.componentPath === 'modal.bg' && !mapping.fallbackPath) {
value = getComponentTokenValue(tokens, mapping.componentPath, '') || 'rgba(10, 10, 10, 0.86)';
} else {
value = getComponentTokenValue(tokens, mapping.componentPath, mapping.fallbackPath);
}
lines.push(` ${mapping.cssVar}: ${value};`);
}
return lines;
}
|