Apache Superset Bug Report 🐛: CSS Template Editor Crashes with Invalid Selector

Bug description

Bug:

Using the CSS Template editor in Apache Superset throws a runtime error and fails to apply the template when a CSS block is added that includes invalid syntax — particularly CSS-like content inside template blocks or strings that mimic selectors.

Environment:

• OS: Windows 11 with WSL2 (Ubuntu 22.04), MacOS Sequoia.
• Superset Version: 0.0.0-dev (built from latest master).
• Install Method: Forked the repository, cloned it and running via Docker.
• Browser: Chrome.

Steps to Reproduce:

• Go to a new Dashboard -> Edit CSS -> Load a CSS Template
• Uncaught Runtime error as the below image. The app crashes with a runtime error due to invalid CSS being interpreted as a DOM selector via querySelector.

Additional Context:

The bug arises because the key used in the Ant Design "Menu" component was incorrectly set to template.css, which is the full CSS string. When passed as a key, this raw CSS gets misused — especially when the string contains selector-like syntax. This causes the querySelector in the frontend to interpret it as a DOM selector, leading to a runtime crash.

<Menu
    onClick={this.changeCssTemplate}
    items={this.state.templates.map(template => ({
      key: template.css,
      label: template.label,
    }))}
/>

Screenshots/recordings

Superset version

master / latest-dev

Python version

3.10

Node version

18 or greater

Browser

Chrome

Additional context

No response

Checklist

• [x] I have searched Superset docs and Slack and didn't find a solution to my problem.
• [x] I have searched the GitHub issue tracker and didn't find a similar bug report.
• [x] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.