{"id":31802769,"url":"https://github.com/tenphi/tasty-vscode-extension","last_synced_at":"2025-10-11T00:55:34.507Z","repository":{"id":308403920,"uuid":"1032611523","full_name":"tenphi/tasty-vscode-extension","owner":"tenphi","description":"Extension for syntax highlighting of tasty styles","archived":false,"fork":false,"pushed_at":"2025-08-05T17:57:46.000Z","size":67,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-05T19:36:40.376Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/tenphi.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-05T14:57:46.000Z","updated_at":"2025-08-05T17:57:49.000Z","dependencies_parsed_at":"2025-08-05T19:36:42.992Z","dependency_job_id":"281ead7e-3a71-4c7c-9450-52076c40f69b","html_url":"https://github.com/tenphi/tasty-vscode-extension","commit_stats":null,"previous_names":["tenphi/tasty-vscode-extension"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/tenphi/tasty-vscode-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenphi%2Ftasty-vscode-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenphi%2Ftasty-vscode-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenphi%2Ftasty-vscode-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenphi%2Ftasty-vscode-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tenphi","download_url":"https://codeload.github.com/tenphi/tasty-vscode-extension/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenphi%2Ftasty-vscode-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279005648,"owners_count":26083942,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":"2025-10-11T00:55:29.294Z","updated_at":"2025-10-11T00:55:34.501Z","avatar_url":"https://github.com/tenphi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tasty Syntax Highlighting\n\nA VS Code extension that provides syntax highlighting for Tasty CSS-in-JS styles in TSX files.\n\n## Quick Start\n\n### Local Development\n\n**Prerequisites:** Node.js v20.18.1 or higher is required.\n\n1. Clone the repository:\n   ```bash\n   git clone git@github.com:tenphi/tasty-vscode-extension.git\n   cd tasty-vscode-extension\n   ```\n\n2. Use the correct Node.js version:\n   ```bash\n   nvm use  # Uses the version specified in .nvmrc\n   ```\n\n3. Install dependencies:\n   ```bash\n   npm install\n   ```\n\n4. Open the project in VS Code:\n   ```bash\n   code .\n   ```\n\n5. Press `F5` to open a new Extension Development Host window with the extension loaded.\n\n6. In the new window, open or create a `.tsx` file and test the syntax highlighting with Tasty styles.\n\n### Testing the Extension\n\nCreate a test file with the following content to see the syntax highlighting in action:\n\n```tsx\nimport { tasty } from '@cube-dev/ui-kit';\n\n// NEW: Variable declarations ending with 'styles' are now supported!\nconst INPUT_STYLES = {\n  border: '1bw solid #border',\n  radius: '1r',\n  padding: '2x',\n  fill: {\n    '': '#white',\n    '[disabled]': '#gray.05',\n    'focused': '#primary.05'\n  }\n};\n\nlet buttonStyles = {\n  fill: '#primary',\n  color: '#white',\n  radius: '1r',\n  preset: 't3'\n};\n\nconst Button = tasty({\n  as: 'button',\n  styles: {\n    padding: '2x 4x',\n    fill: {\n      '': '#primary',\n      'hovered': '#primary.8',\n      '[disabled]': '#gray'\n    },\n    color: '#white',\n    radius: '1r',\n    border: 'none',\n    preset: 't3',\n    transition: 'fill 0.2s'\n  }\n});\n\nconst Component = () =\u003e (\n  \u003cdiv\u003e\n    {/* Traditional property styles */}\n    \u003cinput\n      inputStyles={{\n        border: '1bw solid #border',\n        radius: '1r',\n        padding: '2x',\n        fill: {\n          '': '#white',\n          '[disabled]': '#gray.05',\n          'focused': '#primary.05'\n        }\n      }}\n    /\u003e\n    {/* Using variable-declared styles */}\n    \u003cinput style={INPUT_STYLES} /\u003e\n    \u003cbutton style={buttonStyles}\u003eClick me\u003c/button\u003e\n  \u003c/div\u003e\n);\n```\n\n✨ **All Tasty syntax now fully supported** with comprehensive automated testing! \n\n🧪 **Automated Test Results:**\n- ✅ **All grammar patterns work** - `npm run test:patterns`\n- ✅ **Boundary conditions fixed** - `npm run test:grammar` \n- ✅ **JSX patterns ready** - Regex supports `inputStyles={{...}}`\n- 🔧 **Manual VS Code testing required** for final JSX injection verification\n\n## Supported Syntax\n\n- **Design tokens**: `#primary`, `#text`, `#surface`, `#border` with opacity `#primary.5`, `#danger.10`\n- **Custom units**: `2x` (gap), `1r` (radius), `1bw` (border-width), `1cr` (card-radius), `1sf` (stable-fraction)\n- **Custom properties**: `$variable`, `$(variable, fallback)`\n- **Tasty properties**: `fill`, `radius`, `preset`, `flow`, `gap`, `align`, `justify`, `fade`, `scrollbar`\n- **Boolean shortcuts**: `border: true`, `radius: true`\n- **Typography presets**: `h1`, `h2`, `t3`, `p1`, `c1`, etc.\n- **State modifiers**: `hovered`, `pressed`, `focused`, `disabled`, `[disabled]`\n- **Directional modifiers**: `top`, `right`, `bottom`, `left`\n- **Shape modifiers**: `round`, `ellipse`, `leaf`, `backleaf`\n- **Responsive arrays**: `['4x', '2x', '1x']`\n- **Nested state objects**: `{ '': '#white', hovered: '#gray.05' }` ✨ **Now fully supported!**\n- **State binding keys**: `'!disabled \u0026 hovered': '#blue'` ✨ **Now highlighted!**\n- **Variable declarations**: `const INPUT_STYLES = {...}`, `let buttonStyles = {...}`, `var styles = {...}` ✨ **NEW!**\n- **Dynamic state logic**: Any identifier as state + logical operators `\u0026` (AND), `|` (OR), `^` (XOR), `!` (NOT)\n- **CSS selectors**: `:hover`, `.class`, `[data-attr=\"value\"]`, `:nth-child(2n+1)`\n- **Complex expressions**: `'!disabled \u0026 custom-state'`, `'(loading | processing) \u0026 !readonly'`\n- **Comments**: CSS-style comments `/* ... */`\n\n## Commands\n\n### Development\n- `npm run compile` - Compile TypeScript\n- `npm run watch` - Watch mode for development\n\n### Testing  \n- `npm run test:all` - Run all automated tests\n- `npm run test:patterns` - Test individual regex patterns\n- `npm run test:grammar` - Test grammar boundaries and injection\n\n### Building\n- `npm run package` - Build for production\n- `npm run build:vsix` - Create VSIX package (requires Node.js 20+)\n- `npm run build:manual` - Alternative build for manual installation\n\n## Installation for Development\n\nCopy the extension to your VS Code extensions folder:\n\n### macOS/Linux\n```bash\ncp -r . ~/.vscode/extensions/tasty-syntax-highlighting\n```\n\n### Windows\n```bash\nxcopy /E /I . \"%USERPROFILE%\\.vscode\\extensions\\tasty-syntax-highlighting\"\n```\n\nThen restart VS Code.\n\n## Architecture\n\nThe extension uses a TextMate grammar (`syntaxes/tasty.tmLanguage.json`) that is injected into TSX and TS files. It specifically targets strings that are:\n\n1. Inside `styles` properties\n2. Inside properties ending with `Styles` (e.g., `inputStyles`, `buttonStyles`)\n3. **NEW**: In variable declarations ending with `styles` (e.g., `const INPUT_STYLES = {...}`, `let buttonStyles = {...}`)\n\n**Important**: Plain objects that don't match these patterns are left untouched and highlighted as regular TypeScript/TSX code.\n\nThe grammar recognizes and highlights various Tasty syntax elements according to the Tasty style parser specification.\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftenphi%2Ftasty-vscode-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftenphi%2Ftasty-vscode-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftenphi%2Ftasty-vscode-extension/lists"}