webstorm-styled-components icon indicating copy to clipboard operation
webstorm-styled-components copied to clipboard

Wrong hex-color format and No auto line-break with Emmet

Open xsjcTony opened this issue 3 years ago • 1 comments

  • IDE name and version: PhpStorm 2021.3.3 Build #PS-213.7172.28, built on March 18, 2022

  • Styled-components plugin version: 213.5744.190

Problem description:

1. Respect the code style setting Convert hex colors format to for style sheets when using Emmet

  • I've set the code style setting for hex-color to Short format

Emmet: c#f00 -> Press Tab

Expected behavior: (Working correctly In separate .css file or .vue's <style> block)

const StyledDiv = styled.div`
    color: #f00;
`

Actual behavior:

const StyledDiv = styled.div`
    color: #ff0000;
`

2. Insert line-break automatically when using Emmet

Base code:

const StyledDiv = styled.div`
    font-size: 20px;<caret at here>
`

Emmet: ovh -> Press Tab

Expected behavior: (Working correctly In separate .css file or .vue's <style> block)

const StyledDiv = styled.div`
    font-size: 20px;
    overflow: hidden;
`

Actual behavior:

const StyledDiv = styled.div`
    font-size: 20px;overflow: hidden;
`

xsjcTony avatar Apr 12 '22 10:04 xsjcTony

And also, Rearrange code (Ctrl + Alt + R by default) is not working for CSS code in template string literals. Seems lots of code style settings do not apply to it.

xsjcTony avatar Apr 12 '22 17:04 xsjcTony