Both PostCSS and SCSS belong to the family of 'CSS preprocessors'. Styled Components is part of the 'CSS-in-JS' family of plugin, including Aphrodite, Glamorous, and many more. So to answer these I'll have to give you the advantages and disadvantages of each family of CSS plugin.
Before I do that, I'd like to mention that PostCSS is the closest thing in the CSS world to what 'Babel' is in the JavaScript world - it parses CSS, loads plugins that apply transformations to your code, and manages these transformations. SCSS a preprocessor and can be loaded by PostCSS, but PostCSS has the ability to load a lot more than just SCSS :D With PostCSS you could manage SCSS and Less and Stylus code, plus other things - all in the same codebase together.
CSS Preprocessor Advantages
- using a preprocessor can help reduce overall code size
- using mixins (plugins) allows you to create small shorthands for common snippets you re-use often
- sometimes large chunks of code (like CSS animations) can be expressed a more simple instructions, and turned into the full-length code later
CSS Preprocessor Disadvantages
- often conflict with CSS grammar, meaning nearly every preprocessor (unintentionally) excludes, conflicts, or limits you from using certain syntax or features in CSS
- requires a build step (some people strongly dislike compiling an interpreted language)
- All of your preprocessor knowledge stays limited mostly to that preprocessor you learned, and doesn't translate well to regular CSS or other tools
CSS-in-JS Advantages
- lets you define a 'design system' and 'automatically' styles elements it finds according to your definition of what it should look like
- depending on which plugin you use, you may be dealing 100% with JavaScript and not actually touch CSS at any point. For some people this is what they want ¯\(ツ)\/¯
- since it's happening inside JavaScript tools, it's easy to send or receive code from other JS-based tools
CSS-in-JS Disadvantages
- often requires you to be using JavaScript framework or library in your workflow to be building your code, otherwise these plugins can't run
- some tools make it harder to style pseudo classes (
:hover, :focus, :active, etc) or pseudo-elements (:before, :after, etc) or make use of smarter selectors like :nth-of-type(odd) , or add media query breakpoints
- Many tools ignore the 'Cascade' part of CSS and work by applying styles to the element's HTML
style="" attribute, which leads to overly fragile styles (what if 2 plugins want to change the style="", all they see is what's there, not what's putting it there or why)