Weird CSS @import errors - the root cause

v2: Troubleshooting
1

I wanna change font, which cannot work because of some weird error I see in console.

```space-style
@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:[email protected]&family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');
```

In console I see:

Ruleset ignored due to bad selector.

The more times @import directives I use, the more times I see exactly the same message in the console. If I comment all the @imports out, the errors vanish.

All the time (with or without @imports) I also see the following JS error in the console that may be related (I don’t know, TBH, whether it is related to this particular issue or whether it is unrelated and therefor a separate one):

Source map error: Error: URL constructor:  is not a valid URL.
Stack in the worker:resolveSourceMapURL@resource://devtools/client/shared/source-map-loader/utils/fetchSourceMap.js:56:22
getOriginalURLs@resource://devtools/client/shared/source-map-loader/source-map.js:73:24
workerHandler/</<@resource://devtools/client/shared/worker-utils.js:115:52
workerHandler/<@resource://devtools/client/shared/worker-utils.js:113:13

Resource URL: about:srcdoc
Source Map URL: https://firefox-source-docs.mozilla.org/devtools-user/debugger/source_map_errors/

The Source Map URL points to some documentation with a scary 7 (!) years old issue stating some weird things.

I run SilverBullet on 192.168.255.1:23456 and there is HAProxy as HTTPS frontend with self-signed certificate. I managed to, because it was told somewhere that without HTTPS some functions may be limited (which is IMHO very ill). The HAProxy configuration is as simple as:

frontend silverbullet from local
  mode http
  bind [email protected]:34567 ssl alpn h2,http/1.1 crt server.pem name silverbullet
  use_backend silverbullet

backend silverbullet from local
  mode http
  server silverbullet 192.168.255.1:23456 check

I access it normally at the URL https://192.168.255.1:23456. I do not want to run SilverBullet on public IP. I have WireGuard tunnels to the host from everywhere (mobile, other computers) to access the private IP. Adding hostname to /etc/hosts won’t help, because I cannot do this on Android.

There was no such issue few weeks ago, I used @import in SB v1. I now use Firefox 137.0 (64-bit) if it matters.

The overall effect of whatever is causing the issue is that I can no longer use @import in CSS.

Any ideas how to work around this, please? Can somebody explain to me what’s going on?

2

I finally found out what’s going on! The error Source map error: Error: URL constructor: is not a valid URL. can be easily turned off in the debugger and it roughly means that the debugger is trying to fetch another version of the resources more suitable for debugging that may not exists, and that’s all. BUT…

The @import “at-rules” do not work because they cannot work! Here is why:

The @import CSS at-rule is used to import style rules from other valid stylesheets. An @import rule must be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset and empty @layer definitions) and must not have any other valid at-rules or style rules between it and previous @import rules, or else the @import rule is invalid. The syntax of @import is: …

@zef For sure it’s this. Can space-styles be somehow ordered too, please?

Without proper ordering there is simply no way to use @imports (and possible o in space-styles atm. Also @import must follow @charset and not vice versa. The general rule of thumb is that “at-rules” precede selector rules. The ordering of “at-rules” is non-trivial and it matters (see the documents referenced above for details)! Therefor we definitely need some way to order space-styles in a way similar to how we can order the space-lua modules using the -- priority: comments. Also, the CSS should be split in the SilverBullet as well so that we can place space-styles before and after the @charset ruleset and before and after the rest of the main.css etc.

1 Like