styled` CSS` format about webstorm-styled-components

[undeadcat]

@ulrichb, Try changing the indent settings for LESS language.
LESS language is used in this plugin in styled-components strings because of LESS-like features like '&' selector.

And LESS, SASS, etc. languages have the IDE defaults set to 2 spaces (unlike CSS) for what seems like historical reasons.

[ulrichb]

@undeadcat Yes! It was the Less-"INDENT_SIZE" (I'v set it now to 4).

Thanks!

[undeadcat]

If your question is "Why is the code inside css`div .myDiv {color :red}` not formatted?", the answer is:

It's not something that at the moment be fixed by this plugin. It's planned to be fixed in the IDE in 2018.2. These are the applicable issues: WEB-32480 and WEB-28540.

[volos-st]

Thanks, changing INDENT_SIZE for LESS is help me

[ulrichb]

@undeadcat Is WEB-28540 also the reason, why TAB indents 2 spaces, although WebStorm is configured to 4 for the CSS language?

[undeadcat]

@ulrichb, Doesn't seem to be related to any of these issues.
I'm guessing you have 2 spaces configured in JS indent settings and 4 spaces in CSS? And wish to use 4 spaces within styled-components strings?

It works as expected for me using the latest WebStorm EAP.
Could you provide some more information - the IDE version you're using, a code sample than can be used to reproduce the issue?

[ulrichb]

Hi @undeadcat

Thanks for your reply!

I have a "Tab size" and "Indent" for JS, TS, and CSS set to 4 (I think the default of WebStorm).

.... still, when hitting the TAB key, the cursor moves 2 chars (instead of 4).

BUT: When selecting text, it correctly gets indented by 4 chars.

Also when hitting TAB in the surrounding TS code, the cursor moves by 4 chars.

Using WS 2018.2.3.

[ulrichb]

Also note that this plugin seems to cause it because in "normal" (non styled-comp) tagged strings, the cursor also 4 chars.