Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add initial codemod tooling #14434

Merged
merged 12 commits into from
Sep 18, 2024
Merged

Add initial codemod tooling #14434

merged 12 commits into from
Sep 18, 2024

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Sep 16, 2024

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:

npx @tailwindcss/upgrade

You can pass in CSS files to transform as arguments:

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:

.foo {
  @apply !flex flex-col! hover:!items-start items-center;
}

Output:

.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:

.foo {
  @apply flex flex-col !important;
}

Output:

.foo {
  @apply flex! flex-col!;
}

+ add codemod for migrating `@apply`
Copied some utils from `@tailwindcss/cli`. Initially referenced them,
but we also rely on some dependencies that we have to install.

One solution is to move it to an internal package and import it so that
tsup can inline everything. This also has the same 'we need the correct
dependencies' problem.

Another solution is to create a proper `@tailwindcss/cli-utils` (or
similar) package that we can import as a dependency. However, this one
will require us to actually publish the package, and give it a proper
name.
@RobinMalfait RobinMalfait force-pushed the feat/add-codemod-tooling branch from bc9b0a7 to 330dbff Compare September 18, 2024 13:49
Globby, created by Sindresorhus, is based on fast-glob but with
additional features. One of those features is the `gitignore` feature
which respects your `.gitignore` file, which is exactly what we need.

See: https://github.com/sindresorhus/globby#gitignore
@RobinMalfait RobinMalfait merged commit ee7e02b into next Sep 18, 2024
3 checks passed
@RobinMalfait RobinMalfait deleted the feat/add-codemod-tooling branch September 18, 2024 14:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants