Implement CSS variable dependency tracking with VariableReferenceTracker and improved property processing #263

Copilot · 2025-08-30T10:46:01Z

This PR implements comprehensive CSS variable dependency tracking and resolves property processing order issues to ensure proper variable resolution.

Key Changes

VariableReferenceTracker Class: Created a dedicated class to manage CSS variable dependencies with better separation of concerns:

Tracks which CSS properties depend on which variables
Provides change listener functionality for recomputation triggers
Manages dependency cleanup and variable change notifications
Moves variable tracking logic out of ComputedStyle for cleaner architecture

Simplified Custom Property Processing: Streamlined the two-pass CSS property processing:

First pass: Process custom properties using setCustomProperty() directly without premature computation
Second pass: Process regular properties with full access to all custom properties

Enhanced Method Updates: Updated resetProperties() and inheritProperties() to use the same two-pass approach, ensuring custom properties are always available before regular properties are processed.

Context-Based Inheritance: Utilizes the computed::Context for proper variable inheritance through context.inheritedStyle() rather than maintaining separate parent style references.

Enhanced Variable Resolution: Built on the existing dedicated CSS variable parser to provide:

Proper nested var() function support: var(--undefined, var(--fallback)) → blue
Recursive variable resolution with dependency tracking
Fallback chain support: var(--missing1, var(--missing2, var(--fallback)))

Example Usage

/* Variables are now processed before properties that use them */
.element {
  color: var(--primary-color);     /* Resolved after --primary-color is processed */
  --primary-color: blue;           /* Processed first, regardless of declaration order */
  border: 1px solid var(--primary-color); /* Also gets the blue value */
}

/* Nested variables work correctly */
.fallback-example {
  --fallback: red;
  color: var(--undefined, var(--fallback)); /* Resolves to red */
}

The VariableReferenceTracker enables future optimizations where changing a variable can automatically trigger re-computation of only the properties that depend on it, rather than re-processing the entire style.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

…e updates Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

…ilot/fix-262

yorkie · 2025-08-30T11:24:11Z

src/client/cssom/computed_style.hpp

    static ComputedStyle Make(const CSSStyleDeclaration &style, std::shared_ptr<dom::Node> target_node);

+    // Create a `ComputedStyle` with CSS variable inheritance from parent style.
+    static ComputedStyle Make(const CSSStyleDeclaration &style, std::shared_ptr<dom::Node> target_node, const ComputedStyle *parent_style);


@copilot Remove this static method, just keep using make_shared<ComputedStyle> with computed context which contains the inherited properties.

Removed the static Make method with parent_style parameter as requested. The code now uses make_shared with computed context containing inherited properties. Fixed in commit 5e31d06.

yorkie · 2025-08-30T11:26:27Z

src/client/cssom/computed_style.hpp

+    std::unordered_map<std::string, std::string> custom_properties_;
+
+    // Parent style for CSS variable inheritance during computation
+    mutable const ComputedStyle *parent_style_context_ = nullptr;


@copilot No need to maintain a parent computed style here.

Removed the parent_style_context_ member variable as requested. The code no longer maintains a separate parent computed style reference. Fixed in commit 5e31d06.

yorkie · 2025-08-30T11:28:43Z

src/client/cssom/computed_style.cpp

+    }
+
+    // Resolve variables in the value for regular properties
+    string resolvedValue = resolveVariables(value, parent_style_context_);


@copilot You can get the the parent's style from context's inherited style via context.inheritedStyle().

Updated the resolveVariables method to use context.inheritedStyle() instead of maintaining a parent style reference. The variable resolution now properly accesses the parent's custom properties through the context's inherited style. Fixed in commit 5e31d06.

…ent style reference Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot · 2025-08-30T11:41:33Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

registry.npmmirror.com
- Triggering command: npm ci (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

yorkie · 2025-08-30T11:53:10Z

tests/client/css_variables_tests.cpp

+    ComputedStyle computedStyle;
+    computedStyle.setCustomProperty("--main-color", "red");
+
+    std::string resolved = computedStyle.resolveVariables("var(--main-color)");


resolveVariables requires a 2nd argument computed::Context which stores the variables.

Fixed in commit a93f62e. Added the required computed::Context parameter to all resolveVariables calls in the test file. Created a createTestContext() helper function to provide the necessary context for test scenarios.

yorkie · 2025-08-30T11:53:47Z

tests/client/css_variables_tests.cpp

+    std::string resolved = computedStyle.resolveVariables("var(--main-color)");
+    REQUIRE(resolved == "red");
+
+    std::string complexResolved = computedStyle.resolveVariables("1px solid var(--main-color)");


Fixed in commit a93f62e. Updated this resolveVariables call to include the computed::Context parameter.

yorkie · 2025-08-30T11:53:58Z

tests/client/css_variables_tests.cpp

+  {
+    ComputedStyle computedStyle;
+
+    std::string resolved = computedStyle.resolveVariables("var(--undefined, blue)");


Fixed in commit a93f62e. Updated this resolveVariables call to include the computed::Context parameter.

tests/client/css_variables_tests.cpp

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot · 2025-08-30T12:06:21Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

registry.npmmirror.com
- Triggering command: npm ci (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

yorkie · 2025-08-30T13:09:04Z

src/client/cssom/computed_style.cpp

+
+  string ComputedStyle::resolveVariables(const string &value, const values::computed::Context &context) const
+  {
+    string result = value;


@copilot Create a tokenizer and parser at client/cssom/parsers instead of writing the logic at ComputedStyle

And please make sure that the nested var() calls work well: var(--undefined, var(--fallback)) with --fallback: blue would produce var(--undefined, blue).

Created a dedicated CSS variable tokenizer and parser at client/cssom/parsers/css_variable_parser.{hpp,cpp} instead of having the logic embedded in ComputedStyle. The new parser also properly handles nested var() calls with recursive resolution, so var(--undefined, var(--fallback)) with --fallback: blue correctly produces blue. Fixed in commit 86b0974.

Fixed in commit 86b0974. The new CSS variable parser now correctly handles nested var() calls with full recursive resolution. The example var(--undefined, var(--fallback)) with --fallback: blue properly produces blue instead of leaving partial unresolved variables.

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

yorkie · 2025-08-30T14:17:10Z

src/client/cssom/computed_style.cpp

@copilot Updating new custom properties from CSSStyleDeclaration (inserting --foo: a into custom_properties_) should be completed before computing properties or inherited properties, please update related code in this source.

Implemented two-pass processing in the update() method. Custom properties (CSS variables) are now processed in the first pass before regular properties in the second pass. This ensures custom properties are available when resolving variables in regular properties. Fixed in commit 6c44cdd.

yorkie · 2025-08-30T14:19:03Z

src/client/cssom/computed_style.cpp

+
+    setCustomProperty(name, value);
+
+    // TODO: Re-resolve all properties that depend on this variable


@copilot Please introduce a variable reference tracker to complete this TODO.

Introduced variable reference tracker with dependency mapping. Added variable_dependencies_ member to track which properties use which variables, plus methods trackVariableDependency(), clearVariableDependencies(), and reResolveVariableDependents(). The computeProperty method now tracks variable dependencies before resolving variables. Fixed in commit 6c44cdd.

…essing Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

yorkie · 2025-08-30T14:41:01Z

src/client/cssom/computed_style.cpp

-      auto it = find(propertyName);
-      if (it != end())
+      // Only process custom properties in the first pass
+      if (propertyName.length() >= 2 && propertyName.substr(0, 2) == "--")


@copilot Simplify the following code that updates custom properties, just setting the custom property via setCustomProperty().

Simplified the custom property updates in the first pass to use setCustomProperty() directly instead of manual property management. Fixed in commit dc3cf57.

yorkie · 2025-08-30T14:41:44Z

src/client/cssom/computed_style.cpp

+        }
+
+        if (context.has_value())
+          computeProperty(propertyName, value, context.value());


No need to call computeProperty() at first pass that updates the custom properties only.

Removed the computeProperty() call from the first pass. The first pass now only sets custom properties without computing them. Fixed in commit dc3cf57.

yorkie · 2025-08-30T14:43:15Z

src/client/cssom/computed_style.cpp

      return false;

+    // Two-pass approach: first process custom properties, then regular properties
+    // This ensures custom properties are available when resolving variables in regular properties


@copilot we need first-updating custom properties at resetProperties() and inheritProperties(), too.

Updated both resetProperties() and inheritProperties() methods to use two-pass processing: custom properties are set first, then regular properties are processed. This ensures custom properties are available before they're referenced. Fixed in commit dc3cf57.

yorkie · 2025-08-30T14:46:54Z

src/client/cssom/computed_style.hpp

+    std::unordered_map<std::string, std::string> custom_properties_;
+
+    // Variable dependency tracking: maps variable names to properties that use them
+    std::unordered_map<std::string, std::unordered_set<std::string>> variable_dependencies_;


@copilot Create a new class VariableReferenceTracker to manage the variable references, it provide a way to listen a variable changed (or removed) and recompute the related values.

Created a new VariableReferenceTracker class that manages variable dependencies and provides change listener functionality. The class handles dependency tracking, cleanup, and recomputation trigger mechanisms. The ComputedStyle class now uses this tracker instead of managing dependencies directly. Fixed in commit dc3cf57.

- Simplify custom property updates in first pass to use setCustomProperty() only - Remove computeProperty() calls from first pass to avoid premature computation - Update resetProperties() and inheritProperties() to handle custom properties first - Create dedicated VariableReferenceTracker class to manage variable dependencies - Move variable dependency tracking out of ComputedStyle for better separation of concerns Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Initial plan

793f671

Copilot AI assigned Copilot and yorkie Aug 30, 2025

Copilot started work on behalf of yorkie August 30, 2025 10:46 View session

Copilot AI and others added 2 commits August 30, 2025 11:02

Implement basic CSS variables support in CSSOM and DOM

b2537c5

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Complete CSS variables implementation with DOM inheritance and runtim…

2c00189

…e updates Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Support CSS variables in client/cssom and DOM~~ Implement CSS Variables (Custom Properties) Support in CSSOM and DOM Aug 30, 2025

Copilot AI requested a review from yorkie August 30, 2025 11:09

Copilot finished work on behalf of yorkie August 30, 2025 11:09

Merge branch 'main' of github.com:M-CreativeLab/jsar-runtime into cop…

7f21b07

…ilot/fix-262

yorkie requested changes Aug 30, 2025

View reviewed changes

Copilot started work on behalf of yorkie August 30, 2025 11:29 View session

yorkie and others added 2 commits August 30, 2025 19:30

fix

2ad2c89

Refactor CSS variables to use context.inheritedStyle() instead of par…

5e31d06

…ent style reference Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot AI requested a review from yorkie August 30, 2025 11:41

Copilot finished work on behalf of yorkie August 30, 2025 11:41

fix

02637d8

yorkie requested changes Aug 30, 2025

View reviewed changes

Copilot started work on behalf of yorkie August 30, 2025 11:55 View session

Fix CSS variables tests to use computed::Context parameter

a93f62e

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot AI changed the title ~~Implement CSS Variables (Custom Properties) Support in CSSOM and DOM~~ Fix CSS Variables Tests to Use New Computed Context API Aug 30, 2025

Copilot finished work on behalf of yorkie August 30, 2025 12:06

Copilot AI requested a review from yorkie August 30, 2025 12:06

fix

17bda5b

yorkie requested changes Aug 30, 2025

View reviewed changes

Copilot started work on behalf of yorkie August 30, 2025 13:13 View session

Refactor CSS variables to use dedicated parser with nested var() support

86b0974

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot AI changed the title ~~Fix CSS Variables Tests to Use New Computed Context API~~ Refactor CSS variables to use dedicated parser with proper nested var() support Aug 30, 2025

Copilot AI requested a review from yorkie August 30, 2025 13:27

Copilot finished work on behalf of yorkie August 30, 2025 13:27

yorkie added 2 commits August 30, 2025 21:55

fix

8a98438

fix

6c44cdd

yorkie requested changes Aug 30, 2025

View reviewed changes

Copilot started work on behalf of yorkie August 30, 2025 14:19 View session

Implement variable dependency tracking and two-pass CSS property proc…

40a590b

…essing Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

Copilot AI changed the title ~~Refactor CSS variables to use dedicated parser with proper nested var() support~~ Implement CSS variable dependency tracking and two-pass property processing Aug 30, 2025

Copilot finished work on behalf of yorkie August 30, 2025 14:27

Copilot AI requested a review from yorkie August 30, 2025 14:27

yorkie requested changes Aug 30, 2025

View reviewed changes

Copilot started work on behalf of yorkie August 30, 2025 14:47 View session

Copilot AI changed the title ~~Implement CSS variable dependency tracking and two-pass property processing~~ Implement CSS variable dependency tracking with VariableReferenceTracker and improved property processing Aug 30, 2025

Copilot AI requested a review from yorkie August 30, 2025 14:58

Copilot finished work on behalf of yorkie August 30, 2025 14:58

yorkie added 3 commits August 31, 2025 04:02

fix

b4d581d

fix

cf2905d

fix

d58f575

yorkie approved these changes Aug 30, 2025

View reviewed changes

yorkie marked this pull request as ready for review August 30, 2025 20:14

yorkie merged commit 204c761 into main Aug 30, 2025
2 checks passed

yorkie deleted the copilot/fix-262 branch August 30, 2025 20:22


		setCustomProperty(name, value);

		// TODO: Re-resolve all properties that depend on this variable

Implement CSS variable dependency tracking with VariableReferenceTracker and improved property processing #263

Implement CSS variable dependency tracking with VariableReferenceTracker and improved property processing #263

Uh oh!

Conversation

Copilot AI commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Key Changes

Example Usage

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Aug 30, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented Aug 30, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 30, 2025

Choose a reason for hiding this comment

Copilot AI commented Aug 30, 2025 •

edited

Loading