microsoft / typescript-styled-plugin

TypeScript server plugin that adds intellisense to styled component css strings
MIT License
839 stars 58 forks source link

[Feature Request] allow detecting of plain template strings #161

Closed matthew-dean closed 1 year ago

matthew-dean commented 2 years ago

One of the side effects of this plugin and plugins like it is that a lot of people on my team end up adding the css function to template strings that don't need it just to get syntax highlighting / autocomplete from this extension.

For example, I have a string like:

const linkButton = `
  color: ${deepGreen40};
  background: none;
  border: 1px solid transparent;
  text-decoration: underline;

  &:hover {
    color: ${deepGreen20};
  }
`

In the PR, a fellow engineer asked that I preface this with css, because all of the sudden he didn't get syntax highlighting / autocomplete in this block. I pointed out that from the styled components documentation, it says css is not needed in this case. So this extension is leading a lot of developers to wrap strings in functions which execute at runtime and are completely wasteful.

Proposal: allow some sort of comment tag or some other signal to signify that a string is a CSS block, without needing to wrap things in a runtime function.

Such as:

/* @css */
const linkButton = `
  color: ${deepGreen40};
`
// or
const linkButton: CSS = `
  color: ${deepGreen40};
`
mjbvz commented 1 year ago

Closing as this package has been deprecated in favor of the official styled-components/typescript-styled-plugin fork

After updating to that fork, follow up in the styled-components repo if this is still an issue