VS Code plugin for code folding StyleX

[zaydek]

I have a small VS Code plugin I threw together so I can open and fold stylex.create styles and stylex.keyframes using shortcuts. I have some gnarly OCD sometimes, so being able to show/hide styles helps me feel calm, whereas I get really overwhelmed if I keep seeing the styles everywhere. This plugin has really helped me enjoy StyleX and stop being scared of long style definitions.

Here's an example of it working:

stylex-folding.mp4

If anyone would like to contribute or take this project over, I'd love to have someone clone or fork the repo or perhaps make it official.

It's not currently published, but building/installing it is pretty straightforward if you've ever built a VS Code plugin before. You run one of the package.json commands to build the VSIX file and add it to VS Code.

---

Related notes

I also set up VS Code to toggle StyleX code folding automatically when I open a file (I don't remember how I did this or if it's in the plugin logic), but that has also proven to be quite a useful quality-of-life feature as well.

I threw this together quickly using AI because I don't really know what library to use with respect to scanning the JSX/TSX AST and determining folding opportunities. I don't know which to use or if any, so I just use naive string-scanning logic.

In a perfect world, I think it'd be ideal if you can just do, say, if your fold shortcut is cmd+[, cmd+[ once to do level three folding, and cmd+[ twice for deep folding, and cmd+] for the inverse. I don't know if VS Code shortcuts can support state like this, so I use shift+cmd+[ and shift+cmd+] as a workaround for now.

The code is somewhat broken, so opening doesn't work reliably; I just use the editor.unfoldAll command because, frankly, I don't know how to build this plugin the "right" way.

The plugin only exposes commands; a user would need to create their own bindings. Here is my keybindings.json file for reference:

// keybindings.json
[
  // ...

  // Folding (Using Plugin)
  {
    "key": "cmd+[",
    "command": "stylex-fold.foldLevelThree",
    "when": "editorTextFocus && foldingEnabled"
  },
  {
    "key": "shift+cmd+[",
    "command": "stylex-fold.foldAll",
    "when": "editorTextFocus && foldingEnabled"
  },

  // Unfolding (Using Native VS Code)
  {
    "key": "cmd+]",
    "command": "editor.unfoldAll",
    "when": "editorTextFocus && foldingEnabled"
  },
  {
    "key": "shift+cmd+]",
    "command": "editor.unfoldAll",
    "when": "editorTextFocus && foldingEnabled"
  }
]