### Install csscalc using npm Source: https://context7.com/morglod/csscalc/llms.txt This command installs the csscalc library using npm. Ensure you have Node.js and npm installed on your system. ```bash npm install csscalc ``` -------------------------------- ### Convert CSS Units with csscalc Source: https://context7.com/morglod/csscalc/llms.txt The `convert` function transforms values between CSS units. It requires a calculation context for relative units, which can be obtained using `calcCtx`. Examples include converting pixels to percentages and vice versa, as well as absolute and viewport unit conversions. ```javascript import { convert, calcCtx } from 'csscalc'; const element = document.getElementById('myElement'); const ctx = calcCtx(element); // Convert pixels to percentage of element width const percentWidth = convert(100, 'px', '%w', ctx); console.log(`100px = ${percentWidth}%w of element`); // Convert element width percentage to pixels const pixelsFromPercent = convert(50, '%w', 'px', ctx); console.log(`50%w = ${pixelsFromPercent}px`); // Convert between absolute units const inches = convert(96, 'px', 'in', ctx); console.log(`96px = ${inches}in`); // Output: 96px = 1in const centimeters = convert(1, 'in', 'cm', ctx); console.log(`1in = ${centimeters}cm`); // Output: 1in = 2.54cm // Convert viewport units const vwInPixels = convert(50, 'vw', 'px', ctx); console.log(`50vw = ${vwInPixels}px`); ``` -------------------------------- ### Get CSS Unit Regular Expressions (TypeScript) Source: https://github.com/morglod/csscalc/blob/master/readme.md Provides access to regular expressions used by the library for identifying and parsing CSS units. `UnitRegexpStr`, `UnitRegexp`, and `UnitRegexpGM` are available for custom parsing or analysis of unit strings. ```typescript UnitRegexpStr, UnitRegexp, UnitRegexpGM - regular expression to find units. ``` -------------------------------- ### Create CSS Calculation Context with calcCtx Source: https://context7.com/morglod/csscalc/llms.txt The `calcCtx` function generates a context object with dimensional data for relative unit calculations. It can be initialized with an HTML element or defaults to the document body and viewport dimensions. Custom contexts can also be provided for specific scenarios. ```javascript import { calcCtx } from 'csscalc'; // Create context from a specific element const element = document.getElementById('container'); const elementCtx = calcCtx(element); console.log(elementCtx); // Output: { // width: 500, // element's width in pixels // height: 300, // element's height in pixels // viewportWidth: 1920, // window.innerWidth // viewportHeight: 1080, // window.innerHeight // htmlFontSize: 16 // computed font-size of // } // Create context without element (uses document.body) const defaultCtx = calcCtx(); console.log(defaultCtx); // Output: { // width: 1920, // document.body.clientWidth // height: 1080, // document.body.clientHeight // viewportWidth: 1920, // viewportHeight: 1080, // htmlFontSize: 16 // } // Use custom context for server-side or testing scenarios const customCtx = { width: 800, height: 600, viewportWidth: 1920, viewportHeight: 1080, htmlFontSize: 16 }; ``` -------------------------------- ### Create Calculation Context (TypeScript) Source: https://github.com/morglod/csscalc/blob/master/readme.md A utility function to create a `CalcContext` object, which is necessary for calculations involving relative CSS units. It optionally accepts an HTMLElement to determine the context's dimensions. ```typescript function calcCtx(el?: HTMLElement): CalcContext; ``` -------------------------------- ### Convert All Units in a String Expression (JavaScript) Source: https://context7.com/morglod/csscalc/llms.txt Utilizes the `convertAllInStr` function to find and convert all CSS unit values within a given string expression to a specified target unit (e.g., 'px'). It requires a calculation context, which can be created with `calcCtx()`. This is useful for preprocessing CSS `calc()` values. ```javascript import { convertAllInStr, calcCtx } from 'csscalc'; const ctx = calcCtx(); // Convert an expression string to pixels const expression = '50vw + 100px - 2rem'; const converted = convertAllInStr(expression, 'px', ctx); console.log(`Original: ${expression}`); console.log(`Converted: ${converted}`); // Output varies based on viewport, e.g.: "960 + 100 - 32" // Useful for preprocessing CSS calc() values const cssCalc = '10%w * 2'; const pixelExpression = convertAllInStr(cssCalc, 'px', ctx); console.log(`${cssCalc} -> ${pixelExpression}`); ``` -------------------------------- ### convertAllInStr - Convert All Units in a String Source: https://context7.com/morglod/csscalc/llms.txt The `convertAllInStr` function finds all CSS unit values in a string and converts them to the specified target unit, returning the modified string. ```APIDOC ## convertAllInStr - Convert All Units in a String ### Description The `convertAllInStr` function finds all CSS unit values in a string and converts them to the specified target unit, returning the modified string. ### Usage ```javascript import { convertAllInStr, calcCtx } from 'csscalc'; const ctx = calcCtx(); // Convert an expression string to pixels const expression = '50vw + 100px - 2rem'; const converted = convertAllInStr(expression, 'px', ctx); console.log(`Original: ${expression}`); console.log(`Converted: ${converted}`); // Output varies based on viewport, e.g.: "960 + 100 - 32" // Useful for preprocessing CSS calc() values const cssCalc = '10%w * 2'; const pixelExpression = convertAllInStr(cssCalc, 'px', ctx); console.log(`${cssCalc} -> ${pixelExpression}`); ``` ``` -------------------------------- ### Calculate CSS Expression with Math Functions (TypeScript) Source: https://github.com/morglod/csscalc/blob/master/readme.md Demonstrates calculating CSS expressions using JavaScript's built-in Math functions like `Math.max`. The `calc` method supports arbitrary JavaScript code within the expression string, allowing for dynamic calculations based on CSS units. ```typescript calc('Math.max(100%w, 100%h)', element) ``` -------------------------------- ### Convert Relative CSS Units to Pixels (JavaScript) Source: https://context7.com/morglod/csscalc/llms.txt Shows how to use the `Relative` object and `calcCtx` to convert relative CSS units (like vh, vw, rem, %w, %h) to pixels. Each conversion function takes a count and an optional calculation context, which is typically derived from a DOM element. ```javascript import { Relative, calcCtx } from 'csscalc'; const element = document.getElementById('myElement'); const ctx = calcCtx(element); // Convert viewport height percentage to pixels const vh50 = Relative['vh'](50, ctx); console.log(`50vh = ${vh50}px`); // Convert viewport width percentage to pixels const vw100 = Relative['vw'](100, ctx); console.log(`100vw = ${vw100}px`); // Get vmin (smallest viewport dimension percentage) const vmin25 = Relative['vmin'](25, ctx); console.log(`25vmin = ${vmin25}px`); // Get vmax (largest viewport dimension percentage) const vmax25 = Relative['vmax'](25, ctx); console.log(`25vmax = ${vmax25}px`); // Convert rem units (based on html font-size) const rem2 = Relative['rem'](2, ctx); console.log(`2rem = ${rem2}px`); // Convert element width percentage to pixels const width50 = Relative['%w'](50, ctx); console.log(`50%w = ${width50}px`); // Convert element height percentage to pixels const height100 = Relative['%h'](100, ctx); console.log(`100%h = ${height100}px`); ``` -------------------------------- ### CSS Unit Conversion with Relative Map (JavaScript) Source: https://github.com/morglod/csscalc/blob/master/readme.md An alternative method for unit conversion using the Relative map, specifically for percentage-based units like '%w'. This approach directly utilizes the predefined conversion functions within the library for relative units. ```javascript Relative["%w"](50, calcCtx(element)); ``` -------------------------------- ### Unit Regular Expressions for CSS Unit Parsing (JavaScript) Source: https://context7.com/morglod/csscalc/llms.txt Provides access to regular expressions (`UnitRegexp`, `UnitRegexpGM`, `UnitRegexpStr`) exported by the library for parsing CSS unit values from strings. These are helpful for custom parsing logic and validation, allowing extraction of numeric values and their corresponding units. ```javascript import { UnitRegexp, UnitRegexpGM, UnitRegexpStr } from 'csscalc'; // Match a single unit value const singleMatch = '100px'.match(UnitRegexp); if (singleMatch) { console.log(`Value: ${singleMatch[1]}, Unit: ${singleMatch[2]}`); // Output: Value: 100, Unit: px } // Match all unit values in a string (global, multiline) const expression = '50vw + 100px - 2rem'; const matches = expression.match(UnitRegexpGM); console.log(matches); // ['50vw', '100px', '2rem'] // Use the regex string for custom regex construction console.log(UnitRegexpStr); // Output: "(?:s|^)(\d*(?:\.\d+)?)(px|cm|mm|Q|in|pc|pt|vh|vw|vmin|vmax|rem|%w|%h)(?:s|$| )" ``` -------------------------------- ### Access Absolute Unit Conversion Factors (JavaScript) Source: https://context7.com/morglod/csscalc/llms.txt Demonstrates how to access conversion factors from absolute CSS units to pixels using the `Absolute` object. These factors are based on the CSS specification where 1 inch equals 96 pixels. It shows direct access to constants like 'px', 'cm', 'in', and 'pt'. ```javascript import { Absolute } from 'csscalc'; // Access conversion factors (units to pixels) console.log(Absolute['px']); // 1 - pixels are the base unit console.log(Absolute['cm']); // 37.795... - 1cm = 96px/2.54 console.log(Absolute['mm']); // 3.7795... - 1mm = 96px/25.4 console.log(Absolute['Q']); // 0.9448... - 1Q = 96px/101.6 (quarter millimeter) console.log(Absolute['in']); // 96 - 1in = 96px console.log(Absolute['pc']); // 16 - 1pc = 96px/6 (pica) console.log(Absolute['pt']); // 1.333... - 1pt = 96px/72 (point) // Direct conversion example const pixelsPerInch = Absolute['in']; const documentWidthInInches = 960 / pixelsPerInch; console.log(`960px = ${documentWidthInInches} inches`); // Output: 960px = 10 inches ``` -------------------------------- ### Define Absolute CSS Units (TypeScript) Source: https://github.com/morglod/csscalc/blob/master/readme.md Illustrates the structure for defining absolute CSS units within the `csscalc` library. The `Absolute` map holds key-value pairs where keys are absolute unit names (e.g., 'px', 'cm') and values are their equivalent pixel measurements. ```typescript Absoulte = { "absolute unit name" -> pixels } ``` -------------------------------- ### Relative - Relative Unit Converters Source: https://context7.com/morglod/csscalc/llms.txt The `Relative` object contains functions that convert relative CSS units to pixels based on a calculation context. Each function accepts a count and optional context parameter. ```APIDOC ## Relative - Relative Unit Converters ### Description The `Relative` object contains functions that convert relative CSS units to pixels based on a calculation context. Each function accepts a count and optional context parameter. ### Usage ```javascript import { Relative, calcCtx } from 'csscalc'; const element = document.getElementById('myElement'); const ctx = calcCtx(element); // Convert viewport height percentage to pixels const vh50 = Relative['vh'](50, ctx); console.log(`50vh = ${vh50}px`); // Convert viewport width percentage to pixels const vw100 = Relative['vw'](100, ctx); console.log(`100vw = ${vw100}px`); // Get vmin (smallest viewport dimension percentage) const vmin25 = Relative['vmin'](25, ctx); console.log(`25vmin = ${vmin25}px`); // Get vmax (largest viewport dimension percentage) const vmax25 = Relative['vmax'](25, ctx); console.log(`25vmax = ${vmax25}px`); // Convert rem units (based on html font-size) const rem2 = Relative['rem'](2, ctx); console.log(`2rem = ${rem2}px`); // Convert element width percentage to pixels const width50 = Relative['%w'](50, ctx); console.log(`50%w = ${width50}px`); // Convert element height percentage to pixels const height100 = Relative['%h'](100, ctx); console.log(`100%h = ${height100}px`); ``` ``` -------------------------------- ### Unit Regular Expressions Source: https://context7.com/morglod/csscalc/llms.txt The library exports regular expressions for parsing CSS unit values from strings. These are useful for custom parsing and validation logic. ```APIDOC ## Unit Regular Expressions ### Description The library exports regular expressions for parsing CSS unit values from strings. These are useful for custom parsing and validation logic. ### Usage ```javascript import { UnitRegexp, UnitRegexpGM, UnitRegexpStr } from 'csscalc'; // Match a single unit value const singleMatch = '100px'.match(UnitRegexp); if (singleMatch) { console.log(`Value: ${singleMatch[1]}, Unit: ${singleMatch[2]}`); // Output: Value: 100, Unit: px } // Match all unit values in a string (global, multiline) const expression = '50vw + 100px - 2rem'; const matches = expression.match(UnitRegexpGM); console.log(matches); // ['50vw', '100px', '2rem'] // Use the regex string for custom regex construction console.log(UnitRegexpStr); // Output: "(?:\s|^)(\d*(?:\.\d+)?)(px|cm|mm|Q|in|pc|pt|vh|vw|vmin|vmax|rem|%w|%h)(?:\s|$|\n)" ``` ``` -------------------------------- ### Evaluate CSS Expressions with csscalc Source: https://context7.com/morglod/csscalc/llms.txt The `calc` function evaluates CSS unit expressions, returning results in pixels. It supports JavaScript math functions and can use a DOM element or the document body as a context for relative unit calculations. ```javascript import { calc } from 'csscalc'; // Get a reference to a DOM element const element = document.getElementById('myElement'); // Calculate what percentage of screen width an element occupies const screenWidthPercent = calc('100%w / 100vw', element); console.log(`Element takes ${screenWidthPercent * 100}% of screen width`); // Calculate element area in square pixels const area = calc('100%w * 100%h', element); console.log(`Element area: ${area}px²`); // Use Math functions in expressions const maxDimension = calc('Math.max(100%w, 100%h)', element); console.log(`Larger dimension: ${maxDimension}px`); // Calculate without element context (uses document.body) const viewportDiagonal = calc('Math.sqrt(100vw * 100vw + 100vh * 100vh)'); console.log(`Viewport diagonal: ${viewportDiagonal}px`); ``` -------------------------------- ### Calculate CSS Expression with Units (JavaScript) Source: https://github.com/morglod/csscalc/blob/master/readme.md Calculates a CSS expression involving units relative to the element's dimensions or viewport. It takes an expression string and an optional HTMLElement or CalcContext. The '%w' and '%h' units represent percentages of the element's width and height, respectively. ```javascript import { calc } from 'cssunits'; // %w means % of width calc('100%w / 100vw', element); ``` ```javascript calc('100%w * 100%h', element); ``` -------------------------------- ### Define Relative CSS Units (TypeScript) Source: https://github.com/morglod/csscalc/blob/master/readme.md Shows the type definition for relative CSS units within the `csscalc` library. The `Relative` map contains functions that take a numerical value and an optional `CalcContext` to compute the pixel equivalent of relative units like '%w' or '%h'. ```typescript Relative = { "relative unit name": (units: number, ctx?: CalcContext) => number } ``` -------------------------------- ### Calculate CSS Expression (TypeScript) Source: https://github.com/morglod/csscalc/blob/master/readme.md Overloaded function signature for calculating CSS expressions. It can take an expression string and an HTMLElement, or just an expression string with a provided `CalcContext`. Returns the calculated numerical value. ```typescript function calc(expression: string, el: HTMLElement, ctx?: CalcContext): number; function calc(expression: string, ctx?: CalcContext): number; ``` -------------------------------- ### Convert CSS Units (JavaScript) Source: https://github.com/morglod/csscalc/blob/master/readme.md Converts a given numerical value from one CSS unit to another. Requires the count, the source unit, the target unit, and an optional calculation context. This function is useful for interoperability between different unit types. ```javascript convert(100, 'px', '%w', calcCtx(element)); ``` ```javascript convert(50, '%w', 'px', calcCtx(element)); ``` -------------------------------- ### Absolute - Unit Conversion Constants Source: https://context7.com/morglod/csscalc/llms.txt The `Absolute` object contains conversion factors from absolute CSS units to pixels. These values follow the CSS specification where 1 inch equals 96 pixels. ```APIDOC ## Absolute - Unit Conversion Constants ### Description The `Absolute` object contains conversion factors from absolute CSS units to pixels. These values follow the CSS specification where 1 inch equals 96 pixels. ### Usage ```javascript import { Absolute } from 'csscalc'; // Access conversion factors (units to pixels) console.log(Absolute['px']); // 1 - pixels are the base unit console.log(Absolute['cm']); // 37.795... - 1cm = 96px/2.54 console.log(Absolute['mm']); // 3.7795... - 1mm = 96px/25.4 console.log(Absolute['Q']); // 0.9448... - 1Q = 96px/101.6 (quarter millimeter) console.log(Absolute['in']); // 96 - 1in = 96px console.log(Absolute['pc']); // 16 - 1pc = 96px/6 (pica) console.log(Absolute['pt']); // 1.333... - 1pt = 96px/72 (point) // Direct conversion example const pixelsPerInch = Absolute['in']; const documentWidthInInches = 960 / pixelsPerInch; console.log(`960px = ${documentWidthInInches} inches`); // Output: 960px = 10 inches ``` ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.