@tailwindcss/upgrade finding classes

[jcalfee]

The @tailwindcss/upgrade utility is missing the css contained within functions in an object. For example:

const types = {
  textarea() {
    const disabled = {
      label: `z-[30] mt-px inline-block pl-[0.15rem] opacity-80 hover:pointer-events-none`,
      labelAtt: {},
    }
    return {
      wrap: 'z-[30] relative mb-3',
      wrapAtt: {['data-twe-input-wrapper-init']: true},
      controlAtt: {},
      control: `peer textarea-control`,
      label: ``,
      labelAtt: {},
      disabled
    }
  }
}

Is this something that can be improved, or should I modify temporarily to something simpler and what might that look like?

[wongjn]

What did you expect the upgrade tool to change?

[jcalfee]

Updated. I added z-[30] above.. I did see other places in the code where z-[30] was changed to z-30.

[jcalfee]

It looks like the updater is doing way more parsing than simply grepping for tags. I just don't know what the rules are easily, I"m studying the code though. I just need a simple format I know it can find then I can hack it into that format and back out after the upgrade. Simple search and replace logic would be handy.

[wongjn]

Consider checking the file is covered by the content file globs in the Tailwind configuration. In a test I spun up, the upgrade tool would properly replace z-[30] with z-30 with your exact code if the file was covered.

[jcalfee]

Also, this would have been a good review and confirmation that it is still "grepping": https://tailwindcss.com/docs/detecting-classes-in-source-files .. It only makes sense that the upgrade would use the same approach.