refine the wordings to be concise and more readable. complete the missing parts (title, headings, sections, etc). focus on using bullets than long sentences.
"""
# Better title here
## Problem 1: <...>
`getPropertyValue` is slow
`getPropertyValue` returns string values with units and requires explicit parsing


### Solution
Cache CSS value on write
Access to cached CSS value instead of using `getPropertyValue`
We will have a global context cache for global css variables and per-element cotnext cache for per-element css variables

```js
class DefaultMap extends WeakMap {
  constructor(defaultValueFactory, iterable) {
    super(iterable);
    this.defaultValueFactory = defaultValueFactory;
  }

  get(key) {
    if (!this.has(key)) {
      this.set(key, this.defaultValueFactory());
    }
    return super.get(key);
  }
}

const globalContext = UnitContext();
const instanceContext = new DefaultMap(() => (UnitContext(globalContext)));
```


## Problem 2: <...>
Input to CSS value can be either string `'2px'` or number `2`
When retrieving value, which form to retrieve?
When retrieving numerical value as CSS string, not all values need units (e.g. opacity)

### Solution
Predefine `Unit` for each parameter
`Unit` instance can be assigned by number, string and `Unit`
`Unit` stores value and CSS string on assignment
When retrieving CSS property from cache, we obtain `Unit` instance, and can choose to use actual value or CSS string


```js
class Unit {
  constructor(value, type = null) {
    this.type = type;
    this.suffix = typeof type === 'string' ? type : null;
    this.assign(value);
  }

  assign(value) {
    if (value === this.value || value === this.css) {
      return;
    }
    if (this.type === null) {
      this.css = this.value = value;
      return;
    }
    
    const type = typeof value;
    let parsedValue;

    if (type === 'number') {
      parsedValue = value;
    } else if (type === 'string') {
      parsedValue = parseFloat(value);
      if (isNaN(parsedValue)) {
        throw new Error(`Invalid value: ${value}`);
      }
    } else {
      throw new Error(`Invalid type for assignment: Expected number or string, received ${type}.`);
    }
    
    const valueStr = parsedValue.toString();
    this.value = parsedValue;
    this.css = this.suffix ? (valueStr + this.suffix) : valueStr;
  }

  clone() {
    const cloned = Object.create(Unit.prototype);
    Object.assign(cloned, this);
    return cloned;
  }

  static px(value) {
    return new Unit(value, 'px');
  }

  static number(value) {
    return new Unit(value, Number);
  }

  static identity(value) {
    return new Unit(value);
  }
}
```

## Problem 3: <...>
When referencing a CSS variable, if it does not exist, it looks up variables from parents recursively. If none, it uses default.
When framework uses global CSS variables and per-element CSS variables, when we look up the variable from cache, we try to mimic the same look up behavior as the CSS variable model.
This requires a parent context and per-element context which has a reference to parent context.
There are multiple methods that would perform such lookup and it becomes cumbersome fi each function has to do:
```
if in instance context:
	// ok
else if in parent context:
	// ok
else if in parent's parent context:
	// ...
```
Also, we need unit validation when we assign to context

### Solution: Proxy with recursive dependency

< say what this does and how it solves the problem>
```js
const UnitContext = (parentContext) => 
  new Proxy({}, {
    set(target, prop, val) {
      const currentValue = target[prop];
      if (val instanceof Unit) {
        target[prop] = val;
      } else if (currentValue instanceof Unit) {
        currentValue.assign(val);
      } else if (parentContext && prop in parentContext) {
        // Clone and assign value from parentContext if it exists
        const clonedUnit = parentContext[prop].clone();
        clonedUnit.assign(val);
        target[prop] = clonedUnit;
      } else {
        // If prop not unit and val is not unit
        target[prop] = Unit.identity(val);
      }
      return true;  // Indicate the operation was successful
    },
    get(target, prop) {
      return prop in target ? target[prop] : parentContext[prop];
    }
  });
```
"""