-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add initial codemod tooling (#14434)
This PR adds some initial tooling for codemods. We are currently only interested in migrating CSS files, so we will be using PostCSS under the hood to do this. This PR also implements the "migrate `@apply`" codemod from #14412. The usage will look like this: ```sh npx @tailwindcss/upgrade ``` You can pass in CSS files to transform as arguments: ```sh npx @tailwindcss/upgrade src/**/*.css ``` But, if none are provided, it will search for CSS files in the current directory and its subdirectories. ``` ≈ tailwindcss v4.0.0-alpha.24 │ No files provided. Searching for CSS files in the current │ directory and its subdirectories… │ Migration complete. Verify the changes and commit them to │ your repository. ``` The tooling also requires the Git repository to be in a clean state. This is a common convention to ensure that everything is undo-able. If we detect that the git repository is dirty, we will abort the migration. ``` ≈ tailwindcss v4.0.0-alpha.24 │ Git directory is not clean. Please stash or commit your │ changes before migrating. │ You may use the `--force` flag to override this safety │ check. ``` --- This PR alsoo adds CSS codemods for migrating existing `@apply` directives to the new version. This PR has the ability to migrate the following cases: --- In v4, the convention is to put the important modifier `!` at the end of the utility class instead of right before it. This makes it easier to reason about, especially when you are variants. Input: ```css .foo { @apply !flex flex-col! hover:!items-start items-center; } ``` Output: ```css .foo { @apply flex! flex-col! hover:items-start! items-center; } ``` --- In v4 we don't support `!important` as a marker at the end of `@apply` directives. Instead, you can append the `!` to each utility class to make it `!important`. Input: ```css .foo { @apply flex flex-col !important; } ``` Output: ```css .foo { @apply flex! flex-col!; } ```
- Loading branch information
1 parent
a51b63a
commit ee7e02b
Showing
20 changed files
with
1,153 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import { css, json, test } from '../utils' | ||
|
||
test( | ||
'migrate @apply', | ||
{ | ||
fs: { | ||
'package.json': json` | ||
{ | ||
"dependencies": { | ||
"tailwindcss": "workspace:^", | ||
"@tailwindcss/upgrade": "workspace:^" | ||
} | ||
} | ||
`, | ||
'src/index.css': css` | ||
@import 'tailwindcss'; | ||
.a { | ||
@apply flex; | ||
} | ||
.b { | ||
@apply !flex; | ||
} | ||
.c { | ||
@apply !flex flex-col! items-center !important; | ||
} | ||
`, | ||
}, | ||
}, | ||
async ({ fs, exec }) => { | ||
await exec('npx @tailwindcss/upgrade') | ||
|
||
await fs.expectFileToContain( | ||
'src/index.css', | ||
css` | ||
.a { | ||
@apply flex; | ||
} | ||
.b { | ||
@apply flex!; | ||
} | ||
.c { | ||
@apply flex! flex-col! items-center!; | ||
} | ||
`, | ||
) | ||
}, | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<p align="center"> | ||
<a href="https://tailwindcss.com" target="_blank"> | ||
<picture> | ||
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-dark.svg"> | ||
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg"> | ||
<img alt="Tailwind CSS" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg" width="350" height="70" style="max-width: 100%;"> | ||
</picture> | ||
</a> | ||
</p> | ||
|
||
<p align="center"> | ||
A utility-first CSS framework for rapidly building custom user interfaces. | ||
</p> | ||
|
||
<p align="center"> | ||
<a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=next" alt="Build Status"></a> | ||
<a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a> | ||
<a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a> | ||
<a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a> | ||
</p> | ||
|
||
--- | ||
|
||
## Documentation | ||
|
||
For full documentation, visit [tailwindcss.com](https://tailwindcss.com). | ||
|
||
## Community | ||
|
||
For help, discussion about best practices, or any other conversation that would benefit from being searchable: | ||
|
||
[Discuss Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss/discussions) | ||
|
||
For chatting with others using the framework: | ||
|
||
[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe) | ||
|
||
## Contributing | ||
|
||
If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/next/.github/CONTRIBUTING.md) **before submitting a pull request**. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
{ | ||
"name": "@tailwindcss/upgrade", | ||
"version": "4.0.0-alpha.24", | ||
"description": "A utility-first CSS framework for rapidly building custom user interfaces.", | ||
"license": "MIT", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/tailwindlabs/tailwindcss.git", | ||
"directory": "packages/@tailwindcss-cli" | ||
}, | ||
"bugs": "https://github.com/tailwindlabs/tailwindcss/issues", | ||
"homepage": "https://tailwindcss.com", | ||
"scripts": { | ||
"lint": "tsc --noEmit", | ||
"build": "tsup-node", | ||
"dev": "pnpm run build -- --watch" | ||
}, | ||
"bin": "./dist/index.mjs", | ||
"exports": { | ||
"./package.json": "./package.json" | ||
}, | ||
"files": [ | ||
"dist" | ||
], | ||
"publishConfig": { | ||
"provenance": true, | ||
"access": "public" | ||
}, | ||
"dependencies": { | ||
"enhanced-resolve": "^5.17.1", | ||
"globby": "^14.0.2", | ||
"mri": "^1.2.0", | ||
"picocolors": "^1.0.1", | ||
"postcss": "^8.4.41", | ||
"postcss-import": "^16.1.0", | ||
"tailwindcss": "workspace:^" | ||
}, | ||
"devDependencies": { | ||
"@types/node": "catalog:", | ||
"@types/postcss-import": "^14.0.3", | ||
"dedent": "1.5.3" | ||
} | ||
} |
70 changes: 70 additions & 0 deletions
70
packages/@tailwindcss-upgrade/src/codemods/migrate-at-apply.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import dedent from 'dedent' | ||
import postcss from 'postcss' | ||
import { expect, it } from 'vitest' | ||
import { migrateAtApply } from './migrate-at-apply' | ||
|
||
const css = dedent | ||
|
||
function migrate(input: string) { | ||
return postcss() | ||
.use(migrateAtApply()) | ||
.process(input, { from: expect.getState().testPath }) | ||
.then((result) => result.css) | ||
} | ||
|
||
it('should not migrate `@apply`, when there are no issues', async () => { | ||
expect( | ||
await migrate(css` | ||
.foo { | ||
@apply flex flex-col items-center; | ||
} | ||
`), | ||
).toMatchInlineSnapshot(` | ||
".foo { | ||
@apply flex flex-col items-center; | ||
}" | ||
`) | ||
}) | ||
|
||
it('should append `!` to each utility, when using `!important`', async () => { | ||
expect( | ||
await migrate(css` | ||
.foo { | ||
@apply flex flex-col !important; | ||
} | ||
`), | ||
).toMatchInlineSnapshot(` | ||
".foo { | ||
@apply flex! flex-col!; | ||
}" | ||
`) | ||
}) | ||
|
||
// TODO: Handle SCSS syntax | ||
it.skip('should append `!` to each utility, when using `#{!important}`', async () => { | ||
expect( | ||
await migrate(css` | ||
.foo { | ||
@apply flex flex-col #{!important}; | ||
} | ||
`), | ||
).toMatchInlineSnapshot(` | ||
".foo { | ||
@apply flex! flex-col!; | ||
}" | ||
`) | ||
}) | ||
|
||
it('should move the legacy `!` prefix, to the new `!` postfix notation', async () => { | ||
expect( | ||
await migrate(css` | ||
.foo { | ||
@apply !flex flex-col! hover:!items-start items-center; | ||
} | ||
`), | ||
).toMatchInlineSnapshot(` | ||
".foo { | ||
@apply flex! flex-col! hover:items-start! items-center; | ||
}" | ||
`) | ||
}) |
43 changes: 43 additions & 0 deletions
43
packages/@tailwindcss-upgrade/src/codemods/migrate-at-apply.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import type { AtRule, Plugin } from 'postcss' | ||
import { segment } from '../../../tailwindcss/src/utils/segment' | ||
|
||
export function migrateAtApply(): Plugin { | ||
function migrate(atRule: AtRule) { | ||
let utilities = atRule.params.split(/(\s+)/) | ||
let important = | ||
utilities[utilities.length - 1] === '!important' || | ||
utilities[utilities.length - 1] === '#{!important}' // Sass/SCSS | ||
|
||
if (important) utilities.pop() // Remove `!important` | ||
|
||
let params = utilities.map((part) => { | ||
// Keep whitespace | ||
if (part.trim() === '') return part | ||
|
||
let variants = segment(part, ':') | ||
let utility = variants.pop()! | ||
|
||
// Apply the important modifier to all the rules if necessary | ||
if (important && utility[0] !== '!' && utility[utility.length - 1] !== '!') { | ||
utility += '!' | ||
} | ||
|
||
// Migrate the important modifier to the end of the utility | ||
if (utility[0] === '!') { | ||
utility = `${utility.slice(1)}!` | ||
} | ||
|
||
// Reconstruct the utility with the variants | ||
return [...variants, utility].join(':') | ||
}) | ||
|
||
atRule.params = params.join('').trim() | ||
} | ||
|
||
return { | ||
postcssPlugin: '@tailwindcss/upgrade/migrate-at-apply', | ||
AtRule: { | ||
apply: migrate, | ||
}, | ||
} | ||
} |
Oops, something went wrong.