V2-to-V3 Upgrade Code Mod

[mosesoak]

Wanted to kick off a discussion about automating the upgrade to V3 syntax.

If you don't want to read this detailed post, upvote / leave an emoji if this is something your team wants or needs! 👍

Background

Upgrading existing projects that use V2 short-css syntax like line-height-[1.15] to V3 can be avoided for a while with the disableShortCss config, but eventually will want to be upgraded to the newer tailwind syntax: [line-height:1.15]. Something I chatted with Ben about a while back is using a code-mod utility like jscodeshift to automate this tedious process. I haven't started doing this yet, but I did the manual conversion process for one of our V2 projects, and wanted to share my learnings to kick off the idea.

There are several V2 flavors we need to be aware of (and might be more than these?):

**Edit: this part of the post contains incorrect information, see Ben's reply **

max-width[70px] // full attribute name, no dash
max-w-[328px] // short css with dash

The first one is easiest because it's literal, you just need to move the bracket to the start and add in a colon.

Also, we use Emotion so the following might be specific to that.

Starting with Regex

Here's an impossible-to-read regex I was able to use in VS Code to locate all (I think?) of our V2 short CSS:

tw(.*?)((=")|`)((?!["`])[\s\S\n])*?[a-z-]\[

I used case-sensitive regex search only on tsx files in our project (could be jsx in yours)

Part 1 is this chunk:

tw(.*?)((=")|`)

Start with tw, followed by an optional non-greedy match for things like tw.div or tw(Box) followed by either a double-quote or backtick, where the double-quote is for jsx tw=" and backtick is for js template string:

Part 2 is crazy but take it as an optional, non-greedy multi-line match of anything EXCEPT double-quote or backtick

((?!["`])[\s\S\n])*?

This is so obscure because it works around some limitations in js regex

Part 3 finds the opening bracket, but states that it should be preceded by a lowercase letter or a dash:

[a-z-]\[

Edit: the last step above isn't quite right, see below

Gotcha: Because the expression is so complex, it will only find the first shorthand after any given tw, which means that during find/replace, I had to run the replacement multiple times until it came up with no matches.

Codemod Challenge

Edited to avoid confusion

The codemod would probably need to do something like this:

• An outer while loop until no matches are found
  • find/replace

The above might leave out some cases but should be enough for someone to get started creating the mod -- please post here if you're excited to work on this! 💯

[ben-rogerson]

Whoa what a great writeup, looks like you've been on a journey converting the syntax over 🤦

I noticed a small misunderstanding and just wanted to address what's short css and what's not.
In this codeblock:

max-width[70px] // full attribute name, no dash
max-w-[328px] // short css with dash

The top example is short css and the bottom one is an official tailwind syntax called an arbitrary value.
As twin converts all tailwindcss classes, only max-width[70px] requires an update to max-w-[70px] or [max-width:70px].

That should just mean a simple change to the regex:

tw(.*?)((=")|`)((?!["`])[\s\S\n])*?[a-z]\[

Anyone picking this up:
While disableShortCss is true, twin will convert the short css classes to arbitrary properties [max-width:70px] before it runs it through tailwindcss - here's that function for reference.

[mosesoak]

🤣 Thanks for the clarification Ben! I will edit the initial post so as not to mislead others on that point.

The regex you proposed almost works but there's a hitch: there are dashes in some properties like max-width, so really the thing we're after is to allow dashes up to the last character before the bracket.

This took some tinkering but here is what I think is a solid find/replace:

(tw[\.a-z\(\)=]*?)("|`)(((?!["`])[\s\S\n])*?)([a-z-]+[a-z])(\[)

$1$2$3[$5:

😅 Successfully leaves the valid shorthand css ending in dash. Thanks for looking at it Ben!

I still think a code mod would be a good idea BTW, since you do have to run this a bunch of times before you get them all.

[mosesoak]

Another little improvement -- it was missing a case where a backtick string contained [content:""] which made it think it couldn't keep looking forward. This fixes it by using a \2 to look for the same type of quotemark that opens the tw string.

(tw[\.\w\(\)=]*?)("|`)(((?!\2)[\s\S\n])*?)([a-z-]+[a-z])(\[)
$1$2$3[$5:

edit: also using \w in the initial tw+ group so as not to miss components with digits like styled.h1