How to use the <style>-element in UXML to reference a USS-stylesheet

Hi all,

I am currently making a toolbar in UIElements. I based my work on the [UIElements: First Steps] tutorial.
Using rootVisualElement.styleSheets.Add(), I can apply styles from a USS file to the root visual element:

Code (CSharp):

1.  
2. private void OnEnable()
3. {
4.     VisualElement root = rootVisualElement;
5.     root.styleSheets.Add(Resources.Load<StyleSheet>("ToolbarStyle"));
6.     VisualTreeAsset toolbarVisualTree = Resources.Load<VisualTreeAsset>("Toolbar");
7.     toolbarVisualTree.CloneTree(root);
8.  
9.     var toolButtons = root.Query<Button>();
10.     toolButtons.ForEach(SetupButton);
11. }
12.  

Rather, I would prefer to use a <style> element inside the Toolbar.uxml file to set the style, as explained [here] (see: Adding styles to UXML).

My Toolbar.uxml:

Code (UXML):

1. <UXML xmlns="UnityEngine.UIElements">
2.   <Template path="Assets/Editor/Resources/ButtonTemplate.uxml" name="button-template" />
3.   <VisualElement class="toolbar">
4.     <Style src="ToolbarStyle.uss" />
5.     <VisualElement class="buttons-container">
6.       <Instance template="button-template" name="cube" />
7.       <Instance template="button-template" name="sphere" />
8.       <Instance template="button-template" name="capsule" />
9.       <Instance template="button-template" name="cylinder" />
10.       <Instance template="button-template" name="plane" />
11.     </VisualElement>
12.   </VisualElement>
13. </UXML>
14.  

My ToolBarStyle.uss: (in the same folder as Toolbar.uxml

Code (USS):

1. .buttons-container {
2.     flex-direction: row;
3.     flex-wrap: wrap;
4. }
5.  
6. .toolbar-button {
7.     width: 30px;
8.     height: 30px;
9.     align-items: flex-start;
10.     justify-content: center;
11. }
12.  
13. .toolbar-button-icon {
14.     height: 20px;
15.     width: 20px;
16. }

With this setup, I only get the style from the uss file applied using root.styleSheets.Add(). When I comment out this part from the c# code and use the script element in UXML instead, it does not work. The console shows this warning:

"Assets/Editor/Resources/Toolbar.uxml (4,6): Semantic - USS in 'style' attribute is invalid: <null>"

How should I use the style element in UXML?

 

I looked into this again. It seemed that I was reading the manual for 2020.1. In 2019.2 the style element has to be given a "path" attribute (value: absolute path to uss file from project root) attribute rather than a "src" attribute.

 

I kind of have the same question, still. It seems to work loading the style sheet via UXML, but I still get an IDE warning in Visual Studio:



The warning says: invalid child element "Style".

Checked in Unity 2019.3.0f6.

 

Was that ever tracked and fixed? I'm seeing the same thing under 2019.4.10

 

Fair enough. As long as it's just a harmless warning, that's fine.