Failing to apply CSS after deserialization of a View


I’m trying to add a side panel in a custom package, following this Flight Manual tutorial. I pretty much copied the content of the tutorial package active-editor-info, modifying only the serialization state since my panel’s content depends on some other information.

Regardless of these changes, I’m stuck trying to applying correctly CSS styling on the panel’s inner HTML: modifying the correct class in the package’s .less file I can clearly apply my styling on the panel’s content, but if the panel is open and I restart Atom, after deserializing what should be deserialized, my panel CSS fails to load.

Since probably I’m not sufficiently clear, I can show you some simple steps to reproduce my “issue”:

  1. Download active-editor-info.
  2. Modify the /styles/active-editor-info.less like this
    @import "ui-variables";
    .active-editor-info {
      background-color: green;
    and reload the package.
  3. Open the panel (it should be green) and restart Atom: after Atom loads, the panel is not green anymore.

I guess I need to implement an update/render method somewhere in the View class, but I don’t really know what I’m doing so I hope somebody could help me.


Take a look at your view in the developer tools (ctrl-shift-i or View -> Developer -> Toggle developer tools). There you’ll be able to see all of the CSS rules that apply to that element.


Sadly no hints, the CSS rules are coherent with what I see.


After restarting:


I’m seeing this too and haven’t been able to pin down why, yet.