Will a widget compile all .css files in //[src]/[widget]/widget/ui ?

Will a widget automatically compile CSS definitions in any .css files in its /widget/ui directory? Ex.: If my widget is called Glass, there is a file Glass.css packaged in the .mpk in the "ui" subfolder. Say glass defines styling for 3 classes, "open," "closed," and "highlight." If I add Glass2.css into the "ui" subfolder, and it defines 2 more classes, "disabled" and "explode," are all 5 CSS definitions available to the widget? I have tried this unsuccessfully, and the only way I see to get the "disabled" and "explode" CSS definitions is to copy-paste into Glass.css. The works fine, but being able to use any CSS definition in any .css file in the "ui" subfolder would be elegant.
2 answers

As far as I know, the css that gets imported automatically, will have to have the same name as your widget, although during deployment all files in all folders are copied over.

There is no such thing as "compiling" your css, it imports.

But you could import the CSS upon demand using Vanilla JS or you could try Dojo in your define:

define(["xstyle!./path/to/file.css"], function(){

The best option is to use Webpack to bundle your (external) dependencies. Setting up the Webpack is a pain. I working on some templates to do so.

Or use SASS compiler to bundle the different SASS file into on [WidgetName].css with the help of Grunt