Document the custom CSS hack (#119)

* Add docs for the custom CSS hack

* Bump version

Author: yoavbls

README.md

@@ -8,59 +8,66 @@
 
 # Pretty `TypeScript` Errors
 
-<b>Make TypeScript errors prettier and human-readable in VSCode.</b>  
-  
+<b>Make TypeScript errors prettier and human-readable in VSCode.</b>
+
 [![GitHub stars](https://img.shields.io/github/stars/yoavbls/pretty-ts-errors.svg?style=social&label=Star)](https://GitHub.com/yoavbls/pretty-ts-errors/stargazers/)
 [![Visual Studio Code](https://img.shields.io/badge/--007ACC?logo=visual%20studio%20code&logoColor=ffffff)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)&nbsp;[![GitHub license](https://badgen.net/github/license/yoavbls/pretty-ts-errors)](https://github.com/yoavbls/pretty-ts-errors/blob/main/LICENSE)&nbsp;[![Visual Studio Code](https://img.shields.io/visual-studio-marketplace/i/yoavbls.pretty-ts-errors)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)
 <a href="https://github.com/yoavbls/pretty-ts-errors/discussions/43#user-content-jetbrains-support"><img src="https://cdn.icon-icons.com/icons2/2530/PNG/512/jetbrains_webstorm_button_icon_151873.png" height="20" alt="Webstorm logo"></a>
 
 TypeScript errors become messier as the complexity of types increases. At some point, TypeScript will throw on you a shitty heap of parentheses and `"..."`.  
 This extension will help you understand what's going on. For example, in this relatively simple error:
 
-<img src="./assets/this.png" width="340.438px" />&nbsp; &nbsp; <img src="./assets/instead-of-that.png" width="350px" />  
-  
-  
+<img src="./assets/this.png" width="340.438px" />&nbsp; &nbsp; <img src="./assets/instead-of-that.png" width="350px" />
+
 ## Watch this
+
 <a href="https://www.youtube.com/watch?v=9RM2aErJs-s" target="_blank">
  <img src="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-video.png" alt="Watch theo's video" width="600" />
 </a>
 
-and others from: 
+and others from:
 [Web Dev Simplified](https://www.youtube.com/watch?v=ccg-erZYO4k&list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR&index=1),
 [Josh tried coding](https://www.youtube.com/watch?v=_9y29Cyo9uU&list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR&index=3),
 [trash dev](https://www.youtube.com/watch?v=WJeD3DKlWT4&list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR&index=4&t=208),
 and [more](https://www.youtube.com/playlist?list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR)
 
-
 ## Features
+
 - Syntax highlighting with your theme colors for types in error messages, supporting both light and dark themes
 - A button that leads you to the relevant type declaration next to the type in the error message
 - A button that navigates you to the error at [typescript.tv](http://typescript.tv), where you can find a detailed explanation, sometimes with a video
 - A button that navigates you to [ts-error-translator](https://ts-error-translator.vercel.app/), where you can read the error in plain English
 
 ## Supports
+
 - Node and Deno TypeScript error reporters (in `.ts` files)
 - JSDoc type errors (in `.js` and `.jsx` files)
 - React, Solid and Qwik errors (in `.tsx` and `.mdx` files)
 - Astro, Svelte and Vue files when TypeScript is enabled (in `.astro`, `.svelte` and `.vue` files)
 - Ember and Glimmer TypeScript errors and template issues reported by Glint (in `.hbs`, `.gjs`, and `.gts` files)
-  
-  
+
 ## Installation
+
 ```
 code --install-extension yoavbls.pretty-ts-errors
 ```
-Or simply by searching for `pretty-ts-errors` in the [VSCode marketplace](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)  
-  
-  
+
+Or simply by searching for `pretty-ts-errors` in the [VSCode marketplace](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)
+
+#### How to hide the original errors and make the types copyable
+
+Follow the instructions [there](./docs/hide-original-errors.md). unfortunately, this hack is required because of VSCode limitations.
+
 ## Why isn't it trivial
+
 1. TypeScript errors contain types that are not valid in TypeScript.  
-Yes, these types include things like `... more ...`, `{ ... }`, etc in an inconsistent manner. Some are also cutting in the middle because they're too long.
+   Yes, these types include things like `... more ...`, `{ ... }`, etc in an inconsistent manner. Some are also cutting in the middle because they're too long.
 2. Types can't be syntax highlighted in code blocks because the part of `type X = ...` is missing, so I needed to create a new TextMate grammar, a superset of TypeScript grammar called `type`.
 3. VSCode markdown blocks all styling options, so I had to find hacks to style the error messages. e.g., there isn't an inlined code block on VSCode markdown, so I used a code block inside a codicon icon, which is the only thing that can be inlined. That's why it can't be copied. but it isn't a problem because you can still hover on the error and copy things from the original error pane.  
-<img src="./assets/errors-hover.png" width="600" /> 
+   <img src="./assets/errors-hover.png" width="600" />
 
 ## Hype section
+
 <a href="https://www.youtube.com/live/Zze1y2iZ3bQ?si=Yj1Qw2S8FbGbTA5c&t=11589">
   <picture>
     <img width="400" src="https://github.com/yoavbls/pretty-ts-errors/blob/assets/assets/mentions/js-nation.png?raw=true" alt="Winning the Productivity Booster category at JSNation 2023">
@@ -88,8 +95,8 @@ Yes, these types include things like `... more ...`, `{ ... }`, etc in an incons
   </picture>
 </a>
 
-  
-### Stars from stars  
+### Stars from stars
+
 <table>
   <tbody>
     <tr>
@@ -127,14 +134,12 @@ Yes, these types include things like `... more ...`, `{ ... }`, etc in an incons
   </tbody>
 </table>
 
-  
 ## Sponsorship
+
 Every penny will be invested in other contributors to the project, especially ones that work  
 on things that I can't be doing myself like adding support to the extension for other IDEs 🫂
-  
+
 ## Contribution
+
 Help by upvoting or commenting on issues we need to be resolved [here](https://github.com/yoavbls/pretty-ts-errors/discussions/43)  
 Any other contribution is welcome. Feel free to open any issue / PR you think.
-  
-  
-  

docs/hide-original-errors.md

@@ -0,0 +1,20 @@
+To hide the original errors, display only the prettified ones, and make type blocks copyable, you can use the following hack:
+
+## The Hack
+
+1. Install the [Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) extension from the VSCode marketplace.
+
+2. Follow the installation instructions provided by the extension, and use [this CSS file](./pretty-ts-errors-hack.css).
+
+## Why Do We Need This Hack?
+
+### Hiding Original Errors
+
+Unfortunately, VSCode doesn't currently support formatted diagnostics. Once it does, we'll be able to convert the extension to a TypeScript LSP Plugin that replaces the original error with the prettified version.  
+For updates on this feature, follow [this issue](https://github.com/yoavbls/pretty-ts-errors/issues/3).
+
+### Making Type Blocks Copyable
+
+VSCode sanitizes and removes most CSS properties for security reasons. We've opened an [issue](https://github.com/microsoft/vscode/issues/180496) and submitted a [PR](https://github.com/microsoft/vscode/pull/180498) to allow the use of the `display` property. This would enable us to layout the types in a way that allows copying.
+
+Until this change is approved, you can use the hack described above as a workaround.

docs/pretty-ts-errors-hack.css

@@ -0,0 +1,28 @@
+/* Allow copying */
+.codicon-none {
+    user-select: text !important;
+    -webkit-user-select: text !important;
+}
+
+/* Hide errors */
+div.monaco-hover-content:has(.codicon-none) > .hover-row:first-child {
+    display: none !important;
+}
+div.monaco-hover-content:has([style="color:#f96363;"]) > .hover-row:first-child {
+    display: none !important
+}
+
+/* Change order */
+.monaco-hover .monaco-hover-content {
+    display: flex;
+    flex-direction: column;
+}
+.monaco-hover .monaco-hover-content .hover-row {
+    order: 2;
+}
+.monaco-hover .monaco-hover-content .hover-row:has(.codicon-none) {
+    order: 1;
+}
+.monaco-hover .monaco-hover-content .hover-row:has([style="color:#f96363;"]) {
+    order: 1;
+}

package.json

@@ -3,7 +3,7 @@
   "displayName": "Pretty TypeScript Errors",
   "publisher": "YoavBls",
   "description": "Make TypeScript errors prettier and more human-readable in VSCode",
-  "version": "0.6",
+  "version": "0.6.0",
   "icon": "assets/icon.png",
   "repository": {
     "type": "git",