CSS autocomplete on root

[svipas]

Hello,

this plugin is really awesome, but the main problem is with styled-components. I'm using it and with this plugin I can get autocomplete/suggestions, but the main problem I can't write just:

color: red;
font-size: xx-large;

I need to write this to get autocomplete/suggestions:

* {
  color: red;
  font-size: xx-large;
}

It is possible to use it without declaring any HTML tag? I know I can write code and then delete the * {} part, but it really annoys when you write a lot of code.

@plievone

[plievone]

Hi, I see the problem. Currently the extension relies on VS Code language services, so as one cannot get your bare example to work in its own file, the extension won't help you there either.

There could be some kind of a prefix+postfix feature that would allow adding arbitrary strings to a literal when opened (adding your * { there automatically), and syncing only the internal part, but it might take a while to implement properly. In the meantime I would suggest implementing a shortcut that would toggle wrapping any text in the editor with that prefix and postfix, so the workflow would be

• open a literal via Ctrl+Enter
• press some other shortcut to wrap the text with * { and }, enabling highlighting
• press the shortcut again to remove the wrapping, before closing the literal editor

I'll experiment with a proper implementation without extra steps, but cannot promise anything right away, sorry about that!

[sQVe]

The issue of not having autocomplete when using styled-components are starting to annoy me. This extension seems like a very good temporary solution but I'm having problems getting the macro to work:

press some other shortcut to wrap the text with * { and }, enabling highlighting press the shortcut again to remove the wrapping, before closing the literal editor

If anyone managed to create a macro like this, please do share! :heart:

[sQVe]

This is solved by installing the following plugin: https://github.com/Microsoft/typescript-styled-plugin

I suggest closing this issue!

[plievone]

Hi, for styled-components, typescript-styled-plugin is a good solution.

Note that it can also be used for other embedded css strings in js/ts if one can use a tagged template literal and thus accept the extra function call (other host languages and literal types may need template-literal-editor still).

I'll close this issue for now -- please anyone raise your hand if you still need prefixing/postfixing or some other live transformation between the source literal and template literal editor. I myself considered adding a minifying vs autoformatting live transformation (minifying the string by stripping whitespace, autoformatting it back when edited), for working with html templates but then just added the embedded template minification to a separate build step, and it works ok (and better as it strips comments only from the output), and similarly it may be better to let other extensions to work with these specifics. Some other live transformation ideas were adding aforementioned prefix/postfix snippets automatically to suit the embedded language, or stripping extra line indentations to keep the code lined up in host language vs literal editor, or dealing with backtick escapes etc. But it may be best to keep this extension as a general literal editor for different host languages and embedded languages (such as SQL etc).