language-tools icon indicating copy to clipboard operation
language-tools copied to clipboard

Add syntax higlighting and Typescript intellisense for `<style lang="ts">` tags

Open Gin-Quin opened this issue 3 years ago • 0 comments

Is your feature request related to a problem? Please describe. New CSS frameworks like vanilla-extract use Typescript as a CSS preprocessor. That's quite amazing because it lets you to reuse javascript variables in your style as well as in your script.

As of today vanilla-extract recommend to define your "typescript style" into separate *.css.ts files. That hurts the spirit of Svelte's components architecture, that is to put the content of any css preprocessor into the <style> tag rather than into a separate file.

Describe the solution you'd like Add syntax highlighting and intellisense support for <style lang="ts"> tags. The Typescript code inside the style tag should be completely independent of the main script tag. As a css preprocessor it will be processed into valid css that can be later parsed.

This feature would be awesome for the Svelte + Vanilla-extract users as well as the other Typescript-oriented CSS frameworks that I think will be coming in the next few years.

Gin-Quin avatar Nov 20 '21 20:11 Gin-Quin