CSS Injection broken by Hyper 2 switch to canvas based term window? [Documentation Request] [Feature Request]

[jcklpe]

• I am on the latest Hyper.app version

• I have searched the issues of this repo and believe that this is not a duplicate

• OS version and name: Windows 10 and WSL

• Hyper.app version: 2.0

Issue

This is a possible feature or documentation request. After doing a fresh install of Hyper 2 to a new computer I realized that my themes which make use of glow effects, such as hyperpunk by @stalz , hyperatompunk by @cakenggt hyperterm-retro by @alfg and hyper-oldschool by @dimo89 were not rendering their glow effects. After a bunch of fiddling around I think I figured out why!

Hyper 2 switched to a canvas based term window right? So I'm guessing that means the CSS style injection stuff that people had been doing for their themes no longer works because the words aren't actually in the DOM anymore and therefore not accessible.

TL;DR: Is there a way to inject or modify css styling of characters in the term windows which are encapsulated inside the canvas?

I know that stuff like adding glow effects is far from important but not having access to injecting CSS into the term window does greatly limit a theme's ability to ... you know... theme stuff.

I noticed this because I saw that the glow effects still existed on the tab windows and while trying to fix a background texture problem with hyperpunk I realized that it was now inaccessibly in a canvas thing.

Any suggestions on how to get around this limitation, how current or future themes/plugins could fix this would be MUCH appreciated.

I'm just a designer learning how to code, but I'm starting to get pretty decent and playing around with theming Hyper has been a pretty nice small scale way for me to dip my feet into bigger projects. I made my first pull request when I fixed the hyperpunk theme! I really want to contribute and I hope that this has a solution and that development on Hyper continues and isn't dead or anything like that. Thanks!

Example of before and after

(using the oldschool theme)

[alxtz]

@thedonquixotic to be brief, it's not possible to style the terminal text in canvas with the current stack, unless xterm supports it

There's also some related issue for this, #2864, #2934

If you wish to stay in hyper v1, here's the guide #2856 (comment)

[jcklpe]

Ah dangit. I guess I'll go back to v1 for now then.

[albinekb]

This and more is possible using https://github.com/slammayjammay/hyper-postprocessing @alxtz @thedonquixotic

Examples

A killer space shader made by Kali. Source

Glitchy effect, one of the effects provided by postprocessing. Source

Underwatery effect, using a shader made by bitek. Source

Retro filmy effect, using a shader made by manoloide. Source

Example of blending an image and text. Source

[jcklpe]

Aaaaaaaaaaaaaaaah shiet! I should have known that the fact it was using webgl (it's using webgl right?) meant full on shaders were now possible. DOPE!

I guess it still means you can't style specific words based on their styling (so you couldn't have bolded words glow but non bolded words not glow) but that's still super cool! I'm going to start playing with this.

I know how to make shaders in Unity using their shader node editor. It just writes it to a HSLS so maybe I can figure out a way to convert that over to WebGl and even make my own shaders for this. woo!