feat(styled-components): Implement minification

[ciffelia]

This implements minify option in styled-components plugin. The minification algorithm and unit tests are ported from babel-plugin-styled-components.

Note that CSS code in helper functions (keyframes, css, etc.) are currently not always processed. I think there is a bug in is_helper function, so I'll fix it in another pull request later.

fixes #143
cf. vercel/next.js#30802

[kdy1]

I think we should use swc_css or lightningcss for minification.

(I prefer lightningcss, because turbopack is going to use it)

[ciffelia]

I think we should use swc_css or lightningcss for minification.

(I prefer lightningcss, because turbopack is going to use it)

Lightningcss does not support line comments. swc_css supports line comments, but I doubt it works for all syntax styled-components supports. For example, swc_css might not be able to parse the following style into AST.

const Box = styled.div`
  animation: ${p => p.anim};
  ${p => p.type}: red;
  ${p => p.additionalRules};

  ${MyComponent} {
    color: red;
  }
`

// <Box animation="slidein 3s linear 1s" type="background-color" additionalRules="opacity: 0.1">foo</Box>

So I think using lightningcss or swc_css would cause regression against the regex-based method used in babel-plugin-styled-components.

[phiter]

Do you know what might be needed to make minification work with the css helper? You mentioned it doesn't currently work and I tried it and only styled.* components get minified.

[phiter]

Ah I just saw your other PR, looking forward to using that! Thank you.