Release v26.1.0 into main branch

CHANGELOG.md

@@ -6,6 +6,42 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+- `utils`
+    - `useComputedStyleFallback` option for `CssCustomProperties`: if the CSSOM does not provide any property name for the used selector, e.g. because the declarations are part of a constructed and adopted stylesheet, then the names are read from the computed style of the matching element; disabled by default because the computed style also contains all inherited custom properties
+
+### Changed
+
+- `<CodeEditor />`
+    - `shouldHaveMinimalSetup`: even if set to `false`, the edit history feature is still enabled explicitly
+- `<PropertyValuePair />`
+    - the two-column display is only used if the container is wide enough, this way property name columns do not get too small
+    - in narrower containers, property name and value are displayed as stacked rows
+    - make the breakpoint configurable via SCSS (`$eccgui-propertyvalue-size-column-breakpoint-small`)
+- `utils`
+    - values of CSS custom properties are resolved via the computed style of a matching element now, so they always represent what the browser really applies, e.g. references to other custom properties are already replaced
+
+### Fixed
+
+- `<Tooltip />`
+    - inline `code` markup was hardly readable because of low contrast
+- `<PropertyName />`
+    - fix width if it contains a `<Label />` with `<OverflowText />` children
+    - the label tooltip is displayed correctly inside the container
+- `<HandleDefault />`
+    - default handle class names were removed as soon as an `intent` was given
+    - fix runtime error if the element holding the handle tools is not available
+- `utils`
+    - CSS custom properties are also found if their rule is nested inside a cascade layer (`@layer`) or another grouping rule like `@media`, `@supports` or `@container`; this affects `textToColorHash()`, `getEnabledColorsFromPalette()`, `getEnabledColorPropertiesFromPalette()` and `getColorConfiguration()`
+    - CSS custom properties are also found if the given selector is only one part of the selector list of a rule, e.g. `:root, :host`
+    - stylesheets that are loaded from another origin do not break the collection of CSS custom properties anymore
+    - collecting CSS custom properties does not throw an error anymore in test environments where the style declaration of a CSS rule is not an iterable object, e.g. in jsdom
+    - empty results are not cached anymore, this way they are read again if the stylesheets are loaded later on
+    - `minimalColorDistance` is part of the cache key of `getEnabledColorsFromPalette()` and `getEnabledColorPropertiesFromPalette()` now
+
+## [26.0.0] - 2026-07-08
+
 This is a major release, and it might not be compatible with your current usage of our library. Please read about the necessary changes in the migration section below.
 
 ### Migration from v25 to v26

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "26.0.0",
+    "version": "26.1.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -180,12 +180,21 @@
     },
     "resolutions": {
         "**/@blueprintjs/core": "6.8.1",
-        "node-sass-package-importer/**/postcss": "^8.5.10",
+        "node-sass-package-importer/**/postcss": "^8.5.18",
+        "stylelint-order/**/postcss": "^8.5.12",
+        "stylelint/**/postcss": "^8.5.18",
         "hast-util-from-parse5": "8.0.0",
         "**/lodash": "^4.18.1",
         "**/minimatch": "^3.1.4",
         "**/serialize-javascript": "^7.0.5",
-        "**/ws": "^8.21.0"
+        "**/ws": "^8.21.0",
+        "babel-jest/**/js-yaml": "^3.15.1",
+        "stylelint/**/js-yaml": "^4.3.1",
+        "@eslint/eslintrc/**/js-yaml": "^4.3.1",
+        "**/nanoid": "^3.3.18",
+        "**/fast-uri": "^3.1.3",
+        "sass/**/immutable": "^5.1.8",
+        "**/brace-expansion": "^1.1.18"
     },
     "husky": {
         "hooks": {

src/common/utils/CssCustomProperties.test.ts

@@ -0,0 +1,63 @@
+import CssCustomProperties from "./CssCustomProperties";
+
+describe("CssCustomProperties in jsdom", () => {
+    beforeEach(() => {
+        const style = document.createElement("style");
+        style.textContent = `
+            :root { --eccgui-color-palette-blue-500: #1c6ecb; }
+            .config { --note-yellow: #ffde8f; }
+        `;
+        document.head.appendChild(style);
+    });
+
+    it("reads property names of a style rule without iterating the declaration", () => {
+        expect(
+            CssCustomProperties.listLocalCssStyleRuleProperties({
+                selectorText: ":root",
+                propertyType: "custom",
+            }),
+        ).toEqual([["--eccgui-color-palette-blue-500", "#1c6ecb"]]);
+    });
+
+    it("does not throw for scoped selectors", () => {
+        expect(() =>
+            new CssCustomProperties({ selectorText: ".config", returnObject: false }).customProperties(),
+        ).not.toThrow();
+    });
+
+    describe("useComputedStyleFallback", () => {
+        beforeEach(() => {
+            // the property is not part of any stylesheet, so the CSSOM does not know its name
+            const element = document.createElement("div");
+            element.classList.add("without-stylesheet");
+            element.style.setProperty("--only-computed", "#c0ffee");
+            document.body.appendChild(element);
+        });
+
+        it("is disabled by default", () => {
+            expect(
+                new CssCustomProperties({
+                    selectorText: ".without-stylesheet",
+                }).customProperties(),
+            ).toEqual({});
+        });
+
+        it("reads the names from the computed style if the CSSOM does not provide any", () => {
+            expect(
+                new CssCustomProperties({
+                    selectorText: ".without-stylesheet",
+                    useComputedStyleFallback: true,
+                }).customProperties(),
+            ).toEqual({ "only-computed": "#c0ffee" });
+        });
+
+        it("is not used if the CSSOM provides names", () => {
+            expect(
+                new CssCustomProperties({
+                    selectorText: ".config",
+                    useComputedStyleFallback: true,
+                }).customProperties(),
+            ).toEqual({ "note-yellow": "#ffde8f" });
+        });
+    });
+});