Vim bundle for based javascript files.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Vim bundle for styled-components, diet-cola, emotion and experimental glamor/styled content in javascript files.

After massive issues with the syntax highlighting of the previous version, this newly implemented plugin now only highlights CSS in javascript template strings, if the current APIs of the supported libraries are present. Thus there is no more bleeding of keywords into non-CSS sections of the file.

Note however, that this plugin does not provide (all existing) 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 but feel free to use whatever you like.)

Table of Contents


See the documentation for the specific vim package manager for details on how to install packages for vim.

Install via Vundle

Add to vimrc:

Plugin 'styled-components/vim-styled-components'

Install via:

:so ~/.vimrc

Install via vim-plug

Add to vimrc:

Plug 'styled-components/vim-styled-components', { 'branch': 'main' }

Install via:

:so ~/.vimrc

Install via pathogen


git clone ~/.vim/bundle/vim-styled-components


As only the official APIs are supported and they are necessary to indicate highlighting sections in your javascript file, renaming of the appropriate functions or externally defining the CSS rules in template strings will lead to missing highlighting. This means the following will not be correctly highlighted:

import styled as unstyled from 'styled-components';

  background-color: papayawhip;
  color: palevioletred;

Neither will this:

import dc from 'diet-cola';

const mainStyles = `
  background-color: papayawhip;
  color: palevioletred;

const Button = styled('h1')(mainStyles);


Contributions are very welcome. 🙇

Browse existing issues or create a new one here.

Submit pull requests here. This project uses the git flow model for development. Please base your feature branch on the develop branch and follow the code style convention used in the already existing files.


A huge thanks goes to Bram Moolenaar for authoring/maintaining Vim.

Lots of love to Glen Maddern and Max Stoiber for creating styled-components.

And of course sylvainbannier for the initial workaround here.


Copyright (c) 2016 Karl Fleischmann. Distributed under the same terms as Vim itself. See :help license.