diff --git a/.github/workflows/migration-status.yml b/.github/workflows/migration-status.yml
index d7f6e9bf1e6..6d17a726beb 100644
--- a/.github/workflows/migration-status.yml
+++ b/.github/workflows/migration-status.yml
@@ -9,38 +9,20 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8
- - name: Set up Node.js
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903
+ - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903
with:
node-version-file: '.nvmrc'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run migration script
- run: |
- node --experimental-strip-types script/react-compiler-migration-status.mts >> $GITHUB_STEP_SUMMARY
-
- styled-components:
- runs-on: ubuntu-latest
- steps:
- - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8
- - name: Set up Node.js
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903
- with:
- node-version-file: '.nvmrc'
- cache: 'npm'
- - name: Install dependencies
- run: npm ci
- - name: Run migration script
- run: |
- node --experimental-strip-types script/styled-components-migration-status.mts >> $GITHUB_STEP_SUMMARY
+ run: node script/react-compiler-migration-status.mts >> $GITHUB_STEP_SUMMARY
ts-docgen:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8
- - name: Set up Node.js
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903
+ - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903
with:
node-version-file: '.nvmrc'
cache: 'npm'
@@ -49,5 +31,4 @@ jobs:
- name: Build doc-gen
run: npm run build -w @primer/doc-gen
- name: Run migration script
- run: |
- node --experimental-strip-types script/ts-docs-status.mts >> $GITHUB_STEP_SUMMARY
+ run: node script/ts-docs-status.mts >> $GITHUB_STEP_SUMMARY
diff --git a/script/styled-components-migration-status.mts b/script/styled-components-migration-status.mts
deleted file mode 100644
index b6729e71e53..00000000000
--- a/script/styled-components-migration-status.mts
+++ /dev/null
@@ -1,257 +0,0 @@
-import path from 'node:path'
-import fs from 'node:fs'
-import babel from '@babel/core'
-import glob from 'fast-glob'
-
-const directory = path.resolve(import.meta.dirname, '..')
-const matches = glob
- .sync('packages/react/src/**/*.{ts,tsx}', {
- cwd: directory,
- ignore: [
- '**/e2e/**',
- '**/node_modules/**',
- '**/.playwright/**',
- '**/lib/**',
- '**/dist/**',
- '**/lib-esm/**',
- '**/storybook-static/**',
- '**/.next/**',
- '**/*.module.css.d.ts',
- '**/*.figma.tsx',
- ],
- })
- .map(match => {
- const filepath = path.resolve(directory, match)
- const ast = babel.parseSync(fs.readFileSync(filepath, 'utf8'), {
- parserOpts: {
- sourceType: 'module',
- plugins: [
- 'typescript',
- // Language
- 'jsx',
- // Proposal
- 'classProperties',
- 'classPrivateProperties',
- 'classPrivateMethods',
- 'decorators-legacy',
- 'dynamicImport',
- 'exportDefaultFrom',
- 'exportNamespaceFrom',
- 'importMeta',
- 'nullishCoalescingOperator',
- 'numericSeparator',
- 'objectRestSpread',
- 'optionalCatchBinding',
- 'optionalChaining',
- 'topLevelAwait',
- ],
- },
- })
- const stats = fs.statSync(filepath)
- const importSpecifiers: Array<{imported: string; local: string; source: string}> = []
-
- if (ast) {
- babel.traverse(ast, {
- ImportDeclaration(path) {
- for (const specifier of path.node.specifiers) {
- if (specifier.type === 'ImportSpecifier') {
- importSpecifiers.push({
- imported: specifier.imported.type === 'Identifier' ? specifier.imported.name : specifier.imported.value,
- local: specifier.local.name,
- source: path.node.source.value,
- })
- } else if (specifier.type === 'ImportDefaultSpecifier') {
- importSpecifiers.push({
- imported: 'default',
- local: specifier.local.name,
- source: path.node.source.value,
- })
- }
- }
- },
- })
- }
-
- return {
- filepath,
- size: stats.size,
- importSpecifiers,
- }
- })
- .sort((a, b) => {
- return b.size - a.size
- })
-
-const box = matches.filter(({importSpecifiers}) => {
- return importSpecifiers.some(specifier => {
- return specifier.imported === 'Box' || specifier.local === 'Box'
- })
-})
-const boxSize = box.reduce((acc, {size}) => acc + size, 0)
-
-const boxWithFallback = matches.filter(({importSpecifiers}) => {
- return importSpecifiers.some(specifier => {
- return specifier.imported === 'BoxWithFallback' || specifier.local === 'BoxWithFallback'
- })
-})
-const boxWithFallbackSize = boxWithFallback.reduce((acc, {size}) => acc + size, 0)
-
-const sx = matches.filter(({importSpecifiers}) => {
- return importSpecifiers.some(specifier => {
- return (
- specifier.imported === 'sx' ||
- specifier.local === 'sx' ||
- specifier.imported === 'SxProp' ||
- specifier.local === 'SxProp'
- )
- })
-})
-const sxSize = sx.reduce((acc, {size}) => acc + size, 0)
-
-const styledComponents = matches.filter(({importSpecifiers}) => {
- return importSpecifiers.some(specifier => {
- return specifier.source.includes('styled-components')
- })
-})
-const styledComponentsSize = styledComponents.reduce((acc, {size}) => acc + size, 0)
-
-const styledSystem = matches.filter(({importSpecifiers}) => {
- return importSpecifiers.some(specifier => {
- return specifier.source.includes('styled-system') || specifier.source.includes('@styled-system')
- })
-})
-const styledSystemSize = styledSystem.reduce((acc, {size}) => acc + size, 0)
-
-const totalCount = matches.length
-const totalSize = matches.reduce((acc, {size}) => acc + size, 0)
-
-const notMigrated = new Set(
- [...box, ...boxWithFallback, ...sx, ...styledComponents, ...styledSystem].map(match => match.filepath),
-)
-const migrated = new Set()
-let notMigratedSize = 0
-let migratedSize = 0
-
-for (const match of matches) {
- if (!notMigrated.has(match.filepath)) {
- migrated.add(match.filepath)
- migratedSize += match.size
- } else {
- notMigratedSize += match.size
- }
-}
-
-console.log(`# styled-components Migration
-
-This report tracks our status migrating files from styled-components to CSS Modules.
-
-## Status
-
-**Status by file count**
-
- * 100)})
-
-**Status by file size**
-
- * 100)})
-
-## Box (${box.length})
-
-**Status by file count**
-
- / totalCount) * 100)})
-
-**Status by file size**
-
- / totalSize) * 100)})
-
-
-Files
-
-${getTable(box)}
-
-
-## BoxWithFallback (${boxWithFallback.length})
-
-**Status by file count**
-
- / totalCount) * 100)})
-
-**Status by file size**
-
- / totalSize) * 100)})
-
-
-Files
-
-${getTable(boxWithFallback)}
-
-
-## sx (${sx.length})
-
-**Status by file count**
-
- / totalCount) * 100)})
-
-**Status by file size**
-
- / totalSize) * 100)})
-
-
-Files
-
-${getTable(sx)}
-
-
-## styled-components (${styledComponents.length})
-
-**Status by file count**
-
- / totalCount) * 100)})
-
-**Status by file size**
-
- / totalSize) * 100)})
-
-
-Files
-
-${getTable(styledComponents)}
-
-
-## styled-system (${styledSystem.length})
-
-**Status by file count**
-
- / totalCount) * 100)})
-
-**Status by file size**
-
- / totalSize) * 100)})
-
-
-Files
-
-${getTable(styledSystem)}
-
-`)
-
-function getTable(collection: Array<{filepath: string; size: number}>): string {
- const rows = collection.sort((a, b) => b.size - a.size)
- let output = ''
-
- output += '| Filepath | Size (kB) |\n'
- output += '| :------- | :-------- |\n'
-
- for (const {filepath, size} of rows) {
- const relativePath = path.relative(directory, filepath)
- const link = `[\`${relativePath}\`](https://github.com/primer/react/blob/main/${relativePath})`
- output += `| ${link} | ${round(size / 1024)}kB |\n`
- }
-
- return output
-}
-
-function round(value: number): number {
- return Math.round((value + Number.EPSILON) * 100) / 100
-}