I'm curious what you mean about dev-mode interfering with your context menu; would you care to open an issue about it?

Actually, it’s my own home made context menu, and I’ve worked out the issue. Firstly, the menu was appearing in the wrong place, but a reload solved that. Secondly, there was an “Inspect Element” context menu which sat on top of mine, and a stopPropagation() solved that,

It's under-documented, but atom.styles.addStyleSheet can do this. Here's the type definition. (The first parameter is documented as “the raw CSS to add,” but I'm nearly certain you can also specify LESS there. If not, let me know.)

You may be right about being under-documented. I haven’t worked out how to call the function. I start with:

var packageInfo = require('../package.json');
var packagePath = `${atom.getConfigDirPath()}/packages/${packageInfo['name']}`;
var ssPath = `${packagePath}/styles/${packageInfo['name']}.less`;

I’m not sure what follows. I tried:

let text = await this.fsp.readFile(ssPath, 'utf8');
atom.styles.addStyleSheet(text, {sourcePath: ssPath});

That appears to have replace the content of the style element, but in its raw format. That is now so full of nested CSS that nothing works. I’m sure there must be a step in between that would fix it.

That appears to have replace the content of the style element, but in its raw format.

I don't know what you mean by that. The way you're using it seems to be correct. Two ways to proceed here:

1. addStyleSheet is the correct function to use, and it definitely supports LESS -> CSS conversion. So you could try a simpler example (one without all your nested CSS) to see if it works. (Also: since your stylesheet is in the styles directory of your package, it should just automatically be applied when you first load a project window, or whenever your package first activates thereafter. So ensure the styles are applied properly to start; if they aren't, the issue is with how your LESS is authored. Check the console for errors.) (Nope, I was wrong. See below.)
2. Since you solved your issue with dev mode, you could just start using dev mode. That's 100% what dev mode was designed for (the ability to iterate on a package without reloading the window all the time) and would allow you to stop spending time on this tangential task.

Whoops! It all makes sense now. LESS -> CSS conversion is actually handled by ThemeManager, of all things:

let transformedCss = atom.themes.loadStylesheet(ssPath); // Automatically converts to CSS if the file ends in .less
atom.styles.addStyleSheet(transformedCss, { sourcePath: ssPath });

That should work. But I still believe it's better to skip this approach and revert to standard dev-mode behavior.

Whoops! It all makes sense now. LESS -> CSS conversion is actually handled by ThemeManager, of all things:

let transformedCss = atom.themes.loadStyleSheet(ssPath); // Automatically converts to CSS if the file ends in .less
atom.styles.addStyleSheet(transformedCss, { sourcePath: ssPath });

That should work. But I still believe it's better to skip this approach and revert to standard dev-mode behavior.

Thanks, that solved everything. Note that the method is called atom.themes.loadStylesheet() (lower-case sheet) as opposed to atom.styles.addStyleSheet() (upper-case Sheet). Case sensitivity in a language is fine, as long as it’s used consistently.

I agree about developing in dev-mode, but (a) I got obsessed with the challenge of getting the other method to work and (b) I plan to keep that method as a sort of developer mode for the package, (c) I’m thinking of implementing a user style sheet some time in the (distant) future, and (d), yes, I got obsessed with the challenge.

Thanks again.