CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-stylus

Robust, expressive, and feature-rich CSS superset with dynamic preprocessing capabilities

Pending
Overview
Eval results
Files

builtin-functions.mddocs/

Built-in Functions

Over 60 built-in functions organized into categories: color manipulation (rgba, hsl, lighten), mathematical operations (abs, ceil, min), string processing (substr, split, unquote), list operations (push, pop, keys), and utility functions (json, lookup, image-size).

Capabilities

Color Functions

Functions for creating, manipulating, and analyzing colors.

/**
 * Get red component of color (0-255)
 * @param {Color} color - Color value
 * @returns {Unit} Red component
 */
function red(color);

/**
 * Get green component of color (0-255)
 * @param {Color} color - Color value
 * @returns {Unit} Green component
 */
function green(color);

/**
 * Get blue component of color (0-255)
 * @param {Color} color - Color value
 * @returns {Unit} Blue component
 */
function blue(color);

/**
 * Get alpha component of color (0-1)
 * @param {Color} color - Color value
 * @returns {Unit} Alpha component
 */
function alpha(color);

/**
 * Get hue component of color (0-360 degrees)
 * @param {Color} color - Color value
 * @returns {Unit} Hue in degrees
 */
function hue(color);

/**
 * Get saturation component of color (0-100%)
 * @param {Color} color - Color value
 * @returns {Unit} Saturation percentage
 */
function saturation(color);

/**
 * Get lightness component of color (0-100%)
 * @param {Color} color - Color value
 * @returns {Unit} Lightness percentage
 */
function lightness(color);

/**
 * Create RGBA color
 * @param {Unit} r - Red component (0-255)
 * @param {Unit} g - Green component (0-255)
 * @param {Unit} b - Blue component (0-255)
 * @param {Unit} a - Alpha component (0-1)
 * @returns {RGBA} RGBA color
 */
function rgba(r, g, b, a);

/**
 * Create HSLA color
 * @param {Unit} h - Hue (0-360 degrees)
 * @param {Unit} s - Saturation (0-100%)
 * @param {Unit} l - Lightness (0-100%)
 * @param {Unit} a - Alpha (0-1)
 * @returns {RGBA} RGBA color
 */
function hsla(h, s, l, a);

/**
 * Lighten color by percentage
 * @param {Color} color - Base color
 * @param {Unit} amount - Percentage to lighten (0-100%)
 * @returns {RGBA} Lightened color
 */
function lighten(color, amount);

/**
 * Darken color by percentage
 * @param {Color} color - Base color
 * @param {Unit} amount - Percentage to darken (0-100%)
 * @returns {RGBA} Darkened color
 */
function darken(color, amount);

/**
 * Saturate color by percentage
 * @param {Color} color - Base color
 * @param {Unit} amount - Percentage to saturate (0-100%)
 * @returns {RGBA} Saturated color
 */
function saturate(color, amount);

/**
 * Desaturate color by percentage
 * @param {Color} color - Base color
 * @param {Unit} amount - Percentage to desaturate (0-100%)
 * @returns {RGBA} Desaturated color
 */
function desaturate(color, amount);

/**
 * Invert color
 * @param {Color} color - Color to invert
 * @returns {RGBA} Inverted color
 */
function invert(color);

/**
 * Get complement color (rotate hue by 180 degrees)
 * @param {Color} color - Base color
 * @returns {RGBA} Complement color
 */
function complement(color);

/**
 * Rotate color hue by degrees
 * @param {Color} color - Base color
 * @param {Unit} degrees - Degrees to rotate (-360 to 360)
 * @returns {RGBA} Color with rotated hue
 */
function spin(color, degrees);

Mathematical Functions

Functions for numerical calculations and operations.

/**
 * Absolute value
 * @param {Unit} n - Number
 * @returns {Unit} Absolute value
 */
function abs(n);

/**
 * Ceiling (round up)
 * @param {Unit} n - Number to round up
 * @returns {Unit} Rounded up value
 */
function ceil(n);

/**
 * Floor (round down)
 * @param {Unit} n - Number to round down
 * @returns {Unit} Rounded down value
 */
function floor(n);

/**
 * Round to nearest integer
 * @param {Unit} n - Number to round
 * @returns {Unit} Rounded value
 */
function round(n);

/**
 * Minimum of two values
 * @param {Unit} a - First value
 * @param {Unit} b - Second value
 * @returns {Unit} Minimum value
 */
function min(a, b);

/**
 * Maximum of two values
 * @param {Unit} a - First value
 * @param {Unit} b - Second value
 * @returns {Unit} Maximum value
 */
function max(a, b);

/**
 * Sum of list of numbers
 * @param {Expression} nums - List of numbers
 * @returns {Unit} Sum of all numbers
 */
function sum(nums);

/**
 * Average of list of numbers
 * @param {Expression} nums - List of numbers
 * @returns {Unit} Average of all numbers
 */
function avg(nums);

/**
 * Sine of angle
 * @param {Unit} angle - Angle in radians or degrees
 * @returns {Unit} Sine value
 */
function sin(angle);

/**
 * Cosine of angle
 * @param {Unit} angle - Angle in radians or degrees
 * @returns {Unit} Cosine value
 */
function cos(angle);

/**
 * Tangent of angle
 * @param {Unit} angle - Angle in radians or degrees
 * @returns {Unit} Tangent value
 */
function tan(angle);

/**
 * Arc tangent
 * @param {Unit} n - Number
 * @returns {Unit} Arc tangent in radians
 */
function atan(n);

/**
 * Pi constant
 * @returns {Unit} Pi value (3.14159...)
 */
function pi();

/**
 * Square root
 * @param {Unit} n - Number
 * @returns {Unit} Square root
 */
function sqrt(n);

/**
 * Power function
 * @param {Unit} base - Base number
 * @param {Unit} exp - Exponent
 * @returns {Unit} Base raised to exponent
 */
function pow(base, exp);

String Functions

Functions for string manipulation and processing.

/**
 * Get length of string or list
 * @param {String|Expression} expr - String or list
 * @returns {Unit} Length
 */
function length(expr);

/**
 * Extract substring
 * @param {String} string - Source string
 * @param {Unit} start - Start index (0-based)
 * @param {Unit} length - Length to extract
 * @returns {String} Substring
 */
function substr(string, start, length);

/**
 * Slice string or list
 * @param {String|Expression} val - Value to slice
 * @param {Unit} start - Start index
 * @param {Unit} end - End index
 * @returns {String|Expression} Sliced value
 */
function slice(val, start, end);

/**
 * Split string by delimiter
 * @param {String} delimiter - Delimiter string
 * @param {String} val - String to split
 * @returns {Expression} List of strings
 */
function split(delimiter, val);

/**
 * Join values with delimiter
 * @param {String} delimiter - Delimiter string
 * @param {Expression} vals - Values to join
 * @returns {String} Joined string
 */
function join(delimiter, vals);

/**
 * Replace pattern in string
 * @param {String} pattern - Pattern to find
 * @param {String} replacement - Replacement string
 * @param {String} val - Source string
 * @returns {String} String with replacements
 */
function replace(pattern, replacement, val);

/**
 * Remove quotes from string
 * @param {String} str - Quoted string
 * @returns {Literal} Unquoted string
 */
function unquote(str);

/**
 * Add quotes to string
 * @param {String} str - String to quote
 * @returns {String} Quoted string
 */
function quote(str);

/**
 * Convert to uppercase
 * @param {String} str - String to convert
 * @returns {String} Uppercase string
 */
function uppercase(str);

/**
 * Convert to lowercase
 * @param {String} str - String to convert
 * @returns {String} Lowercase string
 */
function lowercase(str);

List Functions

Functions for manipulating lists and arrays.

/**
 * Add values to end of list
 * @param {Expression} expr - Base list
 * @param {Node} vals - Values to add
 * @returns {Expression} Extended list
 */
function push(expr, vals);

/**
 * Remove last value from list
 * @param {Expression} expr - List to modify
 * @returns {Node} Removed value
 */
function pop(expr);

/**
 * Remove first value from list
 * @param {Expression} expr - List to modify
 * @returns {Node} Removed value
 */
function shift(expr);

/**
 * Add values to start of list
 * @param {Expression} expr - Base list
 * @param {Node} vals - Values to add
 * @returns {Expression} Extended list
 */
function unshift(expr, vals);

/**
 * Get keys from object/pairs list
 * @param {Expression} pairs - Object or pairs list
 * @returns {Expression} List of keys
 */
function keys(pairs);

/**
 * Get values from object/pairs list
 * @param {Expression} pairs - Object or pairs list
 * @returns {Expression} List of values
 */
function values(pairs);

/**
 * Convert object to pairs list
 * @param {Object} obj - Object to convert
 * @returns {Expression} List of key-value pairs
 */
function pairs(obj);

/**
 * Get list separator type
 * @param {Expression} list - List to check
 * @returns {String} Separator type (',' or ' ')
 */
function listSeparator(list);

/**
 * Reverse list order
 * @param {Expression} list - List to reverse
 * @returns {Expression} Reversed list
 */
function reverse(list);

/**
 * Sort list values
 * @param {Expression} list - List to sort
 * @returns {Expression} Sorted list
 */
function sort(list);

Type Functions

Functions for type checking and conversion.

/**
 * Get type name of value
 * @param {Node} expr - Value to check
 * @returns {String} Type name
 */
function typeOf(expr);

/**
 * Convert unit type
 * @param {Unit} unit - Number with unit
 * @param {String} type - Target unit type
 * @returns {Unit} Converted unit
 */
function unit(unit, type);

/**
 * Pattern matching
 * @param {String} pattern - Regular expression pattern
 * @param {String} str - String to match
 * @returns {Expression|Null} Match results or null
 */
function match(pattern, str);

/**
 * Type checking
 * @param {Node} val - Value to check
 * @param {String} type - Expected type name
 * @returns {Boolean} True if value is of type
 */
function isA(val, type);

Utility Functions

General utility functions for various operations.

/**
 * Parse JSON file
 * @param {String} path - Path to JSON file
 * @param {Boolean} local - Whether to use local lookup
 * @returns {Object} Parsed JSON data
 */
function json(path, local);

/**
 * Use plugin
 * @param {String} plugin - Plugin name
 * @param {Object} options - Plugin options
 * @returns {Null} No return value
 */
function use(plugin, options);

/**
 * Get current selector
 * @returns {String} Current selector string
 */
function selector();

/**
 * Get current selectors
 * @returns {Expression} List of current selectors
 */
function selectors();

/**
 * Get current property name
 * @returns {String} Current property name
 */
function currentProperty();

/**
 * Prefix class names
 * @param {String} prefix - Prefix to add
 * @returns {Null} No return value
 */
function prefixClasses(prefix);

/**
 * Property lookup in current scope
 * @param {String} prop - Property name to lookup
 * @returns {Node} Property value or null
 */
function lookup(prop);

/**
 * Get call location information
 * @returns {String} Call location details
 */
function calledFrom();

/**
 * Throw error with message
 * @param {String} msg - Error message
 * @throws {Error} Always throws error
 */
function error(msg);

/**
 * Output warning message
 * @param {String} msg - Warning message
 * @returns {Null} No return value
 */
function warn(msg);

/**
 * Get image dimensions
 * @param {String} path - Path to image file
 * @returns {Expression} List containing [width, height]
 */
function imageSize(path);

/**
 * Add CSS property dynamically
 * @param {String} name - Property name
 * @param {Node} expr - Property value
 * @returns {Null} No return value
 */
function addProperty(name, expr);

URL Functions

Functions for URL processing and embedding.

/**
 * Embed URL as data URI
 * @param {String} url - URL to embed
 * @param {String} enc - Encoding (base64, utf8)
 * @returns {Literal} Data URI string
 */
function embedurl(url, enc);

/**
 * Process URL with optional lookup
 * @param {String} path - URL path
 * @param {Boolean} lookup - Whether to perform file lookup
 * @returns {Literal} Processed URL
 */
function url(path, lookup);

Usage Examples

// Color functions
$primary = #3498db
$light-primary = lighten($primary, 20%)
$dark-primary = darken($primary, 15%)
$complement = complement($primary)

// Math functions
$golden-ratio = 1.618
$container-width = round(960px / $golden-ratio)
$max-width = max(320px, $container-width)

// String functions
$font-stack = 'Helvetica Neue', sans-serif
$font-name = unquote(substr($font-stack, 0, 8))
$class-list = split(',', 'header,nav,main,footer')

// List functions
$breakpoints = 480px 768px 1024px
$mobile-first = unshift($breakpoints, 320px)
$breakpoint-count = length($mobile-first)

// Utility functions
$config = json('config.json')
$current-sel = selector()
$image-dims = image-size('logo.png')

Install with Tessl CLI

npx tessl i tessl/npm-stylus

docs

builtin-functions.md

cli-interface.md

core-compilation.md

index.md

middleware.md

parsing-ast.md

utilities.md

tile.json