johnlindquist / kit

Script Kit. Automate Anything.
https://scriptkit.com
MIT License
3.91k stars 138 forks source link

[Feature] Provide a global `css` tagged template literal function for better IDE DX #1422

Open alexilyaev opened 10 months ago

alexilyaev commented 10 months ago

EDIT: Sorry, didn't realize Feature Requests should go in Discussions 🙏🏼 https://github.com/johnlindquist/kit/discussions/1423

Based on the example in TIPS.md > Adjust the CSS of Choices

Expand code... ```ts import "@johnlindquist/kit" let choice = await arg({ css: ` .light-purple { background-color: #c8a2c8; } .medium-purple { background-color: #967bb6; } .dark-purple { background-color: #5d4777; } .focused { box-shadow: inset .5rem 0 0 0 #ffffffee; } `, placeholder: "Choose a shade of purple", choices: [ { name: "[L]ight Purple", value: "light-purple", className: "light-purple", focusedClassName: "focused" }, { name: "[M]edium Purple", value: "medium-purple", className: "medium-purple", focusedClassName: "focused" }, { name: "[D]ark Purple", value: "dark-purple", className: "dark-purple", focusedClassName: "focused" }, ], }) await div(md(`You chose ${choice}`)) ```

The CSS code is just a plain string in VS Code:

image

By adding a css tagged template literal function, we could leverage existing IDE tools like syntax highlighting, Emmet completion, Prettier formatting and CSS intellisense via, e.g. vscode-styled-components extension:

image image