fix: Register Lumo global styles before other styles (#5666)

* fix: Register Lumo global styles before other styles This ensures the styles do not override any application styles * Fix import * Apply suggestions from code review Co-authored-by: Jouni Koivuviita <jouni@vaadin.com> * Update packages/vaadin-lumo-styles/sizing.js Co-authored-by: Jouni Koivuviita <jouni@vaadin.com> --------- Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
vaadin · Mar 15, 2023 · 0e72706 · 0e72706
1 parent 9e3ee25
commit 0e72706
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 25 deletions.
diff --git a/packages/vaadin-lumo-styles/badge-global.js b/packages/vaadin-lumo-styles/badge-global.js
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { badge } from './badge.js';
+import { addLumoGlobalStyles } from './global.js';
+
+addLumoGlobalStyles('badge', badge);
diff --git a/packages/vaadin-lumo-styles/color-global.js b/packages/vaadin-lumo-styles/color-global.js
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { color } from './color.js';
+import { addLumoGlobalStyles } from './global.js';
+
+addLumoGlobalStyles('color', color);
diff --git a/packages/vaadin-lumo-styles/color.js b/packages/vaadin-lumo-styles/color.js
@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const colorBase = css`
   :host {
@@ -80,9 +81,7 @@ const colorBase = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${colorBase.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('color-props', colorBase);
 
 const color = css`
   [theme~='dark'] {

diff --git a/packages/vaadin-lumo-styles/global.js b/packages/vaadin-lumo-styles/global.js
@@ -0,0 +1,12 @@
+const prefix = 'lumo-';
+
+export const addLumoGlobalStyles = (id, ...styles) => {
+  const styleTag = document.createElement('style');
+  styleTag.id = `${prefix}${id}`;
+  styleTag.textContent = styles
+    .map((style) => style.toString())
+    .join('\n')
+    .replace(':host', 'html');
+
+  document.head.insertAdjacentElement('afterbegin', styleTag);
+};
diff --git a/packages/vaadin-lumo-styles/sizing.js b/packages/vaadin-lumo-styles/sizing.js
@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const sizing = css`
   :host {
@@ -23,8 +24,6 @@ const sizing = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${sizing.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('sizing-props', sizing);
 
 export { sizing };
diff --git a/packages/vaadin-lumo-styles/spacing.js b/packages/vaadin-lumo-styles/spacing.js
@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const spacing = css`
   :host {
@@ -31,8 +32,6 @@ const spacing = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${spacing.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('spacing-props', spacing);
 
 export { spacing };
diff --git a/packages/vaadin-lumo-styles/style.js b/packages/vaadin-lumo-styles/style.js
@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const style = css`
   :host {
@@ -36,8 +37,6 @@ const globals = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${style.toString().replace(':host', 'html')}$</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('style-props', style);
 
 export { globals, style };
diff --git a/packages/vaadin-lumo-styles/test/visual/badge.test.js b/packages/vaadin-lumo-styles/test/visual/badge.test.js
@@ -1,10 +1,6 @@
 import { fixtureSync } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import { badge } from '../../badge.js';
-
-const badgeStyle = document.createElement('style');
-badgeStyle.textContent = badge.cssText;
-document.head.appendChild(badgeStyle);
+import '../../badge-global.js';
 
 describe('badge', () => {
   it('flex-shrink', async () => {

diff --git a/packages/vaadin-lumo-styles/typography-global.js b/packages/vaadin-lumo-styles/typography-global.js
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { addLumoGlobalStyles } from './global.js';
+import { typography } from './typography.js';
+
+addLumoGlobalStyles('typography', typography);
diff --git a/packages/vaadin-lumo-styles/typography.js b/packages/vaadin-lumo-styles/typography.js
@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const font = css`
   :host {
@@ -123,9 +124,6 @@ const typography = css`
 `;
 
 registerStyles('', typography, { moduleId: 'lumo-typography' });
-
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('typography-props', font);
 
 export { font, typography };
diff --git a/packages/vaadin-lumo-styles/user-colors.js b/packages/vaadin-lumo-styles/user-colors.js
@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const userColors = css`
   :host {
@@ -28,8 +29,5 @@ const userColors = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${userColors.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
-
+addLumoGlobalStyles('user-color-props', userColors);
 export { userColors };
diff --git a/packages/vaadin-lumo-styles/utility-global.js b/packages/vaadin-lumo-styles/utility-global.js
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { addLumoGlobalStyles } from './global.js';
+import { utility } from './utility.js';
+
+addLumoGlobalStyles('utility', utility);