Dynamically change wrapper based on tag used

[jasonwilliams]

Raised from styled-components/vscode-styled-components#293
Feature in Styled Components: https://styled-components.com/docs/basics#animations

Hey @mjbvz do you know if its possible to dynamically change the root based on the tag used?

In this case we want the keyframes`` tag to use a @keyframes { root instead of the traditional `:root {` version.
Seeing as there's no way of knowing which tag was used to trigger intellisense the only other option is to heuristically check the contents to know what wrapper to use. If there's percentage as the first token or from/to switch to `@keyframes {` wrapper

[jasonwilliams]

One option could be to detect a percentage as the first value in the text and use that to infer it’s a keyframe block.

[jasonwilliams]

@aeschli (as you work on the css language service) is that a sound approach? (see downstream issue for context)

[mjbvz]

Yes I think that should be possible. Can you use at the template tag name to change the wrapper? I think the TypeScript AST should have that information

[aeschli]

Sounds good. I assume you'll feed the css language service with a virtual document that wraps the user content with @keyframes ?

[jasonwilliams]

@aeschli that's correct, it will need to be @keyframes custom { [CSS] }. I think ill need to inspect the context.text to get the inner CSS and use that to know which one to use. @mjbvz mentioned inspecting the TypeScript AST but I couldn't see a way to do that :/ I will have to look again

[jasonwilliams]

Some good news, it seems i can get hold of the tag via context.node.parent.tag.escapedText

[jasonwilliams]

There's now a PR for this issue, with support for keyframes