ci: add styled-components migration report #6158
Conversation
|
size-limit report 📦
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new script and CI job to report on the progress of migrating from styled-components to CSS Modules.
- Introduces
styled-components-migration-status.mtsto scan.ts/.tsxfiles, calculate sizes, and generate a markdown report. - Adds a
styled-componentsjob in themigration-status.ymlworkflow to run the migration script and append its output to the GitHub Actions summary.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| script/styled-components-migration-status.mts | New script that gathers file sizes and migration status for styled-components usage |
| .github/workflows/migration-status.yml | CI job to execute the new migration report script |
Comments suppressed due to low confidence (1)
.github/workflows/migration-status.yml:8
- [nitpick] The job ID
styled-componentsis generic; consider renaming it tostyled-components-migration-statusfor clarity and consistency with other job names.
styled-components:
|
|
||
| const directory = path.resolve(import.meta.dirname, '..') |
There was a problem hiding this comment.
Node ESM does not provide import.meta.dirname. Use import.meta.url with fileURLToPath and path.dirname to derive the script directory.
| const directory = path.resolve(import.meta.dirname, '..') | |
| import { fileURLToPath } from 'node:url' | |
| const directory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..') |
Copilot uses AI. Check for mistakes.
| run: npm ci | ||
| - name: Run migration script | ||
| run: | | ||
| node --experimental-strip-types script/styled-components-migration.mts >> $GITHUB_STEP_SUMMARY |
There was a problem hiding this comment.
The script filename in this step (styled-components-migration.mts) does not match the actual file (styled-components-migration-status.mts), causing the job to fail.
| node --experimental-strip-types script/styled-components-migration.mts >> $GITHUB_STEP_SUMMARY | |
| node --experimental-strip-types script/styled-components-migration-status.mts >> $GITHUB_STEP_SUMMARY |
Copilot uses AI. Check for mistakes.
| const migrated = matches.filter(({filepath}) => { | ||
| const contents = fs.readFileSync(filepath, 'utf8') | ||
| return !contents.match(/styled-components/) | ||
| }) | ||
|
|
||
| const notMigrated = matches.filter(({filepath}) => { | ||
| const contents = fs.readFileSync(filepath, 'utf8') | ||
| return contents.match(/styled-components/) | ||
| }) |
There was a problem hiding this comment.
The script reads each file twice (once for migrated and once for notMigrated). Consider a single pass to categorize files and accumulate sizes to reduce I/O.
| const migrated = matches.filter(({filepath}) => { | |
| const contents = fs.readFileSync(filepath, 'utf8') | |
| return !contents.match(/styled-components/) | |
| }) | |
| const notMigrated = matches.filter(({filepath}) => { | |
| const contents = fs.readFileSync(filepath, 'utf8') | |
| return contents.match(/styled-components/) | |
| }) | |
| const migrated = []; | |
| const notMigrated = []; | |
| let migratedSize = 0; | |
| for (const { filepath, size } of matches) { | |
| const contents = fs.readFileSync(filepath, 'utf8'); | |
| if (contents.match(/styled-components/)) { | |
| notMigrated.push({ filepath, size }); | |
| } else { | |
| migrated.push({ filepath, size }); | |
| migratedSize += size; | |
| } | |
| } |
Copilot uses AI. Check for mistakes.
|
|
||
| const migrated = matches.filter(({filepath}) => { | ||
| const contents = fs.readFileSync(filepath, 'utf8') | ||
| return !contents.match(/styled-components/) |
There was a problem hiding this comment.
Should we check more things like inclusion of SxProp or Box
Add report on styled-components migration to our Migration Status daily job.