webstorm-styled-components
webstorm-styled-components copied to clipboard
Wrong hex-color format and No auto line-break with Emmet
-
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;
`
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.