Skip to content

Conversation

@RobinMalfait
Copy link
Member

This PR adds a codemod for migrating the old @screen directive from Tailwind
CSS v2 that also worked in Tailwind CSS v3 but wasn't documented anymore.

Internally, this first migrates @screen md to @media screen(md), then we rely on the existing migration that migrates the screen(…) function.

Input:

@screen md {
  .foo {
    color: red;
  }
}

Output (IR):

@media screen(md) {
  .foo {
    color: red;
  }
}

Output:

@media theme(--breakpoint-md) {
  .foo {
    color: red;
  }
}

@RobinMalfait RobinMalfait requested a review from a team as a code owner October 22, 2024 10:00
Copy link
Member Author

RobinMalfait commented Oct 22, 2024

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @RobinMalfait and the rest of your teammates on Graphite Graphite

@RobinMalfait RobinMalfait force-pushed the robin/feat/migrate-variants-and-responsive-directives branch from 329126b to 14e1cac Compare October 22, 2024 10:05
@RobinMalfait RobinMalfait force-pushed the robin/feat/migrate-screen-directive branch from 75fac72 to 558fa90 Compare October 22, 2024 10:05
Comment on lines +27 to +31
// First migrate `@screen md` to `@media screen(md)`
root.walkAtRules('screen', (node) => {
node.name = 'media'
node.params = `screen(${node.params})`
})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added via Giphy

@RobinMalfait RobinMalfait force-pushed the robin/feat/migrate-variants-and-responsive-directives branch from f677933 to a2d0425 Compare October 22, 2024 13:41
@RobinMalfait RobinMalfait force-pushed the robin/feat/migrate-screen-directive branch 2 times, most recently from e86e03d to bd63fb2 Compare October 22, 2024 13:48
Copy link
Member

philipp-spiess commented Oct 22, 2024

Merge activity

  • Oct 22, 12:07 PM EDT: The merge label 'merge-queue' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
  • Oct 22, 12:08 PM EDT: A user added this pull request to the Graphite merge queue.
  • Oct 22, 12:17 PM EDT: A user merged this pull request with the Graphite merge queue.

This PR adds a codemod for migrating the old `@screen` directive from Tailwind
CSS v2 that also worked in Tailwind CSS v3 but wasn't documented anymore.

Internally, this first migrates `@screen md` to `@media screen(md)`, then we rely on the existing migration that migrates the `screen(…)` function.

Input:
```css
@screen md {
  .foo {
    color: red;
  }
}
```

Output (IR):
```css
@media screen(md) {
  .foo {
    color: red;
  }
}
```

Output:
```css
@media theme(--breakpoint-md) {
  .foo {
    color: red;
  }
}
```
@philipp-spiess philipp-spiess force-pushed the robin/feat/migrate-variants-and-responsive-directives branch from 13a8a63 to 5bf2efb Compare October 22, 2024 16:10
@philipp-spiess philipp-spiess force-pushed the robin/feat/migrate-screen-directive branch from bd63fb2 to 02cb52a Compare October 22, 2024 16:10
Base automatically changed from robin/feat/migrate-variants-and-responsive-directives to next October 22, 2024 16:15
@graphite-app graphite-app bot merged commit 02cb52a into next Oct 22, 2024
2 checks passed
@graphite-app graphite-app bot deleted the robin/feat/migrate-screen-directive branch October 22, 2024 16:17
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.

3 participants