Merge branch 'develop'

styled-components · Feb 20, 2019 · 99f4b27 · 99f4b27
2 parents b57218d + 64e58a8
commit 99f4b27
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 2 deletions.
diff --git a/after/syntax/javascript.vim b/after/syntax/javascript.vim
@@ -117,12 +117,38 @@ syn match styledPrefix "\.\<extend\>"
 " annotations (delimited by brackets (e.g. "<>")) between `styled` and
 " the function call parenthesis
 syn match styledTypescriptPrefix
-      \ "\<styled\><\%({\|}\||\|&\|:\|;\|,\|'\|\"\|\k\|\s\|\n\)\+>(\%('\k\+'\|\"\k\+\"\))"
+      \ "\<styled\><\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>(\%('\k\+'\|\"\k\+\"\|\k\+\))"
       \ transparent fold
       \ nextgroup=styledDefinition
       \ contains=cssTagName,
       \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
-      \          typescriptParens,typescriptStringS,@typescriptType,typescriptType,
+      \          typescriptParens,typescriptStringS,@typescriptType,
+      \          typescriptType,
+      \          styledTagNameString
+syn match styledTypescriptPrefix
+      \ "\<styled\>\%((\%('\k\+'\|\"\k\+\"\|\k\+\))\|\.\k\+\)<\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
+      \ transparent fold
+      \ nextgroup=styledDefinition
+      \ contains=cssTagName,
+      \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
+      \          typescriptParens,typescriptStringS,@typescriptType,
+      \          typescriptType,
+      \          styledTagNameString
+syn match styledTypescriptPrefix "\.\<attrs\>\s*(\%(\n\|\s\|.\)\{-})<\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
+      \ transparent fold extend
+      \ nextgroup=styledDefinition
+      \ contains=cssTagName,
+      \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
+      \          typescriptParens,typescriptStringS,@typescriptType,
+      \          typescriptType,
+      \          styledTagNameString
+syn match styledTypescriptPrefix "\.\<extend\><\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
+      \ transparent fold extend
+      \ nextgroup=styledDefinition
+      \ contains=cssTagName,
+      \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
+      \          typescriptParens,typescriptStringS,@typescriptType,
+      \          typescriptType,
       \          styledTagNameString
 
 " define emotion css prop
@@ -157,6 +183,12 @@ syn match jsFuncCall "\<styled\>\s*(.\+)" transparent
 syn match jsFuncCall "\<styled\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))"
       \ contains=styledTagNameString
       \ nextgroup=styledDefinition
+syn match jsFuncCall "\<styled\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))<\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
+      \ contains=typescriptBraces,typescriptOpSymbols,typescriptEndColons,
+      \          typescriptParens,typescriptStringS,@typescriptType,
+      \          typescriptType,
+      \          styledTagNameString
+      \ nextgroup=styledDefinition
 syn match jsFuncCall "\.\<withComponent\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))"
       \ contains=styledTagNameString
 syn match jsFuncCall "\<dc\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))\%((\)\@="
@@ -195,6 +227,12 @@ syn cluster javascriptExpression
       \ add=styledPrefix,jsFuncCall,javascriptTagRefStyledPrefix
 syn cluster javascriptAfterIdentifier add=styledPrefix,jsFuncCall
 
+""" yats specific extensions
+" extend typescriptIdentifierName to allow styledDefinitions in their
+" tagged templates
+syn match typescriptIdentifierName extend
+      \ "\<css\>\|\<keyframes\>\|\<injectGlobal\>\|\<fontFace\>\|\<createGlobalStyle\>"
+      \ nextgroup=styledDefinition
 
 " color the custom highlight elements
 hi def link cssCustomKeyFrameSelector  Constant

diff --git a/examples/issue-55.ts b/examples/issue-55.ts
@@ -0,0 +1,78 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface Foo {
+  bool: boolean;
+}
+
+const A = styled('h1')<Foo>`
+  background-color: ${props => props.bool ? props.theme.primary : props.theme.seconday};
+  color: ${props => props.bool ? props.theme.seconday : props.theme.tertiary};
+  display: flex;
+  flex-direction: row;
+  flex: 1 0 auto;
+  padding: 0;
+`;
+
+const B = styled('h1')<{ [attr: string]: any, bool: boolean, tmp?: number }>`
+  background-color: ${props => props.bool ? props.theme.primary : props.theme.seconday};
+  color: ${props => props.bool ? props.theme.seconday : props.theme.tertiary};
+  display: flex;
+  flex-direction: row;
+  flex: 1 0 auto;
+  padding: 0;
+`;
+
+const C = styled<Foo>('h1')`
+  background-color: ${props => props.bool ? props.theme.primary : props.theme.seconday};
+  color: ${props => props.bool ? props.theme.seconday : props.theme.tertiary};
+  display: flex;
+  flex-direction: row;
+  flex: 1 0 auto;
+  padding: 0;
+`;
+
+const D = styled.h1<Foo>`
+  background-color: ${props => props.bool ? props.theme.primary : props.theme.seconday};
+  color: ${props => props.bool ? props.theme.seconday : props.theme.tertiary};
+  display: flex;
+  flex-direction: row;
+  flex: 1 0 auto;
+  padding: 0;
+`;
+
+const E = styled.h1<{ [attr: string]: any, bool: boolean, tmp?: number }>`
+  background-color: ${props => props.bool ? props.theme.primary : props.theme.seconday};
+  color: ${props => props.bool ? props.theme.seconday : props.theme.tertiary};
+  display: flex;
+  flex-direction: row;
+  flex: 1 0 auto;
+  padding: 0;
+`;
+
+const F = styled.span<Foo>`
+  background-color: ${props => props.bool ? props.theme.primary : props.theme.seconday};
+  color: ${props => props.bool ? props.theme.seconday : props.theme.tertiary};
+  display: flex;
+  flex-direction: row;
+  flex: 1 0 auto;
+  padding: 0;
+`;
+
+const G = styled.span.attrs({ role: 'presentation' })<{ bool: boolean, tmp?: number } & Foo>`
+  background-color: ${props => props.bool ? props.theme.primary : props.theme.seconday};
+  color: ${props => props.bool ? props.theme.seconday : props.theme.tertiary};
+  display: flex;
+  flex-direction: row;
+  flex: 1 0 auto;
+  padding: 0;
+`;
+
+const H = styled(F).attrs({ role: 'presentation' })<{ bool: boolean, tmp?: number } | Foo>`
+  background-color: ${props => props.bool ? props.theme.primary : props.theme.seconday};
+  color: ${props => props.bool ? props.theme.seconday : props.theme.tertiary};
+  display: flex;
+  flex-direction: row;
+  flex: 1 0 auto;
+  padding: 0;
+`;
diff --git a/examples/issue-56.ts b/examples/issue-56.ts
@@ -0,0 +1,15 @@
+const dynamicStyle = (props: any) => css`
+  color: ${props.color};
+  padding: 10px;
+`;
+
+css`
+  padding: 10px;
+`;
+
+const exampleCSS = css`
+  display: flex;
+  background-color: ${color('primary')};
+  align-items: center;
+  padding: ${spacing('tiny')} 0;
+`;