Update CSSStyleDeclaration.js

Author: asamuzaK

lib/CSSStyleDeclaration.js

@@ -14,19 +14,11 @@ const {
 } = require("./handlers");
 const { normalizeProperties, prepareProperties, shorthandProperties } = require("./normalize");
 const { hasVarFunc, parseCSS, parsePropertyValue, prepareValue } = require("./parsers");
+const { getCache, setCache } = require("./utils/cache");
 const { ELEMENT_NODE, NO_MODIFICATION_ALLOWED_ERR } = require("./utils/constants");
 const { getPropertyDescriptor } = require("./utils/propertyDescriptors");
 const { asciiLowercase } = require("./utils/strings");
 
-// Internal Setters (Dynamic Assignment)
-// These handlers are mapped to internal method names expected by generated properties.
-const internalSetters = {
-  _borderSetter: handleBorder,
-  _flexBoxSetter: handleFlex,
-  _positionShorthandSetter: handlePositionShorthand,
-  _positionLonghandSetter: handlePositionLonghand
-};
-
 /**
  * @see https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface
  */
@@ -389,8 +381,12 @@ class CSSStyleDeclaration {
    * @returns {object} The parsed CSS object.
    */
   _parseCSSText(val) {
-    // TBD: use cache?
-    return parseCSS(
+    const cacheKey = `parseCSSText_${val}`;
+    const cachedValue = getCache(cacheKey);
+    if (cachedValue && Object.hasOwn(cachedValue, "children")) {
+      return cachedValue;
+    }
+    const parsedValue = parseCSS(
       val,
       {
         globalObject: this._global,
@@ -401,6 +397,8 @@ class CSSStyleDeclaration {
       },
       true
     );
+    setCache(cacheKey, parsedValue);
+    return parsedValue;
   }
 
   /**
@@ -451,13 +449,12 @@ class CSSStyleDeclaration {
     if (isCustomProperty || hasVarFunc(value)) {
       this._addPropertyToMap(properties, property, value, priority);
     } else {
-      // TBD: use cache?
       const parsedValue = parsePropertyValue(property, value, {
         globalObject: this._global,
         options: this._options
       });
       if (parsedValue) {
-        this._addPropertyToMap(properties, property, value, priority);
+        this._addPropertyToMap(properties, property, parsedValue, priority);
       } else {
         this.removeProperty(property);
       }
@@ -518,8 +515,15 @@ for (const definition of propertyDefinitions.values()) {
   }
 }
 
+// These handlers are mapped to internal method names expected by generated properties.
+const internalSetters = {
+  _borderSetter: handleBorder,
+  _flexBoxSetter: handleFlex,
+  _positionShorthandSetter: handlePositionShorthand,
+  _positionLonghandSetter: handlePositionLonghand
+};
+
 // Assign the internal setters to the prototype.
-// These methods are used by the properties generated in generated/properties.js.
 for (const [methodName, handler] of Object.entries(internalSetters)) {
   // NOTE: 'this' must be bound to the CSSStyleDeclaration instance.
   CSSStyleDeclaration.prototype[methodName] = function (...args) {