Incorrect indentation for media query blocks

[apazzolini]

When inside a media query block, indentation does not work as expected. This is specifically related to the @ sign on the line - if you remove it, indentation works properly.

Minimal vim config

call plug#begin('~/.vim/plugged')
Plug 'styled-components/vim-styled-components', { 'for': 'javascript', 'branch': 'main' }
call plug#end()

filetype plugin indent on
syntax enable

Thanks!

[fleischie]

Hello. Thanks for the issue.

Just a short question now, before I look into it the following week: Did you try to add a css definition? It should re-indent on : and ; among others. It's possible, it doesn't know it should indent based on the ambiguity of the surrounding block.

Please try out adding some css and/or tagged template interpolation and tell me, whether it still misbehaves. Thank you. ✌️

[apazzolini]

Unfortunately, adding a CSS definition doesn't help - the indentation remains one level less than it should.

I've also tried vim's indent feature (=), and that continues to indent incorrectly, with definitions and without.

[fleischie]

@apazzolini Hi, could you check out the latest develop branch to see, whether it fixes the reported issue? Don't hesitate with follow-up questions/issues with this. :v:

[apazzolini]

@fleischie It's working much better! There's still a bit of weirdness when I also have delimitmate enabled, but I don't think that's an issue for this project - using = to indent the range outputs the expected result.

Thank you!

[fleischie]

Cool, glad to hear.

If you think I should look into Delimitmate + styled-components, just open another issue. I may not be able to solve it completely, but you know.... The more eyes, the merrier the issues... no, wait. 😋

[fleischie]

Fixed in release v2.5.