Tailwind editing macro 2

This is a follow on to this trick to make editing with Tailwind easier. This is the reverse process.

In these examples, the ^M ^L and ^C characters need to be replaced as described here.

collapse

f[v%:s/\%V\/\/.*//ge^Mvi[:sort u^Mva[Jva[:s/\%V', '/ /g^MV:s/\%V{cx(\[ '/"^MV:s/\%V', ])}/"^M:w^M

// before (searching for `cx`)
  <div className={cx([
    '4-large', //
    'flex',
    'font-bold',
    'items-center',
    'mb-6',
    'md:text-base',
    'pl-4',
    'pr-4',
    'text-xs',
    'tracking-widest',
    'uppercase',
  ])}>


// after
  <div className="4-large flex font-bold items-center mb-6 md:text-base pl-4 pr-4 text-xs tracking-widest uppercase">

expand

f"cs"{acx([^M^Cf}i^M])^Ckvi[:s/ /\r/g^Mvi[:sort u^Mddvi[:s/^/'^Mvi[:s/$/',^M^Lvi[=A //^C/className^MN

// before (searching for `className`)
  <div className="4-large flex font-bold items-center mb-6 md:text-base pl-4 pr-4 text-xs tracking-widest uppercase">

// after
  <div className={cx([
    '4-large', //
    'flex',
    'font-bold',
    'items-center',
    'mb-6',
    'md:text-base',
    'pl-4',
    'pr-4',
    'text-xs',
    'tracking-widest',
    'uppercase',
  ])}>