or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

css-style-declaration.md css-value-parsing.md index.md property-management.md utility-functions.md

tile.json

Utility Functions

Helper functions for CSS property name transformation, string manipulation, and property descriptor creation that support the core CSSStyleDeclaration functionality.

Capabilities

Property Name Transformation

Functions for converting between different CSS property naming conventions.

/**
 * Converts dashed CSS property names to camelCase
 * @param dashed - Dashed property name (e.g., "background-color")
 * @returns CamelCase property name (e.g., "backgroundColor")
 */
function dashedToCamelCase(dashed: string): string;

/**
 * Converts camelCase property names to dashed format
 * @param camelCase - CamelCase property name (e.g., "backgroundColor")
 * @returns Dashed property name (e.g., "background-color")
 */
function camelCaseToDashed(camelCase: string): string;

Usage Examples:

const { dashedToCamelCase, camelCaseToDashed } = require("cssstyle/lib/utils/camelize");

// Dashed to camelCase
console.log(dashedToCamelCase("background-color")); // "backgroundColor"
console.log(dashedToCamelCase("font-size")); // "fontSize"
console.log(dashedToCamelCase("border-top-width")); // "borderTopWidth"

// WebKit prefix handling
console.log(dashedToCamelCase("-webkit-transform")); // "webkitTransform"

// Custom properties pass through unchanged
console.log(dashedToCamelCase("--main-color")); // "--main-color"

// CamelCase to dashed
console.log(camelCaseToDashed("backgroundColor")); // "background-color"
console.log(camelCaseToDashed("fontSize")); // "font-size"
console.log(camelCaseToDashed("borderTopWidth")); // "border-top-width"

// WebKit prefix handling
console.log(camelCaseToDashed("webkitTransform")); // "-webkit-transform"
console.log(camelCaseToDashed("WebkitTransform")); // "-webkit-transform"

String Case Conversion

ASCII case conversion utilities following WHATWG Infra standard.

/**
 * Converts string to ASCII lowercase
 * @param s - String to convert
 * @returns Lowercase string
 */
function asciiLowercase(s: string): string;

/**
 * Converts string to ASCII uppercase
 * @param s - String to convert
 * @returns Uppercase string
 */
function asciiUppercase(s: string): string;

Usage Examples:

const { asciiLowercase, asciiUppercase } = require("cssstyle/lib/utils/strings");

console.log(asciiLowercase("BACKGROUND-COLOR")); // "background-color"
console.log(asciiLowercase("Font-Size")); // "font-size"

console.log(asciiUppercase("background-color")); // "BACKGROUND-COLOR"
console.log(asciiUppercase("font-size")); // "FONT-SIZE"

// Only ASCII characters are affected
console.log(asciiLowercase("CAFÉ")); // "cafÉ" (É remains unchanged)

String Whitespace Handling

Utilities for handling whitespace according to WHATWG specifications.

/**
 * Strips newline characters from string
 * @param s - String to process
 * @returns String with newlines removed
 */
function stripNewlines(s: string): string;

/**
 * Strips leading and trailing ASCII whitespace
 * @param s - String to process
 * @returns Trimmed string
 */
function stripLeadingAndTrailingASCIIWhitespace(s: string): string;

/**
 * Strips and collapses ASCII whitespace
 * @param s - String to process
 * @returns String with collapsed whitespace
 */
function stripAndCollapseASCIIWhitespace(s: string): string;

Usage Examples:

const { 
  stripNewlines, 
  stripLeadingAndTrailingASCIIWhitespace,
  stripAndCollapseASCIIWhitespace 
} = require("cssstyle/lib/utils/strings");

// Strip newlines
console.log(stripNewlines("line1\nline2\rline3")); // "line1line2line3"

// Strip leading/trailing whitespace
console.log(stripLeadingAndTrailingASCIIWhitespace("  text  ")); // "text"
console.log(stripLeadingAndTrailingASCIIWhitespace("\t\ntext\r\f")); // "text"

// Strip and collapse whitespace
console.log(stripAndCollapseASCIIWhitespace("  multiple   spaces  ")); // "multiple spaces"
console.log(stripAndCollapseASCIIWhitespace("text\t\nwith\r\fwhitespace")); // "text with whitespace"

String Splitting Utilities

Functions for splitting strings according to CSS and HTML specifications.

/**
 * Splits string on ASCII whitespace
 * @param str - String to split
 * @returns Array of tokens split on whitespace
 */
function splitOnASCIIWhitespace(str: string): string[];

/**
 * Splits string on commas with whitespace trimming
 * @param str - String to split
 * @returns Array of tokens split on commas
 */
function splitOnCommas(str: string): string[];

Usage Examples:

const { splitOnASCIIWhitespace, splitOnCommas } = require("cssstyle/lib/utils/strings");

// Split on whitespace
console.log(splitOnASCIIWhitespace("red blue green"));
// ["red", "blue", "green"]

console.log(splitOnASCIIWhitespace("  word1   word2  "));
// ["word1", "word2"]

// Split on commas
console.log(splitOnCommas("Arial, Helvetica, sans-serif"));
// ["Arial", "Helvetica", "sans-serif"]

console.log(splitOnCommas("red, blue , green"));
// ["red", "blue", "green"] (whitespace trimmed)

String Validation

Validation utilities for common string patterns.

/**
 * Validates simple hex color format (#RRGGBB)
 * @param s - String to validate
 * @returns True if valid simple color format
 */
function isValidSimpleColor(s: string): boolean;

/**
 * ASCII case-insensitive string comparison
 * @param a - First string
 * @param b - Second string
 * @returns True if strings match case-insensitively
 */
function asciiCaseInsensitiveMatch(a: string, b: string): boolean;

/**
 * Validates floating point number format
 * @param str - String to validate
 * @returns True if valid floating point format
 */
function isValidFloatingPointNumber(str: string): boolean;

Usage Examples:

const { 
  isValidSimpleColor, 
  asciiCaseInsensitiveMatch,
  isValidFloatingPointNumber 
} = require("cssstyle/lib/utils/strings");

// Color validation
console.log(isValidSimpleColor("#ff0000")); // true
console.log(isValidSimpleColor("#FF0000")); // true
console.log(isValidSimpleColor("#f00")); // false (too short)
console.log(isValidSimpleColor("red")); // false (not hex)

// Case-insensitive comparison
console.log(asciiCaseInsensitiveMatch("Red", "RED")); // true
console.log(asciiCaseInsensitiveMatch("color", "COLOR")); // true
console.log(asciiCaseInsensitiveMatch("red", "blue")); // false

// Floating point validation
console.log(isValidFloatingPointNumber("3.14")); // true
console.log(isValidFloatingPointNumber("-42")); // true
console.log(isValidFloatingPointNumber("1e-5")); // true
console.log(isValidFloatingPointNumber("invalid")); // false

Numeric Parsing

Integer and floating point parsing utilities following HTML specifications.

/**
 * Parses integer values following HTML spec
 * @param input - String to parse
 * @returns Parsed integer or null if invalid
 */
function parseInteger(input: string): number | null;

/**
 * Parses non-negative integer values
 * @param input - String to parse
 * @returns Parsed non-negative integer or null if invalid/negative
 */
function parseNonNegativeInteger(input: string): number | null;

/**
 * Parses floating point number values
 * @param str - String to parse
 * @returns Parsed float or null if invalid
 */
function parseFloatingPointNumber(str: string): number | null;

Usage Examples:

const { 
  parseInteger, 
  parseNonNegativeInteger,
  parseFloatingPointNumber 
} = require("cssstyle/lib/utils/strings");

// Integer parsing
console.log(parseInteger("42")); // 42
console.log(parseInteger("-15")); // -15
console.log(parseInteger("  123  ")); // 123 (whitespace trimmed)
console.log(parseInteger("invalid")); // null

// Non-negative integer parsing
console.log(parseNonNegativeInteger("42")); // 42
console.log(parseNonNegativeInteger("0")); // 0
console.log(parseNonNegativeInteger("-5")); // null (negative)

// Floating point parsing
console.log(parseFloatingPointNumber("3.14")); // 3.14
console.log(parseFloatingPointNumber("-2.5")); // -2.5
console.log(parseFloatingPointNumber("1e5")); // 100000
console.log(parseFloatingPointNumber("invalid")); // null

Property Descriptor Creation

Factory function for creating CSS property descriptors with automatic getter/setter generation.

/**
 * Creates property descriptor for CSS properties
 * @param property - CSS property name
 * @returns Property descriptor object with getter/setter
 */
function getPropertyDescriptor(property: string): PropertyDescriptor;

interface PropertyDescriptor {
  get(): string;
  set(value: any): void;
  enumerable: boolean;
  configurable: boolean;
}

Usage Examples:

const { getPropertyDescriptor } = require("cssstyle/lib/utils/propertyDescriptors");

// Create property descriptor for any CSS property
const colorDescriptor = getPropertyDescriptor("color");

// The descriptor can be used with Object.defineProperty
const style = new CSSStyleDeclaration();
Object.defineProperty(style, "customProperty", colorDescriptor);

// Descriptor provides automatic getter/setter
console.log(typeof colorDescriptor.get); // "function"
console.log(typeof colorDescriptor.set); // "function"
console.log(colorDescriptor.enumerable); // true
console.log(colorDescriptor.configurable); // true

// The getter calls getPropertyValue internally
// The setter calls _setProperty with prepared value

Regular Expression Utilities

Pre-compiled regular expressions for common CSS parsing tasks.

// ASCII whitespace character pattern
const asciiWhitespaceRe: RegExp; // /^[\t\n\f\r ]$/

Usage Examples:

const { asciiWhitespaceRe } = require("cssstyle/lib/utils/strings");

// Test for ASCII whitespace characters
console.log(asciiWhitespaceRe.test(" ")); // true
console.log(asciiWhitespaceRe.test("\t")); // true
console.log(asciiWhitespaceRe.test("\n")); // true
console.log(asciiWhitespaceRe.test("a")); // false

// Use in string processing
function isWhitespace(char) {
  return asciiWhitespaceRe.test(char);
}

Integration with CSSStyleDeclaration

These utilities are primarily used internally by CSSStyleDeclaration but are exposed for advanced use cases:

Property name conversion enables both camelCase and kebab-case property access
String processing ensures proper CSS value formatting and validation
Descriptor generation allows dynamic property creation with consistent behavior
Parsing utilities support robust CSS value processing across all data types

Usage Examples:

const { CSSStyleDeclaration } = require("cssstyle");
const { dashedToCamelCase } = require("cssstyle/lib/utils/camelize");
const { parseColor } = require("cssstyle/lib/parsers");

const style = new CSSStyleDeclaration();

// Internal usage: property name conversion
const camelProperty = dashedToCamelCase("background-color");
style[camelProperty] = "red"; // Sets background-color

// Internal usage: value parsing
const colorValue = parseColor("rgb(255, 0, 0)");
if (colorValue) {
  style.setProperty("color", colorValue);
}

// Utilities work together to provide seamless CSS property handling
console.log(style.cssText); // "background-color: red; color: rgb(255, 0, 0);"

Version

Tile

Files