[BUG] Unable to render CSS Layers in Themes

Ignition
1

I am trying to do some stuff that leverages CSS layers, however whenever I try to add a layer to the native light.css or dark.css themes it gives me a null pointer when trying to strip comments from the CSS.

I am guessing this is a bug, unfortunately, but any ideas how to achieve the same goal?

modules/com.inductiveautomation.perspective/themes/light.css

@import "./light/index.css" layer(ignition);

The NPE

java.lang.NullPointerException: Cannot invoke "String.replaceAll(String, String)" because "css" is null

at com.inductiveautomation.perspective.gateway.assets.themes.ThemeManagerImpl.removeComments(ThemeManagerImpl.java:421)

at com.inductiveautomation.perspective.gateway.assets.themes.ThemeManagerImpl.processTheme(ThemeManagerImpl.java:258)

at com.inductiveautomation.perspective.gateway.assets.themes.ThemeManagerImpl.lambda$onCacheChanged$5(ThemeManagerImpl.java:248)

at java.base/java.util.HashMap.forEach(Unknown Source)

at com.inductiveautomation.perspective.gateway.assets.themes.ThemeManagerImpl.onCacheChanged(ThemeManagerImpl.java:246)

at com.inductiveautomation.perspective.gateway.assets.AbstractAssetManager.onCreateOrModify(AbstractAssetManager.java:481)

at com.inductiveautomation.perspective.gateway.assets.AbstractAssetManager.onWatchEvent(AbstractAssetManager.java:160)

at com.inductiveautomation.perspective.gateway.files.FileWatcher.processWatchEvent(FileWatcher.java:204)

at com.inductiveautomation.perspective.gateway.files.FileWatcher.lambda$processWatchKey$0(FileWatcher.java:234)

at java.base/java.util.ArrayList.forEach(Unknown Source)

at com.inductiveautomation.perspective.gateway.files.FileWatcher.processWatchKey(FileWatcher.java:234)

at com.inductiveautomation.perspective.gateway.files.FileWatcher.processFileChanges(FileWatcher.java:260)

at java.base/java.util.concurrent.Executors$RunnableAdapter.call(Unknown Source)

at java.base/java.util.concurrent.FutureTask.run(Unknown Source)

at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)

at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)

at com.inductiveautomation.perspective.gateway.threading.BlockingWork$BlockingWorkRunnable.run(BlockingWork.java:58)

at java.base/java.lang.Thread.run(Unknown Source)

Essentially I have some other theming I want to prioritize, that is using layering, and I want it to take precedence over the native themes.

@layer ignition, theme, base, components, utilities;
2

I think the layer/etc stuff is a red herring. The NPE suggests we weren't able to load the root CSS file from disk at all.

3

Hmm... I hear that...

However, it loads totally fine when the light.css file only includes

@import "./light/index.css";

but as soon as I make it

@import "./light/index.css" layer(ignition);

The next time it attempts to refresh the file it starts throwing a 404 in the browser and throwing this error

image
image1199×375 86.3 KB

Then if I remove the layer(ignition) part, the next time it scan the themes it returns to normal