rem dan em

rem and em functions are converters for changing values ​​in various formats into values ​​with rem or em units.

Syntax

const rem: (value: unknown) => string;
const em: (value: unknown) => string;

Parameters

value (unknown): The value to convert. Can be a number, string, or supported expression (e.g. calc, clamp).

Returns:

• A string containing a value in rem or em units.

Details

1. If the input is a number, the function divides it by 16 to convert from pixels (px) to rem/em.
2. Strings that already have the same units are returned directly unchanged.
3. Supports complex strings such as calc, clamp, or a space- or comma-separated list of values.

Example of Usage

import x from "xuxi";
 
x.rem(16); // "1rem"
 
x.em("32px"); // "2em"
 
x.rem("calc(100% - 10px)"); // "calc(100% - 0.625rem)"

px

The px function is used to convert a value to pixels or get a numeric value from a string in pixels, rems, or ems.

Syntax

function px(value: unknown): string | number;

Parameters

value (unknown): The value to convert. Can be a number or a string.

Returns:

• If value is a number, it is returned directly.
• If value is a string: If it contains px units, it is returned as a unitless number. If it contains rem or em units, it is converted to pixels assuming 1 rem/em = 16 pixels. If it contains an expression such as calc or var, it is returned as a string.

Example of Usage

import x from "xuxi";
 
x.px(16); // 16
 
x.px("1rem"); // 16
 
x.px("2em"); // 32
 
x.px("calc(100% - 10px)"); // "calc(100% - 10px)"

createConverter

This function is a utility to create a custom converter with specific units. For example, rem and em are created using this function.

Syntax

function createConverter(units: string, { shouldScale }?: { shouldScale?: boolean }): (value: unknown) => string;

Parameters

1. units (string): The units used by the converter (e.g. rem, em).
2. options (object) (optional): shouldScale (boolean): Specifies whether the conversion result should be scaled using the scaleRem function.
3. Returns: A converter function that accepts a value to convert to the specified units.

Example of Usage:

import x from "xuxi";
 
const pt = x.createConverter("pt");
pt(16); // "1pt"

Advantages and Optimizations

1. Flexible: Supports various input formats such as numbers, strings, and complex expressions.
2. High Compatibility: Can be used for various unit conversion needs in CSS, including responsive units such as rem and em.
3. Advanced Expressions: Supports operations with calc, clamp, and other CSS functions.
4. Scalability: The createConverter function allows the creation of custom converters for other units in the future.