+ This plugin adds support for server-side rendering, for minification of
+ styles and gives you a nicer debugging experience.
+
+
+
Install the babel-plugin first:
+
+
Then add it to your babel configuration like so:
+
+
+
+ This option is turned off by default
+
+ By adding a unique identifier to every styled component this plugin
+ avoids checksum mismatches due to different class generation on the
+ client and on the server. If you do not use this plugin and try to
+ server-side render styled-components React will complain.
+
+
+ You can enable it with the ssr option:
+
+
+
+
+
+ This options adds the components' name and displayName to the class name
+ attached to the DOM node. In your browser's DevTools you'll see:{' '}
+
+ <button class="sc-Button-asdf123 asdf123" />
+ {' '}
+ instead of just <button class="asdf123" />.
+
+
+ This also adds support for showing your components' real name in the
+ React DevTools. Consider writing a styled component that renders a{' '}
+ button element, called MyButton. It will
+ normally show up as <styled.button> for all of your
+ components, but with this plugin they show{' '}
+ <MyButton />.
+
+
+ This makes it easier to find your components and to figure out where
+ they live in your app.
+
+
+ If you don't need this feature, you can disable it with the{' '}
+ displayName option:
+
+
+
+
+
+ This is experimental and we don't yet know of all limitations and bugs!
+ Consider this non-production ready for now. ⚠️
+
+
+ This plugin preprocesses your styles with stylis and uses the{' '}
+ no-parser.js entrypoint on styled-components.
+
+
+ This effectively removes stylis from your runtime bundle and should
+ slightly improve runtime performance and shrink your bundle size.
+
+
+ It automatically disables the minify option, since stylis
+ already does some minification on your CSS.
+
+
+ You can enable preprocessing with the preprocess option:
+
+
+
+
+
+ This option is turned on by default. If you experience mangled CSS
+ results, turn it off and open an issue please.
+
+
+ This plugin minifies your styles in the tagged template literals, giving
+ you big bundle size savings.
+
+
+ This operation may potentially break your styles in some rare cases, so
+ we recommend to keep this option enabled in development if it's enabled
+ in the production build.
+
+
+ You can disable minification with the minify option:
+
+
+
+
+
+ We also transpile styled-components tagged template
+ literals down to a smaller representation than what Babel normally does,
+ because styled-components template literals don't need to
+ be 100% spec compliant. see{' '}
+ Tagged Template Literals for
+ more information about that) You can use the {' '}
+ transpileTemplateLiterals option to turn this feature off.
+