Dinefy Tokens (VS Code Extension)

Autocomplete de tokens de design em CSS/SCSS/LESS via CSS Custom Data.

Como funciona

• Gera custom-data.css-data.json a partir de @dinefy/tokens-default com valores para propriedades comuns (spacing, colors, sizes, radii, sombras, etc.).
• VS Code usa esse arquivo para sugerir valores ao editar CSS/SCSS/LESS.

Scripts

• pnpm i ou npm i
• pnpm run build ou npm run build — gera custom-data.css-data.json.

Instalação local (VSIX)

1. Instale vsce globalmente: npm i -g @vscode/vsce
2. Gere o pacote VSIX:

   vsce package
   

3. Instale no VS Code/Windsurf/Cursor:

   code --install-extension dinefy-tokens-0.1.0.vsix
   

   Ou use a UI de extensões e "Install from VSIX".

Manter em sincronia

• Sempre que @dinefy/tokens-default mudar, rode build novamente e republique se necessário.

Observações

• Para autocomplete em TypeScript (ex.: vars.spacing.md), garanta que os tipos literais dos tokens sejam preservados no consumo (como feito em packages/react-web-ui/src/theme.css.ts).