Package styles not loading/markers not changing

#1

Hello,

I am writing a package and one of the things the package does it add in markers onto a text buffer. I then want to show the markers to the user.

I have created the markers and can see that they are there as I have the following in my DOM:

<div class="highlights">
    <div class="highlight my-marker">
	    <div class="region" style="box-sizing: border-box; top: 19px; left: 14px; width: 65px; height: 19px;"/>
    </div>
    <div class="highlight my-marker">
	    <div class="region" style="box-sizing: border-box; top: 38px; left: 21px; width: 65px; height: 19px;"/>
    </div>
    <div class="highlight my-marker">
	    <div class="region" style="box-sizing: border-box; top: 57px; left: 29px; width: 85px; height: 19px;"/>
    </div>
    <div class="highlight my-marker">
	    <div class="region" style="box-sizing: border-box; top: 57px; left: 207px; width: 93px; height: 19px;"/>
    </div>
</div>

However, they don’t seem to have my css applied. I have a less file within my package styes directory, my-styles.less

@import "ui-variables";

.highlight .my-marker {
  background-color: #FF0000;
 }

For some reason they don’t seem to pick it up. I’m pretty new to this stuff but what am I doing wrong?

#2

In order to load the styles into the text editor, the style sheet needs to use a context-targeted stylesheet as mentioned in the Flight Manual here:

https://atom.io/docs/latest/upgrading-to-1-0-apis-upgrading-your-ui-theme-or-package-selectors#context-targeted-style-sheets

So you’ll want to change the file name of the stylesheet to whatever-it-was.atom-text-editor.less.