Provide a global css tagged template literal function for better IDE DX

[alexilyaev]

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

Expand code...

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:

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:

[johnlindquist]

@alexilyaev That's a great suggestion, thanks.

In the meantime, it's trivial to write:

let css = await readFile(kenvPath("styles.css"), "utf8")

Then enjoy all the ide/tooling features in the styles.css file.