className matching

[ben-rogerson]

This PR adds a includeClassNames flag that allows twin to check className props for tailwind classes:

<button className="rounded some-other-class" />

When a tailwind class is matched, it's converted to a css object and delivered to the css prop:

<button className="some-other-class" css={{ "borderRadius": "0.25rem" }} />

• Unmatched classes are skipped and preserved within the className
• Suggestions aren’t shown for unmatched classes like they are for the tw prop
• The tw/css props can be used on the same jsx element
• Limitation: classNames with conditional props or variables aren’t touched, eg: <div className={isBlock && "block"} />

How to enable the feature

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    // ...
    includeClassNames: true,
  },
}

// or

// package.json
"babelMacros": {
    "twin": 
      // ...
      "includeClassNames": true
    },
},

Thanks to @mxstbr for the idea in this discussion.