{"id":13440573,"url":"https://github.com/Raathigesh/fabulous","last_synced_at":"2025-03-20T10:31:23.123Z","repository":{"id":73275893,"uuid":"183912457","full_name":"Raathigesh/fabulous","owner":"Raathigesh","description":"🎨 CSS properties sidebar for VS Code","archived":false,"fork":false,"pushed_at":"2020-07-17T03:33:34.000Z","size":887,"stargazers_count":1007,"open_issues_count":18,"forks_count":26,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-19T20:35:28.569Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Raathigesh.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-28T13:33:44.000Z","updated_at":"2024-07-10T14:23:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"716123db-e435-4322-b416-fcd11ceea841","html_url":"https://github.com/Raathigesh/fabulous","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Ffabulous","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Ffabulous/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Ffabulous/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Ffabulous/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Raathigesh","download_url":"https://codeload.github.com/Raathigesh/fabulous/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244594970,"owners_count":20478382,"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":[],"created_at":"2024-07-31T03:01:24.030Z","updated_at":"2025-03-20T10:31:23.117Z","avatar_url":"https://github.com/Raathigesh.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"\u003cdiv  align=\"center\"\u003e\n\u003cimg src=\"https://affectionate-booth-10a1f4.netlify.com/banner.png\" /\u003e\n\u003cbr /\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\nFabulous introduces a CSS properties sidebar into Visual Studio Code.\n\nFabulous supports the followings\n\n- 💅 CSS-in-JS libs which supports template literal ([styled-components](https://github.com/styled-components/styled-components), [emotion](https://github.com/emotion-js/emotion), [linaria](https://github.com/callstack/linaria))\n- 🎨 CSS rules from `.css` files\n- 🌈 CSS rules from `.scss` files\n- 🌏 CSS rules from `.html` files - these must be in a `\u003cstyle\u003e` tag and the style tag must be within the `\u003chead\u003e` tag\n- 🌛 CSS rules from `component.ts` Angular component files that have inline styles within the ` @Component({ styles:[``] }) ` decorator\n- 🌟 CSS rules from `.vue` files that have a `\u003cstyle\u003e` tag in the root of the file\n- 💍 CSS rules from `.svelte` files that have a `\u003cstyle\u003e` tag in the root of the file\n\n\u003e Fabulous is still in Preview. Give it a try and [let us know](https://github.com/Raathigesh/fabulous/issues) when things don't go well.\n\n## Getting started\n\n- Install the [Fabulous](https://marketplace.visualstudio.com/items?itemName=Raathigeshan.fabulous) extension in VS Code\n- After opening a `css`, `scss`, `js`, `jsx`, `tsx`, `component.ts`, `vue` or `svelte` file, click on the \u003cimg src=\"https://affectionate-booth-10a1f4.netlify.com/tiny-icon.png\" width=\"20px\" /\u003e icon to toggle the side-bar\n- Place your cursor in a CSS rule or in a Styled component template literal\n- You should see the sidebar controls become active\n\n## Help us make Fabulous better\n\nHave a look at our [contribution guide](./contributing.md).\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/threepointone\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/18808?v=4\" width=\"100px;\" alt=\"Sunil Pai\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSunil Pai\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-threepointone\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://twitter.com/Raathigesh\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/3108160?v=4\" width=\"100px;\" alt=\"Raathi Kugarajan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRaathi Kugarajan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-Raathigesh\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/Raathigesh/fabulous/commits?author=Raathigesh\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-Raathigesh\" title=\"Design\"\u003e🎨\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/0xflotus\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/26602940?v=4\" width=\"100px;\" alt=\"0xflotus\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e0xflotus\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Raathigesh/fabulous/commits?author=0xflotus\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/paustint\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/5461649?v=4\" width=\"100px;\" alt=\"Austin Turner\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAustin Turner\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Raathigesh/fabulous/commits?author=paustint\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/Raathigesh/fabulous/commits?author=paustint\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#maintenance-paustint\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/Raathigesh/fabulous/issues?q=author%3Apaustint\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/Raathigesh/fabulous/commits?author=paustint\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-paustint\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#review-paustint\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://twitter.com/igrekov\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/13730032?v=4\" width=\"100px;\" alt=\"Ivan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIvan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Raathigesh/fabulous/commits?author=Winner95\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/mukeshmandiwal\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/9495069?v=4\" width=\"100px;\" alt=\"Mukesh Mandiwal\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMukesh Mandiwal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Raathigesh/fabulous/commits?author=mukeshmandiwal\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRaathigesh%2Ffabulous","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRaathigesh%2Ffabulous","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRaathigesh%2Ffabulous/lists"}