Merge branch 'develop'

styled-components · May 22, 2017 · c5b919d · c5b919d
2 parents 21e9a37 + 6afc58d
commit c5b919d
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # vim-styled-components
 
-Vim bundle for [styled-components](http://styled-components.com) based javascript files.
+Vim bundle for [styled-components](https://styled-components.com) and [diet-cola](https://github.com/jxnblk/diet-cola) based javascript files.
 
-This plugin checks, whether the current buffer contains an `import` or a `require` from `styled-components` and injects CSS rules into JS template strings.
+This plugin checks, whether the current buffer contains an `import` or a `require` from `styled-components` or `diet-cola` and injects CSS rules into JS template strings.
 
 Note however, that this plugin does not provide its own CSS rules. You should have an up to date vim runtime (for CSS2 rules) and - as long as CSS3 rules are not included - an additional plugin for CSS3 rules. (I recommend [hail2u/vim-css3-syntax](https://github.com/hail2u/vim-css3-syntax) but feel free to use whatever you like.)
 
@@ -57,7 +57,7 @@ Submit pull requests [here](https://github.com/fleischie/vim-styled-components/p
 
 A huge thanks goes to Bram Moolenaar for authoring/maintaining [Vim](http://www.vim.org/).
 
-Lots of love to [Glen Maddern](https://twitter.com/glenmaddern) and [Max Stoiber](https://twitter.com/mxstbr) for creating [styled-components](http://styled-components.com).
+Lots of love to [Glen Maddern](https://twitter.com/glenmaddern) and [Max Stoiber](https://twitter.com/mxstbr) for creating [styled-components](https://styled-components.com).
 
 And of course [sylvainbannier](https://github.com/sylvainbannier) for the initial workaround [here](https://github.com/styled-components/styled-components/issues/257#issue-191586611).
 

diff --git a/after/syntax/javascript.vim b/after/syntax/javascript.vim
@@ -10,51 +10,55 @@ endif
 
 
 " find import line matching styled-components
-let import_line = search("import.*from.*styled-components", 'n')
-let require_line = search("require.*styled-components", 'n')
+let sc_import_line = search("import.*from.*styled-components", 'n')
+let sc_require_line = search("require.*styled-components", 'n')
+let dc_import_line = search("import.*from.*diet-cola", 'n')
+let dc_require_line = search("require.*diet-cola", 'n')
 
 " if there is such a line in the document
-if import_line > 0 || require_line > 0
+if sc_import_line > 0 || sc_require_line > 0 ||
+      \ dc_import_line > 0 || dc_require_line > 0
 
-" extend javascript syntax
-runtime! syntax/css.vim
-runtime! syntax/css/*.vim
-syntax cluster CSS
-      \ contains=cssAnimation,cssAnimationAttr,cssAnimationProp,cssAttr,
-      \          cssAttrComma,cssAttributeSelector,cssAuralAttr,
-      \          cssAuralProp,cssBackgroundAttr,cssBackgroundProp,
-      \          cssBorderAttr,cssBorderProp,cssBoxAttr,cssBoxProp,cssBraces,
-      \          cssClassName,cssClassNameDot,cssColor,cssColorProp,cssComma,
-      \          cssComment,cssCommonAttr,cssContentForPagedMediaAttr,
-      \          cssContentForPagedMediaProp,cssDefinition,cssDeprecated,
-      \          cssDimensionAttr,cssDimensionProp,cssError,cssFlexibleBoxAttr,
-      \          cssFlexibleBoxProp,cssFontAttr,cssFontDescriptor,
-      \          cssFontDescriptorAttr,cssFontDescriptorBlock,
-      \          cssFontDescriptorFunction,cssFontDescriptorProp,cssFontProp,
-      \          cssFunction,cssFunctionComma,cssFunctionName,
-      \          cssGeneratedContentAttr,cssGeneratedContentProp,
-      \          cssGradientAttr,cssGridAttr,cssGridProp,cssHacks,
-      \          cssHyerlinkAttr,cssHyerlinkProp,cssIEUIAttr,cssIEUIProp,
-      \          cssIdentifier,cssImportant,cssInclude,cssIncludeKeyword,
-      \          cssKeyFrame,cssKeyFrameSelector,cssKeyFrameWrap,
-      \          cssLineboxAttr,cssLineboxProp,cssListAttr,cssListProp,
-      \          cssMarginAttr,cssMarqueeAttr,cssMarqueeProp,cssMedia,
-      \          cssMediaAttr,cssMediaBlock,cssMediaComma,cssMediaKeyword,
-      \          cssMediaProp,cssMediaType,cssMobileTextProp,
-      \          cssMultiColumnAttr,cssMultiColumnProp,cssNoise,cssPaddingAttr,
-      \          cssPage,cssPageMargin,cssPageProp,cssPagePseudo,cssPageWrap,
-      \          cssPagedMediaAttr,cssPagedMediaProp,cssPositioningAttr,
-      \          cssPositioningProp,cssPrintAttr,cssPrintProp,cssProp,
-      \          cssPseudoClass,cssPseudoClassFn,cssPseudoClassId,
-      \          cssPseudoClassLang,cssRenderAttr,cssRenderProp,cssRubyAttr,
-      \          cssRubyProp,cssSelectorOp,cssSelectorOp2,cssSpecialCharQ,
-      \          cssSpecialCharQQ,cssSpeechAttr,cssSpeechProp,cssStringQ,
-      \          cssStringQQ,cssTableAttr,cssTableProp,cssTagName,cssTextAttr,
-      \          cssTextProp,cssTransformAttr,cssTransformProp,
-      \          cssTransitionAttr,cssTransitionProp,cssUIAttr,cssUIProp,
-      \          cssURL,cssUnicodeEscape,cssUnicodeRange,cssUnitDecorators,
-      \          cssValueAngle,cssValueFrequency,cssValueInteger,
-      \          cssValueLength,cssValueNumber,cssValueTime,cssVendor
+  " extend javascript syntax
+  runtime! syntax/css.vim
+  runtime! syntax/css/*.vim
+  syntax cluster CSS
+        \ contains=cssAnimation,cssAnimationAttr,cssAnimationProp,cssAttr,
+        \          cssAttrComma,cssAttributeSelector,cssAuralAttr,
+        \          cssAuralProp,cssBackgroundAttr,cssBackgroundProp,
+        \          cssBorderAttr,cssBorderProp,cssBoxAttr,cssBoxProp,cssBraces,
+        \          cssClassName,cssClassNameDot,cssColor,cssColorProp,cssComma,
+        \          cssComment,cssCommonAttr,cssContentForPagedMediaAttr,
+        \          cssContentForPagedMediaProp,cssDefinition,cssDeprecated,
+        \          cssDimensionAttr,cssDimensionProp,cssError,
+        \          cssFlexibleBoxAttr,cssFlexibleBoxProp,cssFontAttr,
+        \          cssFontDescriptor,cssFontDescriptorAttr,
+        \          cssFontDescriptorBlock,cssFontDescriptorFunction,
+        \          cssFontDescriptorProp,cssFontProp,cssFunction,
+        \          cssFunctionComma,cssFunctionName,cssGeneratedContentAttr,
+        \          cssGeneratedContentProp,cssGradientAttr,cssGridAttr,
+        \          cssGridProp,cssHacks,cssHyerlinkAttr,cssHyerlinkProp,
+        \          cssIEUIAttr,cssIEUIProp,cssIdentifier,cssImportant,
+        \          cssInclude,cssIncludeKeyword,cssKeyFrame,
+        \          cssKeyFrameSelector,cssKeyFrameWrap,cssLineboxAttr,
+        \          cssLineboxProp,cssListAttr,cssListProp,cssMarginAttr,
+        \          cssMarqueeAttr,cssMarqueeProp,cssMedia,cssMediaAttr,
+        \          cssMediaBlock,cssMediaComma,cssMediaKeyword,cssMediaProp,
+        \          cssMediaType,cssMobileTextProp,cssMultiColumnAttr,
+        \          cssMultiColumnProp,cssNoise,cssPaddingAttr,cssPage,
+        \          cssPageMargin,cssPageProp,cssPagePseudo,cssPageWrap,
+        \          cssPagedMediaAttr,cssPagedMediaProp,cssPositioningAttr,
+        \          cssPositioningProp,cssPrintAttr,cssPrintProp,cssProp,
+        \          cssPseudoClass,cssPseudoClassFn,cssPseudoClassId,
+        \          cssPseudoClassLang,cssRenderAttr,cssRenderProp,cssRubyAttr,
+        \          cssRubyProp,cssSelectorOp,cssSelectorOp2,cssSpecialCharQ,
+        \          cssSpecialCharQQ,cssSpeechAttr,cssSpeechProp,cssStringQ,
+        \          cssStringQQ,cssTableAttr,cssTableProp,cssTagName,
+        \          cssTextAttr,cssTextProp,cssTransformAttr,cssTransformProp,
+        \          cssTransitionAttr,cssTransitionProp,cssUIAttr,cssUIProp,
+        \          cssURL,cssUnicodeEscape,cssUnicodeRange,cssUnitDecorators,
+        \          cssValueAngle,cssValueFrequency,cssValueInteger,
+        \          cssValueLength,cssValueNumber,cssValueTime,cssVend
 
   " allow additional CSS in cssDefinitions
   "   `[^$]` skips "${", so that js template expressions are not considered

diff --git a/test/diet-cola.js b/test/diet-cola.js
@@ -0,0 +1,18 @@
+import dc from 'diet-cola'
+
+
+const Button = dc('button')(`
+  font-family: inherit;
+  font-size: inherit;
+  padding: 8px;
+  margin: 0;
+  color: white;
+  background-color: tomato;
+  border: 0;
+  border-radius: 4px;
+  appearance: none;
+
+  &:hover {
+    background-color: black;
+  }
+`)
diff --git a/test/syntax.js b/test/syntax.js
@@ -106,4 +106,21 @@ const StyledButton = styled.button`
 `;
 
 
+// check API of v2
+// https://github.com/fleischie/vim-styled-components/issues/16
+const Comp = styled.div`color: palevioletred`;
+const NewComp1 = Comp.extend`
+  color: papayawhip;
+`;
+const NewComp2 = Comp.extendWith('span')`
+  color: lightsalmon;
+`;
+
+const Link = styled.a.attrs({
+  target: '_blank',
+})`
+  color: tomato;
+`;
+
+
 export default StyledButton;