{"id":15601804,"url":"https://github.com/codebender828/vsc","last_synced_at":"2026-01-20T06:01:43.854Z","repository":{"id":38522940,"uuid":"223155583","full_name":"codebender828/vsc","owner":"codebender828","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-09T20:28:41.000Z","size":2146,"stargazers_count":1,"open_issues_count":20,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-07T20:50:07.128Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codebender828.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-21T11:09:41.000Z","updated_at":"2023-03-05T01:20:29.000Z","dependencies_parsed_at":"2023-02-08T14:00:31.973Z","dependency_job_id":null,"html_url":"https://github.com/codebender828/vsc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codebender828/vsc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fvsc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fvsc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fvsc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fvsc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codebender828","download_url":"https://codeload.github.com/codebender828/vsc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fvsc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28597087,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-10-03T02:25:40.918Z","updated_at":"2026-01-20T06:01:38.845Z","avatar_url":"https://github.com/codebender828.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-styled-components\n\n\u003e Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅\n\n## Support\n\n\u003e This version is compatible with Vue 2.x\n\n```\nyarn add vue-styled-components\n```\n\nUtilising tagged template literals (a recent addition to JavaScript) and the power of CSS allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!\n\n*This is a (not fully-featured)fork from original styled-components made by [Glen Maddern](https://twitter.com/glenmaddern) and [Max Stoiber](https://twitter.com/mxstbr), supported by [Front End Center](https://frontend.center) and [Thinkmill](http://thinkmill.com.au/). Thank you for making this project possible!*\n\n## Usage\n\n\u003e Register first your component locally (see https://vuejs.org/v2/guide/components.html#Local-Registration)\n\n```\n  new Vue({\n    // ...\n    components {\n      'styled-title': StyledTitle\n    },\n    template: '\u003cstyled-title\u003e Hello! \u003c/styled-title\u003e'\n  }\n```\n\n### Basic\n\n\u003e Do not use built-in or reserved HTML elements as component id (title, button, input...).\n\n\nThis creates two Vue components, `\u003cStyledTitle\u003e` and `\u003cWrapper\u003e`:\n\n```JS\nimport styled from 'vue-styled-components';\n\n// Create a \u003cStyledTitle\u003e Vue component that renders an \u003ch1\u003e which is\n// centered, palevioletred and sized at 1.5em\nconst StyledTitle = styled.h1`\n  font-size: 1.5em;\n  text-align: center;\n  color: palevioletred;\n`;\n\n// Create a \u003cWrapper\u003e Vue component that renders a \u003csection\u003e with\n// some padding and a papayawhip background\nconst Wrapper = styled.section`\n  padding: 4em;\n  background: papayawhip;\n`;\n```\n\nYou render them like so:\n\n```JSX\n// Use them like any other Vue component – except they're styled!\n\u003cwrapper\u003e\n  \u003cstyled-title\u003eHello World, this is my first styled component!\u003c/styled-title\u003e\n\u003c/wrapper\u003e\n```\n\n### Passed props\n\nStyled components pass on all their props. This is a styled `\u003cinput\u003e`:\n\n```JS\nimport styled from 'vue-styled-components';\n\n// Create an \u003cStyledInput\u003e component that'll render an \u003cinput\u003e tag with some styles\nconst StyledInput = styled.input`\n  font-size: 1.25em;\n  padding: 0.5em;\n  margin: 0.5em;\n  color: palevioletred;\n  background: papayawhip;\n  border: none;\n  border-radius: 3px;\n\n  \u0026:hover {\n    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);\n  }\n`;\n```\nYou can just pass a `placeholder` prop into the `styled-component`. It will pass it on to the DOM node like any other Vue component:\n\n```JSX\n// Render a styled input with a placeholder of \"@liqueflies\"\n\u003cstyled-input placeholder=\"@liqueflies\" type=\"text\" /\u003e\n```\n### Adapting based on props\n\nThis is a button component that has a `primary` state. By setting `primary` to `true` when rendering it we adjust the background and text color.\n\n### Important\n\n\u003e A prop is a custom attribute for passing information from parent components. A child component needs to explicitly declare the props it expects to receive using the props option, you must define your prop before, and of course, get benefits of validation! (see https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props)\n\n```\n{\n  props: {\n    propA: String,\n    propB: [String, Number]\n  }\n}\n```\n\n```JSX\nimport styled from 'vue-styled-components';\n\nconst btnProps = { primary: Boolean };\n\nconst StyledButton = styled('button', btnProps)`\n  font-size: 1em;\n  margin: 1em;\n  padding: 0.25em 1em;\n  border: 2px solid palevioletred;\n  border-radius: 3px;\n  background: ${props =\u003e props.primary ? 'palevioletred' : 'white'};\n  color: ${props =\u003e props.primary ? 'white' : 'palevioletred'};\n`;\n\nexport default StyledButton;\n```\n\n```JSX\n\u003cstyled-button\u003eNormal\u003c/styled-button\u003e\n\u003cstyled-button primary\u003ePrimary\u003c/styled-button\u003e\n```\n\n### Overriding component styles\n\nTaking the `StyledButton` component from above and removing the primary rules, this is what we're left with – just a normal button:\n\n```JSX\nimport styled from 'vue-styled-components';\n\nconst StyledButton = styled.button`\n  background: white;\n  color: palevioletred;\n  font-size: 1em;\n  margin: 1em;\n  padding: 0.25em 1em;\n  border: 2px solid palevioletred;\n  border-radius: 3px;\n`;\n\nexport default StyledButton;\n```\n\n### Theming\n\n`vue-styled-components` has full theming support by exporting a `\u003cThemeProvider\u003e` wrapper component. This component provides a theme to all `Vue` components underneath itself via the context API. In the render tree all `vue-styled-components` will have access to the provided theme, even when they are multiple levels deep.\n\nRemember to register `ThemeProvider` locally.\n\n```JSX\n  import {ThemeProvider} from 'vue-styled-components'\n\n  new Vue({\n    // ...\n    components: {\n      'theme-provider': ThemeProvider\n    },\n    // ...\n  });\n```\n\nAdd your `ThemeProvider` component:\n\n```vue\n  \u003ctheme-provider :theme=\"{\n    primary: 'palevioletred'\n  }\"\u003e\n    \u003cwrapper\u003e\n      // ...\n    \u003c/wrapper\u003e\n  \u003c/theme-provider\u003e\n```\n\nAnd into your `Wrapper` component:\n\n```JSX\n  const Wrapper = styled.default.section`\n    padding: 4em;\n    background: ${props =\u003e props.theme.primary};\n  `;\n```\n\n### Style component constructors as `router-link`\n\nYou can style also Vue component constructors as `router-link` from `vue-router` and other components\n\n```JSX\nimport styled from 'vue-styled-components';\n\n// unfortunately you can't import directly router-link, you have to retrieve contstructor\nconst RouterLink = Vue.component('router-link')\n\nconst StyledLink = styled(RouterLink)`\n  color: palevioletred;\n  font-size: 1em;\n  text-decoration: none;\n`;\n\nexport default StyledLink;\n```\n\n```JSX\n\u003cstyled-link to=\"/\"\u003eCustom Router Link\u003c/styled-link\u003e\n```\n\nLet's say someplace else you want to use your button component, but just in this one case you want the color and border color to be `tomato` instead of `palevioletred`. Now you _could_ pass in an interpolated function and change them based on some props, but that's quite a lot of effort for overriding the styles once.\n\nTo do this in an easier way you can call `StyledComponent.extend` as a function and pass in the extended style. It overrides duplicate styles from the initial component and keeps the others around:\n\n```JSX\n// Tomatobutton.js\n\nimport StyledButton from './StyledButton';\n\nconst TomatoButton = StyledButton.extend`\n  color: tomato;\n  border-color: tomato;\n`;\n\nexport default TomatoButton;\n```\n\n### withComponent\nLet's say you have a `button` and an `a` tag. You want them to share the exact same style. This is achievable with `.withComponent`.\n```JSX\nconst Button = styled.button`\n  background: green;\n  color: white;\n`\nconst Link = Button.withComponent('a')\n```\n\n### Polymorphic `as` prop\nIf you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the \"as\" prop to do this at runtime. Another powerful feature of the `as` prop is that it preserves styles if the lowest-wrapped component is a `StyledComponent`.\n\n**Example**\nIn `Component.js`\n```js\n//  Renders a div element by default.\nconst Component = styled('div', {})``\n```\nUsing the `as` prop in another template/component would be as shown below.\n```vue\n\u003ctemplate\u003e\n  \u003c!-- Component will render a button instead of a div --\u003e\n  \u003cComponent as=\"button\" color=\"red\"\u003e\n    Button\n  \u003c/Component\u003e\n\u003c/template\u003e\n```\nThis sort of thing is very useful in use cases like a navigation bar where some of the items should be links and some just buttons, but all be styled the same way.\n\n### injectGlobal\n\nA helper method to write global CSS. Does not return a component, adds the styles to the stylesheet directly.\n\n**We do not encourage the use of this. Use once per app at most, contained in a single file.** This is an escape hatch. Only use it for the rare `@font-face` definition or `body` styling.\n\n```JS\n// global-styles.js\n\nimport { injectGlobal } from 'vue-styled-components';\n\ninjectGlobal`\n\t@font-face {\n\t  font-family: 'Operator Mono';\n\t  src: url('../fonts/Operator-Mono.ttf');\n\t}\n\n\tbody {\n\t\tmargin: 0;\n\t}\n`;\n```\n\n## Syntax highlighting\n\nThe one thing you lose when writing CSS in template literals is syntax highlighting. We're working hard on making proper syntax highlighting happening in all editors. We currently have support for Atom, Visual Studio Code, and soon Sublime Text.\n\n### Atom\n\n[**@gandm**](https://github.com/gandm), the creator of `language-babel`, has added support for `styled-components` in Atom!\n\nTo get proper syntax highlighting, all you have to do is install and use the `language-babel` package for your JavaScript files!\n\n### Sublime Text\n\nThere is an [open PR](https://github.com/babel/babel-sublime/pull/289) by [@garetmckinley](https://github.com/garetmckinley) to add support for `styled-components` to `babel-sublime`! (if you want the PR to land, feel free to 👍 the initial comment to let the maintainers know there's a need for this!)\n\nAs soon as that PR is merged and a new version released, all you'll have to do is install and use `babel-sublime` to highlight your JavaScript files!\n\n### Visual Studio Code\n\nThe [vscode-styled-components](https://github.com/styled-components/vscode-styled-components) extension provides syntax highlighting inside your Javascript files. You can install it as usual from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components).\n\n### VIM / NeoVim\nThe [`vim-styled-components`](https://github.com/fleischie/vim-styled-components) plugin gives you syntax highlighting inside your Javascript files. Install it with your usual plugin manager like [Plug](https://github.com/junegunn/vim-plug), [Vundle](https://github.com/VundleVim/Vundle.vim), [Pathogen](https://github.com/tpope/vim-pathogen), etc.\n\nAlso if you're looking for an awesome javascript syntax package you can never go wrong with [YAJS.vim](https://github.com/othree/yajs.vim).\n\n### Other Editors\n\nWe could use your help to get syntax highlighting support to other editors! If you want to start working on syntax highlighting for your editor, open an issue to let us know.\n\n## License\n\nLicensed under the MIT License, Copyright © 2017 Lorenzo Girardi.\n\nSee [LICENSE](./LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebender828%2Fvsc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebender828%2Fvsc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebender828%2Fvsc/lists"}