Split into CSSStyleDeclaration and CSSStyleProperties #244

asamuzaK · 2025-09-08T14:03:22Z

Part of #235
Rebased #243

Fixes #242, fixes #247, fixes jsdom/jsdom#3939, fixes jsdom/jsdom#3940
I'll include wpt style tests later (when I submit a PR to jsdom to update the cssstyle)

Spec: https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface

Breaking change: the functionality provided by CSSStyleDeclaration is now provided by CSSStyleProperties, i.e. use new CSSStyleProperties() to create an instance.
Breaking change: the arguments to new CSSStyleProperties() are different from the arguments to new CSSStyleDeclaration().
- The first argument is a Window.
- The second argument is an options object.
  - The on change callback previously received as the first argument should be included in the options object using onChange key.
```
const node = document.createElement("div");
const callback = cssText => {
  console.log(cssText);
};
const style = new CSSStyleProperties(window, {
  onChange: callback
});
```
Switched main entry point from ./lib/CSSStyleDeclaration.js to ./lib/index.js.
- Exporting 3 files from index.js.
  - CSSStyleDeclaration.js
  - CSSStypeProperties.js
  - propertyList.js
    - List of supported properties and their definitions.
Updated dependencies and devDependencies.

lib/webidl/CSSStyleDeclaration.webidl

asamuzaK · 2025-09-19T11:55:20Z

Back to draft, will enable after jsdom@27 issues are addressed.

Workaround for jsdom/jsdom#3939

Fix jsdom#247

Unit test for jsdom/jsdom#3940

asamuzaK · 2025-10-03T23:36:21Z

Ready for review.

domenic

Have you tested this with a local fork of jsdom yet? It's probably best to merge and release only once we know it works.

domenic · 2025-10-06T07:59:33Z

lib/utils/cache.js

Can you explain the purpose of this file in a longer comment at the top of it? I'm curious about questions like:

Why is lru-cache alone not good enough?

What is the deal with null cache items? How do they differ from storing "null", or not storing anything at all?

Why do we need a custom JSON stringification instead of using the default? Why is JSON involved at all?

domenic · 2025-10-06T08:00:13Z

lib/CSSStyleDeclaration.js

-  constructor(onChangeCallback, opt = {}) {
-    // Make constructor and internals non-enumerable.
+  constructor(globalObject = globalThis, opt = {}) {
+    // Make internals non-enumerable.


This extra work should no longer be necessary in the new architecture. We can just set properties normally.

domenic · 2025-10-06T08:00:53Z

lib/CSSStyleDeclaration.js

-        this._readonly = true;
-      } else if (context.nodeType === 1 && Object.hasOwn(context, "style")) {
-        this._global = context.ownerDocument.defaultView;
+      if (context.nodeType === 1) {


Please declare a constant for this at the top of the file.

domenic · 2025-10-06T08:01:15Z

lib/CSSStyleDeclaration.js

    }
-    if (typeof onChangeCallback === "function") {
-      this._onChange = onChangeCallback;
+    if (typeof opt.onChange === "function") {


It's probably best to assume such a function is always passed.

domenic · 2025-10-06T08:03:00Z

lib/CSSStyleDeclaration.js

+  }
+
+  // Non-standard
+  setOptions(opt = {}) {


Can we add a comment for what this will be used for? (In general, changing options after creation seems unusual, so documenting it is good.)

domenic · 2025-10-06T08:05:36Z

scripts/downloadLatestProperties.mjs

 }

-const propertyNamesJSON = JSON.stringify(Array.from(propertyNames), undefined, 2);
+const propertyNamesJSON = JSON.stringify([...propertyNames], null, 2);


Nit: prefer undefined to null for triggering defaults.

Suggested change

const propertyNamesJSON = JSON.stringify([...propertyNames], null, 2);

const propertyNamesJSON = JSON.stringify([...propertyNames], undefined, 2);

domenic · 2025-10-06T08:06:29Z

scripts/generateProperties.js

 );
-const dateToday = new Date();
-const [dateTodayFormatted] = dateToday.toISOString().split("T");
+const [dateTodayFormatted] = new Date().toISOString().split("T");


Nit: I find this part of JavaScript very confusing so I prefer parentheses.

Suggested change

const [dateTodayFormatted] = new Date().toISOString().split("T");

const [dateTodayFormatted] = (new Date()).toISOString().split("T");

domenic · 2025-10-06T08:08:41Z

test/properties.test.js

Why this file is separate from CSSStyleProperties.test.js? Maybe one or both of them should get a comment, if the separation is intentional?

asamuzaK marked this pull request as draft September 8, 2025 14:04

asamuzaK force-pushed the style2 branch 5 times, most recently from 3ae525e to ab291f8 Compare September 9, 2025 21:17

domenic reviewed Sep 10, 2025

View reviewed changes

lib/webidl/CSSStyleDeclaration.webidl Outdated Show resolved Hide resolved

asamuzaK force-pushed the style2 branch 7 times, most recently from 1a3321e to 46b08ca Compare September 14, 2025 06:07

asamuzaK marked this pull request as ready for review September 14, 2025 06:56

asamuzaK requested a review from domenic September 14, 2025 06:56

asamuzaK marked this pull request as draft September 19, 2025 11:55

asamuzaK force-pushed the style2 branch from 46b08ca to 6f0481b Compare September 21, 2025 04:36

Split into CSSStyleDeclaration and CSSStyleProperties

c8afbb5

asamuzaK force-pushed the style2 branch from 6f0481b to c8afbb5 Compare September 21, 2025 21:04

Add lru-cache

670a765

asamuzaK mentioned this pull request Oct 2, 2025

Regression: for el.style.transform = "translate((10%), 10%)" whitespace is removed (worked in v26, fails in v27) jsdom/jsdom#3939

Open

Add whitespace after comma.

30e0f0b

Workaround for jsdom/jsdom#3939

asamuzaK force-pushed the style2 branch 2 times, most recently from 8c0a95d to e115115 Compare October 3, 2025 00:44

Remove var() shorthand if longhand is updated

72a43fa

Fix jsdom#247

asamuzaK force-pushed the style2 branch from e115115 to 72a43fa Compare October 3, 2025 00:46

asamuzaK mentioned this pull request Oct 3, 2025

CSSStyleDeclaration getPropertyPriority method return nothing jsdom/jsdom#3940

Open

Update CSSStyleProperties.test.js

7b7030d

Unit test for jsdom/jsdom#3940

asamuzaK force-pushed the style2 branch from 8b0f3f3 to 7b7030d Compare October 3, 2025 21:01

asamuzaK added 2 commits October 4, 2025 08:33

Update normalize.js

734350b

Update dependencies

ef80b22

asamuzaK marked this pull request as ready for review October 3, 2025 23:36

Update build.yml

62ae989

domenic reviewed Oct 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Split into CSSStyleDeclaration and CSSStyleProperties #244

Split into CSSStyleDeclaration and CSSStyleProperties #244

Uh oh!

asamuzaK commented Sep 8, 2025 •

edited

Loading

Uh oh!

Uh oh!

asamuzaK commented Sep 19, 2025

Uh oh!

asamuzaK commented Oct 3, 2025

Uh oh!

domenic left a comment

Uh oh!

domenic Oct 6, 2025

Uh oh!

domenic Oct 6, 2025

Uh oh!

domenic Oct 6, 2025

Uh oh!

domenic Oct 6, 2025

Uh oh!

domenic Oct 6, 2025

Uh oh!

domenic Oct 6, 2025

Uh oh!

domenic Oct 6, 2025

Uh oh!

domenic Oct 6, 2025

Uh oh!

Uh oh!

	const propertyNamesJSON = JSON.stringify([...propertyNames], null, 2);
	const propertyNamesJSON = JSON.stringify([...propertyNames], undefined, 2);

	const [dateTodayFormatted] = new Date().toISOString().split("T");
	const [dateTodayFormatted] = (new Date()).toISOString().split("T");

Uh oh!

Split into CSSStyleDeclaration and CSSStyleProperties #244

Are you sure you want to change the base?

Split into CSSStyleDeclaration and CSSStyleProperties #244

Uh oh!

Conversation

asamuzaK commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

asamuzaK commented Sep 19, 2025

Uh oh!

asamuzaK commented Oct 3, 2025

Uh oh!

domenic left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

asamuzaK commented Sep 8, 2025 •

edited

Loading