Add support for styled-components syntax highlighting

components.json

@@ -70,7 +70,7 @@
 		"javascript": {
 			"title": "JavaScript",
 			"require": "clike",
-			"peerDependencies": "markup",
+			"peerDependencies": ["markup", "css"],
 			"alias": "js",
 			"option": "default"
 		},

components/prism-javascript.js

@@ -76,6 +76,26 @@ Prism.languages.insertBefore('javascript', 'string', {
 	}
 });
 
+Prism.languages.insertBefore("javascript", "template-string", {
+	"styled-components-template-string": {
+		pattern: /(styled(?:\([^)]*\))?(?:\.\w+(?:\([^)]*\))*)*|css|createGlobalStyle|keyframes)`(?:\$\{[^}]+\}|\\\\|\\?[^\\])*?`/,
+		lookbehind: true,
+		greedy: true,
+		inside: {
+			interpolation: {
+				pattern: /\$\{[^}]+\}/,
+				inside: {
+					"interpolation-punctuation": {
+						pattern: /^\$\{|\}$/,
+						alias: "punctuation"
+					},
+					rest: Prism.languages.javascript
+				}
+			}
+		}
+	}
+});
+
 if (Prism.languages.markup) {
 	Prism.languages.insertBefore('markup', 'tag', {
 		'script': {

prism.js

@@ -785,6 +785,26 @@ Prism.languages.insertBefore('javascript', 'string', {
 	}
 });
 
+Prism.languages.insertBefore("javascript", "template-string", {
+	"styled-components-template-string": {
+		pattern: /(styled(\.\w+|\([^\)]*\))(\.\w+(\([^\)]*\))*)*|css|createGlobalStyle|keyframes)`(?:\$\{[^}]+\}|\\\\|\\?[^\\])*?`/,
+		lookbehind: true,
+		greedy: true,
+		inside: {
+			interpolation: {
+				pattern: /\$\{[^}]+\}/,
+				inside: {
+					"interpolation-punctuation": {
+						pattern: /^\$\{|\}$/,
+						alias: "punctuation"
+					},
+					rest: Prism.languages.javascript
+				}
+			}
+		}
+	}
+});
+
 if (Prism.languages.markup) {
 	Prism.languages.insertBefore('markup', 'tag', {
 		'script': {

tests/languages/javascript/styled-components_feature.test

@@ -0,0 +1,69 @@
+styled.button`
+	color: blue;
+	background: ${props => props.background || 'none'};
+`
+styled(Button)`
+	background: red;
+`
+createGlobalStyle`
+	html {
+		color: blue;
+	}
+`
+css`
+	color: blue;
+`
+keyframes`
+	0% {
+		color: blue;
+	}
+	100% {
+		color: red;
+	}
+`
+
+----------------------------------------------------
+
+[
+	"styled",
+	["punctuation", "."],
+	"button",
+	["styled-components-template-string", [ 
+		"`\n\tcolor: blue;\n\tbackground: ",
+		["interpolation", [
+			["interpolation-punctuation", "${"],
+			["parameter", ["props"]],
+			["operator", "=>"],
+			" props",
+			["punctuation", "."],
+			"background ",
+			["operator", "||"],
+			["string", "'none'"],
+			["interpolation-punctuation", "}"]
+		]],
+		";\n`"
+	]],
+	["function", "styled"],
+	["punctuation", "("],
+	"Button",
+	["punctuation", ")"],
+	["styled-components-template-string", [
+		"`\n\tbackground: red;\n`"
+	]],
+	"\ncreateGlobalStyle",
+	["styled-components-template-string", [
+		"`\n\thtml {\n\t\tcolor: blue;\n\t}\n`"
+	]],
+	"\ncss",
+	["styled-components-template-string", [
+		"`\n\tcolor: blue;\n`"
+	]],
+	"\nkeyframes",
+	["styled-components-template-string", [
+		"`\n\t0% {\n\t\tcolor: blue;\n\t}\n\t100% {\n\t\tcolor: red;\n\t}\n`"
+	]]
+]
+
+----------------------------------------------------
+
+Checks for styled-components and its APIs.