Merge branch 'develop'

styled-components · Nov 9, 2018 · c62d3da · c62d3da
2 parents 83cccff + b3de754
commit c62d3da
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/after/syntax/javascript.vim b/after/syntax/javascript.vim
@@ -40,14 +40,14 @@ syn region cssCustomAttrRegion contained
       \          cssString.*,cssURL,cssComment,cssUnicodeEscape,cssVendor,
       \          cssError,cssAttrComma,cssNoise,cssPseudoClassId,
       \          jsTemplateExpression,
-      \          typescriptInterpolation
+      \          typescriptInterpolation,typescriptTemplateSubstitution
 syn region cssCustomAttrRegion contained
       \ start="transition\s*:" end="\ze\%(;\|)\|{\|}\|`\)"
       \ contains=css.*Prop,css.*Attr,cssColor,cssImportant,cssValue.*,
       \          cssFunction,cssString.*,cssURL,cssComment,cssUnicodeEscape,
       \          cssVendor,cssError,cssAttrComma,cssNoise,cssPseudoClassId,
       \          jsTemplateExpression,
-      \          typescriptInterpolation
+      \          typescriptInterpolation,typescriptTemplateSubstitution
 
 " define custom css elements to not utilize cssDefinition
 syn region cssCustomMediaBlock contained fold transparent matchgroup=cssBraces
@@ -117,11 +117,12 @@ syn match styledPrefix "\.\<extend\>"
 " annotations (delimited by brackets (e.g. "<>")) between `styled` and
 " the function call parenthesis
 syn match styledTypescriptPrefix
-      \ "\<styled\><\%(\k\|'\|\"\|`\|,\|\s\)\+>(\%('\k\+'\|\"\k\+\"\|`\k\+`\))"
+      \ "\<styled\><\%({\|}\||\|&\|:\|;\|,\|'\|\"\|\k\|\s\|\n\)\+>(\%('\k\+'\|\"\k\+\"\))"
       \ transparent fold
       \ nextgroup=styledDefinition
       \ contains=cssTagName,
-      \          typescriptOpSymbols,typescriptEndColons,typescriptParens,
+      \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
+      \          typescriptParens,typescriptStringS,@typescriptType,typescriptType,
       \          styledTagNameString
 
 " define emotion css prop
@@ -173,11 +174,13 @@ syn region styledDefinition contained transparent fold extend
       \          cssHacks,
       \          cssCustom.*,
       \          jsComment,jsTemplateExpression,
-      \          typescriptInterpolation,
+      \          typescriptInterpolation,typescriptTemplateSubstitution,
       \          styledAmpersand,styledNestedRegion
 syn region styledDefinitionArgument contained transparent start=+(+ end=+)+
       \ contains=styledDefinition
 
+syn cluster typescriptValue add=styledPrefix,jsFuncCall,styledTypescriptPrefix
+
 " color the custom highlight elements
 hi def link cssCustomKeyFrameSelector  Constant
 hi def link cssCustomPositioningPrefix StorageClass

diff --git a/examples/apis.js b/examples/apis.js
@@ -9,7 +9,7 @@ const genericTemplateString = `
  * Note: As glamor and emotion use similar APIs, only the extraneous APIs are
  *       mentioned later on.
  */
-import styled, { css, keyframes, createGlobalStyle } from 'styled-components';
+import styled, { css, keyframes, injectGlobal, createGlobalStyle } from 'styled-components';
 
 // match of styled.method api
 // - unmatched cssTagName (note the double typoes and missing highlighting)

diff --git a/examples/typescript.ts b/examples/typescript.ts
@@ -7,8 +7,8 @@ import styled from 'styled-components';
 
 
 interface SectionProps {
-  children?: React.ReactChild,
-  className?: string,
+  children?: React.ReactChild;
+  className?: string;
 }
 
 
@@ -31,5 +31,46 @@ const StyledSection = styled(Section)`
   align-items: center;
 `;
 
+interface ExistingInterface {
+  someAttribute: boolean;
+}
+
+const InterfaceComponent = styled<ExistingInterface, 'h1'>('h1')`
+  background-color: blue;
+  color: green;
+`;
+
+const InlineInterfaceComponent = styled<{
+  someAttribute: any
+}, 'h1'>('h1')`
+  background-color: white;
+  color: black;
+`;
+
+const InlineInterfaceComponent2 = styled<{
+  someAttribute: {
+    someNestedAttribute: any;
+  };
+  anotherAttribute: any;
+}, 'h1'>('h1')`
+  background-color: black;
+  color: white;
+`;
+
+const ExtendedInterfaceComponent = styled<ExistingInterface & {
+  someAttribute: {
+    someNestedAttribute: any;
+  };
+  anotherAttribute: any;
+}, 'h1'>('h1')`
+  background-color: hotpink;
+  color: papayawhip;
+`;
+
+const AlternativeInterfaceComponent = styled<ExistingInterface | {
+}, 'h1'>('h1')`
+  background: papayawhip;
+  color: hotpink;
+`;
 
 export default StyledSection;