Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
e326b54
add semver dependency
RobinMalfait Mar 31, 2025
83bf845
do not require Tailwind CSS v3 projects anymore
RobinMalfait Apr 1, 2025
2879f4e
add `version` related helpers
RobinMalfait Apr 18, 2025
ba315ec
conditionally apply migrations based on version number
RobinMalfait Apr 18, 2025
0f97d3e
only link stylesheets to JS config files when migrating Tailwind CSS …
RobinMalfait Apr 18, 2025
6bef56e
only split stylesheets when migrating Tailwind CSS v3 projects
RobinMalfait Apr 18, 2025
986092a
only migrate PostCSS config when migrating Tailwind CSS v3 projects
RobinMalfait Apr 18, 2025
cfaeb55
only migrate JS files if they have linked config paths
RobinMalfait Apr 18, 2025
2f6e368
make `jsConfigMigration` nullable
RobinMalfait Apr 18, 2025
f78f582
change order
RobinMalfait Apr 18, 2025
b6089e4
bail on empty config
RobinMalfait Apr 18, 2025
a2836e5
make `UserConfig` nullable
RobinMalfait Apr 18, 2025
c52201f
migrate source files based on Tailwind root stylesheets
RobinMalfait Apr 18, 2025
eacaabf
remove unused `hoistStaticGlobParts`
RobinMalfait Apr 18, 2025
9be7647
make `configFilePath` also nullable
RobinMalfait Apr 18, 2025
bc93e2c
do not migrate `preflight` in non-v3 projects
RobinMalfait Apr 18, 2025
51b2200
run prettier
RobinMalfait Apr 18, 2025
6a492da
upgrade `tailwindcss` after we migrated the stylesheets
RobinMalfait Apr 18, 2025
c5ec584
remove test that requires Tailwind CSS v3
RobinMalfait Apr 18, 2025
71f3461
make the `DesignSystem` fully nullable
RobinMalfait Apr 18, 2025
6ffa7cb
mock version in local tests
RobinMalfait Apr 18, 2025
4f987fa
only migrate `@layer` in v3 projects
RobinMalfait Apr 18, 2025
1b53461
add migrations for newly deprecated classes
RobinMalfait Apr 18, 2025
6085b47
add `:user-valid` and `:user-invalid` arbitrary variant replacements
RobinMalfait Apr 18, 2025
a6d4309
replace arbitrary `@media` variants
RobinMalfait Apr 18, 2025
5857fd0
handle `[@media_not(…)]` variants
RobinMalfait Apr 18, 2025
ba4cab7
handle `@media` with single argument (e.g.: `@media print`)
RobinMalfait Apr 18, 2025
0e61002
ensure we re-print the candidate in case it didn't change
RobinMalfait Apr 18, 2025
37323c6
add tests to ensure upgrade tool runs on v4 and is idempotent
RobinMalfait Apr 18, 2025
aadc926
add test to ensure upgrade runs on v4 projects
RobinMalfait Apr 18, 2025
d20902f
only commit changes in dirty git repo
RobinMalfait Apr 19, 2025
94ef122
Merge branch 'main' into feat/enable-codemods-on-v4-projects
RobinMalfait Apr 22, 2025
7bbeb99
Merge branch 'main' into feat/enable-codemods-on-v4-projects
RobinMalfait Apr 22, 2025
3d8eed9
adjust comment
RobinMalfait Apr 22, 2025
fff3cc0
update changelog
RobinMalfait Apr 22, 2025
6b5935c
add new migration examples to upgrade test
RobinMalfait Apr 22, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
migrate source files based on Tailwind root stylesheets
  • Loading branch information
RobinMalfait committed Apr 22, 2025
commit c52201f6e91f18ad8a3ca096c31bbb49f795c3f8
69 changes: 49 additions & 20 deletions packages/@tailwindcss-upgrade/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
#!/usr/bin/env node

import { Scanner } from '@tailwindcss/oxide'
import { globby } from 'globby'
import fs from 'node:fs/promises'
import path from 'node:path'
Expand All @@ -19,7 +20,6 @@ import { help } from './commands/help'
import { Stylesheet } from './stylesheet'
import { args, type Arg } from './utils/args'
import { isRepoDirty } from './utils/git'
import { hoistStaticGlobParts } from './utils/hoist-static-glob-parts'
import { pkg } from './utils/packages'
import { eprintln, error, header, highlight, info, relative, success } from './utils/renderer'
import * as version from './utils/version'
Expand Down Expand Up @@ -227,38 +227,67 @@ async function run() {
}
}

let tailwindRootStylesheets = stylesheets.filter((sheet) => sheet.isTailwindRoot && sheet.file)

// Migrate source files
if (configBySheet.size > 0) {
if (tailwindRootStylesheets.length > 0) {
info('Migrating templates…')
}
{
let seenFiles = new Set()

// Template migrations
for (let config of configBySheet.values()) {
let set = new Set<string>()
for (let globEntry of config.sources.flatMap((entry) => hoistStaticGlobParts(entry))) {
let files = await globby([globEntry.pattern], {
absolute: true,
gitignore: true,
cwd: globEntry.base,
})
for (let sheet of tailwindRootStylesheets) {
let compiler = await sheet.compiler()
if (!compiler) continue
let designSystem = await sheet.designSystem()
if (!designSystem) continue

// Figure out the source files to migrate
let sources = (() => {
// Disable auto source detection
if (compiler.root === 'none') {
return []
}

for (let file of files) {
set.add(file)
// No root specified, use the base directory
if (compiler.root === null) {
return [{ base, pattern: '**/*', negated: false }]
}
}

let files = Array.from(set)
files.sort()
// Use the specified root
return [{ ...compiler.root, negated: false }]
})().concat(compiler.sources)

let config = configBySheet.get(sheet)
let scanner = new Scanner({ sources })
let filesToMigrate = []
for (let file of scanner.files) {
if (seenFiles.has(file)) continue
seenFiles.add(file)
filesToMigrate.push(file)
}

// Migrate each file
await Promise.allSettled(
files.map((file) => migrateTemplate(config.designSystem, config.userConfig, file)),
filesToMigrate.map((file) =>
migrateTemplate(designSystem, config?.userConfig ?? null, file),
),
)

success(
`Migrated templates for configuration file: ${highlight(relative(config.configFilePath, base))}`,
{ prefix: '↳ ' },
)
if (config?.configFilePath) {
success(
`Migrated templates for configuration file: ${highlight(relative(config.configFilePath, base))}`,
{ prefix: '↳ ' },
)
} else {
success(
`Migrated templates for: ${highlight(relative(sheet.file ?? '<unknown>', base))}`,
{
prefix: '↳ ',
},
)
}
}
}
}
Expand Down
21 changes: 21 additions & 0 deletions packages/@tailwindcss-upgrade/src/stylesheet.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { __unstable__loadDesignSystem, compileAst } from '@tailwindcss/node'
import * as fsSync from 'node:fs'
import * as fs from 'node:fs/promises'
import * as path from 'node:path'
import * as util from 'node:util'
import * as postcss from 'postcss'
import { postCssAstToCssAst } from '../../@tailwindcss-postcss/src/ast'

export type StylesheetId = string

Expand Down Expand Up @@ -263,6 +265,25 @@ export class Stylesheet {
return false
}

async compiler(): Promise<Awaited<ReturnType<typeof compileAst>> | null> {
if (!this.isTailwindRoot) return null
if (!this.file) return null

return compileAst(postCssAstToCssAst(this.root), {
base: path.dirname(this.file),
onDependency() {},
})
}

async designSystem(): Promise<Awaited<ReturnType<typeof __unstable__loadDesignSystem>> | null> {
if (!this.isTailwindRoot) return null
if (!this.file) return null

return __unstable__loadDesignSystem(this.root.toString(), {
base: path.dirname(this.file),
})
}

[util.inspect.custom]() {
return {
...this,
Expand Down