markdown.md

Hi! I'm from the Webstorm team at JetBrains. We were planning to release a similar plugin to support Styled Components within the nearest days when we saw this. We would love it if you could accept our implementation so that the community of Styled Components users would be able to contribute.

I've made some changes. The main points are:

1. When building injected file content we replace the string interpolation argument with a fake identifier to avoid breaking the CSS syntax structure as much is possible. For example, in case of

let someCss = styled(Box) `
	color: red;
        ${getNestedSelector()} {
	    color: green
	}`;

the previous implementation would generate

sel {
  color: red;
}

sel {
  fakeprop: initial {
  color: green
} initial;
}

which places elements that should be nested side-by-side, significantly changing the code semantics. This new version generates

div {
  color: red;
  EXTERNAL_FRAGMENT {
    color: green
  }
}

This keeps nested elements nested (as they should be) and also allows code completion to function correctly.

2. Added tests that check injected content and for styled-components/webstorm-styled-components#6

The code is written in Kotlin and uses intellij-gradle-plugin to build it but this is only because our code was originally written this way. I really don't have a preference and since this is your project, I'll gladly convert it to Java or your preferred build tool if you do =)