Vim bundle for based javascript files.
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
after Explicitly initialize indentation result Dec 27, 2018
examples Add support for 'othree/yajs' Nov 26, 2018 Notify of astroturf support Jan 9, 2019


Vim bundle for styled-components, diet-cola, emotion, experimental glamor/styled, and astroturf 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 vim doesn't supply the most exhaustive javascript and/or typescript support itself most vim users opt for using third party plugins to enhance syntax highlighting and omnicomplete, etc. Some of which might share the syntax definition names, but others doesn't. This fact requires one to go into the details of the syntax definition to makes sure the syntax definitions are correctly supported by this plugin. Please open an issue if you find incompatibilities with any plugins.

This is the list of plugins that are (somewhat) supported:


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.