diff --git a/JavaScript (Babel).YAML-tmLanguage b/JavaScript (Babel).YAML-tmLanguage
index 80b4241..9e9772d 100644
--- a/JavaScript (Babel).YAML-tmLanguage
+++ b/JavaScript (Babel).YAML-tmLanguage
@@ -17,6 +17,8 @@ repository:
- include: '#literal-for'
- include: '#literal-switch'
+ - include: '#styled-components' # add support for styled-components
+
- include: '#expression'
- include: '#literal-punctuation'
@@ -1094,6 +1096,58 @@ repository:
- name: constant.character.escape.js
match: \\([1-7][0-7]{0,2}|[0-7]{2,3}|[bfnrtv0'"\\]|x\h{2}|u\{\h+\}|u\h{4})
+ styled-components:
+ patterns:
+ - include: '#styled-components-styled'
+ - include: '#styled-components-global'
+ - include: '#styled-components-keyframes'
+ styled-components-global:
+ begin: \s*+(?:(?:injectGlobal))\s*((`))
+ beginCaptures:
+ '0':
+ name: entity.name.function.js
+ '2':
+ name: string.interpolated.css keyword.other.template.begin.css
+ end: (`)
+ endCaptures:
+ '1':
+ name: string.interpolated.css keyword.other.template.end.css
+ name: source.css.embedded.js
+ patterns:
+ - include: source.scss
+ styled-components-keyframes:
+ begin: \s*+(?:(?:keyframes))\s*((`))
+ beginCaptures:
+ '0':
+ name: entity.name.function.js
+ '2':
+ name: string.interpolated.css keyword.other.template.begin.css
+ end: (`)
+ endCaptures:
+ '1':
+ name: string.interpolated.css keyword.other.template.end.css
+ name: source.css.embedded.js
+ patterns:
+ - include: source.scss
+ styled-components-styled:
+ begin: \s*+(?:(?:(\bstyled)(?:(\.)\s*(\w+))))\s*((`))
+ beginCaptures:
+ '1':
+ name: variable.other.object.js
+ '2':
+ name: keyword.operator.accessor
+ '3':
+ name: meta.function entity.name.function
+ '5':
+ name: string.interpolated.css keyword.other.template.begin.css
+ end: (`)
+ endCaptures:
+ '0':
+ name: string.interpolated.css keyword.other.template.end.css
+ name: source.css.embedded.js
+ patterns:
+ - include: source.js.css
+
literal-variable:
patterns:
# e.g. CONSTANT
diff --git a/JavaScript (Babel).tmLanguage b/JavaScript (Babel).tmLanguage
index c94909b..2ba5be6 100644
--- a/JavaScript (Babel).tmLanguage
+++ b/JavaScript (Babel).tmLanguage
@@ -475,6 +475,10 @@
include
#literal-switch
+
+ include
+ #styled-components
+
include
#expression
@@ -3616,6 +3620,145 @@
+ styled-components
+
+ patterns
+
+
+ include
+ #styled-components-styled
+
+
+ include
+ #styled-components-global
+
+
+ include
+ #styled-components-keyframes
+
+
+
+ styled-components-global
+
+ begin
+ \s*+(?:(?:injectGlobal))\s*((`))
+ beginCaptures
+
+ 0
+
+ name
+ entity.name.function.js
+
+ 2
+
+ name
+ string.interpolated.css keyword.other.template.begin.css
+
+
+ end
+ (`)
+ endCaptures
+
+ 1
+
+ name
+ string.interpolated.css keyword.other.template.end.css
+
+
+ name
+ source.css.embedded.js
+ patterns
+
+
+ include
+ source.scss
+
+
+
+ styled-components-keyframes
+
+ begin
+ \s*+(?:(?:keyframes))\s*((`))
+ beginCaptures
+
+ 0
+
+ name
+ entity.name.function.js
+
+ 2
+
+ name
+ string.interpolated.css keyword.other.template.begin.css
+
+
+ end
+ (`)
+ endCaptures
+
+ 1
+
+ name
+ string.interpolated.css keyword.other.template.end.css
+
+
+ name
+ source.css.embedded.js
+ patterns
+
+
+ include
+ source.scss
+
+
+
+ styled-components-styled
+
+ begin
+ \s*+(?:(?:(\bstyled)(?:(\.)\s*(\w+))))\s*((`))
+ beginCaptures
+
+ 1
+
+ name
+ variable.other.object.js
+
+ 2
+
+ name
+ keyword.operator.accessor
+
+ 3
+
+ name
+ meta.function entity.name.function
+
+ 5
+
+ name
+ string.interpolated.css keyword.other.template.begin.css
+
+
+ end
+ (`)
+ endCaptures
+
+ 0
+
+ name
+ string.interpolated.css keyword.other.template.end.css
+
+
+ name
+ source.css.embedded.js
+ patterns
+
+
+ include
+ source.js.css
+
+
+
support-class
patterns
diff --git a/Styled Components.tmLanguage b/Styled Components.tmLanguage
new file mode 100644
index 0000000..0c704e1
--- /dev/null
+++ b/Styled Components.tmLanguage
@@ -0,0 +1,542 @@
+
+
+
+
+ comment
+
+ foldingStartMarker
+ /\*\*(?!\*)|\{\s*($|/\*(?!.*?\*/.*\S))
+ foldingStopMarker
+ (?<!\*)\*\*/|^\s*\}
+ keyEquivalent
+ ^~C
+ name
+ Styled Components
+ patterns
+
+
+ include
+ #comment-block
+
+
+ include
+ #rule-list
+
+
+ repository
+
+ color-values
+
+ patterns
+
+
+ comment
+ http://www.w3.org/TR/CSS21/syndata.html#value-def-color
+ match
+ \b(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)\b
+ name
+ support.constant.color.w3c-standard-color-name.css
+
+
+ comment
+ These colours are mostly recognised but will not validate. ref: http://www.w3schools.com/css/css_colornames.asp
+ match
+ \b(aliceblue|antiquewhite|aquamarine|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|gainsboro|ghostwhite|gold|goldenrod|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|magenta|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olivedrab|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato|turquoise|violet|wheat|whitesmoke|yellowgreen)\b
+ name
+ invalid.deprecated.color.w3c-non-standard-color-name.css
+
+
+ begin
+ (hsla?|rgba?)\s*(\()
+ beginCaptures
+
+ 1
+
+ name
+ support.function.misc.css
+
+ 2
+
+ name
+ punctuation.section.function.css
+
+
+ end
+ (\))
+ endCaptures
+
+ 1
+
+ name
+ punctuation.section.function.css
+
+
+ patterns
+
+
+ match
+ (?x)\b
+ (0*((1?[0-9]{1,2})|(2([0-4][0-9]|5[0-5])))\s*,\s*){2}
+ (0*((1?[0-9]{1,2})|(2([0-4][0-9]|5[0-5])))\b)
+ (\s*,\s*((0?\.[0-9]+)|[0-1]))?
+
+ name
+ constant.other.color.rgb-value.css
+
+
+ match
+ \b([0-9]{1,2}|100)\s*%,\s*([0-9]{1,2}|100)\s*%,\s*([0-9]{1,2}|100)\s*%
+ name
+ constant.other.color.rgb-percentage.css
+
+
+ include
+ #numeric-values
+
+
+
+
+
+ comment-block
+
+ begin
+ /\*
+ captures
+
+ 0
+
+ name
+ punctuation.definition.comment.css
+
+
+ end
+ \*/
+ name
+ comment.block.css
+
+ media-query
+
+ begin
+ (?i)\s*(only|not)?\s*(all|aural|braille|embossed|handheld|print|projection|screen|tty|tv)?
+ beginCaptures
+
+ 1
+
+ name
+ keyword.operator.logic.media.css
+
+ 2
+
+ name
+ support.constant.media.css
+
+
+ end
+ \s*(?:(,)|(?=[{;]))
+ endCaptures
+
+ 1
+
+ name
+ punctuation.definition.arbitrary-repitition.css
+
+
+ patterns
+
+
+ begin
+ \s*(and)?\s*(\()\s*
+ beginCaptures
+
+ 1
+
+ name
+ keyword.operator.logic.media.css
+
+
+ end
+ \)
+ patterns
+
+
+ begin
+ (?x)
+ (
+ ((min|max)-)?
+ (
+ ((device-)?(height|width|aspect-ratio))|
+ (color(-index)?)|monochrome|resolution
+ )
+ )|grid|scan|orientation
+ \s*(?=[:)])
+ beginCaptures
+
+ 0
+
+ name
+ support.type.property-name.media.css
+
+
+ end
+ (:)|(?=\))
+ endCaptures
+
+ 1
+
+ name
+ punctuation.separator.key-value.css
+
+
+
+
+ match
+ \b(portrait|landscape|progressive|interlace)
+ name
+ support.constant.property-value.css
+
+
+ captures
+
+ 1
+
+ name
+ constant.numeric.css
+
+ 2
+
+ name
+ keyword.operator.arithmetic.css
+
+ 3
+
+ name
+ constant.numeric.css
+
+
+ match
+ \s*(\d+)(/)(\d+)
+
+
+ include
+ #numeric-values
+
+
+
+
+
+ media-query-list
+
+ begin
+ \s*(?=[^{;])
+ end
+ \s*(?=[{;])
+ patterns
+
+
+ include
+ #media-query
+
+
+
+ numeric-values
+
+ patterns
+
+
+ captures
+
+ 1
+
+ name
+ punctuation.definition.constant.css
+
+
+ match
+ (#)([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b
+ name
+ constant.other.color.rgb-value.css
+
+
+ captures
+
+ 1
+
+ name
+ keyword.other.unit.css
+
+
+ match
+ (?x)
+ (?:-|\+)?(?:(?:[0-9]+(?:\.[0-9]+)?)|(?:\.[0-9]+))
+ ((?:px|pt|ch|cm|mm|in|r?em|ex|pc|deg|g?rad|dpi|dpcm|s)\b|%)?
+
+ name
+ constant.numeric.css
+
+
+
+ property-values
+
+ patterns
+
+
+ match
+ \b(absolute|all(-scroll)?|always|armenian|auto|avoid|baseline|below|bidi-override|block|bold|bolder|both|bottom|break-all|break-word|capitalize|center|char|circle|cjk-ideographic|col-resize|collapse|crosshair|dashed|decimal-leading-zero|decimal|default|disabled|disc|distribute-all-lines|distribute-letter|distribute-space|distribute|dotted|double|e-resize|ellipsis|fixed|geometricPrecision|georgian|groove|hand|hebrew|help|hidden|hiragana-iroha|hiragana|horizontal|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space|inactive|inherit|inline-block|inline|inset|inside|inter-ideograph|inter-word|italic|justify|katakana-iroha|katakana|keep-all|left|lighter|line-edge|line-through|line|list-item|loose|lower-alpha|lower-greek|lower-latin|lower-roman|lowercase|lr-tb|ltr|medium|middle|move|n-resize|ne-resize|newspaper|no-drop|no-repeat|nw-resize|none|normal|not-allowed|nowrap|oblique|optimize(Legibility|Quality|Speed)|outset|outside|overline|pointer|pre(-(wrap|line))?|progress|relative|repeat-x|repeat-y|repeat|right|ridge|row-resize|rtl|s-resize|scroll|se-resize|separate|small-caps|solid|square|static|strict|sub|super|sw-resize|table-footer-group|table-header-group|tb-rl|text-bottom|text-top|text|thick|thin|top|transparent|underline|upper-alpha|upper-latin|upper-roman|uppercase|vertical(-(ideographic|text))?|visible(Painted|Fill|Stroke)?|w-resize|wait|whitespace|zero|smaller|larger|((xx?-)?(small|large))|painted|fill|stroke)\b
+ name
+ support.constant.property-value.css
+
+
+ match
+ (\b(?i:arial|century|comic|courier|garamond|georgia|helvetica|impact|lucida|symbol|system|tahoma|times|trebuchet|utopia|verdana|webdings|sans-serif|serif|monospace)\b)
+ name
+ support.constant.font-name.css
+
+
+ include
+ #numeric-values
+
+
+ include
+ #color-values
+
+
+ include
+ #string-double
+
+
+ include
+ #string-single
+
+
+ begin
+ (rect)\s*(\()
+ beginCaptures
+
+ 1
+
+ name
+ support.function.misc.css
+
+ 2
+
+ name
+ punctuation.section.function.css
+
+
+ end
+ (\))
+ endCaptures
+
+ 1
+
+ name
+ punctuation.section.function.css
+
+
+ patterns
+
+
+ include
+ #numeric-values
+
+
+
+
+ begin
+ (format|local|url|attr|counter|counters)\s*(\()
+ beginCaptures
+
+ 1
+
+ name
+ support.function.misc.css
+
+ 2
+
+ name
+ punctuation.section.function.css
+
+
+ end
+ (\))
+ endCaptures
+
+ 1
+
+ name
+ punctuation.section.function.css
+
+
+ patterns
+
+
+ include
+ #string-single
+
+
+ include
+ #string-double
+
+
+ match
+ [^'") \t]+
+ name
+ variable.parameter.misc.css
+
+
+
+
+ match
+ \!\s*important
+ name
+ keyword.other.important.css
+
+
+
+ rule-list
+
+ begin
+
+ beginCaptures
+
+ 0
+
+ name
+ punctuation.section.property-list.css
+
+
+ end
+ (?=\s*)
+ name
+ meta.property-list.css
+ patterns
+
+
+ include
+ #comment-block
+
+
+ begin
+ (?<![-a-z])(?=[-a-z])
+ end
+ $|(?![-a-z])
+ name
+ meta.property-name.css
+ patterns
+
+
+ match
+ \b(azimuth|background-attachment|background-color|background-image|background-position|background-repeat|background|box-shadow|border-radius|border-bottom-color|border-bottom-style|border-bottom-width|border-bottom|border-collapse|border-color|border-left-color|border-left-style|border-left-width|border-left|border-right-color|border-right-style|border-right-width|border-right|border-spacing|border-style|border-top-color|border-top-style|border-top-width|border-top|border-width|border|bottom|caption-side|clear|clip|color|content|counter-increment|counter-reset|cue-after|cue-before|cue|cursor|direction|display|elevation|empty-cells|flex-basis|flex-direction|flex-flow|flex-grow|flex-shrink|flex-wrap|flex|float|font-family|font-size-adjust|font-size|font-stretch|font-style|font-variant|font-weight|font|height|image-rendering|left|letter-spacing|line-height|list-style-image|list-style-position|list-style-type|list-style|margin-bottom|margin-left|margin-right|margin-top|marker-offset|margin|marks|max-height|max-width|min-height|min-width|-moz-border-radius|opacity|orphans|outline-color|outline-style|outline-width|outline|overflow(-[xy])?|padding-bottom|padding-left|padding-right|padding-top|padding|page-break-after|page-break-before|page-break-inside|page|pause-after|pause-before|pause|pitch-range|pitch|play-during|pointer-events|position|quotes|resize|richness|right|size|speak-header|speak-numeral|speak-punctuation|speech-rate|speak|src|stress|table-layout|text-(align|decoration|indent|rendering|shadow|transform)|top|transition|unicode-bidi|vertical-align|visibility|voice-family|volume|white-space|widows|width|word-(spacing|wrap)|zoom|z-index)\b
+ name
+ support.type.property-name.css
+
+
+
+
+ begin
+ (?<!&|:)(:)\s*
+ beginCaptures
+
+ 1
+
+ name
+ punctuation.separator.key-value.css
+
+
+ end
+ \s*(;|(?=\}))
+ endCaptures
+
+ 1
+
+ name
+ punctuation.terminator.rule.css
+
+
+ name
+ meta.property-value.css
+ patterns
+
+
+ include
+ #property-values
+
+
+
+
+
+ string-double
+
+ begin
+ "
+ beginCaptures
+
+ 0
+
+ name
+ punctuation.definition.string.begin.css
+
+
+ end
+ "
+ endCaptures
+
+ 0
+
+ name
+ punctuation.definition.string.end.css
+
+
+ name
+ string.quoted.double.css
+ patterns
+
+
+ match
+ \\.
+ name
+ constant.character.escape.css
+
+
+
+ string-single
+
+ begin
+ '
+ beginCaptures
+
+ 0
+
+ name
+ punctuation.definition.string.begin.css
+
+
+ end
+ '
+ endCaptures
+
+ 0
+
+ name
+ punctuation.definition.string.end.css
+
+
+ name
+ string.quoted.single.css
+ patterns
+
+
+ match
+ \\.
+ name
+ constant.character.escape.css
+
+
+
+
+ scopeName
+ source.js.css
+ uuid
+ b64876fa-0739-4b2b-8e5b-e9e8b9f84514
+
+
diff --git a/test/syntax_test_styles.js b/test/syntax_test_styles.js
new file mode 100644
index 0000000..60aca41
--- /dev/null
+++ b/test/syntax_test_styles.js
@@ -0,0 +1,41 @@
+// SYNTAX TEST "JavaScript (Babel).tmLanguage"
+
+styled.h1`color:palevioletred;`
+//^^^^ source.js source.css.embedded.js variable.other.object.js
+// ^ source.js source.css.embedded.js keyword.operator.accessor
+// ^^ source.js source.css.embedded.js meta.function entity.name.function
+// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.begin.css
+// ^^^^^ source.js source.css.embedded.js meta.property-list.css meta.property-name.css support.type.property-name.css
+// ^ source.js source.css.embedded.js meta.property-list.css meta.property-value.css punctuation.separator.key-value.css
+// ^^^^^^^^^^^^^ source.js source.css.embedded.js meta.property-list.css meta.property-value.css invalid.deprecated.color.w3c-non-standard-color-name.css
+// ^ source.js source.css.embedded.js meta.property-list.css meta.property-value.css punctuation.terminator.rule.css
+// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.end.css
+
+injectGlobal`body{color:#ffcc00;}`
+//^^^^^^^^^^ source.js source.css.embedded.js entity.name.function.js
+// ^ source.js string.interpolated.css keyword.other.template.begin.css
+// ^^^^ source.js source.css.embedded.js entity.name.tag.scss
+// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.begin.scss
+// ^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-name.scss support.type.property-name.scss
+// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.separator.key-value.scss
+// ^^^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss constant.other.color.rgb-value.scss
+// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.terminator.rule.scss
+// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.end.scss
+// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.end.css
+
+keyframes`0%{color:palevioletred;}50%{color:dodgerblue;}`
+//^^^^^^^ source.js source.css.embedded.js entity.name.function.js
+// ^ source.js string.interpolated.css keyword.other.template.begin.css
+// ^^ source.js source.css.embedded.js
+// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.begin.scss
+// ^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-name.scss support.type.property-name.scss
+// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.separator.key-value.scss
+// ^^^^^^^^^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss invalid.deprecated.color.w3c-non-standard-color-name.scss
+// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.terminator.rule.scss
+// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.end.scss
+// ^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-name.scss support.type.property-name.scss
+// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.separator.key-value.scss
+// ^^^^^^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss invalid.deprecated.color.w3c-non-standard-color-name.scss
+// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.terminator.rule.scss
+// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.end.scss
+// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.end.css