{"id":15489343,"url":"https://github.com/vunguyentuan/vscode-css-variables","last_synced_at":"2025-04-05T16:07:37.942Z","repository":{"id":39717316,"uuid":"321217142","full_name":"vunguyentuan/vscode-css-variables","owner":"vunguyentuan","description":"CSS variables autocomplete for vscode","archived":false,"fork":false,"pushed_at":"2024-06-26T01:52:40.000Z","size":23390,"stargazers_count":147,"open_issues_count":32,"forks_count":22,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T15:08:30.282Z","etag":null,"topics":["autocomplete","css-variables","extension","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables","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/vunguyentuan.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-14T03:04:11.000Z","updated_at":"2025-03-27T05:21:56.000Z","dependencies_parsed_at":"2023-11-27T05:22:37.998Z","dependency_job_id":"382c9c23-f983-45a9-b109-57078d2609d3","html_url":"https://github.com/vunguyentuan/vscode-css-variables","commit_stats":{"total_commits":103,"total_committers":10,"mean_commits":10.3,"dds":0.3398058252427184,"last_synced_commit":"daaa9f98b91f07d2515e85aa8a4e1adc472d1432"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vunguyentuan%2Fvscode-css-variables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vunguyentuan%2Fvscode-css-variables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vunguyentuan%2Fvscode-css-variables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vunguyentuan%2Fvscode-css-variables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vunguyentuan","download_url":"https://codeload.github.com/vunguyentuan/vscode-css-variables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361687,"owners_count":20926643,"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":["autocomplete","css-variables","extension","vscode","vscode-extension"],"created_at":"2024-10-02T07:05:08.236Z","updated_at":"2025-04-05T16:07:37.908Z","avatar_url":"https://github.com/vunguyentuan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Banner](https://github.com/vunguyentuan/vscode-css-variables/raw/master/banner.jpg)\n\n\u003e Working with CSS Variables is a pain, this extension enhances the Web Development experience by providing advanced features such as autocomplete, color preview, and go to definition.\n\n## Installation\n\n**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables)**\n\nBy default the extension only scan files with this glob patterns:\n\n```json\n[\n\t\"**/*.css\",\n\t\"**/*.scss\",\n\t\"**/*.sass\",\n\t\"**/*.less\"\n]\n```\n\nAnd ignore files in these folders:\n\n```json\n[\n\t\"**/.git\",\n\t\"**/.svn\",\n\t\"**/.hg\",\n\t\"**/CVS\",\n\t\"**/.DS_Store\",\n\t\"**/node_modules\",\n\t\"**/bower_components\",\n\t\"**/tmp\",\n\t\"**/dist\",\n\t\"**/tests\"\n]\n```\n\nAnd provides suggestions to files for the following languages\n\n```json\n[\n\t\"astro\",\n\t\"svelte\",\n\t\"vue\",\n\t\"vue-html\",\n\t\"vue-postcss\",\n\t\"scss\",\n\t\"postcss\",\n\t\"less\",\n\t\"css\",\n\t\"html\",\n\t\"javascript\",\n\t\"javascriptreact\",\n\t\"typescript\",\n\t\"typescriptreact\",\n\t\"source.css.styled\"\n]\n```\n\n## Features\n### Autocomplete \u0026 Color Preview\n\nIntelligent suggestions for all css variables in the project\n\n\u003cimg src=\"https://github.com/vunguyentuan/vscode-css-variables/raw/master/demo/color_autocomplete.png\" alt=\"\" /\u003e\n\n### Go to definition\n\nYou can easily knows where the variable coming from by hold Alt/Cmd and click to the variable.\n\n\u003cimg src=\"https://github.com/vunguyentuan/vscode-css-variables/raw/master/demo/goto-definition-trim.gif\" alt=\"\" /\u003e\n\n## FAQ\n### I want to add files in `node_modules` folder\n*.vscode/settings.json*\n```json\n{\n  \"cssVariables.lookupFiles\": [\n    \"**/*.css\",\n    \"**/*.scss\",\n    \"**/*.sass\",\n    \"**/*.less\",\n    \"node_modules/open-props/open-props.min.css\"\n  ]\n}\n```\n\n### I want to add files from public url, CDN\n*src/style.css*\n```css\n@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/tailwind-colors/dist/css/colors.min.css';\n\nbody {\n  color: var(--indigo-50);\n}\n\n...\n```\n\n### Example source code https://github.com/vunguyentuan/test-css-var\n## Full demo\n![Demo](https://github.com/vunguyentuan/vscode-css-variables/raw/master/demo/demo.v2.3.0.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvunguyentuan%2Fvscode-css-variables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvunguyentuan%2Fvscode-css-variables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvunguyentuan%2Fvscode-css-variables/lists"}