{"id":20717740,"url":"https://github.com/cr34t1ve/csvars","last_synced_at":"2025-04-23T13:38:21.988Z","repository":{"id":259832081,"uuid":"879551294","full_name":"cr34t1ve/csvars","owner":"cr34t1ve","description":"CSS Variable completions for vscode","archived":false,"fork":false,"pushed_at":"2024-11-01T11:51:46.000Z","size":2333,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-15T03:04:47.331Z","etag":null,"topics":["css","cssvariables","vscode-extension"],"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/cr34t1ve.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","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":"2024-10-28T05:50:28.000Z","updated_at":"2024-11-01T11:51:50.000Z","dependencies_parsed_at":"2024-10-28T08:17:47.023Z","dependency_job_id":"ffda28d1-c6f3-4d77-88f3-b64c73e399ac","html_url":"https://github.com/cr34t1ve/csvars","commit_stats":null,"previous_names":["cr34t1ve/csvars"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cr34t1ve%2Fcsvars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cr34t1ve%2Fcsvars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cr34t1ve%2Fcsvars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cr34t1ve%2Fcsvars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cr34t1ve","download_url":"https://codeload.github.com/cr34t1ve/csvars/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224993018,"owners_count":17403943,"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":["css","cssvariables","vscode-extension"],"created_at":"2024-11-17T03:09:59.355Z","updated_at":"2025-04-23T13:38:21.979Z","avatar_url":"https://github.com/cr34t1ve.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSVars - VSCODE CSS Variable Completions\n\nA Visual Studio Code extension that provides intelligent autocompletion for CSS custom properties (CSS variables) across your entire workspace. Get suggestions for all your CSS variables with their values and documentation while you type.\n\n## Features\n\n- 🎨 Auto-completion for CSS variables across your entire workspace\n- 🌈 Special handling for color variables with color indicators\n- 📝 Shows variable values and comments in completions\n- 📍 Displays source file location for each variable\n- 🔄 Real-time updates when CSS files change\n- ⚡ Works in CSS, SCSS, LESS, HTML, JSX, TSX, Vue and Astro files\n\n![CSVars Demo](./src/assets/csvars_0.gif)\n\n## Usage\n\n1. Start typing `var(` in any supported file\n2. The extension will automatically show completions for all CSS variables defined in your workspace\n3. Select a variable to insert it\n4. Hover over a variable to see its value, documentation, and source location\n\nExample completion:\n\n```css\n.example {\n  /* Start typing var( here */\n  color: var( /* Completions will appear */\n}\n```\n\n## Supported File Types\n\n- CSS (`.css`)\n- SCSS (`.scss`)\n- LESS (`.less`)\n- HTML (`.html`)\n- React (`.jsx`, `.tsx`)\n- Astro (`.astro`)\n- Vue (`vue`)\n\n## Variable Detection\n\nThe extension detects CSS variables defined in the following format:\n\n```css\n--variable-name: value; /* Optional comment */\n```\n\nIt automatically indexes:\n\n- Variable name\n- Value\n- Inline comments\n- Source file and line number\n\n## Features in Detail\n\n### Smart Completions\n\n- Shows variable name and value in the completion list\n- Differentiates between color and other variables\n- Provides inline preview for color values\n\n### Documentation View\n\nWhen you highlight a completion, you'll see:\n\n```css\n--variable-name         value\n```\n\nAlong with:\n\n- Any associated comments\n- Source file location (`filename:line`)\n\n### Real-time Updates\n\n- Automatically detects changes to CSS files\n- Updates completions when variables are added, modified, or removed\n- Debounced updates to prevent performance issues\n\n## Installation\n\n1. Open VS Code\n2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)\n3. Search for \"CSVars\"\n4. Click Install\n\n## Configuration\n\nCurrently, the extension works out of the box with no configuration needed. It automatically scans all CSS, SCSS, and LESS files in your workspace for variables.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## Known Issues\n\n- When using completions within the same CSS file where variables are defined, VS Code's built-in completions may also appear. This is handled by filtering out current file variables to prevent duplicates.\n\n## Release Notes\n\n### 1.0.0\n\n- Initial release\n- Basic CSS variable completion\n- Support for multiple file types\n- Real-time file watching\n- Documentation view with source information\n\n## License\n\n[MIT](LICENSE)\n\n## Support\n\nIf you encounter any problems or have suggestions, please [open an issue](link-to-your-repo/issues) on our GitHub repository.\n\n---\n\n**Enjoy!** 🎨\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcr34t1ve%2Fcsvars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcr34t1ve%2Fcsvars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcr34t1ve%2Fcsvars/lists"}