From 0e72706f5f64955cf6332237a7edf02ea5961680 Mon Sep 17 00:00:00 2001 From: Artur Date: Wed, 15 Mar 2023 14:00:32 +0200 Subject: [PATCH] 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 * Update packages/vaadin-lumo-styles/sizing.js Co-authored-by: Jouni Koivuviita --------- Co-authored-by: Jouni Koivuviita --- packages/vaadin-lumo-styles/badge-global.js | 9 +++++++++ packages/vaadin-lumo-styles/color-global.js | 9 +++++++++ packages/vaadin-lumo-styles/color.js | 5 ++--- packages/vaadin-lumo-styles/global.js | 12 ++++++++++++ packages/vaadin-lumo-styles/sizing.js | 5 ++--- packages/vaadin-lumo-styles/spacing.js | 5 ++--- packages/vaadin-lumo-styles/style.js | 5 ++--- .../vaadin-lumo-styles/test/visual/badge.test.js | 6 +----- packages/vaadin-lumo-styles/typography-global.js | 9 +++++++++ packages/vaadin-lumo-styles/typography.js | 6 ++---- packages/vaadin-lumo-styles/user-colors.js | 6 ++---- packages/vaadin-lumo-styles/utility-global.js | 9 +++++++++ 12 files changed, 61 insertions(+), 25 deletions(-) create mode 100644 packages/vaadin-lumo-styles/badge-global.js create mode 100644 packages/vaadin-lumo-styles/color-global.js create mode 100644 packages/vaadin-lumo-styles/global.js create mode 100644 packages/vaadin-lumo-styles/typography-global.js create mode 100644 packages/vaadin-lumo-styles/utility-global.js diff --git a/packages/vaadin-lumo-styles/badge-global.js b/packages/vaadin-lumo-styles/badge-global.js new file mode 100644 index 0000000000..6cd8cc2360 --- /dev/null +++ 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 new file mode 100644 index 0000000000..e3a00f4ccf --- /dev/null +++ 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 index 15ca61a966..0851bb74e2 100644 --- 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 = ``; -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 new file mode 100644 index 0000000000..42ea89fb9a --- /dev/null +++ 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 index 9703f2c299..9b55a28ca2 100644 --- 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 = ``; -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 index e5541dc7af..e1d98d6db3 100644 --- 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 = ``; -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 index a6d4c390c2..cf3b96c39e 100644 --- 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 = ``; -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 index 15df3f91e5..c6be4ebbec 100644 --- 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 new file mode 100644 index 0000000000..9068405e6c --- /dev/null +++ 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 index 1336128c59..52ac0764f0 100644 --- 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 = ``; -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 index 5908d2f79b..e3a2ad3038 100644 --- 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 = ``; -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 new file mode 100644 index 0000000000..e9c45c1c05 --- /dev/null +++ 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);