CSS Errors for every component

[dannytaurus]

Since the Jan 25th CSS updates, I'm seeing a large amount of CSS Error lines in the console when I load the plugin XML.

Interface:! CSS Error: can't find CSS for component btnIconPrev
Interface: 	Use one of these CSS selectors to define a stylesheet for the base component: 
Interface: 	.scriptbutton
Interface: 	#btnIconPrev
Interface: 	button
Interface: 	*

One of these blocks for every component, plus the whole list repeats twice. So for my small plugin I see 442 lines of these errors when I load my plugin.

Is this expected?

[Christoph Hart]

@dannytaurus yes that is a bug fix that addressed the problem that prevented the CSS selectors to fail silently at the top level (at CSS LAF creation).

The reason is that previously if there is no coallascated style sheet for the base component, it just disregards all child components so nested UI components (eg. the buttons) like the preset browser can only be styled if you add a stylesheet that is applied to the preset browser

There's not an easy way to bypass this limitation, so the current solution is to force the user to define a stylesheet that is applied to the outer component.

TLDR: Easy fix: add *{} at the top of your stylesheet to define the catch-all selector that creates a empty stylesheet for the outer component. Happy to modify this to reduce friction. Should I make it so that it throws a compile error when you pass in a stylesheet that doesn't contain a ALL-selector?

[dannytaurus]

@Christoph-Hart said in CSS Errors for every component:

TLDR: Easy fix: add *{} at the top of your stylesheet

To the top of every stylesheet defined in the code?

I have a lot of small stylesheets like this:

lafCredits.setInlineStyleSheet("
label {
    color: #ccc;
    font-family: 'Barlow';
    font-size: 17px;
    letter-spacing: 0.05em;
    text-align: left;
}");

[Christoph Hart]

@dannytaurus well actually I can just append an empty selector to each style sheet collection internally by default, that would remove the entire problem for the user.

[dannytaurus]

@Christoph-Hart It would indeed!

[Christoph Hart]

Oh, but this style sheet should correctly assign the label selector to the outer UI component - I assume you don't use it with nested UI components? Can you make a minimal example?