I am using uibuilder with Svelte and I am providing my own stylesheet. Sometimes 'uib-brand.css' gets injected into the page and sometimes it does not. When it gets injected, it interferes with my own styling. From the documentation, and from the source code (excerpt below), I do not think it is supposed to be injected. If I set a breakpoint on the line that injects the style sheet, I see that document.styleSheets.length
is 2 (as expected), so the injection code should not be running. I can only guess that this is a race condition and the style sheets have been loaded in the time it takes for the debugger to break and for me to look at the variable.
As a workaround, I will be adding more styling to override the 'uib-brand.css' elements that are causing me trouble.
From my 'index.html':
<!-- Your own CSS -->
<link rel='stylesheet' type='text/css' href='./global.css'>
<link rel='stylesheet' type='text/css' href='./build/bundle.css'>
From 'uibuilder.iife.js':
if (document.styleSheets.length >= 1 || document.styleSheets.length === 1 && document.styleSheets[0].cssRules.length === 0) {
log("info", "Uib:start", "Styles already loaded so not loading uibuilder default styles.")();
} else {
if (options && options.loadStylesheet === false)
log("info", "Uib:start", "No styles loaded & options.loadStylesheet === false.")();
else {
log("info", "Uib:start", "No styles loaded, loading uibuilder default styles.")();
this.loadStyleSrc(`${this.httpNodeRoot}/uibuilder/uib-brand.css`);
}
}