{"id":14977441,"url":"https://github.com/styled-components/vim-styled-components","last_synced_at":"2025-08-11T00:36:20.208Z","repository":{"id":44458397,"uuid":"75507420","full_name":"styled-components/vim-styled-components","owner":"styled-components","description":"Vim bundle for http://styled-components.com based javascript files.","archived":false,"fork":false,"pushed_at":"2021-03-18T08:17:52.000Z","size":126,"stargazers_count":306,"open_issues_count":9,"forks_count":24,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-31T14:14:50.648Z","etag":null,"topics":["diet-cola","styled-components","vim","vim-bundle"],"latest_commit_sha":null,"homepage":"","language":"Vim script","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/styled-components.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-03T23:55:22.000Z","updated_at":"2025-03-30T14:51:36.000Z","dependencies_parsed_at":"2022-09-05T12:20:39.726Z","dependency_job_id":null,"html_url":"https://github.com/styled-components/vim-styled-components","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fvim-styled-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fvim-styled-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fvim-styled-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fvim-styled-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styled-components","download_url":"https://codeload.github.com/styled-components/vim-styled-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247685634,"owners_count":20979085,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diet-cola","styled-components","vim","vim-bundle"],"created_at":"2024-09-24T13:55:40.296Z","updated_at":"2025-04-07T16:19:20.639Z","avatar_url":"https://github.com/styled-components.png","language":"Vim script","funding_links":[],"categories":[],"sub_categories":[],"readme":"### _**This project is not currently maintained.** If you'd like to help, or for further info, see [#77](https://github.com/styled-components/vim-styled-components/issues/77)_\n\n# vim-styled-components\n\nVim bundle for [styled-components](https://styled-components.com), [diet-cola](https://github.com/jxnblk/diet-cola), [emotion](https://github.com/emotion-js/emotion), experimental [glamor/styled](https://github.com/threepointone/glamor/blob/master/docs/styled.md), and [astroturf](https://github.com/4Catalyzer/astroturf) content in javascript files.\n\nAfter 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.\n\nNote 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](https://github.com/hail2u/vim-css3-syntax) but feel free to use whatever you like.)\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Support](#support)\n- [Caveats](#caveats)\n- [Contributing](#contributing)\n- [Acknowledgements](#acknowledgements)\n- [License](#license)\n\n## Installation\n\nSee the documentation for the specific vim package manager for details on how to install packages for vim.\n\n### Install via [Vundle](https://github.com/VundleVim/Vundle.Vim)\n\nAdd to vimrc:\n\n    Plugin 'styled-components/vim-styled-components'\n\nInstall via:\n\n    :so ~/.vimrc\n    :PluginInstall\n\n### Install via [vim-plug](https://github.com/junegunn/vim-plug)\n\nAdd to vimrc:\n\n    Plug 'styled-components/vim-styled-components', { 'branch': 'main' }\n\nInstall via:\n\n    :so ~/.vimrc\n    :PlugInstall\n\n### Install via [pathogen](https://github.com/tpope/vim-pathogen)\n\nRun:\n\n    git clone https://github.com/styled-components/vim-styled-components/ ~/.vim/bundle/vim-styled-components\n\n## Support\n\nAs 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.\n\nThis is the list of plugins that are (somewhat) supported:\n\n- [pangloss/vim-javascript](https://github.com/pangloss/vim-javascript) and thus\n  - [sheerun/vim-polyglot](https://github.com/sheerun/vim-polyglot) (which uses former as it's javascript plugin),\n- [othree/yajs.vim](https://github.com/othree/yajs.vim), and\n- [HerringtonDarkholme/yats.vim](https://github.com/HerringtonDarkholme/yats.vim)\n\n## Caveats\n\n### Specificity of styling APIs\n\nAs 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:\n\n```javascript\nimport styled as unstyled from 'styled-components';\n\nunstyled`\n  background-color: papayawhip;\n  color: palevioletred;\n`;\n```\n\nNeither will this:\n\n```javascript\nimport dc from 'diet-cola';\n\nconst mainStyles = `\n  background-color: papayawhip;\n  color: palevioletred;\n`;\n\nconst Button = styled('h1')(mainStyles);\n```\n\n### Breaking syntax highlighting in very long files\n\nSyntax highlighting in vim works by comparing a list of previous lines to determine the current line's syntax items. For very long files the list of previous lines can exceed the maximum threshold. If this is the case for you, you can opt in to trade off quality with speed for syntax highlighting:\n\n```vim\nautocmd BufEnter *.{js,jsx,ts,tsx} :syntax sync fromstart\nautocmd BufLeave *.{js,jsx,ts,tsx} :syntax sync clear\n```\n\nNote: Use at own risk! The first line will make vim consider all lines in the file for syntax highlighting if it encounters a javascript/typescript file, the second one will reset this value if it leaves the buffer again. (This will also reset previously set syntax-syncing settings, that you or other plugins might have set.)\n\n## Contributing\n\nContributions are very welcome. 🙇\n\nBrowse existing issues or create a new one [here](https://github.com/styled-components/vim-styled-components/issues).\n\nSubmit pull requests [here](https://github.com/styled-components/vim-styled-components/pulls). This project uses the [git flow model](http://nvie.com/posts/a-successful-git-branching-model/) for development. Please base your feature branch on the develop branch and follow the code style convention used in the already existing files.\n\n## Acknowledgements\n\nA huge thanks goes to Bram Moolenaar for authoring/maintaining [Vim](http://www.vim.org/).\n\nLots of love to [Glen Maddern](https://twitter.com/glenmaddern) and [Max Stoiber](https://twitter.com/mxstbr) for creating [styled-components](https://styled-components.com).\n\nAnd of course [sylvainbannier](https://github.com/sylvainbannier) for the initial workaround [here](https://github.com/styled-components/styled-components/issues/257#issue-191586611).\n\n## License\n\nCopyright (c) 2016 Karl Fleischmann.\nDistributed under the same terms as Vim itself. See `:help license`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Fvim-styled-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyled-components%2Fvim-styled-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Fvim-styled-components/lists"}