Skip to content

Instantly share code, notes, and snippets.

@prigara
Created August 31, 2017 12:53
Show Gist options
  • Save prigara/71b6f3c245b330203ed1d969d80c8c51 to your computer and use it in GitHub Desktop.
Save prigara/71b6f3c245b330203ed1d969d80c8c51 to your computer and use it in GitHub Desktop.

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.

  1. 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 =)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment