Update preset styled-components styled import

[ben-rogerson]

This PR updates the styled import when you use { preset: "styled-components" }

// New
import styled from 'styled-components/macro'

// Old
import styled from 'styled-components'

The new import allows you to adjust the styled config in the same place you define the twin config:

// babel-plugin-macros.config.js
module.exports = {
  styledComponents: {
    ssr: true, // Make it behave with SSR
    displayName: true // Improved debugging with react display names in class names
    pure: true, // Enable Dead Code Elimination/Tree Shaking in minifiers like terser
  },
  twin: {
    preset: "styled-components",
    autoCssProp: true,
    debugProp: true,
  },
}

// or in package.json
"babelMacros": {
  "styledComponents": {
    "ssr": true,
    "displayName": true,
    "pure": true
  },
  "twin": {
    "preset": "styled-components",
    "autoCssProp": true,
    "debugProp": true
  }
},

Be sure to check the styled-components docs for the rest of the available options.

Note: The config for this macro is still marked as experimental on the styled-components site but that was based on the linked resource by Kent C. Dodds who has since removed the experimental status.

I also checked with Max Stoiber (@mxstbr) to be sure.