css-typed-om-polyfill 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 oy3o
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,240 @@
+# CSS Typed OM Polyfill
+
+A JavaScript polyfill for the [CSS Typed Object Model (OM) Level 1](https://www.w3.org/TR/css-typed-om/) specification. This polyfill aims to provide a functional subset of the CSS Typed OM API for browsers that do not natively support it, allowing developers to interact with CSS values as typed JavaScript objects.
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Features](#features)
+- [Supported CSS Typed OM Interfaces](#supported-css-typed-om-interfaces)
+- [Installation](#installation)
+- [Basic Usage](#basic-usage)
+- [Advanced Usage & Notes](#advanced-usage--notes)
+  - [Parsing CSS Values](#parsing-css-values)
+  - [`calc()` and Math Functions](#calc-and-math-functions)
+  - [Arithmetic Operations](#arithmetic-operations)
+  - [`var()` (CSS Variables)](#var-css-variables)
+- [Limitations & To-Do](#limitations--to-do)
+- [Development](#development)
+- [License](#license)
+
+## Introduction
+
+The CSS Typed Object Model provides a way to manipulate CSS values in JavaScript with type awareness, rather than just dealing with strings. This can lead to more robust and performant code. This polyfill brings some of that power to environments lacking native support.
+
+It focuses on parsing CSS strings into typed objects, performing arithmetic on numeric values, and providing the `element.attributeStyleMap` interface for getting and setting styles in a typed manner.
+
+## Features
+
+*   **`HTMLElement.prototype.attributeStyleMap`:** Access and modify inline styles using a `StylePropertyMap`.
+*   **CSS Value Parsing:**
+    *   `CSSStyleValue.parse(property, cssText)`: Parses a single CSS value string.
+    *   `CSSStyleValue.parseAll(property, cssText)`: Parses a comma-separated list of CSS values.
+*   **Numeric Values:**
+    *   `CSSNumericValue` (base class for numbers and units).
+    *   `CSSUnitValue` (e.g., `10px`, `50%`, `3.14rad`).
+    *   `CSS.*` factory functions (e.g., `CSS.px(10)`, `CSS.percent(50)`, `CSS.number(5)`).
+    *   Arithmetic operations: `.add()`, `.sub()`, `.mul()`, `.div()`, `.negate()`, `.invert()`.
+    *   Unit conversion: `.to('targetUnit')` for compatible types (e.g., `s` to `ms`).
+    *   Type checking for math operations (e.g., `length + angle` is invalid).
+*   **Mathematical Expressions:**
+    *   `CSSMathSum`, `CSSMathProduct`, `CSSMathNegate`, `CSSMathInvert`.
+    *   `CSSMathMin`, `CSSMathMax`.
+    *   Recursive parsing of `calc()`, `min()`, `max()` expressions, including nested functions and `var()`.
+*   **Other CSS Values:**
+    *   `CSSKeywordValue` (e.g., `auto`, `inherit`, `initial`).
+    *   `CSSVariableReferenceValue` (for `var(--custom-property)`).
+    *   `CSSUnparsedValue` (for values not fully parsed or unsupported).
+*   **Stubbed/Partial Implementations:**
+    *   `CSSImageValue` (basic stub, returns `url(...)` as string).
+    *   `CSSPositionValue` (basic stub).
+    *   `CSSTransformValue` and its components (`CSSTranslate`, `CSSRotate`, `CSSScale`) (basic stubs with constructors and `toString()`).
+
+## Supported CSS Typed OM Interfaces
+
+**Core Classes:**
+*   `CSSStyleValue` (Abstract Base)
+*   `CSSNumericValue` (Abstract Base for numeric types)
+*   `CSSUnitValue`
+*   `CSSKeywordValue`
+*   `CSSUnparsedValue`
+*   `CSSVariableReferenceValue`
+
+**Math Classes (subclass `CSSNumericValue`):**
+*   `CSSMathValue` (Abstract Base)
+*   `CSSMathSum`
+*   `CSSMathProduct`
+*   `CSSMathNegate`
+*   `CSSMathInvert`
+*   `CSSMathMin`
+*   `CSSMathMax`
+
+**Other (Stubbed/Partial):**
+*   `CSSImageValue`
+*   `CSSPositionValue`
+*   `CSSTransformValue`
+*   `CSSTransformComponent` (Abstract Base)
+*   `CSSTranslate`
+*   `CSSRotate`
+*   `CSSScale`
+
+**Interfaces:**
+*   `StylePropertyMap` (via `element.attributeStyleMap`)
+
+## Installation
+
+Simply include the polyfill script in your HTML file before any scripts that use the CSS Typed OM API:
+
+```html
+<script src="css-typed-om-polyfill.js"></script>
+<script>
+  // Your code using Typed OM
+  const el = document.getElementById('myElement');
+  if (el && el.attributeStyleMap) {
+    el.attributeStyleMap.set('width', CSS.px(100));
+    console.log(el.attributeStyleMap.get('width').toString()); // "100px"
+  }
+</script>
+```
+
+The polyfill will automatically initialize and attach necessary properties to the global scope (`window`) and `HTMLElement.prototype`.
+
+## Basic Usage
+
+### Accessing `attributeStyleMap`
+
+```javascript
+const element = document.createElement('div');
+document.body.appendChild(element);
+
+// Set a style
+element.attributeStyleMap.set('width', CSS.px(200));
+element.attributeStyleMap.set('opacity', CSS.number(0.5));
+element.attributeStyleMap.set('margin-top', CSS.em(1.5));
+
+// Get a style
+const width = element.attributeStyleMap.get('width'); // CSSUnitValue { value: 200, unit: "px" }
+console.log(width.value); // 200
+console.log(width.unit); // "px"
+console.log(width.toString()); // "200px"
+
+const opacity = element.attributeStyleMap.get('opacity'); // CSSNumericValue { _value: 0.5, _unitType: "number" }
+console.log(opacity.toString()); // "0.5"
+```
+
+### Using `CSS.*` Factory Functions
+
+```javascript
+const length = CSS.px(100);
+const percentage = CSS.percent(50);
+const duration = CSS.s(2.5);
+const angle = CSS.deg(90);
+const number = CSS.number(10);
+
+console.log(length.add(CSS.vw(10)).toString()); // "calc(100px + 10vw)"
+```
+
+## Advanced Usage & Notes
+
+### Parsing CSS Values
+
+```javascript
+// Parse a single value
+const parsedWidth = CSSStyleValue.parse('width', 'calc(100% - 20px)');
+console.log(parsedWidth.toString()); // "calc(100% - 20px)"
+if (parsedWidth instanceof CSSMathSum) {
+  console.log(parsedWidth.operator); // "sum"
+  console.log(parsedWidth.values[0].toString()); // "100%"
+  console.log(parsedWidth.values[1].toString()); // "calc(-1 * 20px)" (negated second term)
+}
+
+const keyword = CSSStyleValue.parse('display', 'block');
+console.log(keyword.value); // "block"
+
+// Parse a list of values (e.g., for font-family)
+const fontFamilies = CSSStyleValue.parseAll('font-family', '"Arial", sans-serif');
+fontFamilies.forEach(font => console.log(font.toString()));
+// Output:
+// "Arial" (CSSUnparsedValue for the string)
+// "sans-serif" (CSSKeywordValue)
+```
+
+### `calc()` and Math Functions
+
+The polyfill includes a robust parser for `calc()`, `min()`, and `max()` expressions, respecting operator precedence and parentheses.
+
+```javascript
+const complexCalc = CSSStyleValue.parse('width', 'calc( (var(--A) + 2 * ( 5vw - var(--B) )) / 3 )');
+console.log(complexCalc.toString()); // "calc((var(--A) + 2 * (5vw - var(--B))) / 3)"
+// The internal structure will be a tree of CSSMathProduct, CSSMathSum, etc.
+```
+
+### Arithmetic Operations
+
+`CSSNumericValue` and its subclasses support arithmetic. Operations involving different compatible units or `var()` will result in `CSSMathSum` or `CSSMathProduct` objects.
+
+```javascript
+const val1 = CSS.px(10);
+const val2 = CSS.em(2);
+const val3 = CSS.percent(50);
+const num = CSS.number(5);
+
+// Addition
+console.log(val1.add(val2).toString());         // "calc(10px + 2em)"
+console.log(val1.add(CSS.px(5)).toString());   // "15px" (same unit)
+
+// Subtraction
+console.log(val3.sub(CSS.px(10)).toString());   // "calc(50% - 10px)"
+
+// Multiplication
+console.log(val1.mul(num).toString());          // "50px" (length * number = length)
+console.log(val1.mul(CSS.percent(200)).toString()); // "calc(10px * 200%)" (length * percent)
+
+// Division
+console.log(val1.div(num).toString());          // "2px"
+console.log(val1.div(CSS.px(2)).toString());    // "5" (length / length = number)
+```
+
+### `var()` (CSS Variables)
+
+`var()` expressions are parsed into `CSSVariableReferenceValue` objects. They can be used within math functions and arithmetic operations, remaining unresolved.
+
+```javascript
+const myVar = CSSStyleValue.parse('width', 'var(--my-width, 100px)');
+console.log(myVar.variable); // "--my-width"
+console.log(myVar.fallback.toString()); // "100px"
+
+const calcWithVar = CSS.px(10).add(myVar);
+console.log(calcWithVar.toString()); // "calc(10px + var(--my-width, 100px))"
+```
+
+## Limitations & To-Do
+
+This polyfill is a work in progress and does not cover the entire CSS Typed OM specification. Key limitations include:
+
+*   **`clamp()`:** Not currently supported in the math expression parser (will parse as `CSSUnparsedValue` if top-level, or throw error if inside `calc`).
+*   **Color Values:** Complex color functions (e.g., `rgb()`, `hsl()`, `color()`) are generally parsed as `CSSUnparsedValue`. Basic named colors might parse as `CSSKeywordValue`.
+*   **Detailed Transform Parsing:** While `CSSTransformValue` and component classes (`CSSTranslate`, `CSSRotate`, `CSSScale`) exist with constructors, the main `CSSStyleValue.parse` will return `CSSUnparsedValue` for transform function strings. You'd need to construct them manually.
+*   **`CSSNumericValue.equals()`:** Provides a simplified structural check, primarily via `toString()` comparison, which may not be robust for all mathematically equivalent but structurally different expressions.
+*   **Type System Nuances:** The `type()` method on math values attempts to determine the resulting type (e.g., `length`, `angle`, `percent`), but complex interactions, especially with `var()`, can lead to indeterminate types.
+*   **No Actual Value Computation:** The polyfill parses and represents CSS values and expressions. It does **not** compute the final used value of expressions (e.g., it won't resolve `calc(10px + 5%)` to a single pixel value, as that requires layout context).
+*   **Shorthand Properties:** `StylePropertyMap.get()` might return `null` or an unparsed value for shorthands if the browser doesn't expand them into longhands in `element.style`. The polyfill relies on what `element.style.getPropertyValue()` returns.
+*   **Limited Property-Specific Parsing:** `CSSStyleValue.parse(property, cssText)` does not currently use the `property` argument to guide parsing specific to that property's grammar (beyond basic distinctions).
+
+**Future Enhancements (To-Do):**
+*   Implement `clamp()`.
+*   Improve parsing for color values.
+*   Full parsing of transform functions into `CSSTransformValue`.
+*   More robust `CSSNumericValue.equals()`.
+*   Support for more `CSSStyleValue` subclasses (e.g., `CSSSkew`, `CSSPerspective`, `CSSMatrixComponent`).
+*   Consider `CSSMathClamp`.
+
+## Development
+
+The code is contained within a single IIFE (Immediately Invoked Function Expression). The core parsing logic for math expressions is in `parseCssMathExpression`. `CSSStyleValue.parse` is the main entry point for parsing CSS text.
+
+The script includes example usage code wrapped in a `setTimeout` at the end, which can be used for testing in a browser environment.
+
+## License
+
+[MIT](LICENSE)

package/README.zh.md

@@ -0,0 +1,240 @@
+# CSS Typed OM Polyfill
+
+一个针对 [CSS Typed Object Model (OM) Level 1](https://www.w3.org/TR/css-typed-om/) 规范的 JavaScript polyfill。此 polyfill 旨在为那些本身不支持 CSS Typed OM API 的浏览器提供一个功能子集，使开发者能够以类型化 JavaScript 对象的方式与 CSS 值进行交互。
+
+## 目录
+
+- [简介](#简介)
+- [特性](#特性)
+- [支持的 CSS Typed OM 接口](#支持的-css-typed-om-接口)
+- [安装](#安装)
+- [基本用法](#基本用法)
+- [高级用法与注意事项](#高级用法与注意事项)
+  - [解析 CSS 值](#解析-css-值)
+  - [`calc()` 与数学函数](#calc-与数学函数)
+  - [算术运算](#算术运算)
+  - [`var()` (CSS 变量)](#var-css-变量)
+- [局限性与待办事项](#局限性与待办事项)
+- [开发](#开发)
+- [许可证](#许可证)
+
+## 简介
+
+CSS Typed Object Model 提供了一种在 JavaScript 中以类型感知的方式操作 CSS 值的方法，而不是仅仅处理字符串。这可以带来更健壮和更高性能的代码。此 polyfill 将这种能力的一部分带到了缺乏原生支持的环境中。
+
+它专注于将 CSS 字符串解析为类型化对象，对数值执行算术运算，并提供 `element.attributeStyleMap` 接口以便以类型化的方式获取和设置样式。
+
+## 特性
+
+*   **`HTMLElement.prototype.attributeStyleMap`**: 使用 `StylePropertyMap` 访问和修改内联样式。
+*   **CSS 值解析**:
+    *   `CSSStyleValue.parse(property, cssText)`: 解析单个 CSS 值字符串。
+    *   `CSSStyleValue.parseAll(property, cssText)`: 解析逗号分隔的 CSS 值列表。
+*   **数值**:
+    *   `CSSNumericValue` (数字和单位的基类)。
+    *   `CSSUnitValue` (例如, `10px`, `50%`, `3.14rad`)。
+    *   `CSS.*` 工厂函数 (例如, `CSS.px(10)`, `CSS.percent(50)`, `CSS.number(5)`)。
+    *   算术运算: `.add()`, `.sub()`, `.mul()`, `.div()`, `.negate()`, `.invert()`。
+    *   单位转换: `.to('targetUnit')` 用于兼容类型 (例如, `s` 转 `ms`)。
+    *   数学运算的类型检查 (例如, `length + angle` 是无效的)。
+*   **数学表达式**:
+    *   `CSSMathSum`, `CSSMathProduct`, `CSSMathNegate`, `CSSMathInvert`。
+    *   `CSSMathMin`, `CSSMathMax`。
+    *   递归解析 `calc()`、`min()`、`max()` 表达式，包括嵌套函数和 `var()`。
+*   **其他 CSS 值**:
+    *   `CSSKeywordValue` (例如, `auto`, `inherit`, `initial`)。
+    *   `CSSVariableReferenceValue` (用于 `var(--custom-property)`)。
+    *   `CSSUnparsedValue` (用于未完全解析或不支持的值)。
+*   **桩实现/部分实现**:
+    *   `CSSImageValue` (基础桩实现, 将 `url(...)` 作为字符串返回)。
+    *   `CSSPositionValue` (基础桩实现)。
+    *   `CSSTransformValue` 及其组件 (`CSSTranslate`, `CSSRotate`, `CSSScale`) (带有构造函数和 `toString()` 的基础桩实现)。
+
+## 支持的 CSS Typed OM 接口
+
+**核心类:**
+*   `CSSStyleValue` (抽象基类)
+*   `CSSNumericValue` (数值类型的抽象基类)
+*   `CSSUnitValue`
+*   `CSSKeywordValue`
+*   `CSSUnparsedValue`
+*   `CSSVariableReferenceValue`
+
+**数学类 (继承自 `CSSNumericValue`):**
+*   `CSSMathValue` (抽象基类)
+*   `CSSMathSum`
+*   `CSSMathProduct`
+*   `CSSMathNegate`
+*   `CSSMathInvert`
+*   `CSSMathMin`
+*   `CSSMathMax`
+
+**其他 (桩实现/部分实现):**
+*   `CSSImageValue`
+*   `CSSPositionValue`
+*   `CSSTransformValue`
+*   `CSSTransformComponent` (抽象基类)
+*   `CSSTranslate`
+*   `CSSRotate`
+*   `CSSScale`
+
+**接口:**
+*   `StylePropertyMap` (通过 `element.attributeStyleMap` 提供)
+
+## 安装
+
+只需在您的 HTML 文件中，在使用 CSS Typed OM API 的任何脚本之前引入 polyfill 脚本即可：
+
+```html
+<script src="path/to/css-typed-om-polyfill.js"></script>
+<script>
+  // 您使用 Typed OM 的代码
+  const el = document.getElementById('myElement');
+  if (el && el.attributeStyleMap) {
+    el.attributeStyleMap.set('width', CSS.px(100));
+    console.log(el.attributeStyleMap.get('width').toString()); // "100px"
+  }
+</script>
+```
+
+polyfill 将自动初始化并将必要的属性附加到全局作用域 (`window`) 和 `HTMLElement.prototype`。
+
+## 基本用法
+
+### 访问 `attributeStyleMap`
+
+```javascript
+const element = document.createElement('div');
+document.body.appendChild(element);
+
+// 设置样式
+element.attributeStyleMap.set('width', CSS.px(200));
+element.attributeStyleMap.set('opacity', CSS.number(0.5));
+element.attributeStyleMap.set('margin-top', CSS.em(1.5));
+
+// 获取样式
+const width = element.attributeStyleMap.get('width'); // CSSUnitValue { value: 200, unit: "px" }
+console.log(width.value); // 200
+console.log(width.unit);  // "px"
+console.log(width.toString()); // "200px"
+
+const opacity = element.attributeStyleMap.get('opacity'); // CSSNumericValue { _value: 0.5, _unitType: "number" }
+console.log(opacity.toString()); // "0.5"
+```
+
+### 使用 `CSS.*` 工厂函数
+
+```javascript
+const length = CSS.px(100);
+const percentage = CSS.percent(50);
+const duration = CSS.s(2.5);
+const angle = CSS.deg(90);
+const number = CSS.number(10);
+
+console.log(length.add(CSS.vw(10)).toString()); // "calc(100px + 10vw)"
+```
+
+## 高级用法与注意事项
+
+### 解析 CSS 值
+
+```javascript
+// 解析单个值
+const parsedWidth = CSSStyleValue.parse('width', 'calc(100% - 20px)');
+console.log(parsedWidth.toString()); // "calc(100% - 20px)"
+if (parsedWidth instanceof CSSMathSum) {
+  console.log(parsedWidth.operator); // "sum"
+  console.log(parsedWidth.values[0].toString()); // "100%"
+  console.log(parsedWidth.values[1].toString()); // "calc(-1 * 20px)" (第二项被取反)
+}
+
+const keyword = CSSStyleValue.parse('display', 'block');
+console.log(keyword.value); // "block"
+
+// 解析值列表 (例如, 用于 font-family)
+const fontFamilies = CSSStyleValue.parseAll('font-family', '"Arial", sans-serif');
+fontFamilies.forEach(font => console.log(font.toString()));
+// 输出:
+// "Arial" (字符串的 CSSUnparsedValue)
+// "sans-serif" (CSSKeywordValue)
+```
+
+### `calc()` 与数学函数
+
+此 polyfill 包含一个针对 `calc()`、`min()` 和 `max()` 表达式的健壮解析器，它遵循运算符优先级和括号规则。
+
+```javascript
+const complexCalc = CSSStyleValue.parse('width', 'calc( (var(--A) + 2 * ( 5vw - var(--B) )) / 3 )');
+console.log(complexCalc.toString()); // "calc((var(--A) + 2 * (5vw - var(--B))) / 3)"
+// 内部结构将是一个由 CSSMathProduct, CSSMathSum 等组成的树
+```
+
+### 算术运算
+
+`CSSNumericValue` 及其子类支持算术运算。涉及不同兼容单位或 `var()` 的运算将产生 `CSSMathSum` 或 `CSSMathProduct` 对象。
+
+```javascript
+const val1 = CSS.px(10);
+const val2 = CSS.em(2);
+const val3 = CSS.percent(50);
+const num = CSS.number(5);
+
+// 加法
+console.log(val1.add(val2).toString());         // "calc(10px + 2em)"
+console.log(val1.add(CSS.px(5)).toString());   // "15px" (相同单位)
+
+// 减法
+console.log(val3.sub(CSS.px(10)).toString());   // "calc(50% - 10px)"
+
+// 乘法
+console.log(val1.mul(num).toString());          // "50px" (长度 * 数字 = 长度)
+console.log(val1.mul(CSS.percent(200)).toString()); // "calc(10px * 200%)" (长度 * 百分比)
+
+// 除法
+console.log(val1.div(num).toString());          // "2px"
+console.log(val1.div(CSS.px(2)).toString());    // "5" (长度 / 长度 = 数字)
+```
+
+### `var()` (CSS 变量)
+
+`var()` 表达式被解析为 `CSSVariableReferenceValue` 对象。它们可以在数学函数和算术运算中使用，并保持未解析状态。
+
+```javascript
+const myVar = CSSStyleValue.parse('width', 'var(--my-width, 100px)');
+console.log(myVar.variable); // "--my-width"
+console.log(myVar.fallback.toString()); // "100px"
+
+const calcWithVar = CSS.px(10).add(myVar);
+console.log(calcWithVar.toString()); // "calc(10px + var(--my-width, 100px))"
+```
+
+## 局限性与待办事项
+
+此 polyfill 尚在开发中，并未覆盖整个 CSS Typed OM 规范。主要局限性包括：
+
+*   **`clamp()`**: 目前在数学表达式解析器中不支持（如果位于顶层，将解析为 `CSSUnparsedValue`；如果在 `calc()` 内部，则会抛出错误）。
+*   **颜色值**: 复杂的颜色函数 (例如, `rgb()`, `hsl()`, `color()`) 通常被解析为 `CSSUnparsedValue`。基本的命名颜色可能解析为 `CSSKeywordValue`。
+*   **详细的 Transform 解析**: 虽然存在带有构造函数的 `CSSTransformValue` 及其组件类 (`CSSTranslate`, `CSSRotate`, `CSSScale`)，但主要的 `CSSStyleValue.parse` 会对 transform 函数字符串返回 `CSSUnparsedValue`。您需要手动构造它们。
+*   **`CSSNumericValue.equals()`**: 提供简化的结构检查，主要通过 `toString()` 比较，对于所有数学上等价但结构不同的表达式可能不够健壮。
+*   **类型系统细微之处**: 数学值上的 `type()` 方法尝试确定结果类型 (例如, `length`, `angle`, `percent`)，但复杂的交互，特别是与 `var()` 的交互，可能导致类型不确定。
+*   **无实际值计算**: polyfill 解析并表示 CSS 值和表达式。它**不会**计算表达式的最终使用值 (例如, 它不会将 `calc(10px + 5%)` 解析为单个像素值，因为这需要布局上下文)。
+*   **简写属性**: 如果浏览器在 `element.style` 中没有将简写属性展开为完整属性，`StylePropertyMap.get()` 可能会对简写属性返回 `null` 或未解析的值。polyfill 依赖于 `element.style.getPropertyValue()` 的返回值。
+*   **有限的特定属性解析**: `CSSStyleValue.parse(property, cssText)` 目前不使用 `property` 参数来指导特定于该属性语法的解析（超出基本区分）。
+
+**未来增强 (待办事项):**
+*   实现 `clamp()`。
+*   改进颜色值的解析。
+*   将 transform 函数完整解析为 `CSSTransformValue`。
+*   更健壮的 `CSSNumericValue.equals()`。
+*   支持更多 `CSSStyleValue` 子类 (例如, `CSSSkew`, `CSSPerspective`, `CSSMatrixComponent`)。
+*   考虑 `CSSMathClamp`。
+
+## 开发
+
+代码包含在一个 IIFE (立即调用函数表达式) 中。数学表达式的核心解析逻辑位于 `parseCssMathExpression` 中。`CSSStyleValue.parse` 是解析 CSS 文本的主要入口点。
+
+脚本末尾包含一个用 `setTimeout` 包装的示例用法代码，可在浏览器环境中用于测试。
+
+## 许可证
+
+[MIT](LICENSE)