chore: adding taiwlind intellisense and linting#17349
Conversation
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
bc57815 to
25aae23
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Bug: Tailwind IntelliSense Misconfiguration in VSCode
The tailwindCSS.classAttributes setting in .vscode/settings.json is incorrectly configured as ["twClassName", "style"]. In React Native, the style prop expects style objects, not CSS class strings, causing Tailwind IntelliSense to inappropriately trigger for inline styles. This also creates an inconsistency with the ESLint plugin, which is configured to validate ["twClassName", "tw"]. The correct value should be ["twClassName", "tw"] to ensure proper IntelliSense for tw attributes and align with ESLint validation.
.vscode/settings.json#L18-L19
metamask-mobile/.vscode/settings.json
Lines 18 to 19 in d5dd500
Was this report helpful? Give feedback by reacting with 👍 or 👎
There was a problem hiding this comment.
Pull Request Overview
This PR integrates Tailwind CSS tooling support for the MetaMask mobile project by setting up IntelliSense, ESLint validation, and proper configuration for the design system classes.
- Updates design system packages to version 0.2.0 for enhanced Tailwind CSS support
- Configures VSCode with Tailwind CSS IntelliSense for autocompletion and validation of design system classes
- Adds ESLint rules to enforce Tailwind CSS best practices and validate custom design system classes
Reviewed Changes
Copilot reviewed 5 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updates design system packages and adds Tailwind CSS ESLint plugin |
| .vscode/settings.json | Configures Tailwind CSS IntelliSense for design system class attributes |
| .vscode/extensions.json | Recommends Tailwind CSS extension for the project |
| .github/CODEOWNERS | Assigns design system team ownership of Tailwind config |
| .eslintrc.js | Adds Tailwind CSS ESLint rules for component directories |
|
sethkfman
left a comment
There was a problem hiding this comment.
Reviewed CODEOWNERs and package.json
Description
This PR sets up Tailwind CSS with IntelliSense and ESLint integration for the MetaMask mobile project to improve the developer experience when working with the design system.
What is the reason for the change?
bg-default,border-default, etc.What is the improvement/solution?
tailwind.config.jsthat integrates with@metamask/design-system-twrnc-presetto provide proper class definitions for IntelliSense and linting.vscode/settings.jsonfor autocompletion, validation, and color decoratorseslint-plugin-tailwindcsswith rules to enforce consistent class ordering and validate custom design system classes@metamask-previews/*design system packages for testing before releaseChangelog
CHANGELOG entry: null
Related issues
Fixes:
Manual testing steps
Test IntelliSense:
app/component-library/components/design-system.stories.tsxin VSCodetwClassName="bg-and verify autocomplete showsbg-default,bg-alternative, etc.Test ESLint Integration:
yarn eslint app/component-library/components/design-system.stories.tsxbg-defaultandborder-defaultTest Design System Classes:
bg-default,bg-alternative,bg-mutedborder-default,border-mutedtext-default,text-alternative,text-mutedTest Configuration:
node -e "const config = require('./tailwind.config.js'); console.log('Config loaded successfully:', !!config.theme)"to verify config loadsScreenshots/Recordings
Before
After
eslint-tailwind-intellisense.mov
Pre-merge author checklist
Pre-merge reviewer checklist