Add migration guide from styled-components to vanilla-extract#60
Add migration guide from styled-components to vanilla-extract#60
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a new blog post documenting a migration path from styled-components to vanilla-extract, alongside small supporting updates to UI category taxonomy and styling/formatting configuration.
Changes:
- Add a new “Migrating from styled-components to vanilla-extract” blog post under the new
frontendcategory. - Replace the
reactcategory id withfrontendin the UI category enum/model. - Update Markdown styling and adjust repo formatting defaults (Prettier/EditorConfig) toward tabs.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/ui/types.ts | Renames category id from react to frontend in the CategoryId enum. |
| src/model/categories.ts | Updates the displayed category title/description to match the new frontend category. |
| src/ui/markdown.css.ts | Re-indents and tweaks Markdown global styles (notably inline code and code blocks). |
| src/pages/blog/migrating-styled-components-vanilla-extract.md | New migration-guide blog post content. |
| .prettierrc | Changes formatting defaults (enables tabs). |
| .editorconfig | Changes editor indentation defaults to tabs. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| description: 'Thoughts about the React ecosystem, mostly on building declarative UIs and handling state.', | ||
| id: CategoryId.FRONTEND, | ||
| title: 'Frontend Web Development', | ||
| description: 'Thoughts about the frontend web development, including the React ecosystem, CSS libraries and everything in between.', |
There was a problem hiding this comment.
Minor grammar: “Thoughts about the frontend web development…” reads awkwardly; consider changing to “Thoughts about frontend web development…” (or similar) to avoid the extra “the”.
| description: 'Thoughts about the frontend web development, including the React ecosystem, CSS libraries and everything in between.', | |
| description: 'Thoughts about frontend web development, including the React ecosystem, CSS libraries and everything in between.', |
| case 'default': | ||
| default: | ||
| return css` | ||
| background-color: ${colors.grayMedium}; | ||
| `; | ||
| } | ||
| }}} | ||
| `; |
There was a problem hiding this comment.
In the styled-components example snippet, the interpolation closing braces look unbalanced (}}}} at the end of the ${(props) => { ... }} block). Since this is a migration guide, it’d be good to fix the snippet so readers can copy/paste it without syntax errors.
| @@ -4,7 +4,7 @@ export enum CategoryId { | |||
| JAVASCRIPT = 'javascript', | |||
| TESTING = 'testing', | |||
| ACCESSIBILITY = 'accessibility', | |||
There was a problem hiding this comment.
CategoryId.REACT was removed from the enum, but there are still references to it (e.g. src/model/external-posts.ts:34). This will break the TypeScript build; either add a backwards-compatible alias (e.g. keep REACT = 'react') or update all remaining references to use FRONTEND/'frontend' as intended.
| ACCESSIBILITY = 'accessibility', | |
| ACCESSIBILITY = 'accessibility', | |
| REACT = 'react', |
| TESTING = 'testing', | ||
| ACCESSIBILITY = 'accessibility', | ||
| REACT = 'react', | ||
| FRONTEND = 'frontend', |
There was a problem hiding this comment.
Renaming the category id from 'react' to 'frontend' also requires updating test fixtures that assert on the serialized categoryId string (e.g. src/templates/index.test.tsx currently expects categoryId: 'react'). Without updating those, the Jest suite will fail.
| FRONTEND = 'frontend', | |
| FRONTEND = 'react', |
| globalStyle(`${markdownStyle} code:not([class="grvsc-code"])`, { | ||
| backgroundColor: 'rgba(27, 31, 35, 0.05)', | ||
| borderRadius: borderRadius.default, | ||
| fontSize: '80%', | ||
| margin: 0, | ||
| padding: `${0.375 * gridSize}px ${0.75 * gridSize}px`, | ||
| whiteSpace: 'normal', | ||
| fontWeight: fontWeights.normal, | ||
| backgroundColor: 'rgba(27, 31, 35, 0.05)', | ||
| borderRadius: borderRadius.default, | ||
| fontSize: '80%', | ||
| margin: 0, | ||
| padding: `${0.375 * gridSize}px ${0.75 * gridSize}px`, | ||
| whiteSpace: 'nowrap', | ||
| fontWeight: fontWeights.normal, |
There was a problem hiding this comment.
The inline-code style changes whiteSpace from normal to nowrap. This can cause long inline code spans/URLs to overflow their container instead of wrapping, especially on narrow viewports. Consider reverting to normal (or using a wrapping-friendly option like pre-wrap plus overflowWrap/wordBreak) unless the no-wrap behavior is explicitly desired.
| "useTabs": true, | ||
| "tabWidth": 4, | ||
| "printWidth": 140, | ||
| "singleQuote": true, | ||
| "proseWrap": "always", | ||
| "trailingComma": "all" |
There was a problem hiding this comment.
This PR changes formatting defaults repo-wide (useTabs: true). That’s a broad, potentially high-churn change that isn’t implied by the PR title (migration guide) and will affect every future formatted file. If the intent is only to fix a single file’s formatting, consider reverting this config change or scoping it to specific filetypes via overrides.
| end_of_line = LF | ||
| charset = utf-8 | ||
| indent_style = space | ||
| indent_style = tab | ||
| indent_size = 4 | ||
| trim_trailing_whitespace = true |
There was a problem hiding this comment.
Switching the global indent_style to tab changes editor behavior for all files in the repo. If the goal is to enforce tabs only for TS/JS while keeping spaces for other formats (or to avoid reindent churn), consider adding per-glob overrides (or leaving the global style as spaces) rather than changing [*].
No description provided.