@vaadin/component-base - npm Package Compare versions

Comparing version 25.3.0-alpha1 to 25.3.0-alpha2

src/css-utils.js

+/**
+ * @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);
+};

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "25.3.0-alpha1",
+  "version": "25.3.0-alpha2",
   "publishConfig": {
@@ -41,4 +41,4 @@ "access": "public"
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.3.0-alpha1",
-    "@vaadin/test-runner-commands": "25.3.0-alpha1",
+    "@vaadin/chai-plugins": "25.3.0-alpha2",
+    "@vaadin/test-runner-commands": "25.3.0-alpha2",
     "@vaadin/testing-helpers": "^2.0.0",
@@ -48,3 +48,3 @@ "sinon": "^22.0.0"
   "customElements": "custom-elements.json",
-  "gitHead": "5824d54c995945aafd50d30edc2cb763a58a18b6"
+  "gitHead": "52eba6153ecf8bfaae44bcb727595e77d90b963c"
 }

src/define.js

@@ -16,3 +16,3 @@ /**
 
-export function defineCustomElement(CustomElement, version = '25.3.0-alpha1') {
+export function defineCustomElement(CustomElement, version = '25.3.0-alpha2') {
   Object.defineProperty(CustomElement, 'version', {
@@ -19,0 +19,0 @@ get() {

src/styles/style-props.js

@@ -7,3 +7,3 @@ /**
 import { css } from 'lit';
-import { addGlobalStyles } from './add-global-styles.js';
+import { addGlobalStyles, registerCSSProperty } from '../css-utils.js';
 
@@ -22,3 +22,3 @@ // NOTE: Base color CSS custom properties are explicitly registered as `<color>`
 ].forEach((propertyName) => {
-  CSS.registerProperty({
+  registerCSSProperty({
     name: propertyName,
@@ -25,0 +25,0 @@ syntax: '<color>',

src/styles/user-colors.js

@@ -7,3 +7,3 @@ /**
 import { css } from 'lit';
-import { addGlobalStyles } from './add-global-styles.js';
+import { addGlobalStyles } from '../css-utils.js';
 
@@ -10,0 +10,0 @@ addGlobalStyles(

src/styles/add-global-styles.js

-/**
- * @license
- * Copyright (c) 2025 - 2026 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * 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);
-};

No alert changes

Improved metrics

Total package byte prevSize

253791

0.31%

Lines of code

7175

0.28%

No dependency changes