fix: Register Lumo global styles consecutively

This allows Flow to control where the styles get injected and that they will not override any application rules

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);

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);

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('colorBase', colorBase);
 
 const color = css`
   [theme~='dark'] {

packages/vaadin-lumo-styles/global.js

@@ -0,0 +1,18 @@
+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');
+
+  // Add the styles after other "lumo-" styles so they always are added before other styles
+  const lastExistingLumoTag = Array.from(document.head.querySelectorAll(`style[id^='${prefix}']`)).pop();
+  if (!lastExistingLumoTag || !lastExistingLumoTag.nextElementSibling) {
+    document.head.append(styleTag);
+  } else {
+    lastExistingLumoTag.parentElement.insertBefore(styleTag, lastExistingLumoTag.nextElementSibling);
+  }
+};

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', sizing);
 
 export { sizing };

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', spacing);
 
 export { spacing };

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', style);
 
 export { globals, style };

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-all.js';
 
 describe('badge', () => {
   it('flex-shrink', async () => {

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);

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('font', font);
 
 export { font, typography };

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-colors', userColors);
 export { userColors };

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);