@k9kbdev/roblox-css 0.1.0

package/out/styles/CSSTypes.d.ts

@@ -0,0 +1,96 @@
+/**
+ * CSSTypes.d.ts — Strongly-typed style prop interface.
+ *
+ * This is the contract that every wrapper component's `style` prop uses.
+ * Define all supported CSS properties here with their accepted value types.
+ * Properties not listed here are intentionally unsupported.
+ *
+ * Reference: docs/FEATURE_MAPPING.md
+ */
+
+export interface CSSProperties {
+	// --- Box Model & Sizing (FEATURE_MAPPING §2) ---
+	width?: string | number;
+	height?: string | number;
+	minWidth?: string | number;
+	maxWidth?: string | number;
+	minHeight?: string | number;
+	maxHeight?: string | number;
+
+	// --- Spacing ---
+	padding?: string | number;
+	paddingTop?: string | number;
+	paddingRight?: string | number;
+	paddingBottom?: string | number;
+	paddingLeft?: string | number;
+
+	// --- Positioning ---
+	position?: "absolute" | "relative";
+	top?: string | number;
+	right?: string | number;
+	bottom?: string | number;
+	left?: string | number;
+	zIndex?: number;
+	transformOrigin?: string;
+
+	// --- Layout ---
+	layoutOrder?: number;
+	rotation?: number;
+	autoSize?: "none" | "x" | "y" | "xy";
+
+	// --- Flexbox Layout (FEATURE_MAPPING §3) ---
+	display?: "flex" | "grid" | "none";
+	flexDirection?: "row" | "column";
+	flexWrap?: "nowrap" | "wrap";
+	justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+	alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+	gap?: string | number;
+	rowGap?: string | number;
+	columnGap?: string | number;
+
+	// --- Flex Item (per-child, injects UIFlexItem) ---
+	flexGrow?: number;
+	flexShrink?: number;
+	flex?: number | "auto" | "none";
+	alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch";
+
+	// --- Grid Layout (Emulating UIGridLayout) ---
+	gridTemplateColumns?: string | number;
+	gridTemplateRows?: string | number;
+
+	// --- Aesthetics (FEATURE_MAPPING §4) ---
+	backgroundColor?: string;
+	background?: string;
+	backgroundImage?: string;
+	color?: string;
+	opacity?: number;
+	borderRadius?: string | number;
+	border?: string;
+	boxShadow?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
+	overflow?: "hidden" | "visible";
+	objectFit?: "cover" | "contain" | "fill";
+	visibility?: "visible" | "hidden";
+
+	// --- Constraints ---
+	aspectRatio?: number;
+
+	// --- Typography (FEATURE_MAPPING §5) ---
+	fontSize?: number;
+	fontFamily?: string;
+	fontWeight?: "normal" | "bold" | "black";
+	fontStyle?: "normal" | "italic";
+	textAlign?: "left" | "center" | "right";
+	textVerticalAlign?: "top" | "center" | "bottom";
+	whiteSpace?: "normal" | "nowrap" | "pre-wrap" | "pre-line";
+	wordBreak?: "normal" | "break-word" | "break-all" | "keep-all";
+	lineHeight?: number;
+	textOverflow?: "ellipsis";
+	textDecoration?: "none" | "underline" | "line-through";
+	textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
+	richText?: boolean;
+	textStroke?: string;
+	userSelect?: "none" | "auto" | "text";
+
+	// --- Interactivity (FEATURE_MAPPING §6) ---
+	pointerEvents?: "none" | "auto";
+}

package/out/styles/ParentSizeContext.d.ts

@@ -0,0 +1,6 @@
+import React from "@rbxts/react";
+/**
+ * Carries the nearest ancestor <Box>'s AbsoluteSize as a binding,
+ * enabling children to reactively resolve percentage-based size constraints.
+ */
+export declare const ParentSizeContext: React.Context<React.Binding<Vector2> | undefined>;

package/out/styles/ParentSizeContext.luau

@@ -0,0 +1,13 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+--[[
+	*
+	 * Carries the nearest ancestor <Box>'s AbsoluteSize as a binding,
+	 * enabling children to reactively resolve percentage-based size constraints.
+	 
+]]
+local ParentSizeContext = React.createContext(nil)
+return {
+	ParentSizeContext = ParentSizeContext,
+}

package/out/styles/colorParser.d.ts

@@ -0,0 +1,28 @@
+/**
+ * colorParser.ts — Converts CSS color strings to Roblox Color3.
+ *
+ * Supported formats:
+ *   - Hex:   "#ff0000", "#f00"
+ *   - RGB:   "rgb(255, 0, 0)"
+ *   - RGBA:  "rgba(255, 0, 0, 0.5)"
+ *   - HSL:   "hsl(0, 100%, 50%)"
+ *   - HSLA:  "hsla(0, 100%, 50%, 0.5)"
+ *   - Named: "red", "blue", "white", "transparent"
+ *   - Pass-through: Color3 instances returned as-is
+ *
+ * Returns a ParsedColor with `transparent` flag for "transparent" keyword.
+ */
+import { DeepReadonly } from "../types";
+/**
+ * Branded ParsedColor — the `_parsed` brand ensures only values produced by
+ * parseColor() are assignable. A plain `{ color: Color3; transparency: number }`
+ * will NOT satisfy this type, catching accidental bypasses at compile time.
+ */
+export type ParsedColor = {
+    readonly color: Color3;
+    readonly transparent: boolean;
+    readonly transparency: number;
+} & {
+    readonly _parsed: unique symbol;
+};
+export declare function parseColor(_input: string | Color3): DeepReadonly<ParsedColor>;

package/out/styles/colorParser.luau

@@ -0,0 +1,229 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+--[[
+	*
+	 * colorParser.ts — Converts CSS color strings to Roblox Color3.
+	 *
+	 * Supported formats:
+	 *   - Hex:   "#ff0000", "#f00"
+	 *   - RGB:   "rgb(255, 0, 0)"
+	 *   - RGBA:  "rgba(255, 0, 0, 0.5)"
+	 *   - HSL:   "hsl(0, 100%, 50%)"
+	 *   - HSLA:  "hsla(0, 100%, 50%, 0.5)"
+	 *   - Named: "red", "blue", "white", "transparent"
+	 *   - Pass-through: Color3 instances returned as-is
+	 *
+	 * Returns a ParsedColor with `transparent` flag for "transparent" keyword.
+	 
+]]
+local NAMED_COLORS = TS.import(script, script.Parent, "namedColors").NAMED_COLORS
+local createLogger = TS.import(script, script.Parent.Parent, "logger").createLogger
+local log = createLogger("colorParser")
+--[[
+	*
+	 * Branded ParsedColor — the `_parsed` brand ensures only values produced by
+	 * parseColor() are assignable. A plain `{ color: Color3; transparency: number }`
+	 * will NOT satisfy this type, catching accidental bypasses at compile time.
+	 
+]]
+--* Helper to construct a branded ParsedColor inside this module. 
+local function makeParsedColor(color, transparency)
+	return {
+		color = color,
+		transparent = transparency == 1,
+		transparency = transparency,
+	}
+end
+local function parseColor(_input)
+	-- 1. If input is already Color3, return it
+	local __input = _input
+	if typeof(__input) == "Color3" then
+		return makeParsedColor(_input, 0)
+	end
+	-- if not Color3, it must be a string
+	local input = _input
+	-- 2. If string "transparent", return white + transparency: 1
+	if input == "transparent" then
+		return makeParsedColor(Color3.new(1, 1, 1), 1)
+	end
+	-- 3. If starts with "#" or is a valid hex without "#", parse hex (handle 3-char and 6-char)
+	local hasHash = string.sub(input, 1, 1) == "#"
+	local possibleHex = if hasHash then string.sub(input, 2) else input
+	if (#possibleHex == 3 or #possibleHex == 6) and tonumber(possibleHex, 16) ~= nil then
+		local r = 0
+		local g = 0
+		local b = 0
+		if #possibleHex == 3 then
+			-- RGB → double each digit: "f" → "ff"
+			local _condition = tonumber(string.rep(string.sub(possibleHex, 1, 1), 2), 16)
+			if _condition == nil then
+				_condition = 0
+			end
+			r = _condition
+			local _condition_1 = tonumber(string.rep(string.sub(possibleHex, 2, 2), 2), 16)
+			if _condition_1 == nil then
+				_condition_1 = 0
+			end
+			g = _condition_1
+			local _condition_2 = tonumber(string.rep(string.sub(possibleHex, 3, 3), 2), 16)
+			if _condition_2 == nil then
+				_condition_2 = 0
+			end
+			b = _condition_2
+		else
+			-- RRGGBB
+			local _condition = tonumber(string.sub(possibleHex, 1, 2), 16)
+			if _condition == nil then
+				_condition = 0
+			end
+			r = _condition
+			local _condition_1 = tonumber(string.sub(possibleHex, 3, 4), 16)
+			if _condition_1 == nil then
+				_condition_1 = 0
+			end
+			g = _condition_1
+			local _condition_2 = tonumber(string.sub(possibleHex, 5, 6), 16)
+			if _condition_2 == nil then
+				_condition_2 = 0
+			end
+			b = _condition_2
+		end
+		return makeParsedColor(Color3.fromRGB(r, g, b), 0)
+	end
+	-- 4. If starts with "rgb(" or "rgba(", extract numbers
+	if string.sub(input, 1, 4) == "rgb(" then
+		local parts = string.split(input, ",")
+		local _condition = tonumber(string.sub(parts[1], 5))
+		if _condition == nil then
+			_condition = 0
+		end
+		local r = _condition
+		local _condition_1 = tonumber(parts[2])
+		if _condition_1 == nil then
+			_condition_1 = 0
+		end
+		local g = _condition_1
+		local _condition_2 = tonumber(string.sub(parts[3], 1, -2))
+		if _condition_2 == nil then
+			_condition_2 = 0
+		end
+		local b = _condition_2
+		return makeParsedColor(Color3.fromRGB(r, g, b), 0)
+	elseif string.sub(input, 1, 5) == "rgba(" then
+		local parts = string.split(input, ",")
+		local _condition = tonumber(string.sub(parts[1], 6))
+		if _condition == nil then
+			_condition = 0
+		end
+		local r = _condition
+		local _condition_1 = tonumber(parts[2])
+		if _condition_1 == nil then
+			_condition_1 = 0
+		end
+		local g = _condition_1
+		local _condition_2 = tonumber(parts[3])
+		if _condition_2 == nil then
+			_condition_2 = 0
+		end
+		local b = _condition_2
+		local _condition_3 = tonumber(string.sub(parts[4], 1, -2))
+		if _condition_3 == nil then
+			_condition_3 = 1
+		end
+		local alpha = _condition_3
+		return makeParsedColor(Color3.fromRGB(r, g, b), 1 - alpha)
+	end
+	-- 4.5. HSL / HSLA support
+	if string.sub(input, 1, 4) == "hsl(" or string.sub(input, 1, 5) == "hsla(" then
+		local isHsla = string.sub(input, 1, 5) == "hsla("
+		local parts = string.split(input, ",")
+		-- Extract hue from first part: "hsl(120" or "hsla(120"
+		local hStr = if isHsla then string.sub(parts[1], 6) else string.sub(parts[1], 5)
+		local _condition = tonumber(hStr)
+		if _condition == nil then
+			_condition = 0
+		end
+		local h = (_condition % 360 + 360) % 360
+		-- Extract saturation — strip non-numeric chars (%, spaces) via Lua pattern
+		local _condition_1 = parts[2]
+		if _condition_1 == nil then
+			_condition_1 = ""
+		end
+		local sMatch = string.match(_condition_1, "([%d%.]+)")
+		local _condition_2 = tonumber(sMatch)
+		if _condition_2 == nil then
+			_condition_2 = 0
+		end
+		local s = math.clamp(_condition_2 / 100, 0, 1)
+		-- Extract lightness — strip non-numeric chars (%, ), spaces)
+		local _condition_3 = parts[3]
+		if _condition_3 == nil then
+			_condition_3 = ""
+		end
+		local lMatch = string.match(_condition_3, "([%d%.]+)")
+		local _condition_4 = tonumber(lMatch)
+		if _condition_4 == nil then
+			_condition_4 = 0
+		end
+		local l = math.clamp(_condition_4 / 100, 0, 1)
+		-- Extract alpha (hsla only) — strip closing paren
+		local _result
+		if isHsla and #parts >= 4 then
+			local _condition_5 = tonumber(string.sub(parts[4], 1, -2))
+			if _condition_5 == nil then
+				_condition_5 = 1
+			end
+			_result = _condition_5
+		else
+			_result = 1
+		end
+		local alpha = _result
+		-- HSL to RGB conversion (standard algorithm)
+		local c = (1 - math.abs(2 * l - 1)) * s
+		local x = c * (1 - math.abs(((h / 60) % 2) - 1))
+		local m = l - c / 2
+		local r1 = 0
+		local g1 = 0
+		local b1 = 0
+		if h < 60 then
+			r1 = c
+			g1 = x
+			b1 = 0
+		elseif h < 120 then
+			r1 = x
+			g1 = c
+			b1 = 0
+		elseif h < 180 then
+			r1 = 0
+			g1 = c
+			b1 = x
+		elseif h < 240 then
+			r1 = 0
+			g1 = x
+			b1 = c
+		elseif h < 300 then
+			r1 = x
+			g1 = 0
+			b1 = c
+		else
+			r1 = c
+			g1 = 0
+			b1 = x
+		end
+		return makeParsedColor(Color3.new(math.clamp(r1 + m, 0, 1), math.clamp(g1 + m, 0, 1), math.clamp(b1 + m, 0, 1)), 1 - alpha)
+	end
+	-- 5. Lookup in NAMED_COLORS table (case-insensitive)
+	local _arg0 = string.lower(input)
+	local rgb = NAMED_COLORS[_arg0]
+	if rgb then
+		return makeParsedColor(Color3.fromRGB(rgb[1], rgb[2], rgb[3]), 0)
+	end
+	-- 6. Fallback: warn + return white
+	log:warn("UNKNOWN_COLOR", "Unknown color string", {
+		input = input,
+	})
+	return makeParsedColor(Color3.new(1, 1, 1), 0)
+end
+return {
+	parseColor = parseColor,
+}

package/out/styles/dimensionParser.d.ts

@@ -0,0 +1,49 @@
+import { DeepReadonly } from "../types";
+/**
+ * dimensionParser.ts — Converts CSS dimension strings to Roblox UDim.
+ *
+ * Supported formats:
+ *   - Pixels:   "100px" or 100 (number) → UDim(0, 100)
+ *   - Percent:  "50%"                   → UDim(0.5, 0)
+ *   - Viewport: "100vw" / "100vh"       → UDim(1, 0)
+ *   - Calc:     "calc(100% - 10px)"     → UDim(1.0, -10)
+ *   - Auto:     "auto"                  → undefined
+ *
+ * Also exports parsePadding() for CSS padding shorthand.
+ *
+ */
+/**
+ * Branded ParsedDimension — the `_parsed` brand ensures only values produced by
+ * parseDimension() are assignable. A raw UDim will NOT satisfy this type,
+ * catching accidental bypasses at compile time.
+ */
+export type ParsedDimension = UDim & {
+    readonly _parsed: unique symbol;
+};
+export declare function parseDimension(_input: string | number): ParsedDimension | undefined;
+/**
+ * Branded PaddingValues — the `_parsed` brand ensures only values produced by
+ * parsePadding() are assignable. A plain object with top, right, bottom, left
+ * will NOT satisfy this type, catching accidental bypasses at compile time.
+ */
+export type PaddingValues = {
+    readonly top: UDim;
+    readonly right: UDim;
+    readonly bottom: UDim;
+    readonly left: UDim;
+} & {
+    readonly _parsed: unique symbol;
+};
+/**
+ * Converts a CSS padding shorthand string or number into UDim values for all 4 sides.
+ *
+ * Supported formats (similar to CSS):
+ *   - 1 value:  "10px"            → top/right/bottom/left
+ *   - 2 values: "10px 20%"        → top/bottom, right/left
+ *   - 3 values: "10px 20% 10px"   → top, right/left, bottom
+ *   - 4 values: "10px 20% 10px 5%" → top, right, bottom, left
+ *
+ * Supports any dimension format supported by parseDimension (px, %, vw, vh).
+ * Number inputs are treated as pixels applied to all sides.
+ */
+export declare function parsePadding(_input: string | number): DeepReadonly<PaddingValues>;

package/out/styles/dimensionParser.luau

@@ -0,0 +1,205 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local createLogger = TS.import(script, script.Parent.Parent, "logger").createLogger
+local log = createLogger("dimensionParser")
+--[[
+	*
+	 * dimensionParser.ts — Converts CSS dimension strings to Roblox UDim.
+	 *
+	 * Supported formats:
+	 *   - Pixels:   "100px" or 100 (number) → UDim(0, 100)
+	 *   - Percent:  "50%"                   → UDim(0.5, 0)
+	 *   - Viewport: "100vw" / "100vh"       → UDim(1, 0)
+	 *   - Calc:     "calc(100% - 10px)"     → UDim(1.0, -10)
+	 *   - Auto:     "auto"                  → undefined
+	 *
+	 * Also exports parsePadding() for CSS padding shorthand.
+	 *
+	 
+]]
+--[[
+	*
+	 * Branded ParsedDimension — the `_parsed` brand ensures only values produced by
+	 * parseDimension() are assignable. A raw UDim will NOT satisfy this type,
+	 * catching accidental bypasses at compile time.
+	 
+]]
+--* Helper to construct a branded ParsedDimension inside this module. 
+local function makeParsedDimension(scale, offset)
+	return UDim.new(scale, offset)
+end
+local parseDimension
+local function parseCalc(inner)
+	local parts = string.split(inner, " - ")
+	local isSubtraction = true
+	if #parts ~= 2 then
+		parts = string.split(inner, " + ")
+		isSubtraction = false
+	end
+	if #parts ~= 2 then
+		log:warn("PARSE_CALC_FAILED", "Malformed calc expression", {
+			inner = inner,
+		})
+		return nil
+	end
+	local term1 = parseDimension(parts[1])
+	local term2 = parseDimension(parts[2])
+	if term1 == nil or term2 == nil then
+		log:warn("PARSE_CALC_FAILED", "Failed to parse calc terms", {
+			inner = inner,
+		})
+		return nil
+	end
+	local scale2 = term2.Scale
+	local offset2 = term2.Offset
+	if isSubtraction then
+		scale2 = -scale2
+		offset2 = -offset2
+	end
+	return makeParsedDimension(term1.Scale + scale2, term1.Offset + offset2)
+end
+function parseDimension(_input)
+	-- 1. If number, treat as pixels → UDim(0, input)
+	local __input = _input
+	if type(__input) == "number" then
+		return makeParsedDimension(0, _input)
+	end
+	-- 1.5. If calc(...) expression, delegate to parseCalc
+	local __input_1 = _input
+	local _condition = type(__input_1) == "string"
+	if _condition then
+		_condition = string.sub(_input, 1, 5) == "calc("
+	end
+	if _condition then
+		local inner = string.sub(_input, 6, -2)
+		local result = parseCalc(inner)
+		if result ~= nil then
+			return result
+		end
+		-- Malformed calc — fall through to the warn at the bottom
+	end
+	-- 2. If string ending in "px", extract number → UDim(0, n)
+	if string.sub(_input, -2) == "px" then
+		local n = tonumber(string.sub(_input, 1, -3))
+		if n ~= nil then
+			return makeParsedDimension(0, n)
+		end
+	end
+	-- 3. If string ending in "%", extract number / 100 → UDim(n/100, 0)
+	if string.sub(_input, -1) == "%" then
+		local n = tonumber(string.sub(_input, 1, -2))
+		if n ~= nil then
+			return makeParsedDimension(n / 100, 0)
+		end
+	end
+	-- 4. If "100vw" or "100vh", → UDim(1, 0)
+	local last2Chars = string.sub(_input, -2)
+	if last2Chars == "vh" or last2Chars == "vw" then
+		local n = tonumber(string.sub(_input, 1, -3))
+		if n ~= nil then
+			return makeParsedDimension(n / 100, 0)
+		end
+	end
+	-- 5. If "auto" → undefined
+	if _input == "auto" then
+		return nil
+	end
+	-- 6. If raw number string (e.g. "0")
+	local __input_2 = _input
+	if type(__input_2) == "string" then
+		local rawNumber = tonumber(_input)
+		if rawNumber ~= nil then
+			return makeParsedDimension(0, rawNumber)
+		end
+	end
+	--  Fallback: warn + return undefined (callers must handle this)
+	log:warn("PARSE_DIMENSION_FAILED", "Could not parse dimension", {
+		input = _input,
+	})
+	return nil
+end
+--[[
+	*
+	 * Branded PaddingValues — the `_parsed` brand ensures only values produced by
+	 * parsePadding() are assignable. A plain object with top, right, bottom, left
+	 * will NOT satisfy this type, catching accidental bypasses at compile time.
+	 
+]]
+--* Helper to construct a branded PaddingValues inside this module. 
+local function makePaddingValues(top, right, bottom, left)
+	return {
+		top = top,
+		right = right,
+		bottom = bottom,
+		left = left,
+	}
+end
+local ZERO_UDIM = UDim.new(0, 0)
+--[[
+	*
+	 * Converts a CSS padding shorthand string or number into UDim values for all 4 sides.
+	 *
+	 * Supported formats (similar to CSS):
+	 *   - 1 value:  "10px"            → top/right/bottom/left
+	 *   - 2 values: "10px 20%"        → top/bottom, right/left
+	 *   - 3 values: "10px 20% 10px"   → top, right/left, bottom
+	 *   - 4 values: "10px 20% 10px 5%" → top, right, bottom, left
+	 *
+	 * Supports any dimension format supported by parseDimension (px, %, vw, vh).
+	 * Number inputs are treated as pixels applied to all sides.
+	 
+]]
+local function parsePadding(_input)
+	-- 1. If number, treat as pixels on all sides
+	local __input = _input
+	if type(__input) == "number" then
+		local dim = parseDimension(_input)
+		return makePaddingValues(dim, dim, dim, dim)
+	end
+	-- 2. If string, split on whitespace and parse each token through parseDimension
+	local splitInput = string.split(_input, " ")
+	local size = #splitInput
+	if size == 1 then
+		--    - 1 value:  all sides
+		local a = parseDimension(splitInput[1])
+		if a ~= nil then
+			return makePaddingValues(a, a, a, a)
+		end
+	end
+	if size == 2 then
+		--    - 2 values: vertical | horizontal
+		local a = parseDimension(splitInput[1])
+		local b = parseDimension(splitInput[2])
+		if a ~= nil and b ~= nil then
+			return makePaddingValues(a, b, a, b)
+		end
+	end
+	--    - 3 values: top | horizontal | bottom
+	if size == 3 then
+		local a = parseDimension(splitInput[1])
+		local b = parseDimension(splitInput[2])
+		local c = parseDimension(splitInput[3])
+		if a ~= nil and b ~= nil and c ~= nil then
+			return makePaddingValues(a, b, c, b)
+		end
+	end
+	--    - 4 values: top | right | bottom | left
+	if size == 4 then
+		local a = parseDimension(splitInput[1])
+		local b = parseDimension(splitInput[2])
+		local c = parseDimension(splitInput[3])
+		local d = parseDimension(splitInput[4])
+		if a ~= nil and b ~= nil and c ~= nil and d ~= nil then
+			return makePaddingValues(a, b, c, d)
+		end
+	end
+	-- Fallback warn + return zero UDim padding
+	log:warn("PARSE_PADDING_FAILED", "Could not parse padding values", {
+		input = _input,
+	})
+	return makePaddingValues(ZERO_UDIM, ZERO_UDIM, ZERO_UDIM, ZERO_UDIM)
+end
+return {
+	parseDimension = parseDimension,
+	parsePadding = parsePadding,
+}

package/out/styles/gradientParser.d.ts

@@ -0,0 +1,9 @@
+export type ParsedGradient = {
+    readonly colorSequence: ColorSequence;
+    readonly transparencySequence: NumberSequence | undefined;
+    readonly rotation: number;
+} & {
+    readonly _parsed: unique symbol;
+};
+export declare function isGradientString(input: string): boolean;
+export declare function parseGradient(input: string, elementWidth?: number, elementHeight?: number): ParsedGradient | undefined;