having trouble with stylesheet.css

[Amy C <mathematical coffee gmail com>]

Hi all,

I'm trying to style some things in my extension via stylesheet.css but
it looks like the CSS file is somehow not being added to the list of
styles.

For example, in my extension:

let dummy = new PopupMenu.PopupMenuItem('dummy');
dummy.add_style_class_name('test');
this.menu.addMenuItem(dummy);

Then in stylesheet.css which lives in my extension folder along with
extension.js:

.test {
    color: #ff0000;
    background-color: #00ff00;
}

When I load the extension, my popup menu item is the default
background/text color that is used for all the other menu items,
instead of red text and green background.

If I instead do:

dummy.set_style('color: #ff0000; background-color: #00ff00');

it works.

Also, if I edit /usr/share/gnome-shell/theme/gnome-shell.css to have
the .test { ... } snippet in it, it works too. So the CSS is not bad.

This leads me to believe that somehow my stylesheet is not in the
"search path" for add_style_class_name, or maybe my class is being
overridden by the system one. I know the stylesheet is being parsed
correctly (adding some extra log lines to extensionSystem.js where it
loads the stylesheet and it is doing so).

How can I get my stylesheet.css to work? If it is relevant, I am using
GNOME-shell 3.2 (I vaguely recall that this works on my GNOME-shell
3.4 computer, but I can't test that today).

cheers.