3.0.3 preview - vscode preview styles are not applied

[SjoerdV]

After upgrading from 2.9.8 to 3.0.3

Preview styles are not loaded anymore. tried to fix with:

• in vscode workspace settings "asciidoc.preview.attributes" is upgraded to "asciidoc.preview.asciidoctorAttributes" (shouldn't this been done automatically?) but it didn't change.

my config: https://github.com/asciidoctor/asciidoctor-vscode/issues/700#issuecomment-1426797834

VSCode: 1.75.1 AsciiDoctor VSCode: 3.0.3 Asciidoctor PDF 2.3.4 using Asciidoctor 2.0.18 OS: Linux LMDE 5

How to fix css being applied again? Some guidance is needed.

[ggrossetie]

We do not use stylesdir and stylesheet in the preview anymore for at least two reasons:

1. it was really hard to support because Asciidoctor (core) interprets styledir and stylesheet and uses a logic that does not really make sense in a VS Code extension environment
2. you might want to use a different theme. For instance, you might want to use a preview style that matches your IDE theme and use another theme when publishing/exporting your AsciiDoc document.

What you need to do is set asciidoc.preview.style in your settings.json:

{
  "asciidoc.preview.style": ".\\resources\\css\\asciidoctor.css"
}

[SjoerdV]

hmmm, I can imagine that I will be not be the only one complaining if settings that used to work fine, just break on a new version. I am a sucker for backwards compatibility ;-)

I am using linux, so this should also work (without the silly double backslashes, which is Windows talking), but it doesn't... "asciidoc.preview.style": "${workspaceFolder}/resources/css/my-asciidoc-styles.css"

What did work (eventually), so without any path statement and also without using the setting "asciidoc.useWorkspaceRootAsBaseDirectory"

    "asciidoc.use_asciidoctorpdf": true,
    "asciidoc.preview.style": "resources/css/my-asciidoc-styles.css",
    "asciidoc.preview.asciidoctorAttributes": {
      "imagesdir": "${workspaceFolder}/resources/media"
    },
    "asciidoc.preview.useEditorStyle": false,

Now comes the next issue I thought maybe would disappear if the styles were loading again, but it didn't. I'll make another issue

[SjoerdV]

I am wondering: The asciidoc.useWorkspaceRootAsBaseDirectory setting seems to only being relevant for includes, right? All the other path settings (images, fonts, icons, themes) can now in 3.x be entered relative to the workspace directory, even if this setting is not being used, right? Maybe a 'hint' can be added to that setting, that it is only relevant for 'includes'? Because I was testing the crap out of this setting and didn't understand what it actually had an impact on.

[ggrossetie]

I am wondering: The asciidoc.useWorkspaceRootAsBaseDirectory setting seems to only being relevant for includes, right?

We might drop this setting... I'm currently checking how things are done in the Intellij IDEA extension to have a consistent behavior.

hmmm, I can imagine that I will be not be the only one complaining if settings that used to work fine, just break on a new version. I am a sucker for backwards compatibility ;-)

Indeed, we should add this in the "Breaking changes" section.

"asciidoc.preview.style": "${workspaceFolder}/resources/css/my-asciidoc-styles.css"

I don't think we replace the value ${workspaceFolder} but since the path is relative to the workspace folder, it's probably easier to use ./resources/css/my-asciidoc-styles.css.

[SjoerdV]

I tried that (referring to the last item in your comment) with './' (as it was your first suggestion). For me it didn't work.

Omitting it all together did.

Great thing about cleaning up confusing settings and having some release notes / breaking changes

[ggrossetie]

I tried that (referring to the last item in your comment) with './' (as it was your first suggestion). For me it didn't work. Omitting it all together did.

I will take a look 👀

Great thing about cleaning up confusing settings and having some release notes / breaking changes

Yep, doing some spring cleaning 😄 🧹💨

[ggrossetie]

I've added a note in the changelog/release note: https://github.com/asciidoctor/asciidoctor-vscode/releases/tag/v3.0.5

Basically, you should use stylesdir and stylesheet attributes when exporting to HTML and asciidoc.preview.style when using the preview.