sass 'use', netlify CSP, css syntax, min_version

[Jieiku]

• Updated sass to @use instead of @import import deprecated
• Update theme.toml min_version to 0.17.0 (to support @use)
• Added imgur to CSP img-src (The Cat picture)
• Use CSS syntax (otherwise unsafe-inline is required under style-src)

[Keats]

I just realised and for the other PR I just merged, what's this charcoal syntax file?

[Jieiku]

It is a syntax file converted to css from the .tmTheme, and then adjusted to be useable as mixins.

If you have a preferred syntax theme just let me know which one and I will convert it to css, adjust it to work as a mixin, and then submit a commit/pull request to change them out.

That particular one came from here: https://github.com/Jieiku/abridge/tree/refactor/sass/syntax

(These were all the .tmThemes that had both a light/dark mode that I converted to css a while back, and just recently converted to work as mixins)

By using them as mixins I was able to use the same syntax file in a few different ways, which makes it easier to adjust the syntax theme in a single place.

dark: https://github.com/Jieiku/abridge/blob/refactor/sass/abridge-dark.scss light: https://github.com/Jieiku/abridge/blob/refactor/sass/abridge-light.scss auto: https://github.com/Jieiku/abridge/blob/refactor/sass/abridge-auto.scss auto+switcher: https://github.com/Jieiku/abridge/blob/refactor/sass/abridge.scss

If you would rather use the direct html styling instead of a css syntax theme, then that is fine too, I would just need to add unsafe-inline to the style-src (otherwise the CSP blocks the styles). This will lower the Observatory score a little, -5 or -10 points I believe.

You can currently load this page with your developer console open and see that the styles are not applied, and that the CSP blocks them:

(This pull requests switches to using a css file for the syntax theme, which would resolve the CSP violation)

https://zola-book.netlify.app/chapter1/page2/

[Jieiku]

I just pushed a different theme, this is the one I use primarily on Abridge, its a little larger in file size, but has more highlights.

you can also try changing this line:

@include syntax.light;

to

@include syntax.dark;

and you will get the darker code block.

Here is the Light:

Here is the Dark:

Here is the previously used as direct html styling:

[Jieiku]

I think I covered all the information on what it is and why it is there. Let me know how you would like to proceed and I can submit a commit here and a pull request on the other 2 themes I recently contributed to.

Side note, I got an idea while thinking about and writing these replies. I am thinking adjust the syntax files to use variables for the colors, then it would be easier to change some of the colors in the syntax file, just added this to my todo list for abridge.

[Keats]

Side note, I got an idea while thinking about and writing these replies. I am thinking adjust the syntax files to use variables for the colors, then it would be easier to change some of the colors in the syntax file, just added this to my todo list for abridge.

It's a bit harder. It's roughly the way it would be if we were using vscode themes I think, or at least how I would want them to work.

[Jieiku]

In vscode, do you use the default vscode theme? (if not what theme do you use for vscode?)

I am going to see how close I can get it to looking like vscode, and I am going to do so using variables in the most clean way that I can.

When I first implemented the syntax theme files that I use I simply tried a bunch of them and picked the ones that looked good, without really worrying about any bloat or inconsistencies they might have.

[Keats]

I don't use VSCode so i'm not the right person to ask!

[Jieiku]

LOL! me neither, I first installed it when you shared your screenshots in the treesitter thread.

[Jieiku]

I got the bulk of the work done, as you are already well aware, it is simply not possible to make it look exactly like vscode, but now the syntax file in abridge uses a handful of variables, so swapping or adjusting colors is much easier.

[Keats]

It's ok, no need to try to be too similar since the highlighter works differently