Search in your code by input an emmet abbreviation.
Why
This is very common to want to search an element with multiple classNames whatever they are ordered.
If you want to search an element which has bg-red-500 and text-gray-900 (because you spotted it in the "developper window" for example), you want to search element that matches:
<div className="bg-red-500 text-gray-900" />
<!-- but also -->
<div className="bg-red-500 flex text-gray-900" />
<!-- but also -->
<div className="text-gray-900 flex flex-col bg-red-500" />
This is what this plugin is made for.
Usage
Open the command panel with ⌘ + ⇧ + P.
Select the "Search" command.
Input an Emmet abbreviation.
[!WARNING]
For this version, only a very light subset is supported. Only classes (ex: ".flex.flex-grow.gap-2") are supported.
Only single line matches are supported for now.
Press Enter. A regex is copied to your clipboard.
Open the search panel, make sure your have checked the "regex" checkbox, and past the content of your clipboard.
Future
Support Emmet abbrevitation with a tag (ex: span.bg-red-500.flex )