Reduce bundle size (apply minify for styled-components)

[aooen]

Self Checklist

• [x] I wrote a PR title in English.
• [x] I added an appropriate label to the PR.
• [x] I wrote a commit message in English.
• [x] I wrote a commit message according to the Conventional Commits specification.
• [x] I added the appropriate changeset for the changes.
• [ ] ~~I wrote a unit test about the implementation.~~
• [ ] ~~I wrote a storybook document about the implementation.~~
• [ ] I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox

Related Issue

Summary

It reduce many whitespace of component style code in compiled source like this:

as-is	to-be

Size diff:

as-is	to-be

Details

• Migrate typescript-plugin-styled-components to babel-plugin-styled-components for apply minify(for remove extra whitespace), pure(for remove dead code).

  There is minify option at typescript-plugin-styled-components, but that's not work for me. (maybe influence of FoundationStyledComponent's override)

• Hide comment on style code that's not removed automatically by minify

Breaking change or not (Yes/No)

• No breaking change.

References

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 59584ee9c07d519687bd874c94182ea41edeb8f4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@channel.io/bezier-react	Patch
bezier-figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov[bot]]

Codecov Report

Base: 71.15% // Head: 71.15% // No change to project coverage :thumbsup:

Coverage data is based on head (59584ee) compared to base (d90c27a). Patch has no changes to coverable lines.

Additional details and impacted files

@@           Coverage Diff            @@
##           next-v1     #934   +/-   ##
========================================
  Coverage    71.15%   71.15%           
========================================
  Files          208      208           
  Lines         2961     2961           
  Branches       821      821           
========================================
  Hits          2107     2107           
  Misses         736      736           
  Partials       118      118           

Impacted Files	Coverage Δ
.../Avatars/CheckableAvatar/CheckableAvatar.styled.ts	0.00% <ø> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[github-actions[bot]]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[aooen]

애플리케이션 런타임에서 잘 동작하나요? (FYI. #752)

음 저는 딱히 문제는 없습니다. withConfig 쓰는건 typescript-plugin-styled-components도 마찬가지인데, 이건 FoundationStyledComponent.tsx 고치셨던 걸로 잘 동작하게 된 것 같습니다.