Import lumo & utility into vue

General
1

When importing import '@vaadin/vaadin-lumo-styles' like this into my Vue3 project, not everyhing is added. Only css via addLumoGlobalStyles these are added to the head, missing utility, badge, etc…

image

Is there a better way than this, to get the registered styles?

import { __themeRegistry } from '@vaadin/vaadin-themable-mixin'
const appendStyle = (s: CSSStyleSheet) => document.adoptedStyleSheets.push(s)
Array.from(__themeRegistry.entries()).flatMap((theme) => theme?.[1]?.styles).filter(o => o).forEach(style => appendStyle(style.styleSheet!))

// or 

import * as lumo from '@vaadin/vaadin-lumo-styles'
document.adoptedStyleSheets = [
    lumo.utility.styleSheet!,
    lumo.badge.styleSheet!,
    lumo.color.styleSheet!,
    lumo.font.styleSheet!,
    lumo.globals.styleSheet!,
    lumo.sizing.styleSheet!,
    lumo.spacing.styleSheet!,
    lumo.style.styleSheet!,
    lumo.typography.styleSheet!,
    ...document.adoptedStyleSheets
]
2

I do not know what is the orthodox way to do, but one approach is this

import { utility } from '@vaadin/vaadin-lumo-styles/utility.js';

var hasStyles = false;
const styleTags = document.head.getElementsByTagName("style");
for (var i=0;i<styleTags.length;i++) {
	if (styleTags[i].sheet === utility.styleSheet) {
		hasStyles = true;
	}
}
if (!hasStyles) {
	const tpl = document.createElement('template');
	tpl.innerHTML = `<style>${utility.cssText}</style>`;
	document.head.appendChild(tpl.content);
}
1 Like