TSX syntax causes catastrophic regex backtracking with long className attributes

[santoshmano]

TSX syntax causes catastrophic regex backtracking with long className attributes

Environment

• vim-polyglot: latest version
• Vim: 9.1.754 (macOS arm64)
• OS: macOS 15.6
• File type: TypeScript React (.tsx)

Problem

vim-polyglot's TSX syntax highlighting causes Vim to hang at 99% CPU when editing files with long className attributes (common with Tailwind CSS and other utility-first CSS frameworks).

Reproduction Steps

1. Install vim-polyglot:

Plug 'sheerun/vim-polyglot'

2. Create a .tsx file with long Tailwind className:

export default function Component() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <h1>Test</h1>
    </div>
  )
}

3. Open in Vim: vim file.tsx
4. Observe: Vim hangs indefinitely at 99% CPU
5. Must kill with kill -9 - Vim becomes completely unresponsive

Root Cause

Regex catastrophic backtracking in TSX syntax patterns when matching long string attributes with multiple space-separated tokens.

Stack trace analysis shows process stuck in tight loop within regex matching operations (available upon request).

Current Workaround

" Disable vim-polyglot for TypeScript/TSX files
let g:polyglot_disabled = ['typescript', 'tsx', 'jsx', 'javascript']

Place this before call plug#begin() in your vimrc.

Impact

• Makes vim-polyglot completely unusable for modern React projects
• Extremely common pattern with Tailwind CSS (multi-word classNames are standard)
• Affects all users working with React + Tailwind (very large user base)
• Forces users to disable the plugin entirely for TSX/JSX files
• No workaround exists while keeping vim-polyglot enabled for TSX

Expected Behavior

TSX syntax highlighting should handle long className strings without performance degradation. Other editors (VS Code, Neovim with Tree-sitter) handle these files without issues.

Additional Context

• Same issue affects Vim's built-in TSX syntax (filed separately with Vim core)
• Does NOT occur in Neovim with Tree-sitter-based syntax
• Issue is specific to regex-based syntax highlighting engines
• redrawtime timeout occurs, showing: 'redrawtime' exceeded, syntax highlighting disabled
• Even with syntax disabled by timeout, CPU usage remains at 99%

Suggested Fixes

Option 1: Optimize regex patterns

Review and optimize TSX/JSX regex patterns to avoid backtracking on:

• Long className attributes with space-separated tokens
• Nested JSX elements with string attributes
• Template literals in JSX

Option 2: Documentation

Add prominent warning in README:

⚠️ **Known Issue**: TSX syntax may hang on files with long className attributes.
Workaround: `let g:polyglot_disabled = ['typescript', 'tsx', 'jsx']`

Option 3: Switch to Tree-sitter

Consider migrating to Tree-sitter-based syntax highlighting for TypeScript/TSX, which doesn't suffer from regex backtracking issues.

Option 4: Default disable for TSX

Disable TSX syntax by default in vim-polyglot and document that users should use CoC or other LSP-based solutions for TypeScript/React.

Diagnostic Information

• Complete stack trace available showing regex matching loop
• Process analysis showing 99% CPU usage
• Sample .tsx file that triggers the issue

Happy to provide additional diagnostic information upon request.

Related Issues

This is a widespread issue affecting regex-based TSX syntax highlighting in Vim. Similar reports may exist under different names (performance issues, hangs, freezes with JSX/TSX files).