Custom stylesheet not loading

KLynn2019 commented 2 years ago

Description

The preview pane is unable to load our custom stylesheet.

System Information

VSC information: Version: 1.68.1 (user setup) Commit: 30d9c6cd9483b2cc586687151bcbcd635f373630 Date: 2022-06-14T12:48:58.283Z Electron: 17.4.7 Chromium: 98.0.4758.141 Node.js: 16.13.0 V8: 9.8.177.13-electron.0 OS: Windows_NT x64 10.0.19044

VSC extension version is 3.0.0 (pre-release)

To Reproduce

Ensure the stylesheet is in the path specified in the Asciidoc > Preview: Style setting. (In my setup, the path is explicit, not relative.)

Open an AsciiDoc file. Open the preview. A message displays: "Could not load 'asciidoc.styles': [path to stylesheet]

Close VSC and reopen. The same file and preview pane display, but inside the preview pane, a message displays: "An error occurred while loading view: asciidoc.preview"

Screenshots & Files

Stylesheet: vscode-asciidoc-preview.zip

ggrossetie commented 2 years ago

Could you please share the settings you are using? Especially the value of asciidoc.styles? I cannot reproduce on Linux:

ggrossetie commented 2 years ago

I can reproduce this issue on Windows. I think the documentation (imported from the Markdown extension) is wrong. It says that you need to write \ as \\ but it actually does not work if you do that.

On my machine the following paths are working:

C:\path\to\workspace\vscode-asciidoc-preview.css
C:/path/to/workspace/vscode-asciidoc-preview.css
.\vscode-asciidoc-preview.css
./vscode-asciidoc-preview.css
vscode-asciidoc-preview.css

Paths that do not work:

C:\\path\\to\\workspace\\vscode-asciidoc-preview.css

@KLynn2019 could you confirm (or not) that you are experiencing the same problem?

KLynn2019 commented 2 years ago

@Mogztter None of these paths are working for me.

ggrossetie commented 2 years ago

None of these paths are working for me.

Make sure to close the preview and reopen it when you update preview settings. Here's what I get:

working.webm

KLynn2019 commented 2 years ago

Yep...I did all of that and I'm still getting the error message.

ggrossetie commented 2 years ago

🤔 I don't really know why it's not working on your machine. Could you please "Toggle Developer Tools" from the "Help" menu? Then, go to the "Network" tab in the Chrome DevTools:

Close the preview (if it was opened), and open it again. You should see a GET request to the custom stylesheet. The request URL might give us an hint.

KLynn2019 commented 2 years ago

It's still a no for me...

ggrossetie commented 2 years ago

As you can see, your request URL contains double front slashes //:

https://file+.vscode-resource.vscode-cdn.net/c%3A//Users//klynn//Documents//vscode-asciidoc-preview.css

Mine contains single front slashes: /:

https://file+.vscode-resource.vscode-cdn.net/c:/Users/ggrossetie//Documents/GitHub/asciidoctor-vscode/test-workspace/vscode-asciidoc-preview.css

That's why your URL cannot be resolved. Are you sure that you are using single slashes in your settings?

KLynn2019 commented 2 years ago

I am now...but I'm still getting the same result.

Unfortunately I have to tap out for today...I'll check tomorrow to see if there's anything else I can do on my end to help.

ggrossetie commented 2 years ago

We are definitely making progress, this request URL looks better.

Could you please copy and paste the end of the URL (starting at c%3A/...) in a browser and see if it can be resolved?

KLynn2019 commented 2 years ago

It's not resolving. This is bizarre...I can see the file in my folder...

If I replace %3A with a colon, it does resolve.

ggrossetie commented 2 years ago

It's not resolving. This is bizarre...I can see the file in my folder... If I replace %3A with a colon, it does resolve.

Which browser are you using? Your browser should decode %3A to : automatically but it does not explain why VS Code cannot resolve it...

KLynn2019 commented 2 years ago

I'm using Chrome. We're a Google shop, for better or worse...

ggrossetie commented 2 years ago

I was wrong, Chrome does not automatically convert %3A to :. I used "Copy value" and the %3A was automatically replaced when I paste the URL in the Chrome address bar.

It might be a security/trust issue. It seems that this file is not part of your workspace? I know that VS Code has implemented a Workspace Trust feature to allow/disallow some features.

You should click on "Manage" (gear icon) on the left menu bar, then "Manage Workspace Trust". Make sure that this folder is in the "Trusted Folders & Workspaces":

tempsnip

You can also try to move this file next to your AsciiDoc file (and update the path accordingly)

KLynn2019 commented 2 years ago

The file is in a trusted folder. It's still not working.

Because we're using Antora and generating locally, I prefer to keep only necessary files in the repositories.

Sorry we're still not able to pin this down...I'm out of ideas.

danyill commented 2 years ago

Could you try a non-special location for the OS, e.g. c:\temp for your workspace. Just to prove it's not a security or access issue.

On Thu, 7 Jul 2022, 06:49 KLynn2019, @.***> wrote:

The file is in a trusted folder. It's still not working.

Because we're using Antora and generating locally, I prefer to keep only necessary files in the repositories.

Sorry we're still not able to pin this down...I'm out of ideas.

— Reply to this email directly, view it on GitHub https://github.com/asciidoctor/asciidoctor-vscode/issues/595#issuecomment-1176559988, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFEXX2X4XSDEPGU6KSQ3R3VSXINBANCNFSM52WNBR6Q . You are receiving this because you are subscribed to this thread.Message ID: @.***>

KLynn2019 commented 2 years ago

No dice...

danyill commented 2 years ago

Well, I can't reproduce it but I did find another problem with stylesheets (alas, #598)

I thought it might have been the dash but it was not.

I had a look at the response headers and compared with https://github.com/asciidoctor/asciidoctor-vscode/issues/595#issuecomment-1175460253

I notice that the Content-Type is different in my example (css rather than text) and there is an Etag value. I don't know if this is relevant.

ggrossetie commented 2 years ago

@KLynn2019 could you try relative a path (i.e., ../../file.css)? Additionally, could you try to prefix your path by file:/// (for instance, file:///C:/path/to/file.css)?

And also could use front slashes instead of back slashes?

KLynn2019 commented 2 years ago

I have tried every configuration I can think of and it's still not working. So now I'm going to see if someone else on my team is free to test on their machine. We've got a release coming up so it may not be right away...but I'll report back.

blackace72 commented 2 years ago

I am having a similar issue after switching to the pre-release version 3.0.1 on M1 macbook air.

Environment:

Version: 1.69.1 (Universal)
Commit: b06ae3b2d2dbfe28bca3134cc6be65935cdfea6a
Date: 2022-07-12T08:21:51.333Z
Electron: 18.3.5
Chromium: 100.0.4896.160
Node.js: 16.13.2
V8: 10.0.139.17-electron.0
OS: Darwin arm64 21.4.0

In my header 1 section of my testing_document.adoc, I use :highlightjs-theme: dracula and I get a console error saying (Error: Unable to resolve nonexistent file '/Users/foobar/.vscode/extensions/asciidoctor.asciidoctor-vscode-3.0.1/media/highlightjs/styles/dracula.min.css')

As for my general stylesheet path, in setting I used:

/Users/foobar/Documents/asciidoc_documents/stylesheets/user_created/readthe_dracula_modified.css

Which worked in the previous 2.9.8 version, but suddenly doesn't work. I have also tried relative paths with dots . but that didn't work either.

I have also made sure to entrust the workspace folder and each subfolder with .adoc files.

I believe this has something to do with the change with how internal .adoc files link. I switched to 3.0.1 from 2.9.8 because I wanted internal linking to work, and it does now!; but now it seems linking to local files using the header attribute :highlighterjs-theme: and/or the asciidoc setting 'asciidoc.styles' doesn't link properly.

The console errors also show https://file+.vscode-resource[...] when retrieving both readthe_dracula_modified.css and dracula.min.css. I am not sure if this is how it's supposed to work in VSCode because it has a built in browser, but may be important.

Request URL: https://file+.vscode-resource.vscode-cdn.net/Users/foobar/Documents/asciidoc_documents/stylesheets/user_created/readthe_dracula_modified.css

I will try to test more.

ggrossetie commented 2 years ago

In my header 1 section of my testing_document.adoc, I use :highlightjs-theme: dracula and I get a console error saying (Error: Unable to resolve nonexistent file '/Users/foobar/.vscode/extensions/asciidoctor.asciidoctor-vscode-3.0.1/media/highlightjs/styles/dracula.min.css')

The VS Code extension is now using Highlight.js 11. The dracula theme was moved to a subfolder named base16: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/base16/

So you should use :highlightjs-theme: base16/dracula.

Request URL: https://file+.vscode-resource.vscode-cdn.net/Users/foobar/Documents/asciidoc_documents/stylesheets/user_created/readthe_dracula_modified.css

Is the CSS file located in the same workspace? Could you please open the Dev Tools to debug the request and see which status code you get?

blackace72 commented 2 years ago

The :highlightjs-theme: base16/dracula solved that part, and it shows the coloring in rendered preview!

The CSS file is not within the workspace, since the workspace only includes my vscode_folder in this directory tree, while the CSS sheet is outside of it:

.
├── documents
│   ├── asciidoc_files.code-workspace
│   └── vscode_folder
│       └── testing_document.adoc
└── stylesheets
    └── user_created
        └── readthe_dracula_modified.css

4 directories, 3 files

This is the error within Dev Tools > Network > readthe_dracula_modified.css > Headers:

General:
|--------|
Request URL: https://file+.vscode-resource.vscode-cdn.net/Users/foobar/Documents/asciidoc_documents/stylesheets/user_created/readthe_dracula_modified.css
Request Method: GET
Status Code: 401  (from service worker)
Referrer Policy: strict-origin-when-cross-origin

Response Headers:
|-------------------|
Content-Type: text/plain;charset=UTF-8

Request Headers:
|-----------------|
Provisional headers are shown

Referer
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 12_3_1) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.69.1 Chrome/100.0.4896.160 Electron/18.3.5 Safari/537.36

blackace72 commented 2 years ago

I noticed something. Previously there was an option (in 2.9.8): Asciidoc: Use_asciidoctor_js. I unchecked it and if I open the JSON, it looks fine in editor (not greyed):

But when I switch to the new version, that option disappears, and this is what the JSON looks like:

Perhaps helpful?

Edit: Deleting the line didn't seem to do anything after checking console again.

ggrossetie commented 2 years ago

Maybe VS Code cannot load resources outside of the current workspace using https://file+.vscode-resource.vscode-cdn.net protocol. Could you please try to move the stylesheet in the same workspace as the AsciiDoc file and try again?

The use_asciidoctor_js option is deprecated since Asciidoctor.js is now the only option available (i.e., Asciidoctor CLI was dropped in 3.x). I'm pretty sure this is unrelated.

blackace72 commented 2 years ago

~~After putting the file within the workspace, specifically within vscode_folder and changing the settings to the new path, it is still not working.~~

~~However, I am apparently getting problems with the CSS itself, as VSCode is warning me:~~

'-ms-text-size-adjust' is not supported by Chrome, Chrome Android, Edge, Firefox, Safari, Samsung Internet. Add 'text-size-adjust' to support Chrome 54+, Chrome Android 54+, Edge 79+, Samsung Internet 6.0+.

'-webkit-text-size-adjust' is not supported by Chrome, Chrome Android, Edge 79+, Firefox, Safari, Samsung Internet. Add 'text-size-adjust' to support Chrome 54+, Chrome Android 54+, Edge 79+, Samsung Internet 6.0+.

~~So maybe the newer asciidoc version (3.0.1) has a more updated browser, and some CSS declarations are breaking the rendering?~~

Edit: I lied. I apparently didn't correctly source the file after I put it into vscode_folder. Now after using /Users/foobar/Documents/asciidoc_documents/documents/vscode_folder/readthe_dracula_modified.css my css is rendering:

And the internal links are working using link:foobar.adoc[baz] ! nice 👍

ggrossetie commented 2 years ago

So it seems to confirm that VS Code cannot load resources from outside the workspace using https://file+.vscode-resource.vscode-cdn.net.

I'm not sure if we want to continue to support that as we merely bypass the security model of VS Code... 🤔

silktrader commented 2 years ago

My experience, on Windows, with custom CSS, so far:

When I preview a file that resides on a different partition than the CSS, I get an error message that warns me: "Could not load 'asciidoc.styles': {path}"
When I preview a file on the same partition, volume, as the CSS, but not the same folder, I see no pop-up error, but the preview ignores the CSS and uses the VScode one, rather than the default asciidoctor.css.

In both cases, the CSS isn't being loaded. My CSS full pathname looks like: F:\Archive\Configurations\CSS\adoc-final.css.

I can otherwise include files as usual, using relative paths.

ggrossetie commented 2 years ago

Interesting, in both cases you are using an absolute path? F:\Archive\Configurations\CSS\adoc-final.css.

When I preview a file that resides on a different partition than the CSS, I get an error message that warns me: "Could not load 'asciidoc.styles': {path}"

The message is really Could not load 'asciidoc.styles': {path} or does the {path} variable get correctly replaced?

When I preview a file on the same partition, volume, as the CSS, but not the same folder, I see no pop-up error, but the preview ignores the CSS and uses the VScode one, rather than the default asciidoctor.css.

Probably because you are outside of the workspace. I'm not sure why we don't get the error message in this case. I will try to reproduce this issue.

I can otherwise include files as usual, using relative paths.

The include directive relies on Asciidoctor.js to resolve and read files whereas stylesheets are loaded using VS Code API.

silktrader commented 2 years ago

Interesting, in both cases you are using an absolute path? F:\Archive\Configurations\CSS\adoc-final.css.

Yes, that's the case. I store various CSS in a central folder. For the record, your Chrome/Firefox extension handles absolute paths fine.

The message is really Could not load 'asciidoc.styles': {path} or does the {path} variable get correctly replaced?

The path gets replaced; {path} is my own addition to shorten the error message.

The include directive relies on Asciidoctor.js to resolve and read files whereas stylesheets are loaded using VS Code API.

I understand, thanks.

I fiddled around with workspaces:

If I create a workspace, trust it, move the CSS to the workspace folder ... the preview will actually show up as expected, whether it's an absolute or relative path. That's not practical.
If I keep the CSS and .adoc in separate folders, but add both folders to the trusted workplace ... the preview won't show up with the CSS, specified with its absolute path.

This (User\settings.json):

"extensions.supportUntrustedWorkspaces": {   
    "asciidoctor.asciidoctor-vscode": {
      "supported": true,
      "version": "3.0.1"
    },
  }

... has no effects on the preview.

En tous cas, merci.

ggrossetie commented 2 years ago

That's really valuable, thanks! Does it change anything if you use forward slashes instead of blackslashes: F:/Archive/Configurations/CSS/adoc-final.css?

If I keep the CSS and .adoc in separate folders, but add both folders to the trusted workplace ... the preview won't show up with the CSS, specified with its absolute path.

I'm pretty sure this case works fine on Linux/macOS...

Would you be kind enough to repeat those tests using the built-in Markdown extension? Since the code is heavily inspired by this extension I want to make sure that we didn't mess things up!

Thanks

ggrossetie commented 2 years ago

An important note, the path is relative to the workspace directory. For instance:

.
├── doc
│   └── index.adoc
└── styles
    └── custom.css

2 directories, 2 files

The relative path should be: ./styles/custom.css (and not ../styles/custom.css)

ggrossetie commented 2 years ago

If I keep the CSS and .adoc in separate folders, but add both folders to the trusted workplace ... the preview won't show up with the CSS, specified with its absolute path.

I can confirm that it does not work on Linux as well. The good news is that it's working on the Markdown extension so definitely something is wrong... 🐛

asciidoctor / asciidoctor-vscode