Skip to content

Commit b497e1e

Browse files
authored
Add Upgrading from Tailwind CSS v… when running upgrade tool (#19026)
This PR adds a bit more information when running the upgrade tool to know what version of Tailwind CSS you're upgrading from. This will help users and maintainers when things go wrong. Will have another PR up soon that errors when the Tailwind CSS version in package.json and node_modules don't match. ### Test plan Ran this one one of our older projects and saw the version logged correctly. <img width="1055" height="363" alt="image" src="https://github.com/user-attachments/assets/5cbf4c52-ea0f-42c8-bd55-5bae2ed511de" />
1 parent f6bb72c commit b497e1e

File tree

4 files changed

+35
-32
lines changed

4 files changed

+35
-32
lines changed

crates/node/scripts/move-artifacts.mjs

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,3 @@ for (let file of await fs.readdir(tailwindcssOxideRoot)) {
3535
)
3636
console.log(`Moved ${file} to npm/wasm32-wasi`)
3737
}
38-

packages/@tailwindcss-postcss/README.md

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -62,29 +62,29 @@ By default, this plugin detects whether or not the CSS is being built for produc
6262
If you want to always enable or disable Lightning CSS the `optimize` option may be used:
6363
6464
```js
65-
import tailwindcss from "@tailwindcss/postcss"
65+
import tailwindcss from '@tailwindcss/postcss'
6666
6767
export default {
68-
plugins: [
69-
tailwindcss({
70-
// Enable or disable Lightning CSS
71-
optimize: false,
72-
})
73-
]
68+
plugins: [
69+
tailwindcss({
70+
// Enable or disable Lightning CSS
71+
optimize: false,
72+
}),
73+
],
7474
}
7575
```
7676
7777
It's also possible to keep Lightning CSS enabled but disable minification:
7878
7979
```js
80-
import tailwindcss from "@tailwindcss/postcss"
80+
import tailwindcss from '@tailwindcss/postcss'
8181
8282
export default {
83-
plugins: [
84-
tailwindcss({
85-
optimize: { minify: false },
86-
})
87-
]
83+
plugins: [
84+
tailwindcss({
85+
optimize: { minify: false },
86+
}),
87+
],
8888
}
8989
```
9090
@@ -95,32 +95,32 @@ Our PostCSS plugin can rewrite `url(…)`s for you since it also handles `@impor
9595
In some situations the bundler or framework you're using may provide this feature itself. In this case you can set `transformAssetUrls` to `false` to disable this feature:
9696
9797
```js
98-
import tailwindcss from "@tailwindcss/postcss"
98+
import tailwindcss from '@tailwindcss/postcss'
9999
100100
export default {
101-
plugins: [
102-
tailwindcss({
103-
// Disable `url(…)` rewriting
104-
transformAssetUrls: false,
105-
106-
// Enable `url(…)` rewriting (the default)
107-
transformAssetUrls: true,
108-
})
109-
]
101+
plugins: [
102+
tailwindcss({
103+
// Disable `url(…)` rewriting
104+
transformAssetUrls: false,
105+
106+
// Enable `url(…)` rewriting (the default)
107+
transformAssetUrls: true,
108+
}),
109+
],
110110
}
111111
```
112112
113113
You may also pass options to `optimize` to enable Lighting CSS but prevent minification:
114114
115115
```js
116-
import tailwindcss from "@tailwindcss/postcss"
116+
import tailwindcss from '@tailwindcss/postcss'
117117
118118
export default {
119-
plugins: [
120-
tailwindcss({
121-
// Enables Lightning CSS but disables minification
122-
optimize: { minify: false },
123-
})
124-
]
119+
plugins: [
120+
tailwindcss({
121+
// Enables Lightning CSS but disables minification
122+
optimize: { minify: false },
123+
}),
124+
],
125125
}
126126
```

packages/@tailwindcss-upgrade/src/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ async function run() {
5858
}
5959
}
6060

61+
info(`Upgrading from Tailwind CSS ${highlight(`v${version.installedTailwindVersion(base)}`)}`, {
62+
prefix: '↳ ',
63+
})
64+
6165
{
6266
// Stylesheet migrations
6367

packages/@tailwindcss-upgrade/src/utils/version.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,6 @@ let cache = new DefaultMap((base) => {
2626
return tailwindVersion
2727
})
2828

29-
function installedTailwindVersion(base = process.cwd()): string {
29+
export function installedTailwindVersion(base = process.cwd()): string {
3030
return cache.get(base)
3131
}

0 commit comments

Comments
 (0)