I have refactored the add-on to make legacy support easier. It should now support all new features for versions 2.1.45-2.1.49 (and will continue to be supported). As a byproduct, you get two additional selectable attributes:
pointversion: the exact patch version of your Anki installeditor: evaluates either to legacy (<2.1.49) or svelte (>2.1.50)Hi everyone,
The add-on doesn’t work anymore for me 
since approximately 2 days
Which Anki version are you on? First you could try to “Check for Updates” in the add-on window 
Hello. I have the old Anki 2.1.45. I updated CSS Injector today. The extension stopped working at all. Reinstall ain’t help.
Any tip how to make it work? A noob here
Works on my end 
Please install https://ankiweb.net/shared/info/31746032, then right-click into a field in the editor and hit “Inspect”.
It should look something like this:
If the root node (<html>) and <anki-editable> do not have the extra attributes shown in this screenshot, please take a look at the console tab and send me the error message(s).
Thanks, that was helpful!
The error comes from this line in injector.js:
while (!NoteEditor.instances[0]?.fields?.length) {
@Maeshara @Avalanche Which OS are you running Anki on? I guess your system doesn’t support the ?. syntax (Optional chaining operator) yet.
I’ve pushed an update that translates the source code into an older JavaScript version (es2018 instead of esnext), so the compiled code won’t contain that problematic syntax.
Little rant: I’ve had this issue a couple of times already and I wonder when we can finally use this basic syntax without having to worry about cross-platform compatibility. As seen here, all major browsers already support it:
It works again ! Thanks
But I need a little help again, I want to apply “text-align: center” to my fields, which tag do I have to use ? It seems that the tag “mid: number” doesn’t work anymore 
Can you show me the CSS that’s not working? As far as I can see, the [mid] attribute is still applied to both <html> and <anki-editable>.
Optional chaining was added in Chromium 80; the macOS Qt5 build uses 5.14 which is Chromium 77. Qt 5.15 introduces some regression, so .14 is better on macOS.
Ok so now it works again I don’t know why 
, really thanks you for your disponibility
It is PC on windows 10 here, updated of course.
Yesterday’s update of the CSS injector made it works again. The extension is on. The Console Tab in the Inspector is empty. No errors.
But something is different now. My field.css is short but extremely important for me. On your advice I put there:
anki-editable {
padding: 0px 6px;
line-height: normal;
}
But now, line-height normal/1.2rem sqeezes lines too much. It needs to be 2rem to look as I like (and to be readable). Furthermore, the padding command is crossed out and does nothing.
Every time I install Anki I just select the previous folder. Maybe it’s time for clean installation Or 2.1.45 is so old…
One hour later…
I installed Anki 2.1.52 Qt6. Clean installation. Win10.
After the last update, the CSS is inserted above the default editable.css, so it’s overwritten. When I tested this, it showed on top in the dev tools, so I thought <link> styles get priority over <style> tags. Guess not. I will fix this tonight.
Until then, just use !important like this:
anki-editable {
padding: 0px 6px !important;
}
The main download page just says “allows you to…” but since there are no instructions or no example of how to do something this add-on is not likely to be used by anyone without any CSS knowledge. That’s too bad because it can do some nice things that a lot of users might like. May I suggest your main page contain a simple example like:
anki-editable {
background-color: rgb(220, 245, 250);
line-height: 1.1rem;
}
with instructions to put it in the field.css file
and maybe a screen shot of the result?
Thanks for the suggestion. That’s on my todo list, but I haven’t found the time for it yet. Currently, my highest priority is to ensure functionality for existing users.
@kleinerpirat I am unashamedly trying to steal some of your setup from CSS Injector (and some of @hkr’s code) to use with my unpublished “Markdown input” - however as a n00b when it comes to TS (and Rollup) I am having some difficulty setting up tsconfig.json to get rid of all warnings. It may be worth noting that I am using Rollup rather than tsc to bundle my code (as the bundle includes CodeMirror and a modified Showdown). I can’t get the following import statements to resolve:
import * as NoteEditor from "anki/NoteEditor";
import type { PlainTextInputAPI } from "@anki/editor/plain-text-input";
import type { RichTextInputAPI } from "@anki/editor/rich-text-input"
The NoteEditor I can’t get to resolve in the VSCode nor when transpiling.
The Plain- and RichTextInputAPI’s I can get to resolve in the IDE but transpiling fails in the export type { PlainTextInputAPI } from "./PlainTextInput.svelte"; with plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './PlainTextInput.svelte' or its corresponding type declarations. (same for RichTextInputAPI) - I am guessing the transpiler doesn’t resolve the relative path correctly?
Cloning your anki-css-injector repo and running tsc in the ts directory gives similar errors:
src/iterator.ts:1:29 - error TS2792: Cannot find module 'anki/NoteEditor'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
1 import * as NoteEditor from "anki/NoteEditor";
4 import type { RichTextInputAPI } from "@anki/editor/rich-text-input";
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 4 errors in the same file, starting at: src/iterator.ts:1
Is the tsconfig.json on GitHub up to date? How have you set up your environment? Do you have any ideas on where/what I should look for?
Thanks
Since my setup is based on GitHub - hgiesel/anki_new_format_pack, perhaps this info from that add-on’s description is useful:
Only a few explicit types can be imported at the moment. For example, this line imports an object at runtime, and is not typed, and will show an error in the editor (but will build):
import * as NoteEditor from "anki/NoteEditor";
So, I don’t have any magic trick to deal with this - I just ignore the error in VS Code ^^
How can I additional space between some fields of certain note types in Anki 2.1.54?
This feature is sometimes useful to make a note type that has many fields more clear. In the past e.g. the user “basiskarten” (Thomas Kahn) had such a feature for some of the note types he uses in his commercial decks. He relied on adding line breaks into field names which worked well until around version 2.1.40.
I guess that I have to start in editor.css with [mid="1234567890123"] but after this I have no idea e.g. how to match the 3rd, 6th, and nth field.
In Anki 2.1.49 I currently use [mid="1234567890123"] #fields > div:nth-child(...) {margin-top: ...}.
I’d appreciate any advice.
Try the following:
:root[mid="9999999999999"] .fields > div:nth-child(3) .editor-field,
:root[mid="9999999999999"] .fields > div:nth-child(6) .editor-field {
margin-top: 2em;
}