refactor: do not throw when calling CSS.registerProperty twice (#12011) (#12014)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: 3 people

packages/charts/src/styles/vaadin-chart-base-styles.js

@@ -19,7 +19,7 @@
 import '@vaadin/component-base/src/styles/style-props.js';
 import '@vaadin/component-base/src/styles/user-colors.js';
 import { css, unsafeCSS } from 'lit';
-import { addGlobalStyles } from '@vaadin/component-base/src/styles/add-global-styles.js';
+import { addGlobalStyles } from '@vaadin/component-base/src/css-utils.js';
 
 /* Tooltip styles, to support `"tooltip": { "outside": true }` config option */
 // postcss-lit-disable-next-line

packages/component-base/src/css-utils.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Registers a CSS custom property, tolerating the case where the property has
+ * already been registered. This can happen when a module is evaluated more than
+ * once (e.g. duplicate bundle chunks or two copies of the library on the page),
+ * in which case `CSS.registerProperty` throws `InvalidModificationError`. That
+ * error is caught and logged as a warning rather than allowed to break loading.
+ *
+ * @param {PropertyDefinition} definition
+ */
+export function registerCSSProperty(definition) {
+  try {
+    CSS.registerProperty(definition);
+  } catch (e) {
+    if (e instanceof DOMException && e.name === 'InvalidModificationError') {
+      console.warn(`The CSS property ${definition.name} has already been registered.`);
+    } else {
+      throw e;
+    }
+  }
+}
+
+/**
+ * Add a `<style>` block with given styles to the document.
+ *
+ * @param {string} id the id to set on the created element, only for informational purposes
+ * @param  {CSSResultGroup[]} styles the styles to add
+ */
+export const addGlobalStyles = (id, ...styles) => {
+  const styleTag = document.createElement('style');
+  styleTag.id = id;
+  styleTag.textContent = styles.map((style) => style.toString()).join('\n');
+
+  document.head.insertAdjacentElement('afterbegin', styleTag);
+};

packages/component-base/src/styles/add-global-styles.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';
-import { addGlobalStyles } from './add-global-styles.js';
+import { addGlobalStyles, registerCSSProperty } from '../css-utils.js';
 
 // NOTE: Base color CSS custom properties are explicitly registered as `<color>`
 // here to avoid performance issues in Aura. Aura overrides these properties with
@@ -18,7 +18,7 @@ import { addGlobalStyles } from './add-global-styles.js';
   '--vaadin-border-color-secondary',
   '--vaadin-background-color',
 ].forEach((propertyName) => {
-  CSS.registerProperty({
+  registerCSSProperty({
     name: propertyName,
     syntax: '<color>',
     inherits: true,

packages/component-base/src/styles/style-props.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';
-import { addGlobalStyles } from './add-global-styles.js';
+import { addGlobalStyles } from '../css-utils.js';
 
 addGlobalStyles(
   'vaadin-base-user-colors',

packages/component-base/src/styles/user-colors.js

@@ -0,0 +1,53 @@
+import { expect } from '@vaadin/chai-plugins';
+import sinon from 'sinon';
+import { registerCSSProperty } from '../src/css-utils.js';
+
+describe('registerCSSProperty', () => {
+  let warn;
+  let counter = 0;
+
+  // CSS property registration is global and cannot be undone within a page,
+  // so use a unique name per test to keep tests order-independent.
+  function uniqueName() {
+    counter += 1;
+    return `--test-register-style-property-${counter}`;
+  }
+
+  beforeEach(() => {
+    warn = sinon.stub(console, 'warn');
+  });
+
+  afterEach(() => {
+    warn.restore();
+  });
+
+  it('should register a property once without warning', () => {
+    const name = uniqueName();
+    registerCSSProperty({ name, syntax: '<number>', inherits: false, initialValue: '0' });
+
+    expect(warn.called).to.be.false;
+  });
+
+  it('should not throw when the same property is registered twice', () => {
+    const name = uniqueName();
+    const definition = { name, syntax: '<number>', inherits: false, initialValue: '0' };
+
+    registerCSSProperty(definition);
+    expect(() => registerCSSProperty(definition)).to.not.throw();
+  });
+
+  it('should warn when the same property is registered twice', () => {
+    const name = uniqueName();
+    const definition = { name, syntax: '<number>', inherits: false, initialValue: '0' };
+
+    registerCSSProperty(definition);
+    registerCSSProperty(definition);
+
+    expect(warn.calledOnce).to.be.true;
+    expect(warn.firstCall.args[0]).to.include(name);
+  });
+
+  it('should rethrow errors other than InvalidModificationError', () => {
+    expect(() => registerCSSProperty({ name: uniqueName(), syntax: '<not-a-syntax>' })).to.throw();
+  });
+});

packages/component-base/test/css-utils.test.js

@@ -5,9 +5,9 @@
  */
 import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
-import { addGlobalStyles } from '@vaadin/component-base/src/styles/add-global-styles.js';
+import { addGlobalStyles, registerCSSProperty } from '@vaadin/component-base/src/css-utils.js';
 
-CSS.registerProperty({
+registerCSSProperty({
   name: '--_min-width-labels-aside',
   syntax: '<length>',
   inherits: false,

packages/form-layout/src/styles/vaadin-form-layout-base-styles.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { registerCSSProperty } from '@vaadin/component-base/src/css-utils.js';
 import { getLumoInjectorPropName, LumoInjector } from './src/lumo-injector.js';
 
 /**
@@ -48,7 +49,7 @@ export const LumoInjectionMixin = (superClass) =>
         // so that changing it to 1 would inject styles to instances
         // Use `inherits: true` so that property defined on `<html>`
         // would apply to components instances within shadow roots
-        CSS.registerProperty({
+        registerCSSProperty({
           name: propName,
           syntax: '<number>',
           inherits: true,

packages/vaadin-themable-mixin/lumo-injection-mixin.js

@@ -3,17 +3,18 @@
  * Copyright (c) 2000 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { registerCSSProperty } from '@vaadin/component-base/src/css-utils.js';
 import { CSSPropertyObserver } from './css-property-observer.js';
 
 // Register CSS custom properties for observing theme changes
-CSS.registerProperty({
+registerCSSProperty({
   name: '--vaadin-aura-theme',
   syntax: '<number>',
   inherits: true,
   initialValue: '0',
 });
 
-CSS.registerProperty({
+registerCSSProperty({
   name: '--vaadin-lumo-theme',
   syntax: '<number>',
   inherits: true,