@ui5/webcomponents-tools 2.28.1 → 2.29.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.29.0-rc.0](https://github.com/UI5/webcomponents/compare/v2.28.1...v2.29.0-rc.0) (2026-10-30)
+
+
+### Reverts
+
+* Revert "chore(tools): remove postcss workaround for CSS container style queries" (#14203) ([aeaa29a](https://github.com/UI5/webcomponents/commit/aeaa29a82718aaad1fd7d6493f0b0e2fdc4ff670)), closes [#14203](https://github.com/UI5/webcomponents/issues/14203)
+
+
+
+
+
 ## [2.28.1](https://github.com/UI5/webcomponents/compare/v2.28.0...v2.28.1) (2026-10-21)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

package/lib/css-processors/css-processor-themes.mjs

@@ -5,6 +5,7 @@ import * as path from "path";
 import { writeFile, mkdir } from "fs/promises";
 import postcss from "postcss";
 import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js"
+import postcssPlugin from "./postcss-plugin.mjs";
 import { writeFileIfChanged, getFileContent } from "./shared.mjs";
 import scopeVariables from "./scope-variables.mjs";
 import { mergeLightDark } from "./merge-light-dark.mjs";
@@ -74,7 +75,8 @@ const generate = async (argv) => {
     const processComponentPackageFile = async (f) => {
         if (CSS_VARIABLES_TARGET) {
             const result = await postcss([
-                combineDuplicatedSelectors
+                combineDuplicatedSelectors,
+                postcssPlugin
             ]).process(f.text, { from: undefined });
 
             return { css: result.css };
@@ -160,6 +162,7 @@ const generate = async (argv) => {
         await esbuild.build(config);
     }
 }
+
 /**
  * Adds auto theme setup CSS: color-scheme declaration.
  * @param {string} mergedCSS - The merged :root CSS from mergeLightDark()

package/lib/css-processors/postcss-plugin.mjs

@@ -0,0 +1,152 @@
+
+import postcss from "postcss";
+
+const hostVariables = new Map();
+
+const SELECTOR = ":host";
+
+const saveVariable = (variable, value, density) => {
+    if (!hostVariables.has(variable)) {
+        hostVariables.set(variable, {});
+    }
+    hostVariables.get(variable)[density] = value;
+}
+
+/**
+ * PostCSS plugin for handling CSS variables across density modes (cozy and compact).
+ *
+ * The plugin scans CSS for `:host` rules that define density-specific custom properties.
+ * Variables declared in a root-level `:host` rule are treated as **cozy** values, while
+ * variables declared inside `@ui5-compact-size` `:host` rules are treated as **compact** values.
+ *
+ * All discovered variables are merged into a single root `:host` rule. For variables that
+ * exist in both modes, the plugin generates a value that uses CSS variable fallbacks to
+ * dynamically switch between compact and cozy values based on the active density.
+ *
+ * Variables that exist in only one mode are preserved, with appropriate fallbacks added
+ * when needed.
+ *
+ * Example input:
+ *
+ * ```css
+ * :host {
+ *   --my-variable: cozy-value;
+ *   --cozy-only-variable: cozy-only-value;
+ * }
+ *
+ * @ui5-compact-size {
+ *   :host {
+ *     --my-variable: compact-value;
+ *     --compact-only-variable: compact-only;
+ *   }
+ * }
+ * ```
+ *
+ * Output:
+ *
+ * ```css
+ * :host {
+ *   --my-variable: var(--_ui5-compact-size, compact-value) var(--_ui5-cozy-size, cozy-value);
+ *   --compact-only-variable: var(--_ui5-compact-size, compact-only) var(--_ui5-cozy-size, initial);
+ *   --cozy-only-variable: cozy-only-value;
+ * }
+ * ```
+ *
+ * This enables seamless runtime switching between density modes using CSS variables alone.
+ */
+
+export default function postcssPlugin() {
+    return {
+        postcssPlugin: 'postcss-content-density-variables',
+        Once(root) {
+            let hasRootHost = false;
+            let hostRule;
+
+            root.walkRules((rule) => {
+                // Only process :host rules
+                if (rule.selector !== SELECTOR) {
+                    return;
+                }
+
+                // Handle root-level :host rules (cozy)
+                if (rule.parent.type === "root") {
+                    if (!hasRootHost) {
+                        hasRootHost = true;
+                        hostRule = rule;
+                    }
+
+                    rule.walkDecls((decl) => {
+                        if (decl.prop.startsWith('--')) {
+                            saveVariable(decl.prop, decl.value, 'cozy');
+                            decl.remove();
+                        }
+                    });
+                }
+
+                // Handle :host rules inside @ui5-compact-size (compact)
+                if (rule.parent.type === "atrule") {
+                    if (rule.parent.name === "ui5-compact-size") {
+                        rule.walkDecls((decl) => {
+                            if (decl.prop.startsWith('--')) {
+                                saveVariable(decl.prop, decl.value, 'compact');
+                                decl.remove();
+                            }
+                        });
+                    }
+                }
+
+                let current = rule;
+                // Remove up empty rules
+                while (current) {
+                    if (current.nodes.length === 0) {
+                        const parent = current.parent;
+                        current.remove();
+                        current = parent;
+                    }
+
+                    if (current.type === "root") {
+                        break;
+                    }
+                }
+            });
+
+            if (!hasRootHost) {
+                hostRule = postcss.rule({ selector: SELECTOR });
+            }
+
+            // Construct merged variable declarations depending on available modes
+            for (const [variable, variableData] of hostVariables) {
+                if (variableData.cozy && variableData.compact) {
+                    hostRule.append({
+                        prop: variable,
+                        value: `var(--_ui5-compact-size, ${variableData.compact})  var(--_ui5-cozy-size, ${variableData.cozy})`,
+                    });
+                } else if (variableData.compact) {
+
+                    // Use a non-existent variable to always trigger the fallback.
+                    // Because this variable is never defined, the fallback is used
+                    // in all cases.
+
+                    // Using `initial` as a fallback can work only for properties
+                    // that treat it as an invalid value. To avoid this inconsistency,
+                    // we intentionally reference an undefined variable, which is
+                    // always considered invalid and undefined.
+                    hostRule.append({
+                        prop: variable,
+                        value: `var(--_ui5-compact-size, ${variableData.compact}) var(--_ui5-cozy-size, var(--_ui5-f2d95f8))`,
+                    });
+                } else {
+                    hostRule.append({
+                        prop: variable,
+                        value: variableData.cozy,
+                    });
+                }
+            }
+
+            root.prepend(hostRule);
+            hostVariables.clear();
+        }
+    }
+}
+
+postcssPlugin.postcss = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.28.1",
+  "version": "2.29.0-rc.0",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -82,5 +82,5 @@
     "esbuild": "^0.25.0",
     "yargs": "^17.5.1"
   },
-  "gitHead": "a1c8be3fdb2b6ece9f6f0a3c0e03a90cfe3878f3"
+  "gitHead": "ace8be9008be626e7be5bca0e23ace75c045a188"
 }