diff --git a/crates/oxc_transformer/src/lib.rs b/crates/oxc_transformer/src/lib.rs
index 8ee09f5ed22cc..f0405a9129d55 100644
--- a/crates/oxc_transformer/src/lib.rs
+++ b/crates/oxc_transformer/src/lib.rs
@@ -37,6 +37,7 @@ mod regexp;
 mod typescript;
 
 mod decorator;
+mod plugins;
 
 use common::Common;
 use context::{TransformCtx, TraverseCtx};
@@ -56,6 +57,7 @@ use rustc_hash::FxHashMap;
 use state::TransformState;
 use typescript::TypeScript;
 
+use crate::plugins::Plugins;
 pub use crate::{
     common::helper_loader::{Helper, HelperLoaderMode, HelperLoaderOptions},
     compiler_assumptions::CompilerAssumptions,
@@ -73,6 +75,7 @@ pub use crate::{
         ESTarget, Engine, EngineTargets, EnvOptions, Module, TransformOptions,
         babel::{BabelEnvOptions, BabelOptions},
     },
+    plugins::{PluginsOptions, StyledComponentsOptions},
     proposals::ProposalOptions,
     typescript::{RewriteExtensionsMode, TypeScriptOptions},
 };
@@ -92,6 +95,7 @@ pub struct Transformer<'a> {
 
     typescript: TypeScriptOptions,
     decorator: DecoratorOptions,
+    plugins: PluginsOptions,
     jsx: JsxOptions,
     env: EnvOptions,
     proposals: ProposalOptions,
@@ -105,6 +109,7 @@ impl<'a> Transformer<'a> {
             allocator,
             typescript: options.typescript.clone(),
             decorator: options.decorator,
+            plugins: options.plugins.clone(),
             jsx: options.jsx.clone(),
             env: options.env,
             proposals: options.proposals,
@@ -134,6 +139,7 @@ impl<'a> Transformer<'a> {
         let mut transformer = TransformerImpl {
             common: Common::new(&self.env, &self.ctx),
             decorator: Decorator::new(self.decorator, &self.ctx),
+            plugins: Plugins::new(self.plugins, &self.ctx),
             explicit_resource_management: self
                 .proposals
                 .explicit_resource_management
@@ -171,6 +177,7 @@ struct TransformerImpl<'a, 'ctx> {
     // NOTE: all callbacks must run in order.
     x0_typescript: Option<TypeScript<'a, 'ctx>>,
     decorator: Decorator<'a, 'ctx>,
+    plugins: Plugins<'a, 'ctx>,
     explicit_resource_management: Option<ExplicitResourceManagement<'a, 'ctx>>,
     x1_jsx: Jsx<'a, 'ctx>,
     x2_es2022: ES2022<'a, 'ctx>,
@@ -191,6 +198,7 @@ impl<'a> Traverse<'a, TransformState<'a>> for TransformerImpl<'a, '_> {
         if let Some(typescript) = self.x0_typescript.as_mut() {
             typescript.enter_program(program, ctx);
         }
+        self.plugins.enter_program(program, ctx);
         self.x1_jsx.enter_program(program, ctx);
         if let Some(explicit_resource_management) = self.explicit_resource_management.as_mut() {
             explicit_resource_management.enter_program(program, ctx);
@@ -236,6 +244,7 @@ impl<'a> Traverse<'a, TransformState<'a>> for TransformerImpl<'a, '_> {
         if let Some(typescript) = self.x0_typescript.as_mut() {
             typescript.enter_variable_declarator(decl, ctx);
         }
+        self.plugins.enter_variable_declarator(decl, ctx);
     }
 
     fn enter_big_int_literal(&mut self, node: &mut BigIntLiteral<'a>, ctx: &mut TraverseCtx<'a>) {
@@ -268,6 +277,7 @@ impl<'a> Traverse<'a, TransformState<'a>> for TransformerImpl<'a, '_> {
         if let Some(typescript) = self.x0_typescript.as_mut() {
             typescript.enter_call_expression(expr, ctx);
         }
+        self.plugins.enter_call_expression(expr, ctx);
         self.x1_jsx.enter_call_expression(expr, ctx);
     }
 
@@ -318,6 +328,7 @@ impl<'a> Traverse<'a, TransformState<'a>> for TransformerImpl<'a, '_> {
         if let Some(typescript) = self.x0_typescript.as_mut() {
             typescript.enter_expression(expr, ctx);
         }
+        self.plugins.enter_expression(expr, ctx);
         self.x2_es2022.enter_expression(expr, ctx);
         self.x2_es2021.enter_expression(expr, ctx);
         self.x2_es2020.enter_expression(expr, ctx);
diff --git a/crates/oxc_transformer/src/options/babel/plugins.rs b/crates/oxc_transformer/src/options/babel/plugins.rs
index dd35c00c86101..0cd0f5b255d65 100644
--- a/crates/oxc_transformer/src/options/babel/plugins.rs
+++ b/crates/oxc_transformer/src/options/babel/plugins.rs
@@ -3,6 +3,7 @@ use serde::Deserialize;
 use crate::{
     DecoratorOptions, TypeScriptOptions, es2015::ArrowFunctionsOptions,
     es2018::ObjectRestSpreadOptions, es2022::ClassPropertiesOptions, jsx::JsxOptions,
+    plugins::StyledComponentsOptions,
 };
 
 use super::PluginPresetEntries;
@@ -73,6 +74,8 @@ pub struct BabelPlugins {
     pub legacy_decorator: Option<DecoratorOptions>,
     // Proposals
     pub explicit_resource_management: bool,
+    // Built-in plugins
+    pub styled_components: Option<StyledComponentsOptions>,
 }
 
 impl TryFrom<PluginPresetEntries> for BabelPlugins {
@@ -161,6 +164,12 @@ impl TryFrom<PluginPresetEntries> for BabelPlugins {
                         entry.value::<DecoratorOptions>().map_err(|err| p.errors.push(err)).ok();
                 }
                 "proposal-explicit-resource-management" => p.explicit_resource_management = true,
+                "styled-components" => {
+                    p.styled_components = entry
+                        .value::<StyledComponentsOptions>()
+                        .map_err(|err| p.errors.push(err))
+                        .ok();
+                }
                 s => p.unsupported.push(s.to_string()),
             }
         }
diff --git a/crates/oxc_transformer/src/options/mod.rs b/crates/oxc_transformer/src/options/mod.rs
index f0c48c53a9def..36e4e0856624a 100644
--- a/crates/oxc_transformer/src/options/mod.rs
+++ b/crates/oxc_transformer/src/options/mod.rs
@@ -14,6 +14,7 @@ use crate::{
     es2021::ES2021Options,
     es2022::ES2022Options,
     jsx::JsxOptions,
+    plugins::{PluginsOptions, StyledComponentsOptions},
     proposals::ProposalOptions,
     regexp::RegExpOptions,
     typescript::TypeScriptOptions,
@@ -69,6 +70,9 @@ pub struct TransformOptions {
     /// Proposals
     pub proposals: ProposalOptions,
 
+    /// Plugins
+    pub plugins: PluginsOptions,
+
     pub helper_loader: HelperLoaderOptions,
 }
 
@@ -90,6 +94,7 @@ impl TransformOptions {
             },
             env: EnvOptions::enable_all(/* include_unfinished_plugins */ false),
             proposals: ProposalOptions::default(),
+            plugins: PluginsOptions { styled_components: Some(StyledComponentsOptions::default()) },
             helper_loader: HelperLoaderOptions {
                 mode: HelperLoaderMode::Runtime,
                 ..Default::default()
@@ -258,6 +263,11 @@ impl TryFrom<&BabelOptions> for TransformOptions {
             ..HelperLoaderOptions::default()
         };
 
+        let mut plugins = PluginsOptions::default();
+        if let Some(styled_components) = &options.plugins.styled_components {
+            plugins.styled_components = Some(styled_components.clone());
+        }
+
         Ok(Self {
             cwd: options.cwd.clone().unwrap_or_default(),
             assumptions: options.assumptions,
@@ -280,6 +290,7 @@ impl TryFrom<&BabelOptions> for TransformOptions {
                 explicit_resource_management: options.plugins.explicit_resource_management,
             },
             helper_loader,
+            plugins,
         })
     }
 }
diff --git a/crates/oxc_transformer/src/plugins/mod.rs b/crates/oxc_transformer/src/plugins/mod.rs
new file mode 100644
index 0000000000000..a7a491cf31eb7
--- /dev/null
+++ b/crates/oxc_transformer/src/plugins/mod.rs
@@ -0,0 +1,62 @@
+mod options;
+mod styled_components;
+
+pub use options::PluginsOptions;
+use oxc_ast::ast::*;
+use oxc_traverse::Traverse;
+pub use styled_components::StyledComponentsOptions;
+
+use crate::{
+    context::{TransformCtx, TraverseCtx},
+    plugins::styled_components::StyledComponents,
+    state::TransformState,
+};
+
+pub struct Plugins<'a, 'ctx> {
+    styled_components: StyledComponents<'a, 'ctx>,
+    options: PluginsOptions,
+}
+
+impl<'a, 'ctx> Plugins<'a, 'ctx> {
+    pub fn new(options: PluginsOptions, ctx: &'ctx TransformCtx<'a>) -> Self {
+        Self {
+            styled_components: StyledComponents::new(
+                options.styled_components.clone().unwrap_or_default(),
+                ctx,
+            ),
+            options,
+        }
+    }
+}
+
+impl<'a> Traverse<'a, TransformState<'a>> for Plugins<'a, '_> {
+    fn enter_program(&mut self, node: &mut Program<'a>, ctx: &mut TraverseCtx<'a>) {
+        if self.options.styled_components.is_some() {
+            self.styled_components.enter_program(node, ctx);
+        }
+    }
+
+    fn enter_variable_declarator(
+        &mut self,
+        node: &mut VariableDeclarator<'a>,
+        ctx: &mut TraverseCtx<'a>,
+    ) {
+        if self.options.styled_components.is_some() {
+            self.styled_components.enter_variable_declarator(node, ctx);
+        }
+    }
+
+    fn enter_expression(
+        &mut self,
+        node: &mut Expression<'a>,
+        ctx: &mut oxc_traverse::TraverseCtx<'a, TransformState<'a>>,
+    ) {
+        self.styled_components.enter_expression(node, ctx);
+    }
+
+    fn enter_call_expression(&mut self, node: &mut CallExpression<'a>, ctx: &mut TraverseCtx<'a>) {
+        if self.options.styled_components.is_some() {
+            self.styled_components.enter_call_expression(node, ctx);
+        }
+    }
+}
diff --git a/crates/oxc_transformer/src/plugins/options.rs b/crates/oxc_transformer/src/plugins/options.rs
new file mode 100644
index 0000000000000..160eaaa1ad1ab
--- /dev/null
+++ b/crates/oxc_transformer/src/plugins/options.rs
@@ -0,0 +1,6 @@
+use super::StyledComponentsOptions;
+
+#[derive(Default, Debug, Clone)]
+pub struct PluginsOptions {
+    pub styled_components: Option<StyledComponentsOptions>,
+}
diff --git a/crates/oxc_transformer/src/plugins/styled_components.rs b/crates/oxc_transformer/src/plugins/styled_components.rs
new file mode 100644
index 0000000000000..7ba929c089c6b
--- /dev/null
+++ b/crates/oxc_transformer/src/plugins/styled_components.rs
@@ -0,0 +1,1154 @@
+//! Styled Components
+//!
+//! This plugin adds support for server-side rendering, minification of styles, and
+//! a nicer debugging experience when using styled-components.
+//!
+//! > This plugin is port from the official Babel plugin for styled-components.
+//!
+//! ## Implementation Status
+//!
+//! > Note: Currently, this plugin only supports styled-components imported via import statements.
+//! The transformation will not be applied if you import it using `require("styled-components")`,
+//! in other words, it only supports `ESM` not `CJS`.
+//!
+//! ### Options:
+//! **✅ Fully Supported:**
+//! - `displayName`: Adds display names for debugging
+//! - `fileName`: Controls filename prefixing in display names
+//! - `ssr`: Adds unique component IDs for server-side rendering
+//! - `transpileTemplateLiterals`: Converts template literals to function calls
+//! - `minify`: Minifies CSS content in template literals
+//! - `namespace`: Adds namespace prefixes to component IDs
+//! - `meaninglessFileNames`: Controls which filenames are considered meaningless
+//!
+//! **⚠️ Partially Supported:**
+//! - `pure`: Only supports call expressions, not tagged template expressions (bundler limitation)
+//!
+//! **❌ Not Yet Implemented:**
+//! - `cssProp`: JSX css prop transformation
+//! - `topLevelImportPaths`: Custom import path handling
+//!
+//! ## Example
+//!
+//! Input:
+//! ```js
+//! import styled from 'styled-components';
+//!
+//! const Button = styled.div`
+//!   color: blue;
+//!   padding: 10px;
+//! `;
+//! ```
+//!
+//! Output (with default options):
+//! ```js
+//! import styled from 'styled-components';
+//!
+//! const Button = styled.div.withConfig({
+//!   displayName: "Button",
+//!   componentId: "sc-1234567-0"
+//! })(["color:blue;padding:10px;"]);
+//! ```
+//!
+//! ## References
+//!
+//! - Babel plugin: <https://github.com/styled-components/babel-plugin-styled-components>
+//! - Documentation: <https://styled-components.com/docs/tooling#babel-plugin>
+#![expect(clippy::doc_link_with_quotes)]
+use rustc_hash::{FxHashMap, FxHashSet};
+use serde::Deserialize;
+
+use std::iter::once;
+
+use oxc_allocator::{StringBuilder, TakeIn, Vec as ArenaVec};
+use oxc_ast::{AstBuilder, NONE, ast::*};
+use oxc_semantic::SymbolId;
+use oxc_span::SPAN;
+use oxc_traverse::{Ancestor, Traverse};
+
+use crate::{
+    context::{TransformCtx, TraverseCtx},
+    state::TransformState,
+};
+
+#[derive(Debug, Clone, Deserialize)]
+#[serde(default, rename_all = "camelCase", deny_unknown_fields)]
+pub struct StyledComponentsOptions {
+    /// Enhances the attached CSS class name on each component with richer output to help
+    /// identify your components in the DOM without React DevTools. It also allows you to
+    /// see the component's `displayName` in React DevTools.
+    ///
+    /// When enabled, components show up as `<button class="Button-asdf123 asdf123" />`
+    /// instead of just `<button class="asdf123" />`, and display meaningful names like
+    /// `MyButton` instead of `styled.button` in React DevTools.
+    ///
+    /// Default: `true`
+    #[serde(default = "default_as_true")]
+    pub display_name: bool,
+
+    /// Controls whether the `displayName` of a component will be prefixed with the filename
+    /// to make the component name as unique as possible.
+    ///
+    /// When `true`, the filename is used to prefix component names. When `false`, only the
+    /// component name is used for the `displayName`. This can be useful for testing with
+    /// enzyme where you want to search components by displayName.
+    ///
+    /// Default: `true`
+    #[serde(default = "default_as_true")]
+    pub file_name: bool,
+
+    /// Adds a unique identifier to every styled component to avoid checksum mismatches
+    /// due to different class generation on the client and server during server-side rendering.
+    ///
+    /// Without this option, React will complain with an HTML attribute mismatch warning
+    /// during rehydration when using server-side rendering.
+    ///
+    /// Default: `true`
+    #[serde(default = "default_as_true")]
+    pub ssr: bool,
+
+    /// Transpiles styled-components tagged template literals to a smaller representation
+    /// than what Babel normally creates, helping to reduce bundle size.
+    ///
+    /// Converts `styled.div\`width: 100%;\`` to `styled.div(['width: 100%;'])`, which is
+    /// more compact than the standard Babel template literal transformation.
+    ///
+    /// Default: `true`
+    #[serde(default = "default_as_true")]
+    pub transpile_template_literals: bool,
+
+    /// Minifies CSS content by removing all whitespace and comments from your CSS,
+    /// keeping valuable bytes out of your bundles.
+    ///
+    /// This optimization helps reduce the final bundle size by eliminating unnecessary
+    /// whitespace and comments in CSS template literals.
+    ///
+    /// Default: `true`
+    #[serde(default = "default_as_true")]
+    pub minify: bool,
+
+    /// Enables transformation of JSX `css` prop when using styled-components.
+    ///
+    /// When enabled, JSX elements with a `css` prop are transformed to work with
+    /// styled-components' css prop functionality.
+    ///
+    /// **Note: This feature is not yet implemented in oxc.**
+    ///
+    /// Default: `true`
+    #[serde(default = "default_as_true")]
+    pub css_prop: bool,
+
+    /// Enables "pure annotation" to aid dead code elimination by bundlers.
+    ///
+    /// Adds `/*#__PURE__*/` comments to styled component calls, helping minifiers
+    /// perform better tree-shaking by indicating that these calls have no side effects.
+    /// This is particularly useful because styled components are normally assumed to
+    /// have side effects and can't be properly eliminated by minifiers.
+    ///
+    /// **Note: Currently only supports call expressions. Tagged template expressions
+    /// are not yet supported due to bundler limitations. See:**
+    /// <https://github.com/rollup/rollup/issues/4035>
+    ///
+    /// Default: `false`
+    #[serde(default)]
+    pub pure: bool,
+
+    /// Adds a namespace prefix to component identifiers to ensure class names are unique.
+    ///
+    /// This is particularly useful when working with micro-frontends where class name
+    /// collisions can occur. The namespace will be prepended to generated component IDs.
+    ///
+    /// Example: With `namespace: "my-app"`, generates `componentId: "my-app__sc-3rfj0a-1"`
+    ///
+    /// Default: `None`
+    #[serde(default)]
+    pub namespace: Option<String>,
+
+    /// List of file names that are considered meaningless for component naming purposes.
+    ///
+    /// When the `fileName` option is enabled and a component is in a file with a name
+    /// from this list, the directory name will be used instead of the file name for
+    /// the component's display name. This is useful for patterns like `Button/index.jsx`
+    /// where "index" is not descriptive.
+    ///
+    /// Example: With "index" in the list, `Button/index.jsx` will generate a display
+    /// name of "Button" instead of "index".
+    ///
+    /// Default: `["index"]`
+    #[serde(default = "default_for_meaningless_file_names")]
+    pub meaningless_file_names: Vec<String>,
+
+    /// Import paths to be considered as styled-components imports at the top level.
+    ///
+    /// This option allows specifying additional import paths that should be treated
+    /// as styled-components imports, enabling the plugin to work with custom builds
+    /// or aliased imports of styled-components.
+    ///
+    /// **Note: This feature is not yet implemented in oxc.**
+    ///
+    /// Default: `[]`
+    #[serde(default)]
+    pub top_level_import_paths: Vec<String>,
+}
+
+const fn default_as_true() -> bool {
+    true
+}
+
+fn default_for_meaningless_file_names() -> Vec<String> {
+    vec![String::from("index")]
+}
+
+impl Default for StyledComponentsOptions {
+    /// Creates the default configuration for styled-components transformation.
+    ///
+    /// Most options are enabled by default to match the behavior of the official
+    /// Babel plugin. Note that some options like `cssProp` and `topLevelImportPaths`
+    /// are set but not yet implemented.
+    ///
+    /// The `pure` option is disabled by default to avoid potential issues with
+    /// tree-shaking in some bundlers.
+    fn default() -> Self {
+        Self {
+            display_name: true,
+            file_name: true,
+            ssr: true,
+            transpile_template_literals: true,
+            pure: false,
+            minify: true,
+            namespace: None,
+            css_prop: true,
+            meaningless_file_names: default_for_meaningless_file_names(),
+            top_level_import_paths: vec![],
+        }
+    }
+}
+
+/// Tracks symbol IDs for styled-components imports to identify which variables
+/// are bound to styled-components functionality.
+#[derive(Default)]
+struct StyledComponentsBinding {
+    /// `import * as styled from 'styled-components'`
+    namespace: Option<SymbolId>,
+    /// `import styled from 'styled-components'` or `import { default as styled } from 'styled-components'`
+    styled: Option<SymbolId>,
+    /// Named imports like `import { createGlobalStyle, css, keyframes } from 'styled-components'`
+    helpers: FxHashMap<String, SymbolId>,
+}
+
+pub struct StyledComponents<'a, 'ctx> {
+    pub options: StyledComponentsOptions,
+    pub ctx: &'ctx TransformCtx<'a>,
+
+    // State
+    /// Tracks which variables are bound to styled-components imports
+    styled_bindings: StyledComponentsBinding,
+    /// Counter for generating unique component IDs
+    component_count: usize,
+    /// Hash of the current file for component ID generation
+    file_hash: Option<&'a str>,
+}
+
+impl<'a, 'ctx> StyledComponents<'a, 'ctx> {
+    pub fn new(options: StyledComponentsOptions, ctx: &'ctx TransformCtx<'a>) -> Self {
+        Self {
+            options,
+            ctx,
+            styled_bindings: StyledComponentsBinding::default(),
+            file_hash: None,
+            component_count: 0,
+        }
+    }
+}
+
+impl<'a> Traverse<'a, TransformState<'a>> for StyledComponents<'a, '_> {
+    fn enter_program(&mut self, program: &mut Program<'a>, ctx: &mut TraverseCtx<'a>) {
+        self.collect_styled_bindings(program, ctx);
+    }
+
+    fn enter_variable_declarator(
+        &mut self,
+        variable_declarator: &mut VariableDeclarator<'a>,
+        ctx: &mut TraverseCtx<'a>,
+    ) {
+        self.handle_pure_annotation(variable_declarator, ctx);
+    }
+
+    fn enter_expression(&mut self, expr: &mut Expression<'a>, ctx: &mut TraverseCtx<'a>) {
+        if matches!(expr, Expression::TaggedTemplateExpression(_)) {
+            self.transform_tagged_template_expression(expr, ctx);
+        }
+    }
+
+    fn enter_call_expression(&mut self, call: &mut CallExpression<'a>, ctx: &mut TraverseCtx<'a>) {
+        if (self.options.display_name || self.options.ssr)
+            // Only transform call expression that is not a part of a member expression
+            // or a callee of another call expression.
+            && !matches!(
+                ctx.parent(),
+                Ancestor::CallExpressionCallee(_) | Ancestor::StaticMemberExpressionObject(_)
+            )
+        {
+            self.add_display_name_and_component_id(&mut call.callee, ctx);
+        }
+    }
+}
+
+impl<'a> StyledComponents<'a, '_> {
+    fn transform_tagged_template_expression(
+        &mut self,
+        expr: &mut Expression<'a>,
+        ctx: &TraverseCtx<'a>,
+    ) {
+        let Expression::TaggedTemplateExpression(tagged) = expr else {
+            return;
+        };
+
+        let is_styled = if self.options.display_name || self.options.ssr {
+            self.add_display_name_and_component_id(&mut tagged.tag, ctx)
+        } else {
+            self.is_styled(&tagged.tag, ctx)
+        };
+
+        if !is_styled
+            && !matches!(&tagged.tag, Expression::Identifier(ident) if self.is_helper(ident, ctx))
+        {
+            return;
+        }
+
+        if self.options.minify {
+            Self::minify_tagged_template_expression(tagged, ctx);
+        }
+
+        if self.options.transpile_template_literals {
+            *expr = Self::transpile_template_literals(tagged, ctx);
+        }
+    }
+
+    fn handle_pure_annotation(
+        &self,
+        declarator: &mut VariableDeclarator<'a>,
+        ctx: &TraverseCtx<'a>,
+    ) {
+        if !self.options.pure {
+            return;
+        }
+
+        // TODO: Support adding pure annotation to `TaggedTemplateExpression`.
+        // Note: As of now, no bundle can handle pure tagged template expressions.
+        // <https://github.com/rollup/rollup/issues/4035>
+        if let Some(Expression::CallExpression(call)) = &mut declarator.init {
+            if matches!(&call.callee, Expression::Identifier(ident) if self.is_pure_helper(ident, ctx))
+                || self.is_styled(&call.callee, ctx)
+            {
+                call.pure = true;
+            }
+        }
+    }
+
+    fn minify_tagged_template_expression(
+        expr: &mut TaggedTemplateExpression<'a>,
+        ctx: &TraverseCtx<'a>,
+    ) {
+        let TemplateLiteral { quasis, expressions, .. } = &mut expr.quasi;
+
+        let (new_raws, remained_expression_indices) = CssMinifier::minify_quasis(quasis, ctx.ast);
+
+        // Remove expressions that are not kept after minification.
+        for i in (0..expressions.len()).rev() {
+            if !remained_expression_indices.contains(&i) {
+                expressions.swap_remove(i);
+            }
+        }
+
+        // Update the quasis with the new raw values.
+        for (new_raw, quais) in new_raws.into_iter().zip(quasis.iter_mut()) {
+            quais.value.raw = new_raw;
+        }
+
+        // SAFETY:
+        unsafe {
+            quasis.set_len(expressions.len() + 1);
+        }
+    }
+
+    fn transpile_template_literals(
+        expr: &mut TaggedTemplateExpression<'a>,
+        ctx: &TraverseCtx<'a>,
+    ) -> Expression<'a> {
+        let TaggedTemplateExpression {
+            span,
+            tag,
+            quasi: TemplateLiteral { span: quasi_span, quasis, expressions },
+            type_arguments,
+        } = expr.take_in(ctx.ast.allocator);
+
+        let quasis_elements = ctx.ast.vec_from_iter(quasis.into_iter().map(|quasi| {
+            ArrayExpressionElement::from(ctx.ast.expression_string_literal(
+                quasi.span,
+                quasi.value.raw,
+                None,
+            ))
+        }));
+
+        let quasis = Argument::from(ctx.ast.expression_array(quasi_span, quasis_elements));
+        let arguments =
+            ctx.ast.vec_from_iter(once(quasis).chain(expressions.into_iter().map(Argument::from)));
+        ctx.ast.expression_call(span, tag, type_arguments, arguments, false)
+    }
+
+    fn add_display_name_and_component_id(
+        &mut self,
+        expr: &mut Expression<'a>,
+        ctx: &TraverseCtx<'a>,
+    ) -> bool {
+        if let Some(call) = Self::get_with_config(expr) {
+            if let Expression::StaticMemberExpression(member) = &call.callee {
+                if self.is_styled(&member.object, ctx) {
+                    if let Some(Argument::ObjectExpression(object)) = call.arguments.first_mut() {
+                        if !object.properties.iter().any(|prop| {
+                            matches!(prop, ObjectPropertyKind::ObjectProperty(property)
+                                if matches!(&property.key, PropertyKey::StaticIdentifier(ident)
+                                if matches!(ident.name.as_str(), "displayName" | "componentId"))
+                            )
+                        }) {
+                            self.add_properties(&mut object.properties, ctx);
+                        }
+                    }
+                }
+            }
+        } else if self.is_styled(expr, ctx) {
+            let mut properties = ctx.ast.vec_with_capacity(
+                usize::from(self.options.display_name) + usize::from(self.options.ssr),
+            );
+            self.add_properties(&mut properties, ctx);
+            let object = ctx.ast.alloc_object_expression(SPAN, properties);
+            let arguments = ctx.ast.vec1(Argument::ObjectExpression(object));
+            let object = expr.take_in(ctx.ast);
+            let property = ctx.ast.identifier_name(SPAN, "withConfig");
+            let callee =
+                Expression::from(ctx.ast.member_expression_static(SPAN, object, property, false));
+            let call = ctx.ast.expression_call(SPAN, callee, NONE, arguments, false);
+            *expr = call;
+        } else {
+            return false;
+        }
+
+        true
+    }
+
+    fn collect_styled_bindings(&mut self, program: &Program<'a>, _ctx: &mut TraverseCtx<'a>) {
+        for statement in &program.body {
+            let Statement::ImportDeclaration(import) = &statement else { continue };
+
+            if let Some(specifiers) = &import.specifiers {
+                if !is_valid_styled_component_source(&import.source.value) {
+                    continue;
+                }
+
+                for specifier in specifiers {
+                    match specifier {
+                        ImportDeclarationSpecifier::ImportSpecifier(specifier) => {
+                            let symbol_id = specifier.local.symbol_id();
+                            let imported_name = specifier.imported.name();
+                            match imported_name.as_str() {
+                                "default" => {
+                                    self.styled_bindings.styled = Some(symbol_id);
+                                }
+                                name if Self::is_helper_name(name) => {
+                                    self.styled_bindings
+                                        .helpers
+                                        .insert(name.to_string(), symbol_id);
+                                }
+                                _ => {}
+                            }
+                        }
+                        ImportDeclarationSpecifier::ImportDefaultSpecifier(specifier) => {
+                            self.styled_bindings.styled = Some(specifier.local.symbol_id());
+                        }
+                        ImportDeclarationSpecifier::ImportNamespaceSpecifier(specifier) => {
+                            self.styled_bindings.namespace = Some(specifier.local.symbol_id());
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    fn get_with_config<'b>(expr: &'b mut Expression<'a>) -> Option<&'b mut CallExpression<'a>> {
+        let is_with_config = |call: &CallExpression<'a>| {
+            if let Expression::StaticMemberExpression(member) = &call.callee {
+                member.property.name == "withConfig"
+            } else {
+                false
+            }
+        };
+
+        let mut current = expr;
+        loop {
+            match current {
+                Expression::CallExpression(call) => {
+                    if is_with_config(call) {
+                        return Some(call);
+                    }
+                    current = &mut call.callee;
+                }
+                Expression::StaticMemberExpression(member) => {
+                    current = &mut member.object;
+                }
+                _ => return None,
+            }
+        }
+    }
+
+    fn add_properties(
+        &mut self,
+        properties: &mut ArenaVec<'a, ObjectPropertyKind<'a>>,
+        ctx: &TraverseCtx<'a>,
+    ) {
+        if self.options.display_name {
+            let value = self.get_display_name(ctx);
+            properties.push(Self::create_object_property("displayName", value, ctx));
+        }
+        if self.options.ssr {
+            let value = Some(self.get_component_id(ctx));
+            properties.push(Self::create_object_property("componentId", value, ctx));
+        }
+    }
+
+    fn get_component_name(ctx: &TraverseCtx<'a>) -> Option<Atom<'a>> {
+        let mut assignment_name = None;
+
+        for ancestor in ctx.ancestors() {
+            match ancestor {
+                // `X = styled` or `X.prop = styled`
+                Ancestor::AssignmentExpressionRight(assignment) => {
+                    assignment_name = match assignment.left() {
+                        // we've got an displayName (if we need it) no need to continue
+                        // However if this is an assignment expression like X = styled then we
+                        // want to keep going up incase there is Y = X = styled; in this case we
+                        // want to pick the outer name because react-refresh will add HMR variables
+                        // like this: X = _a = styled. We could also consider only doing this if the
+                        // name starts with an underscore.
+                        AssignmentTarget::AssignmentTargetIdentifier(ident) => Some(ident.name),
+                        AssignmentTarget::StaticMemberExpression(member) => {
+                            Some(member.property.name)
+                        }
+                        _ => return None,
+                    };
+                }
+                // `const X = styled`
+                Ancestor::VariableDeclaratorInit(declarator) => {
+                    return if let BindingPatternKind::BindingIdentifier(ident) =
+                        &declarator.id().kind
+                    {
+                        Some(ident.name)
+                    } else {
+                        None
+                    };
+                }
+                // `const X = { Y: styled }`
+                Ancestor::ObjectPropertyValue(property) => {
+                    return if let PropertyKey::StaticIdentifier(ident) = property.key() {
+                        Some(ident.name)
+                    } else {
+                        None
+                    };
+                }
+                // `class Y { (static) X = styled }`
+                Ancestor::PropertyDefinitionValue(property) => {
+                    return if let PropertyKey::StaticIdentifier(ident) = property.key() {
+                        Some(ident.name)
+                    } else {
+                        None
+                    };
+                }
+                _ => {
+                    if ancestor.is_parent_of_statement() {
+                        // we've hit a statement, we should stop crawling up
+                        return assignment_name;
+                    }
+                }
+            }
+        }
+
+        unreachable!()
+    }
+
+    fn get_component_id(&mut self, ctx: &TraverseCtx<'a>) -> &'a str {
+        let namespace = self.options.namespace.as_ref().map_or("", |namespace| {
+            ctx.ast.allocator.alloc_concat_strs_array([namespace.as_str(), "__"])
+        });
+
+        let file_hash = self.get_file_hash(ctx);
+        let id = ctx.ast.allocator.alloc_concat_strs_array([
+            namespace,
+            "sc-",
+            file_hash,
+            "-",
+            itoa::Buffer::new().format(self.component_count),
+        ]);
+        self.component_count += 1;
+        id
+    }
+
+    fn get_file_hash(&mut self, ctx: &TraverseCtx<'a>) -> &'a str {
+        use rustc_hash::FxHasher;
+        use std::hash::{Hash, Hasher};
+
+        #[inline]
+        fn base36_encode<'a>(mut num: u64, ctx: &TraverseCtx<'a>) -> &'a str {
+            const BASE36_BYTES: &[u8] = b"abcdefghijklmnopqrstuvwxyz0123456789";
+
+            num %= 36_u64.pow(6); // 36^6, to ensure the result is <= 6 characters long.
+
+            let mut result = Vec::with_capacity(6);
+
+            while num != 0 {
+                result.push(BASE36_BYTES[(num % 36) as usize]);
+                num /= 36;
+            }
+
+            ctx.ast.allocator.alloc_str(
+                // SAFETY: the bytes are valid UTF-8 as they are ASCII characters.
+                unsafe { std::str::from_utf8_unchecked(&result) },
+            )
+        }
+
+        self.file_hash.get_or_insert_with(|| {
+            let mut hasher = FxHasher::default();
+            if self.ctx.source_path.is_relative() {
+                self.ctx.source_path.hash(&mut hasher);
+            } else {
+                self.ctx.source_text.hash(&mut hasher);
+            }
+
+            base36_encode(hasher.finish(), ctx)
+        })
+    }
+
+    fn get_display_name(&self, ctx: &TraverseCtx<'a>) -> Option<&'a str> {
+        let component_name = Self::get_component_name(ctx);
+
+        if self.options.file_name
+            && let Some(file_stem) = self.ctx.source_path.file_stem().and_then(|stem| stem.to_str())
+        {
+            let block_name = if self.options.meaningless_file_names.contains(&file_stem.to_string())
+            {
+                self.ctx
+                    .source_path
+                    .parent()
+                    .and_then(|parent| parent.file_name())
+                    .and_then(|name| name.to_str())
+                    .unwrap_or(file_stem)
+            } else {
+                file_stem
+            };
+
+            if let Some(component_name) = component_name {
+                if block_name == component_name {
+                    return Some(ctx.ast.str(component_name.as_str()));
+                }
+                return Some(
+                    ctx.ast
+                        .atom_from_strs_array([block_name, "__", component_name.as_str()])
+                        .as_str(),
+                );
+            }
+            return Some(ctx.ast.str(block_name));
+        }
+
+        component_name.map(|name| name.as_str())
+    }
+
+    /// Returns true if the given callee is a styled-components binding.
+    /// Handles various forms: styled.div, styled.default, styled(...), etc.
+    fn is_styled(&self, callee: &Expression<'a>, ctx: &TraverseCtx<'a>) -> bool {
+        match callee.without_parentheses() {
+            Expression::StaticMemberExpression(member) => {
+                if let Expression::Identifier(ident) = &member.object {
+                    !Self::is_helper_name(&member.property.name)
+                        && Self::is_reference_of_styled(self.styled_bindings.styled, ident, ctx)
+                } else if let Expression::StaticMemberExpression(static_member) = &member.object {
+                    // Handle `styled.default`
+                    static_member.property.name == "default"
+                        && matches!(&static_member.object, Expression::Identifier(ident)
+                        if Self::is_reference_of_styled(self.styled_bindings.namespace, ident, ctx))
+                } else {
+                    false
+                }
+            }
+            Expression::CallExpression(call) => match &call.callee {
+                Expression::Identifier(ident) => {
+                    Self::is_reference_of_styled(self.styled_bindings.styled, ident, ctx)
+                }
+                Expression::StaticMemberExpression(member) => self.is_styled(&member.object, ctx),
+                Expression::SequenceExpression(sequence) => {
+                    if let Some(last) = sequence.expressions.last() {
+                        match last {
+                            Expression::Identifier(ident) => Self::is_reference_of_styled(
+                                self.styled_bindings.styled,
+                                ident,
+                                ctx,
+                            ),
+                            Expression::StaticMemberExpression(member) => {
+                                self.is_styled(&member.object, ctx)
+                            }
+                            _ => false,
+                        }
+                    } else {
+                        false
+                    }
+                }
+                _ => false,
+            },
+            _ => false,
+        }
+    }
+
+    fn is_helper_name(name: &str) -> bool {
+        matches!(
+            name,
+            "createGlobalStyle" | "css" | "injectGlobal" | "keyframes" | "withTheme" | "useTheme"
+        )
+    }
+
+    fn is_helper(&self, ident: &IdentifierReference<'a>, ctx: &TraverseCtx<'a>) -> bool {
+        self.styled_bindings.helpers.get(ident.name.as_str()).is_some_and(|symbol_id| {
+            let reference_id = ident.reference_id();
+            ctx.scoping()
+                .get_reference(reference_id)
+                .symbol_id()
+                .is_some_and(|reference_symbol_id| reference_symbol_id == *symbol_id)
+        })
+    }
+
+    fn is_pure_helper(&self, ident: &IdentifierReference<'a>, ctx: &TraverseCtx<'a>) -> bool {
+        ident.name != "injectGlobal" && self.is_helper(ident, ctx)
+    }
+
+    fn is_reference_of_styled(
+        styled_binding: Option<SymbolId>,
+        ident: &IdentifierReference<'a>,
+        ctx: &TraverseCtx<'a>,
+    ) -> bool {
+        styled_binding.is_some_and(|styled_binding| {
+            let reference_id = ident.reference_id();
+            ctx.scoping()
+                .get_reference(reference_id)
+                .symbol_id()
+                .is_some_and(|reference_symbol_id| reference_symbol_id == styled_binding)
+        })
+    }
+
+    fn create_object_property(
+        key: &'static str,
+        value: Option<&'a str>,
+        ctx: &TraverseCtx<'a>,
+    ) -> ObjectPropertyKind<'a> {
+        let key = ctx.ast.property_key_static_identifier(SPAN, key);
+        let value = ctx.ast.expression_string_literal(SPAN, value.unwrap_or(""), None);
+        ctx.ast.object_property_kind_object_property(
+            SPAN,
+            PropertyKind::Init,
+            key,
+            value,
+            false,
+            false,
+            false,
+        )
+    }
+}
+
+fn is_valid_styled_component_source(source: &str) -> bool {
+    matches!(
+        source,
+        "styled-components"
+            | "styled-components/no-tags"
+            | "styled-components/native"
+            | "styled-components/primitives"
+    )
+}
+
+pub struct CssMinifier<'a> {
+    ast: AstBuilder<'a>,
+}
+
+impl<'a> CssMinifier<'a> {
+    const PLACEHOLDER_PREFIX: &'static str = "__PLACEHOLDER_";
+    const PLACEHOLDER_SUFFIX: &'static str = "__";
+
+    pub fn new(ast: AstBuilder<'a>) -> Self {
+        Self { ast }
+    }
+
+    pub fn minify_quasis(
+        quasis: &[TemplateElement<'a>],
+        ast: AstBuilder<'a>,
+    ) -> (Vec<Atom<'a>>, FxHashSet<usize>) {
+        let minifier = Self::new(ast);
+
+        let css = if quasis.len() == 1 {
+            &quasis[0].value.raw
+        } else {
+            minifier.inject_unique_placeholders(quasis)
+        };
+
+        minifier.minify_css(css)
+    }
+
+    fn inject_unique_placeholders(&self, quasis: &[TemplateElement]) -> &str {
+        let estimated_capacity: usize = quasis.iter().map(|s| s.value.raw.len()).sum::<usize>()
+            + (quasis.len() - 1)
+                * (Self::PLACEHOLDER_PREFIX.len() + Self::PLACEHOLDER_SUFFIX.len() + 2); // 2 for digits
+
+        let mut result = StringBuilder::with_capacity_in(estimated_capacity, self.ast.allocator);
+
+        for (index, val) in quasis.iter().enumerate() {
+            result.push_str(&val.value.raw);
+            if index < quasis.len() - 1 {
+                result.push_str(Self::PLACEHOLDER_PREFIX);
+                result.push_str(itoa::Buffer::new().format(index));
+                result.push_str(Self::PLACEHOLDER_SUFFIX);
+            }
+        }
+
+        result.into_str()
+    }
+
+    #[inline]
+    fn try_parse_placeholder(bytes: &[u8], pos: usize) -> Option<(usize, usize)> {
+        let mut i = pos + Self::PLACEHOLDER_PREFIX.len();
+
+        let mut number = 0usize;
+        let mut has_digits = false;
+
+        while i < bytes.len() {
+            let cur_byte = bytes[i];
+
+            if !cur_byte.is_ascii_digit() {
+                break;
+            }
+
+            number = number * 10 + (cur_byte - b'0') as usize;
+            has_digits = true;
+            i += 1;
+        }
+
+        if !has_digits ||
+            // Checking suffix `__`
+            !bytes[i..].starts_with(Self::PLACEHOLDER_SUFFIX.as_bytes())
+        {
+            return None;
+        }
+
+        Some((number, i + Self::PLACEHOLDER_SUFFIX.len()))
+    }
+
+    pub(super) fn minify_css(&self, css: &str) -> (Vec<Atom<'a>>, FxHashSet<usize>) {
+        if css.trim().is_empty() {
+            return (Vec::new(), FxHashSet::default());
+        }
+
+        let mut i = 0;
+        let bytes = css.as_bytes();
+
+        let mut output = Vec::new();
+        let mut new_raws = Vec::new();
+        let mut remaining_expression_indexes = FxHashSet::default();
+
+        // Context state;
+        let mut in_string: bool = false;
+        let mut string_char: u8 = 0;
+        let mut paren_depth: i32 = 0;
+
+        while i < bytes.len() {
+            let cur_byte = bytes[i];
+            match cur_byte {
+                // Handle string
+                b'"' | b'\'' if !in_string => {
+                    in_string = true;
+                    string_char = cur_byte;
+                }
+                c if in_string && c == string_char && !Self::is_escaped(bytes, i) => {
+                    in_string = false;
+                }
+                // Handle placeholders
+                b'_' if bytes[i..].starts_with(Self::PLACEHOLDER_PREFIX.as_bytes()) => {
+                    if let Some((number, new_index)) = Self::try_parse_placeholder(bytes, i) {
+                        remaining_expression_indexes.insert(number);
+
+                        new_raws.push(self.ast.atom(
+                            // SAFETY: Output is all picked from the original `raw_values` and is guaranteed
+                            // to be valid UTF-8.
+                            unsafe { std::str::from_utf8_unchecked(&output) },
+                        ));
+
+                        // Clear output buffer, this is efficient as we reuse the same allocation.
+                        output.clear();
+
+                        i = new_index;
+                        continue;
+                    }
+                }
+                // Keep characters as-is if it's a part of a string
+                _ if in_string => {}
+                b'(' => {
+                    paren_depth += 1;
+                }
+                b')' => {
+                    paren_depth -= 1;
+                }
+                // Handle comments
+                b'/' if i + 1 < bytes.len() => {
+                    match bytes[i + 1] {
+                        // Skip multiline comments except for `/*! ... */`
+                        b'*' if i + 2 < bytes.len() && bytes[i + 2] != b'!' => {
+                            i = Self::skip_multiline_comment(bytes, i);
+                            // Adding a space when this is a own line block comment
+                            if i < bytes.len()
+                                && !bytes[i].is_ascii_whitespace()
+                                && output.last().is_some_and(|&last| last != b' ')
+                            {
+                                output.push(b' ');
+                            }
+                            continue;
+                        }
+                        // Skip line comments, avoid `https://`
+                        b'/' if paren_depth == 0 && (i == 0 || bytes[i - 1] != b':') => {
+                            i = Self::skip_line_comment(bytes, i);
+                            continue;
+                        }
+                        _ => {}
+                    }
+                }
+                // Skip escaped newlines
+                b'\\' if i + 1 < bytes.len() => {
+                    let next_byte = bytes[i + 1];
+                    if matches!(next_byte, b'n' | b'r') {
+                        i += 2;
+                        if output.last().is_some_and(|&last| last != b' ') {
+                            output.push(b' ');
+                        }
+                        continue;
+                    }
+                }
+
+                // Skip whitespace
+                c if c.is_ascii_whitespace() => {
+                    i += 1;
+                    // Compress symbols, remove spaces around these symbols,
+                    // but preserve whitespace preceding colon, to avoid joining selectors.
+                    if output.last().is_some_and(|&last| {
+                        !matches!(last, b' ' | b':' | b'{' | b'}' | b',' | b';')
+                    }) && (i < bytes.len() && !matches!(bytes[i], b'{' | b'}' | b',' | b';'))
+                    {
+                        output.push(b' ');
+                    }
+                    continue;
+                }
+                _ => {}
+            }
+
+            output.push(cur_byte);
+            i += 1;
+        }
+
+        // Handle remaining output
+        new_raws.push(self.ast.atom(
+            // SAFETY: Output is all picked from the original `raw_values` and is guaranteed
+            // to be valid UTF-8.
+            unsafe { std::str::from_utf8_unchecked(&output) },
+        ));
+
+        (new_raws, remaining_expression_indexes)
+    }
+
+    // Returns `true` if the character is escaped, `false` otherwise.
+    fn is_escaped(bytes: &[u8], pos: usize) -> bool {
+        if pos == 0 {
+            return false;
+        }
+
+        let mut backslash_count = 0;
+        let mut i = pos;
+
+        while i > 0 && bytes[i - 1] == b'\\' {
+            backslash_count += 1;
+            i -= 1;
+        }
+
+        backslash_count % 2 == 1
+    }
+
+    #[inline]
+    fn skip_multiline_comment(bytes: &[u8], start: usize) -> usize {
+        let mut i = start + 2; // Skip /*
+
+        while i + 1 < bytes.len() {
+            if bytes[i] == b'*' && bytes[i + 1] == b'/' {
+                return i + 2;
+            }
+            i += 1;
+        }
+
+        i
+    }
+
+    #[inline]
+    fn skip_line_comment(bytes: &[u8], start: usize) -> usize {
+        let mut i = start;
+        while i < bytes.len() && !matches!(bytes[i], b'\n' | b'\r') {
+            i += 1;
+        }
+        i
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use oxc_allocator::Allocator;
+    use oxc_ast::AstBuilder;
+
+    fn minify_raw(input: &str) -> String {
+        let allocator = Allocator::default();
+        let ast = AstBuilder::new(&allocator);
+        let (parts, _) = CssMinifier::new(ast).minify_css(input);
+
+        if parts.is_empty() { String::new() } else { parts[0].to_string() }
+    }
+
+    mod strip_line_comment {
+        use super::*;
+
+        #[test]
+        fn splits_line_by_potential_comment_starts() {
+            let actual = minify_raw("abc def//ghi//jkl");
+            debug_assert_eq!(actual, "abc def");
+        }
+
+        #[test]
+        fn ignores_comment_markers_inside_strings() {
+            let actual1 = minify_raw(r#"abc def"//"ghi'//'jkl//the end"#);
+            debug_assert_eq!(actual1, r#"abc def"//"ghi'//'jkl"#);
+
+            let actual2 = minify_raw(r#"abc def"//""#);
+            debug_assert_eq!(actual2, r#"abc def"//""#);
+        }
+
+        #[test]
+        fn ignores_comment_markers_inside_parentheses() {
+            let actual = minify_raw("bla (//) bla//the end");
+            debug_assert_eq!(actual, "bla (//) bla");
+        }
+
+        #[test]
+        fn ignores_even_unescaped_urls() {
+            let actual = minify_raw("https://test.com// comment//");
+            debug_assert_eq!(actual, "https://test.com");
+        }
+    }
+
+    mod minify_raw {
+        use super::*;
+
+        #[test]
+        fn removes_multi_line_comments() {
+            let input = "this is a/* ignore me please */test";
+            let expected = "this is a test";
+            let actual = minify_raw(input);
+            debug_assert_eq!(actual, expected);
+        }
+
+        #[test]
+        fn joins_all_lines_of_code() {
+            let input = "this\nis\na/* ignore me \n please */\ntest";
+            let expected = "this is a test";
+            let actual = minify_raw(input);
+            debug_assert_eq!(actual, expected);
+        }
+
+        #[test]
+        fn removes_line_comments_filling_entire_line() {
+            let input = "line one\n// remove this comment\nline two";
+            let expected = "line one line two";
+            let actual = minify_raw(input);
+            debug_assert_eq!(actual, expected);
+        }
+
+        #[test]
+        fn removes_line_comments_at_end_of_lines() {
+            let input = "valid line with // a comment\nout comments";
+            let expected = "valid line with out comments";
+            let actual = minify_raw(input);
+            debug_assert_eq!(actual, expected);
+        }
+
+        #[test]
+        fn preserves_multi_line_comments_starting_with_bang() {
+            let input = "this is a /*! dont ignore me please */ test/* but you can ignore me */";
+            let expected = "this is a /*! dont ignore me please */ test";
+            let actual = minify_raw(input);
+            debug_assert_eq!(actual, expected);
+        }
+
+        #[test]
+        fn returns_indices_of_removed_placeholders() {
+            let allocator = Box::leak(Box::new(Allocator::default()));
+            let ast = AstBuilder::new(allocator);
+
+            // Create raw values that will generate placeholders
+            let css = "this is some\ninput with __PLACEHOLDER_0__ and // ignored __PLACEHOLDER_1__";
+            let (parts, remaining_indices) = CssMinifier::new(ast).minify_css(css);
+
+            // Verify the content is properly minified
+            debug_assert!(!parts.is_empty());
+            let combined = parts.join("");
+            debug_assert!(combined.contains("this is some input with"));
+            debug_assert!(!combined.contains("// ignored"));
+
+            debug_assert!(remaining_indices.contains(&0));
+        }
+
+        mod minify_raw_specific {
+            use super::*;
+
+            #[test]
+            fn works_with_raw_escape_codes() {
+                let input = "this\\nis\\na/* ignore me \\n please */\\ntest";
+                let expected = "this is a test";
+                let actual = minify_raw(input);
+                debug_assert_eq!(actual, expected);
+            }
+        }
+
+        mod compress_symbols {
+            use super::*;
+
+            #[test]
+            fn removes_spaces_around_symbols() {
+                let input = ";  :  {  }  ,  ;  ";
+                let expected = ";:{},;";
+                let actual = minify_raw(input);
+                debug_assert_eq!(actual, expected);
+            }
+
+            #[test]
+            fn ignores_symbols_inside_strings() {
+                let input = r#";   " : " ' : ' ;"#;
+                let expected = r#";" : " ' : ';"#;
+                let actual = minify_raw(input);
+                debug_assert_eq!(actual, expected);
+            }
+
+            #[test]
+            fn preserves_whitespace_preceding_colons() {
+                let input = "& :last-child { color: blue; }";
+                let expected = "& :last-child{color:blue;}";
+                let actual = minify_raw(input);
+                debug_assert_eq!(actual, expected);
+            }
+        }
+    }
+}
diff --git a/napi/transform/src/transformer.rs b/napi/transform/src/transformer.rs
index ba962e13e93e9..9a6036e91887d 100644
--- a/napi/transform/src/transformer.rs
+++ b/napi/transform/src/transformer.rs
@@ -19,8 +19,8 @@ use oxc::{
     semantic::{SemanticBuilder, SemanticBuilderReturn},
     span::SourceType,
     transformer::{
-        EnvOptions, HelperLoaderMode, HelperLoaderOptions, JsxRuntime, ProposalOptions,
-        RewriteExtensionsMode,
+        EnvOptions, HelperLoaderMode, HelperLoaderOptions, JsxRuntime, PluginsOptions,
+        ProposalOptions, RewriteExtensionsMode,
     },
     transformer_plugins::{
         InjectGlobalVariablesConfig, InjectImport, ModuleRunnerTransform,
@@ -182,6 +182,7 @@ impl TryFrom<TransformOptions> for oxc::transformer::TransformOptions {
             helper_loader: options
                 .helpers
                 .map_or_else(HelperLoaderOptions::default, HelperLoaderOptions::from),
+            plugins: PluginsOptions::default(),
         })
     }
 }
diff --git a/tasks/transform_conformance/snapshots/oxc.snap.md b/tasks/transform_conformance/snapshots/oxc.snap.md
index 58b80109d1ef9..d102e6d1ad50a 100644
--- a/tasks/transform_conformance/snapshots/oxc.snap.md
+++ b/tasks/transform_conformance/snapshots/oxc.snap.md
@@ -1,6 +1,6 @@
 commit: 1d4546bc
 
-Passed: 156/259
+Passed: 176/293
 
 # All Passed:
 * babel-plugin-transform-class-static-block
@@ -1417,3 +1417,47 @@ after transform: ["Function", "babelHelpers"]
 rebuilt        : ["babelHelpers", "dec"]
 
 
+# plugin-styled-components (20/34)
+* styled-components/add-identifier-with-top-level-import-paths/input.js
+x Output mismatch
+
+* styled-components/add-identifier-with-top-level-import-paths-and-named-import/input.js
+x Output mismatch
+
+* styled-components/annotate-create-global-style-with-pure-comments/input.js
+x Output mismatch
+
+* styled-components/annotate-css-with-pure-comments/input.js
+x Output mismatch
+
+* styled-components/annotate-styled-calls-with-pure-comments/input.js
+x Output mismatch
+
+* styled-components/css-declared-after-component/input.jsx
+x Output mismatch
+
+* styled-components/does-not-replace-native-with-no-tags/input.js
+x Output mismatch
+
+* styled-components/pre-transpiled/input.js
+x Output mismatch
+
+* styled-components/transformed-imports-with-jsx-member-expressions/input.jsx
+x Output mismatch
+
+* styled-components/transpile-css-prop/input.jsx
+x Output mismatch
+
+* styled-components/transpile-css-prop-add-import/input.jsx
+x Output mismatch
+
+* styled-components/transpile-css-prop-add-require/input.jsx
+x Output mismatch
+
+* styled-components/transpile-css-prop-all-options-on/input.jsx
+x Output mismatch
+
+* styled-components/transpile-require-default/input.js
+x Output mismatch
+
+
diff --git a/tasks/transform_conformance/src/constants.rs b/tasks/transform_conformance/src/constants.rs
index 942f3b406bf6f..e634f71414b17 100644
--- a/tasks/transform_conformance/src/constants.rs
+++ b/tasks/transform_conformance/src/constants.rs
@@ -61,6 +61,8 @@ pub const PLUGINS: &[&str] = &[
     "regexp",
     // Legacy decorators, tests almost ported from TypeScript
     "legacy-decorators",
+    // Built-in third-party plugins
+    "plugin-styled-components",
 ];
 
 pub const PLUGINS_NOT_SUPPORTED_YET: &[&str] = &[
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-display-names/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-display-names/input.js
new file mode 100644
index 0000000000000..f79c564d86ff3
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-display-names/input.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+
+const Test = styled.div`
+  width: 100%;
+`
+const Test2 = styled('div')``
+const Test3 = true ? styled.div`` : styled.div``
+const styles = { One: styled.div`` }
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``
+class ClassComponent {
+  static Child = styled.div``
+}
+var GoodName = BadName = styled.div``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-display-names/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-display-names/options.json
new file mode 100644
index 0000000000000..f2a1b369ff5fb
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-display-names/options.json
@@ -0,0 +1,18 @@
+{
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": false,
+        "fileName": false,
+        "transpileTemplateLiterals": false
+      }
+    ],
+    [
+      "transform-class-properties",
+      {
+        "loose": true
+      }
+    ]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-display-names/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-display-names/output.js
new file mode 100644
index 0000000000000..1ea4816b0f3ef
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-display-names/output.js
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+const Test = styled.div.withConfig({
+  displayName: "Test"
+})`width:100%;`;
+const Test2 = styled('div').withConfig({
+  displayName: "Test2"
+})``;
+const Test3 = true ? styled.div.withConfig({
+  displayName: "Test3"
+})`` : styled.div.withConfig({
+  displayName: "Test3"
+})``;
+const styles = {
+  One: styled.div.withConfig({
+    displayName: "One"
+  })``
+};
+let Component;
+Component = styled.div.withConfig({
+  displayName: "Component"
+})``;
+const WrappedComponent = styled(Inner).withConfig({
+  displayName: "WrappedComponent"
+})``;
+class ClassComponent {}
+ClassComponent.Child = styled.div.withConfig({
+  displayName: "Child"
+})``;
+var GoodName = BadName = styled.div.withConfig({
+  displayName: "GoodName"
+})``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/input.js
new file mode 100644
index 0000000000000..2d5143896cbcf
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/input.js
@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+
+const Test = styled.div`
+  width: 100%;
+`
+const Test2 = true ? styled.div`` : styled.div``
+const styles = { One: styled.div`` }
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``
+const WrappedComponent2 = styled.div({})
+const WrappedComponent3 = styled(Inner)({})
+const WrappedComponent4 = styled(Inner).attrs(() => ({ something: 'else' }))({})
+const WrappedComponent5 = styled.div.attrs(() => ({ something: 'else' }))({})
+const WrappedComponent6 = styled.div.attrs(() => ({ something: 'else' }))``
+const WrappedComponent7 = styled.div.withConfig({
+  shouldForwardProp: () => {},
+})({})
+
+const WrappedComponent8 = styled.div
+  .withConfig({
+    shouldForwardProp: () => {},
+  })
+  .attrs(() => ({ something: 'else' }))({})
+
+const WrappedComponent9 = styled.div
+  .attrs(() => ({ something: 'else' }))
+  .withConfig({
+    shouldForwardProp: () => {},
+  })({})
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/options.json
new file mode 100644
index 0000000000000..17f3a07512429
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "fileName": false,
+      "transpileTemplateLiterals": false,
+      "ssr": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/output.js
new file mode 100644
index 0000000000000..6f500ef1247c5
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/output.js
@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+const Test = styled.div.withConfig({
+  displayName: "Test",
+  componentId: "sc-mkpq9u-0"
+})`width:100%;`;
+const Test2 = true ? styled.div.withConfig({
+  displayName: "Test2",
+  componentId: "sc-mkpq9u-1"
+})`` : styled.div.withConfig({
+  displayName: "Test2",
+  componentId: "sc-mkpq9u-2"
+})``;
+const styles = {
+  One: styled.div.withConfig({
+    displayName: "One",
+    componentId: "sc-mkpq9u-3"
+  })``
+};
+let Component;
+Component = styled.div.withConfig({
+  displayName: "Component",
+  componentId: "sc-mkpq9u-4"
+})``;
+const WrappedComponent = styled(Inner).withConfig({
+  displayName: "WrappedComponent",
+  componentId: "sc-mkpq9u-5"
+})``;
+const WrappedComponent2 = styled.div.withConfig({
+  displayName: "WrappedComponent2",
+  componentId: "sc-mkpq9u-6"
+})({});
+const WrappedComponent3 = styled(Inner).withConfig({
+  displayName: "WrappedComponent3",
+  componentId: "sc-mkpq9u-7"
+})({});
+const WrappedComponent4 = styled(Inner).attrs(() => ({
+  something: 'else'
+})).withConfig({
+  displayName: "WrappedComponent4",
+  componentId: "sc-mkpq9u-8"
+})({});
+const WrappedComponent5 = styled.div.attrs(() => ({
+  something: 'else'
+})).withConfig({
+  displayName: "WrappedComponent5",
+  componentId: "sc-mkpq9u-9"
+})({});
+const WrappedComponent6 = styled.div.attrs(() => ({
+  something: 'else'
+})).withConfig({
+  displayName: "WrappedComponent6",
+  componentId: "sc-mkpq9u-10"
+})``;
+const WrappedComponent7 = styled.div.withConfig({
+  shouldForwardProp: () => { },
+  displayName: "WrappedComponent7",
+  componentId: "sc-mkpq9u-11"
+})({});
+const WrappedComponent8 = styled.div.withConfig({
+  shouldForwardProp: () => { },
+  displayName: "WrappedComponent8",
+  componentId: "sc-mkpq9u-12"
+}).attrs(() => ({
+  something: 'else'
+}))({});
+const WrappedComponent9 = styled.div.attrs(() => ({
+  something: 'else'
+})).withConfig({
+  shouldForwardProp: () => { },
+  displayName: "WrappedComponent9",
+  componentId: "sc-mkpq9u-13"
+})({});
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths-and-named-import/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths-and-named-import/input.js
new file mode 100644
index 0000000000000..cc95461ae66c9
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths-and-named-import/input.js
@@ -0,0 +1,10 @@
+import { styled } from '../../relative/example'
+
+const Test = styled.div`
+  width: 100%;
+`
+const Test2 = true ? styled.div`` : styled.div``
+const styles = { One: styled.div`` }
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths-and-named-import/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths-and-named-import/options.json
new file mode 100644
index 0000000000000..150c63b7c0de8
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths-and-named-import/options.json
@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "displayName": true,
+      "fileName": false,
+      "ssr": true,
+      "topLevelImportPaths": ["*(../)**/example"],
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths-and-named-import/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths-and-named-import/output.js
new file mode 100644
index 0000000000000..6b98714b5b535
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths-and-named-import/output.js
@@ -0,0 +1,27 @@
+import { styled } from '../../relative/example';
+const Test = styled.div.withConfig({
+  displayName: "Test",
+  componentId: "sc-elhbfv-0"
+})`width:100%;`;
+const Test2 = true ? styled.div.withConfig({
+  displayName: "Test2",
+  componentId: "sc-elhbfv-1"
+})`` : styled.div.withConfig({
+  displayName: "Test2",
+  componentId: "sc-elhbfv-2"
+})``;
+const styles = {
+  One: styled.div.withConfig({
+    displayName: "One",
+    componentId: "sc-elhbfv-3"
+  })``
+};
+let Component;
+Component = styled.div.withConfig({
+  displayName: "Component",
+  componentId: "sc-elhbfv-4"
+})``;
+const WrappedComponent = styled(Inner).withConfig({
+  displayName: "WrappedComponent",
+  componentId: "sc-elhbfv-5"
+})``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths/input.js
new file mode 100644
index 0000000000000..3da966e9cc1e7
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths/input.js
@@ -0,0 +1,12 @@
+import styled from '@xstyled/styled-components'
+import unstyled from '@xstyled/styled-components-test'
+
+const Test = styled.div`
+  width: 100%;
+`
+const Test2 = true ? styled.div`` : styled.div``
+const styles = { One: styled.div`` }
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``
+const NoTransformComponent = unstyled.div``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths/options.json
new file mode 100644
index 0000000000000..3d7ab4689a2ee
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths/options.json
@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "displayName": false,
+      "fileName": false,
+      "ssr": true,
+      "topLevelImportPaths": [
+        "@xstyled/styled-components",
+        "@xstyled/styled-components/*"
+      ],
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths/output.js
new file mode 100644
index 0000000000000..b6671a86c98e1
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-with-top-level-import-paths/output.js
@@ -0,0 +1,23 @@
+import styled from '@xstyled/styled-components';
+import unstyled from '@xstyled/styled-components-test';
+const Test = styled.div.withConfig({
+  componentId: "sc-1mlyrvc-0"
+})`width:100%;`;
+const Test2 = true ? styled.div.withConfig({
+  componentId: "sc-1mlyrvc-1"
+})`` : styled.div.withConfig({
+  componentId: "sc-1mlyrvc-2"
+})``;
+const styles = {
+  One: styled.div.withConfig({
+    componentId: "sc-1mlyrvc-3"
+  })``
+};
+let Component;
+Component = styled.div.withConfig({
+  componentId: "sc-1mlyrvc-4"
+})``;
+const WrappedComponent = styled(Inner).withConfig({
+  componentId: "sc-1mlyrvc-5"
+})``;
+const NoTransformComponent = unstyled.div``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/input.js
new file mode 100644
index 0000000000000..3261233fc5958
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/input.js
@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+const Test = styled.div`
+  width: 100%;
+`
+const Test2 = true ? styled.div`` : styled.div``
+const styles = { One: styled.div`` }
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/options.json
new file mode 100644
index 0000000000000..840f9abf07b0f
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/options.json
@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "displayName": false,
+      "fileName": false,
+      "transpileTemplateLiterals": false,
+      "ssr": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/output.js
new file mode 100644
index 0000000000000..e69632966692e
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/output.js
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+const Test = styled.div.withConfig({
+  componentId: "sc-80sor8-0"
+})`width:100%;`;
+const Test2 = true ? styled.div.withConfig({
+  componentId: "sc-80sor8-1"
+})`` : styled.div.withConfig({
+  componentId: "sc-80sor8-2"
+})``;
+const styles = {
+  One: styled.div.withConfig({
+    componentId: "sc-80sor8-3"
+  })``
+};
+let Component;
+Component = styled.div.withConfig({
+  componentId: "sc-80sor8-4"
+})``;
+const WrappedComponent = styled(Inner).withConfig({
+  componentId: "sc-80sor8-5"
+})``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/allow-chains-of-member-calls/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/allow-chains-of-member-calls/input.js
new file mode 100644
index 0000000000000..70afb5d187828
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/allow-chains-of-member-calls/input.js
@@ -0,0 +1,4 @@
+import styled from 'styled-components'
+
+const WithAttrs = styled.div.attrs({ some: 'value' })``
+const WithAttrsWrapped = styled(Inner).attrs({ some: 'value' })``
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/allow-chains-of-member-calls/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/allow-chains-of-member-calls/options.json
new file mode 100644
index 0000000000000..efb4da69f2dd0
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/allow-chains-of-member-calls/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "fileName": false,
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/allow-chains-of-member-calls/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/allow-chains-of-member-calls/output.js
new file mode 100644
index 0000000000000..1800ec79fc3a7
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/allow-chains-of-member-calls/output.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+const WithAttrs = styled.div.attrs({
+  some: 'value'
+}).withConfig({
+  displayName: "WithAttrs"
+})``;
+const WithAttrsWrapped = styled(Inner).attrs({
+  some: 'value'
+}).withConfig({
+  displayName: "WithAttrsWrapped"
+})``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-create-global-style-with-pure-comments/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-create-global-style-with-pure-comments/input.js
new file mode 100644
index 0000000000000..d246beafe40bb
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-create-global-style-with-pure-comments/input.js
@@ -0,0 +1,7 @@
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    color: red;
+  }
+`
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-create-global-style-with-pure-comments/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-create-global-style-with-pure-comments/options.json
new file mode 100644
index 0000000000000..f774b7e97a38f
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-create-global-style-with-pure-comments/options.json
@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "pure": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-create-global-style-with-pure-comments/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-create-global-style-with-pure-comments/output.js
new file mode 100644
index 0000000000000..a067223cd779a
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-create-global-style-with-pure-comments/output.js
@@ -0,0 +1,2 @@
+import { createGlobalStyle } from 'styled-components';
+const GlobalStyle = /*#__PURE__*/createGlobalStyle(["body{color:red;}"]);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-css-with-pure-comments/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-css-with-pure-comments/input.js
new file mode 100644
index 0000000000000..b4324bd0384a1
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-css-with-pure-comments/input.js
@@ -0,0 +1,10 @@
+import styled, { css } from 'styled-components'
+
+const partial = css`
+  color: red;
+`
+
+const Component = styled.div`
+  ${partial};
+  background: blue;
+`
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-css-with-pure-comments/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-css-with-pure-comments/options.json
new file mode 100644
index 0000000000000..16c4d39b1a838
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-css-with-pure-comments/options.json
@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "pure": true,
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-css-with-pure-comments/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-css-with-pure-comments/output.js
new file mode 100644
index 0000000000000..8b6f360605e13
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-css-with-pure-comments/output.js
@@ -0,0 +1,6 @@
+import styled, { css } from 'styled-components';
+const partial = /*#__PURE__*/css`color:red;`;
+const Component = /*#__PURE__*/styled.div.withConfig({
+  displayName: "input__Component",
+  componentId: "sc-4wpzk3-0"
+})`${partial};background:blue;`;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-keyframes-with-pure-comments/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-keyframes-with-pure-comments/input.js
new file mode 100644
index 0000000000000..d22b2782e1c10
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-keyframes-with-pure-comments/input.js
@@ -0,0 +1,11 @@
+import { keyframes } from 'styled-components'
+
+const Animation = keyframes`
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+`
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-keyframes-with-pure-comments/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-keyframes-with-pure-comments/options.json
new file mode 100644
index 0000000000000..16c4d39b1a838
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-keyframes-with-pure-comments/options.json
@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "pure": true,
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-keyframes-with-pure-comments/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-keyframes-with-pure-comments/output.js
new file mode 100644
index 0000000000000..63dcf7dedd6b4
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-keyframes-with-pure-comments/output.js
@@ -0,0 +1,2 @@
+import { keyframes } from 'styled-components';
+const Animation = /*#__PURE__*/keyframes`0%{opacity:0;}100%{opacity:1;}`;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-styled-calls-with-pure-comments/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-styled-calls-with-pure-comments/input.js
new file mode 100644
index 0000000000000..740cb19edf90a
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-styled-calls-with-pure-comments/input.js
@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+const Test = styled.div`
+  width: 100%;
+`
+const Test2 = styled('div')``
+const Test3 = true ? styled.div`` : styled.div``
+const styles = { One: styled.div`` }
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``
+const StyledObjectForm = styled.div({ color: red })
+const StyledFunctionForm = styled.div(p => ({ color: p.color || 'red' }))
+const normalFunc = add(5, 3)
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-styled-calls-with-pure-comments/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-styled-calls-with-pure-comments/options.json
new file mode 100644
index 0000000000000..f774b7e97a38f
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-styled-calls-with-pure-comments/options.json
@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "pure": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-styled-calls-with-pure-comments/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-styled-calls-with-pure-comments/output.js
new file mode 100644
index 0000000000000..ea1db883e4f5a
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-styled-calls-with-pure-comments/output.js
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+const Test = /*#__PURE__*/styled.div.withConfig({
+  displayName: "input__Test",
+  componentId: "sc-u20i28-0"
+})(["width:100%;"]);
+const Test2 = /*#__PURE__*/styled('div').withConfig({
+  displayName: "input__Test2",
+  componentId: "sc-u20i28-1"
+})([""]);
+const Test3 = true ? styled.div.withConfig({
+  displayName: "input__Test3",
+  componentId: "sc-u20i28-2"
+})([""]) : styled.div.withConfig({
+  displayName: "input__Test3",
+  componentId: "sc-u20i28-3"
+})([""]);
+const styles = {
+  One: styled.div.withConfig({
+    displayName: "input__One",
+    componentId: "sc-u20i28-4"
+  })([""])
+};
+let Component;
+Component = styled.div.withConfig({
+  displayName: "input__Component",
+  componentId: "sc-u20i28-5"
+})([""]);
+const WrappedComponent = /*#__PURE__*/styled(Inner).withConfig({
+  displayName: "input__WrappedComponent",
+  componentId: "sc-u20i28-6"
+})([""]);
+const StyledObjectForm = /*#__PURE__*/styled.div.withConfig({
+  displayName: "input__StyledObjectForm",
+  componentId: "sc-u20i28-7"
+})({
+  color: red
+});
+const StyledFunctionForm = /*#__PURE__*/styled.div.withConfig({
+  displayName: "input__StyledFunctionForm",
+  componentId: "sc-u20i28-8"
+})(p => ({
+  color: p.color || 'red'
+}));
+const normalFunc = add(5, 3);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-withtheme-with-pure-comments/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-withtheme-with-pure-comments/input.js
new file mode 100644
index 0000000000000..c3a18b0179bb4
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-withtheme-with-pure-comments/input.js
@@ -0,0 +1,3 @@
+import { withTheme } from 'styled-components'
+
+const ThemedComponent = withTheme(() => null)
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-withtheme-with-pure-comments/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-withtheme-with-pure-comments/options.json
new file mode 100644
index 0000000000000..f774b7e97a38f
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-withtheme-with-pure-comments/options.json
@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "pure": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-withtheme-with-pure-comments/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-withtheme-with-pure-comments/output.js
new file mode 100644
index 0000000000000..a2cd31f026404
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/annotate-withtheme-with-pure-comments/output.js
@@ -0,0 +1,2 @@
+import { withTheme } from 'styled-components';
+const ThemedComponent = /*#__PURE__*/withTheme(() => null);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/css-declared-after-component/input.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/css-declared-after-component/input.jsx
new file mode 100644
index 0000000000000..5be1a9e9f488b
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/css-declared-after-component/input.jsx
@@ -0,0 +1,10 @@
+import React from "react"
+import { css } from "styled-components"
+
+export default function Example() {
+  return <div css={someCss}>oops</div>
+}
+
+const someCss = css`
+  color: red;
+`
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/css-declared-after-component/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/css-declared-after-component/options.json
new file mode 100644
index 0000000000000..64cc634ee440d
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/css-declared-after-component/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["styled-components"]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/css-declared-after-component/output.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/css-declared-after-component/output.jsx
new file mode 100644
index 0000000000000..35af42efdf4f8
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/css-declared-after-component/output.jsx
@@ -0,0 +1,11 @@
+import _styled from "styled-components";
+import React from "react";
+import { css } from "styled-components";
+export default function Example() {
+  return <_StyledDiv>oops</_StyledDiv>;
+}
+const someCss = css(["color:red;"]);
+var _StyledDiv = _styled("div").withConfig({
+  displayName: "input___StyledDiv",
+  componentId: "sc-7mydya-0"
+})(["", ""], someCss);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-desugar-styled-assignment/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-desugar-styled-assignment/input.js
new file mode 100644
index 0000000000000..108f2b49164e4
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-desugar-styled-assignment/input.js
@@ -0,0 +1,7 @@
+const domElements = ['div']
+
+const styled = () => {}
+
+domElements.forEach(domElement => {
+  styled[domElement] = styled(domElement)
+})
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-desugar-styled-assignment/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-desugar-styled-assignment/options.json
new file mode 100644
index 0000000000000..64cc634ee440d
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-desugar-styled-assignment/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["styled-components"]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-desugar-styled-assignment/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-desugar-styled-assignment/output.js
new file mode 100644
index 0000000000000..21631ecf7c2ee
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-desugar-styled-assignment/output.js
@@ -0,0 +1,5 @@
+const domElements = ['div'];
+const styled = () => {};
+domElements.forEach(domElement => {
+  styled[domElement] = styled(domElement);
+});
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-replace-native-with-no-tags/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-replace-native-with-no-tags/input.js
new file mode 100644
index 0000000000000..a277ab493126b
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-replace-native-with-no-tags/input.js
@@ -0,0 +1,13 @@
+const styled_default = require('styled-components/native')
+
+const TestNormal = styled.div`
+  width: 100%;
+`
+
+const Test = styled_default.default.div`
+  width: 100%;
+`
+
+const TestCallExpression = styled_default.default(Test)`
+  height: 20px;
+`
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-replace-native-with-no-tags/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-replace-native-with-no-tags/options.json
new file mode 100644
index 0000000000000..64cc634ee440d
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-replace-native-with-no-tags/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["styled-components"]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-replace-native-with-no-tags/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-replace-native-with-no-tags/output.js
new file mode 100644
index 0000000000000..0e705477c685c
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/does-not-replace-native-with-no-tags/output.js
@@ -0,0 +1,13 @@
+const styled_default = require('styled-components/native');
+const TestNormal = styled.div.withConfig({
+  displayName: "input__TestNormal",
+  componentId: "sc-1w0epmj-0"
+})(["width:100%;"]);
+const Test = styled_default.default.div.withConfig({
+  displayName: "input__Test",
+  componentId: "sc-1w0epmj-1"
+})(["width:100%;"]);
+const TestCallExpression = styled_default.default(Test).withConfig({
+  displayName: "input__TestCallExpression",
+  componentId: "sc-1w0epmj-2"
+})(["height:20px;"]);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/input.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/input.jsx
new file mode 100644
index 0000000000000..a7eeadab76d46
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/input.jsx
@@ -0,0 +1,9 @@
+import { styled } from '@material/ui'
+import s from 'styled-components'
+
+const Paragraph = s.p`
+  color: green;
+`
+
+const Foo = p => <Paragraph {...p} />
+const TestNormal = styled(Foo)({ color: red })
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/options.json
new file mode 100644
index 0000000000000..64cc634ee440d
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["styled-components"]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/output.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/output.jsx
new file mode 100644
index 0000000000000..87a7883769b7c
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/output.jsx
@@ -0,0 +1,10 @@
+import { styled } from '@material/ui';
+import s from 'styled-components';
+const Paragraph = s.p.withConfig({
+  displayName: "input__Paragraph",
+  componentId: "sc-33emk6-0"
+})(["color:green;"]);
+const Foo = p => <Paragraph {...p} />;
+const TestNormal = styled(Foo)({
+  color: red
+});
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-in-helpers/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-in-helpers/input.js
new file mode 100644
index 0000000000000..4e650896dc313
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-in-helpers/input.js
@@ -0,0 +1,17 @@
+import { createGlobalStyle, css, keyframes } from 'styled-components'
+
+const key = keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+const color = css`
+  color: ${theColor};
+`
+
+const GlobalStyles = createGlobalStyle`
+  html {
+    color: red;
+  }
+`
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-in-helpers/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-in-helpers/options.json
new file mode 100644
index 0000000000000..fc3079dc25163
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-in-helpers/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "displayName": false,
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-in-helpers/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-in-helpers/output.js
new file mode 100644
index 0000000000000..82dbc10057881
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-in-helpers/output.js
@@ -0,0 +1,4 @@
+import { createGlobalStyle, css, keyframes } from 'styled-components';
+const key = keyframes`to{transform:rotate(360deg);}`;
+const color = css`color:${theColor};`;
+const GlobalStyles = createGlobalStyle`html{color:red;}`;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-with-transpilation/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-with-transpilation/input.js
new file mode 100644
index 0000000000000..1c012c9ec7b3f
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-with-transpilation/input.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const Simple = styled.div`
+  width: 100%;
+`;
+
+const Interpolation = styled.div`
+  content: "  ${props => props.text}  ";
+`;
+
+const SpecialCharacters = styled.div`
+  content: "  ${props => props.text}  ";
+ color: red;
+`;
+
+const Comment = styled.div`
+  // comment
+  color: red;
+`
+
+const Parens = styled.div`
+  &:hover {
+    color: blue;
+  }
+`;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-with-transpilation/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-with-transpilation/options.json
new file mode 100644
index 0000000000000..92abfec80959e
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-with-transpilation/options.json
@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": "defaults"
+      }
+    ]
+  ],
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "displayName": false,
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-with-transpilation/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-with-transpilation/output.js
new file mode 100644
index 0000000000000..1b98e708b78c3
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-with-transpilation/output.js
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+const Simple = styled.div`width:100%;`;
+const Interpolation = styled.div`content:"  ${props => props.text}  ";`;
+const SpecialCharacters = styled.div`content:"  ${props => props.text}  ";color:red;`;
+const Comment = styled.div`color:red;`;
+const Parens = styled.div`&:hover{color:blue;}`;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-without-transpilation/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-without-transpilation/input.js
new file mode 100644
index 0000000000000..42256c095629e
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-without-transpilation/input.js
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+const Simple = styled.div`
+  width: 100%;
+`;
+
+const Interpolation = styled.div`
+  content: "https://test.com/${props => props.endpoint}";
+`;
+
+const SpecialCharacters = styled.div`
+  content: "  ${props => props.text}  ";
+ color: red;
+`;
+
+const Comment = styled.div`
+  width: 100%;
+  // comment
+  color: red;
+`;
+
+const Parens = styled.div`
+  &:hover {
+    color: blue;
+  }
+  color: red;
+`;
+
+const UrlComments = styled.div`
+  color: red;
+  /* // */
+  background: red;
+  /* comment 1 */
+  /* comment 2 */
+  // comment 3
+  border: 1px solid green;
+`;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-without-transpilation/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-without-transpilation/options.json
new file mode 100644
index 0000000000000..fc3079dc25163
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-without-transpilation/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "displayName": false,
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-without-transpilation/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-without-transpilation/output.js
new file mode 100644
index 0000000000000..656e3c57f3b35
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-css-to-use-without-transpilation/output.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+const Simple = styled.div`width:100%;`;
+const Interpolation = styled.div`content:"https://test.com/${props => props.endpoint}";`;
+const SpecialCharacters = styled.div`content:"  ${props => props.text}  ";color:red;`;
+const Comment = styled.div`width:100%;color:red;`;
+const Parens = styled.div`&:hover{color:blue;}color:red;`;
+const UrlComments = styled.div`color:red;background:red;border:1px solid green;`;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/input.js
new file mode 100644
index 0000000000000..c431ae03b1d60
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/input.js
@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+const Test1 = styled.div`
+  width: 100%;
+  // color: ${'red'};
+`
+
+const Test2 = styled.div`
+  width: 100%;
+  // color: pale${'red'};
+`
+
+const Test3 = styled.div`
+  width: 100%;
+  // color
+  ${'red'};
+`
+
+const Test4 = styled.div`
+  width: 100%;
+  // color: ${'red'}-blue;
+`
+
+const Test5 = styled.div`
+  width: 100%;
+  // color: ${'red'}${'blue'};
+`
+
+const Test6 = styled.div`
+  background: url("https://google.com");
+  width: 100%;
+  ${'green'} // color: ${'red'}${'blue'};
+`
+
+const Test7 = styled.div`
+  background: url("https://google.com");
+  width: ${p => p.props.width};
+  ${'green'} // color: ${'red'}${'blue'};
+  height: ${p => p.props.height};
+`
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/options.json
new file mode 100644
index 0000000000000..d8b2e1de800f2
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/options.json
@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "minify": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/output.js
new file mode 100644
index 0000000000000..9f275e3a95db6
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/output.js
@@ -0,0 +1 @@
+import styled from 'styled-components'; const Test1 = styled.div.withConfig({ displayName: "input__Test1", componentId: "sc-clieju-0" })(["width:100%;"]); const Test2 = styled.div.withConfig({ displayName: "input__Test2", componentId: "sc-clieju-1" })(["width:100%;"]); const Test3 = styled.div.withConfig({ displayName: "input__Test3", componentId: "sc-clieju-2" })(["width:100%;", ";"], 'red'); const Test4 = styled.div.withConfig({ displayName: "input__Test4", componentId: "sc-clieju-3" })(["width:100%;"]); const Test5 = styled.div.withConfig({ displayName: "input__Test5", componentId: "sc-clieju-4" })(["width:100%;"]); const Test6 = styled.div.withConfig({ displayName: "input__Test6", componentId: "sc-clieju-5" })(["background:url(\"https://google.com\");width:100%;", ""], 'green'); const Test7 = styled.div.withConfig({ displayName: "input__Test7", componentId: "sc-clieju-6" })(["background:url(\"https://google.com\");width:", ";", "height:", ";"], p => p.props.width, 'green', p => p.props.height);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/not-use-private-api-if-not-required/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/not-use-private-api-if-not-required/input.js
new file mode 100644
index 0000000000000..9fa94bb5973e8
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/not-use-private-api-if-not-required/input.js
@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+const Test = styled.div`width: 100%;`;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/not-use-private-api-if-not-required/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/not-use-private-api-if-not-required/options.json
new file mode 100644
index 0000000000000..fc3079dc25163
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/not-use-private-api-if-not-required/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "displayName": false,
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/not-use-private-api-if-not-required/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/not-use-private-api-if-not-required/output.js
new file mode 100644
index 0000000000000..9dc45e0df9276
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/not-use-private-api-if-not-required/output.js
@@ -0,0 +1,2 @@
+import styled from 'styled-components';
+const Test = styled.div`width:100%;`;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/pre-transpiled/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/pre-transpiled/input.js
new file mode 100644
index 0000000000000..d662b178748f0
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/pre-transpiled/input.js
@@ -0,0 +1,5 @@
+var _styled = _interopRequireDefault(require("styled-components"));
+
+const Test = (0, _styled.default)('div')({
+  width: '100%',
+});
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/pre-transpiled/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/pre-transpiled/options.json
new file mode 100644
index 0000000000000..60cbb1baa9e05
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/pre-transpiled/options.json
@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "fileName": false,
+      "transpileTemplateLiterals": false,
+      "ssr": true
+    }],
+    [
+      "@babel/plugin-transform-class-properties",
+      {
+        "loose": true
+      }
+    ]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/pre-transpiled/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/pre-transpiled/output.js
new file mode 100644
index 0000000000000..e6ec5f21fbbc3
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/pre-transpiled/output.js
@@ -0,0 +1,7 @@
+var _styled = _interopRequireDefault(require("styled-components"));
+const Test = (0, _styled.default)('div').withConfig({
+  displayName: "Test",
+  componentId: "sc-1m3e07f-0"
+})({
+  width: '100%'
+});
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/input.js
new file mode 100644
index 0000000000000..9fe7111a9d3b9
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/input.js
@@ -0,0 +1,8 @@
+import s from "styled-components";
+
+const Test = s.div`width: 100%;`;
+const Test2 = true ? s.div`` : s.div``;
+const styles = { One: s.div`` }
+let Component;
+Component = s.div``;
+const WrappedComponent = s(Inner)``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/options.json
new file mode 100644
index 0000000000000..17f3a07512429
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "fileName": false,
+      "transpileTemplateLiterals": false,
+      "ssr": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/output.js
new file mode 100644
index 0000000000000..ca22befbc1c6a
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/output.js
@@ -0,0 +1,27 @@
+import s from "styled-components";
+const Test = s.div.withConfig({
+  displayName: "Test",
+  componentId: "sc-4ndp5k-0"
+})`width:100%;`;
+const Test2 = true ? s.div.withConfig({
+  displayName: "Test2",
+  componentId: "sc-4ndp5k-1"
+})`` : s.div.withConfig({
+  displayName: "Test2",
+  componentId: "sc-4ndp5k-2"
+})``;
+const styles = {
+  One: s.div.withConfig({
+    displayName: "One",
+    componentId: "sc-4ndp5k-3"
+  })``
+};
+let Component;
+Component = s.div.withConfig({
+  displayName: "Component",
+  componentId: "sc-4ndp5k-4"
+})``;
+const WrappedComponent = s(Inner).withConfig({
+  displayName: "WrappedComponent",
+  componentId: "sc-4ndp5k-5"
+})``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transformed-imports-with-jsx-member-expressions/input.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transformed-imports-with-jsx-member-expressions/input.jsx
new file mode 100644
index 0000000000000..c6e94d522e7a8
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transformed-imports-with-jsx-member-expressions/input.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { css } from "styled-components";
+import Icons from "./icons";
+
+const someCss = css` background: purple;`;
+
+const App1 = () => { return <Icons css={someCss} />; };
+
+const App2 = () => { return <Icons.Foo css={someCss} />; };
+
+const App3 = () => { return <Icons.Foo.Bar css={someCss} />; };
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transformed-imports-with-jsx-member-expressions/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transformed-imports-with-jsx-member-expressions/options.json
new file mode 100644
index 0000000000000..64cc634ee440d
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transformed-imports-with-jsx-member-expressions/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["styled-components"]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transformed-imports-with-jsx-member-expressions/output.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transformed-imports-with-jsx-member-expressions/output.jsx
new file mode 100644
index 0000000000000..cd3a414b80f5a
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transformed-imports-with-jsx-member-expressions/output.jsx
@@ -0,0 +1,20 @@
+import _styled, { default as _styled2, default as _styled3 } from "styled-components";
+import React from "react";
+import { css } from "styled-components";
+import Icons from "./icons";
+const someCss = css([" background:purple;"]);
+const App1 = () => {
+  return <_StyledIcons />;
+};
+const App2 = () => {
+  return <_StyledIconsFoo />;
+};
+const App3 = () => {
+  return <_StyledIconsFooBar />;
+};
+var _StyledIcons = _styled(Icons)`${someCss}`;
+var _StyledIconsFoo = _styled2(Icons.Foo)`${someCss}`;
+var _StyledIconsFooBar = _styled3(Icons.Foo.Bar).withConfig({
+  displayName: "input___StyledIconsFooBar",
+  componentId: "sc-1wxehft-0"
+})(["", ""], someCss);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-import/input.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-import/input.jsx
new file mode 100644
index 0000000000000..33cbca5a6ac83
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-import/input.jsx
@@ -0,0 +1,21 @@
+// @flow
+import React from 'react'
+import Card from '../../shared/components/Card'
+import config from '../../../config'
+
+export default () => (
+  <div
+    css={`
+      width: 35em;
+    `}
+  >
+    <Card>
+      <h1>Login or Sign Up</h1>
+      <p>
+        <a href={config.API_URI + '/auth/google'}>
+          Sign up or login with Google
+        </a>
+      </p>
+    </Card>
+  </div>
+)
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-import/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-import/options.json
new file mode 100644
index 0000000000000..18c4037505835
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-import/options.json
@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": "defaults"
+      }
+    ]
+  ],
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "displayName": false,
+      "transpileTemplateLiterals": false,
+      "minify": false,
+      "cssProp": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-import/output.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-import/output.jsx
new file mode 100644
index 0000000000000..e56c3aeb2d1c1
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-import/output.jsx
@@ -0,0 +1,18 @@
+import _styled from "styled-components";
+// @flow
+import React from 'react';
+import Card from '../../shared/components/Card';
+import config from '../../../config';
+export default () => <_StyledDiv>
+    <Card>
+      <h1>Login or Sign Up</h1>
+      <p>
+        <a href={config.API_URI + '/auth/google'}>
+          Sign up or login with Google
+        </a>
+      </p>
+    </Card>
+  </_StyledDiv>;
+var _StyledDiv = _styled("div")`
+      width: 35em;
+    `;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-require/input.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-require/input.jsx
new file mode 100644
index 0000000000000..2047fa75693ef
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-require/input.jsx
@@ -0,0 +1,10 @@
+// @flow
+import React from 'react'
+
+export default () => (
+  <div
+    css={`
+      width: 35em;
+    `}
+  />
+)
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-require/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-require/options.json
new file mode 100644
index 0000000000000..18c4037505835
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-require/options.json
@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": "defaults"
+      }
+    ]
+  ],
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "displayName": false,
+      "transpileTemplateLiterals": false,
+      "minify": false,
+      "cssProp": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-require/output.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-require/output.jsx
new file mode 100644
index 0000000000000..699215f6af3e5
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-add-require/output.jsx
@@ -0,0 +1,7 @@
+import _styled from "styled-components";
+// @flow
+import React from 'react';
+export default () => <_StyledDiv />;
+var _StyledDiv = _styled("div")`
+      width: 35em;
+    `;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-all-options-on/input.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-all-options-on/input.jsx
new file mode 100644
index 0000000000000..4351b8cf07ab2
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-all-options-on/input.jsx
@@ -0,0 +1,271 @@
+import styled from 'styled-components'
+import SomeComponent from '../SomeComponentPath'
+const { SomeOtherComponent } = require('../SomeOtherComponentPath')
+
+/**
+ * control
+ */
+
+const Thing = styled.div`
+  color: red;
+`
+
+const Thing2 = styled(Thing)`
+  background: blue;
+`
+
+/*
+ * Basic fixtures
+ */
+
+const StaticString = p => <p css="flex: 1;">A</p>
+
+const StaticTemplate = p => (
+  <p
+    css={`
+      flex: 1;
+    `}
+  >
+    A
+  </p>
+)
+
+const ObjectProp = p => <p css={{ color: 'blue' }}>A</p>
+
+const NoChildren = p => <p css="flex: 1;" />
+
+const CssHelperProp = p => (
+  <p
+    css={css`
+      color: blue;
+    `}
+  >
+    A
+  </p>
+)
+
+/*
+ * Dynamic prop
+ */
+
+const CustomComp = p => <Paragraph css="flex: 1">H</Paragraph>
+
+const DynamicProp = p => <p css={props.cssText}>H</p>
+
+const LocalInterpolation = p => (
+  <p
+    css={`
+      background: ${props.bg};
+    `}
+  >
+    H
+  </p>
+)
+
+const FuncInterpolation = p => (
+  <p
+    css={`
+      color: ${props => props.theme.a};
+    `}
+  >
+    H
+  </p>
+)
+
+const radius = 10
+const GlobalInterpolation = p => (
+  <p
+    css={`
+      border-radius: ${radius}px;
+    `}
+  >
+    H
+  </p>
+)
+
+const LocalCssHelperProp = p => (
+  <p
+    css={css`
+      color: ${p.color};
+    `}
+  >
+    A
+  </p>
+)
+
+const DynamicCssHelperProp = p => (
+  <p
+    css={css`
+      color: ${props => props.theme.color};
+    `}
+  >
+    A
+  </p>
+)
+
+const CustomCompWithDot = p => <Button.Ghost css="flex: 1">H</Button.Ghost>
+
+const NestedCompWithDot = p => (
+  <Button.Ghost.New css="flex: 1">H</Button.Ghost.New>
+)
+
+const CustomCompWithDotLowerCase = p => (
+  <button.ghost css="flex: 1">H</button.ghost>
+)
+
+const CustomElement = p => <button-ghost css="flex: 1">H</button-ghost>
+
+const globalVar = '"foo"'
+const getAfterValue = () => '"bar"'
+
+const ObjectPropMixedInputs = p => {
+  const color = 'red'
+
+  return (
+    <p
+      css={{
+        background: p.background,
+        color,
+        textAlign: 'left',
+        '::before': { content: globalVar },
+        '::after': { content: getAfterValue() },
+      }}
+    >
+      A
+    </p>
+  )
+}
+
+const SpreadObjectPropMixedInputs = p => {
+  const color = 'red'
+
+  return (
+    <p
+      css={{
+        ...{
+          '::before': { content: globalVar },
+          '::after': { content: getAfterValue() },
+          ...{
+            '::before': { content: globalVar },
+            '::after': { content: getAfterValue() },
+          },
+        },
+        background: p.background,
+        textAlign: 'left',
+        '::before': { content: globalVar },
+        '::after': { content: getAfterValue() },
+      }}
+    >
+      A
+    </p>
+  )
+}
+
+/* styled component defined after function it's used in */
+
+const EarlyUsageComponent = p => <Thing3 css="color: red;" />
+
+const Thing3 = styled.div`
+  color: blue;
+`
+
+const EarlyUsageComponent2 = p => <Thing4 css="color: red;" />
+
+function Thing4(props) {
+  return <div {...props} />
+}
+
+/* insert before usage for non-local scope styled HOC targets */
+
+const ImportedComponentUsage = p => <SomeComponent css="color: red;" />
+const RequiredComponentUsage = p => <SomeOtherComponent css="color: red;" />
+
+const ObjectInterpolation = p => {
+  const theme = useTheme()
+
+  return (
+    <p
+      css={{
+        color: theme.colors.red,
+      }}
+    >
+      H
+    </p>
+  )
+}
+
+const ObjectInterpolationCustomComponent = p => {
+  const theme = useTheme()
+
+  return (
+    <Thing3
+      css={{
+        color: theme.colors.red,
+      }}
+    >
+      H
+    </Thing3>
+  )
+}
+
+const ObjectInterpolationInKey = p => {
+  const theme = useTheme()
+
+  return (
+    <Thing3
+      css={{
+        [theme.breakpoints.md]: {
+          color: 'red',
+        },
+      }}
+    >
+      H
+    </Thing3>
+  )
+}
+
+const ObjectFnInterpolationInKey = p => {
+  const theme = useTheme()
+
+  return (
+    <Thing3
+      css={{
+        [theme.breakpoints.md()]: {
+          color: 'red',
+        },
+      }}
+    >
+      H
+    </Thing3>
+  )
+}
+
+const ObjectFnSimpleInterpolationInKey = p => {
+  const foo = '@media screen and (max-width: 600px)'
+
+  return (
+    <Thing3
+      css={{
+        [foo]: {
+          color: 'red',
+        },
+      }}
+    >
+      H
+    </Thing3>
+  )
+}
+
+const ObjectPropWithSpread = () => {
+  const css = { color: 'red' }
+  const playing = true
+
+  return (
+    <div
+      css={{
+        ...css,
+        ...(playing ? { opacity: 0, bottom: '-100px' } : {}),
+      }}
+    />
+  )
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-all-options-on/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-all-options-on/options.json
new file mode 100644
index 0000000000000..34ad05c9c12e2
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-all-options-on/options.json
@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": "defaults"
+      }
+    ]
+  ],
+  "plugins": [
+    ["styled-components", {
+      "ssr": true,
+      "displayName": true,
+      "transpileTemplateLiterals": true,
+      "minify": true,
+      "cssProp": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-all-options-on/output.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-all-options-on/output.jsx
new file mode 100644
index 0000000000000..48016af346be1
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop-all-options-on/output.jsx
@@ -0,0 +1,226 @@
+import styled, { default as _styled, default as _styled2, default as _styled3, default as _styled4, default as _styled5, default as _styled6, default as _styled7, default as _styled8, default as _styled9, default as _styled0, default as _styled1, default as _styled10, default as _styled11, default as _styled12, default as _styled13, default as _styled14, default as _styled15, default as _styled16, default as _styled17, default as _styled18, default as _styled19, default as _styled20, default as _styled21, default as _styled22, default as _styled23, default as _styled24, default as _styled25, default as _styled26 } from 'styled-components';
+import SomeComponent from '../SomeComponentPath';
+const {
+  SomeOtherComponent
+} = require('../SomeOtherComponentPath');
+
+/**
+ * control
+ */
+var _StyledSomeOtherComponent = _styled20(SomeOtherComponent)`color: red;`;
+const Thing = styled.div`
+  color: red;
+`;
+const Thing2 = styled(Thing)`
+  background: blue;
+`;
+
+/*
+ * Basic fixtures
+ */
+
+const StaticString = p => <_StyledP>A</_StyledP>;
+const StaticTemplate = p => <_StyledP2>
+    A
+  </_StyledP2>;
+const ObjectProp = p => <_StyledP3>A</_StyledP3>;
+const NoChildren = p => <_StyledP4 />;
+const CssHelperProp = p => <_StyledP5>
+    A
+  </_StyledP5>;
+
+/*
+ * Dynamic prop
+ */
+
+const CustomComp = p => <_StyledParagraph>H</_StyledParagraph>;
+const DynamicProp = p => <_StyledP6 $_css={props.cssText}>H</_StyledP6>;
+const LocalInterpolation = p => <_StyledP7 $_css2={props.bg}>
+    H
+  </_StyledP7>;
+const FuncInterpolation = p => <_StyledP8>
+    H
+  </_StyledP8>;
+const radius = 10;
+const GlobalInterpolation = p => <_StyledP9>
+    H
+  </_StyledP9>;
+const LocalCssHelperProp = p => <_StyledP0 $_css3={p.color}>
+    A
+  </_StyledP0>;
+const DynamicCssHelperProp = p => <_StyledP1>
+    A
+  </_StyledP1>;
+const CustomCompWithDot = p => <_StyledButtonGhost>H</_StyledButtonGhost>;
+const NestedCompWithDot = p => <_StyledButtonGhostNew>H</_StyledButtonGhostNew>;
+const CustomCompWithDotLowerCase = p => <_StyledButtonGhost2>H</_StyledButtonGhost2>;
+const CustomElement = p => <_StyledButtonGhost3>H</_StyledButtonGhost3>;
+const globalVar = '"foo"';
+const getAfterValue = () => '"bar"';
+const ObjectPropMixedInputs = p => {
+  const color = 'red';
+  return <_StyledP10 $_css4={p.background} $_css5={color} $_css6={globalVar} $_css7={getAfterValue()}>
+      A
+    </_StyledP10>;
+};
+const SpreadObjectPropMixedInputs = p => {
+  const color = 'red';
+  return <_StyledP11 $_css8={globalVar} $_css9={getAfterValue()} $_css0={globalVar} $_css1={getAfterValue()} $_css10={p.background} $_css11={globalVar} $_css12={getAfterValue()}>
+      A
+    </_StyledP11>;
+};
+
+/* styled component defined after function it's used in */
+
+const EarlyUsageComponent = p => <_StyledThing />;
+const Thing3 = styled.div`
+  color: blue;
+`;
+var _StyledThing6 = _styled25(Thing3)(p => ({
+  [p.$_css17]: {
+    color: 'red'
+  }
+}));
+var _StyledThing5 = _styled24(Thing3)(p => ({
+  [p.$_css16]: {
+    color: 'red'
+  }
+}));
+var _StyledThing4 = _styled23(Thing3)(p => ({
+  [p.$_css15]: {
+    color: 'red'
+  }
+}));
+var _StyledThing3 = _styled22(Thing3)(p => ({
+  color: p.$_css14
+}));
+var _StyledThing = _styled17(Thing3)`color: red;`;
+const EarlyUsageComponent2 = p => <_StyledThing2 />;
+function Thing4(props) {
+  return <div {...props} />;
+}
+
+/* insert before usage for non-local scope styled HOC targets */
+var _StyledThing2 = _styled18(Thing4)`color: red;`;
+const ImportedComponentUsage = p => <_StyledSomeComponent />;
+const RequiredComponentUsage = p => <_StyledSomeOtherComponent />;
+const ObjectInterpolation = p => {
+  const theme = useTheme();
+  return <_StyledP12 $_css13={theme.colors.red}>
+      H
+    </_StyledP12>;
+};
+const ObjectInterpolationCustomComponent = p => {
+  const theme = useTheme();
+  return <_StyledThing3 $_css14={theme.colors.red}>
+      H
+    </_StyledThing3>;
+};
+const ObjectInterpolationInKey = p => {
+  const theme = useTheme();
+  return <_StyledThing4 $_css15={theme.breakpoints.md}>
+      H
+    </_StyledThing4>;
+};
+const ObjectFnInterpolationInKey = p => {
+  const theme = useTheme();
+  return <_StyledThing5 $_css16={theme.breakpoints.md()}>
+      H
+    </_StyledThing5>;
+};
+const ObjectFnSimpleInterpolationInKey = p => {
+  const foo = '@media screen and (max-width: 600px)';
+  return <_StyledThing6 $_css17={foo}>
+      H
+    </_StyledThing6>;
+};
+const ObjectPropWithSpread = () => {
+  const css = {
+    color: 'red'
+  };
+  const playing = true;
+  return <_StyledDiv $_css18={css} $_css19={playing ? {
+    opacity: 0,
+    bottom: '-100px'
+  } : {}} />;
+};
+var _StyledP = _styled("p")`flex: 1;`;
+var _StyledP2 = _styled2("p")`
+      flex: 1;
+    `;
+var _StyledP3 = _styled3("p")({
+  color: 'blue'
+});
+var _StyledP4 = _styled4("p")`flex: 1;`;
+var _StyledP5 = _styled5("p")`
+      color: blue;
+    `;
+var _StyledParagraph = _styled6(Paragraph)`flex: 1`;
+var _StyledP6 = _styled7("p")`${p => p.$_css}`;
+var _StyledP7 = _styled8("p")`
+      background: ${p => p.$_css2};
+    `;
+var _StyledP8 = _styled9("p")`
+      color: ${props => props.theme.a};
+    `;
+var _StyledP9 = _styled0("p")`
+      border-radius: ${radius}px;
+    `;
+var _StyledP0 = _styled1("p")`
+      color: ${p => p.$_css3};
+    `;
+var _StyledP1 = _styled10("p")`
+      color: ${props => props.theme.color};
+    `;
+var _StyledButtonGhost = _styled11(Button.Ghost)`flex: 1`;
+var _StyledButtonGhostNew = _styled12(Button.Ghost.New)`flex: 1`;
+var _StyledButtonGhost2 = _styled13(button.ghost)`flex: 1`;
+var _StyledButtonGhost3 = _styled14("button-ghost")`flex: 1`;
+var _StyledP10 = _styled15("p")(p => ({
+  background: p.$_css4,
+  color: p.$_css5,
+  textAlign: 'left',
+  '::before': {
+    content: p.$_css6
+  },
+  '::after': {
+    content: p.$_css7
+  }
+}));
+var _StyledP11 = _styled16("p")(p => ({
+  ...{
+    '::before': {
+      content: p.$_css8
+    },
+    '::after': {
+      content: p.$_css9
+    },
+    ...{
+      '::before': {
+        content: p.$_css0
+      },
+      '::after': {
+        content: p.$_css1
+      }
+    }
+  },
+  background: p.$_css10,
+  textAlign: 'left',
+  '::before': {
+    content: p.$_css11
+  },
+  '::after': {
+    content: p.$_css12
+  }
+}));
+var _StyledSomeComponent = _styled19(SomeComponent)`color: red;`;
+var _StyledP12 = _styled21("p")(p => ({
+  color: p.$_css13
+}));
+var _StyledDiv = _styled26("div").withConfig({
+  displayName: "input___StyledDiv",
+  componentId: "sc-7evkve-0"
+})(p => ({
+  ...p.$_css18,
+  ...p.$_css19
+}));
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop/input.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop/input.jsx
new file mode 100644
index 0000000000000..c851ee139c771
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop/input.jsx
@@ -0,0 +1,285 @@
+/*
+ * Basic fixtures
+ */
+
+const StaticString = p => <p css="flex: 1;">A</p>
+
+const StaticTemplate = p => (
+  <p
+    css={`
+      flex: 1;
+    `}
+  >
+    A
+  </p>
+)
+
+const ObjectProp = p => <p css={{ color: 'blue' }}>A</p>
+
+const NoChildren = p => <p css="flex: 1;" />
+
+const CssHelperProp = p => (
+  <p
+    css={css`
+      color: blue;
+    `}
+  >
+    A
+  </p>
+)
+
+/*
+ * Dynamic prop
+ */
+
+const CustomComp = p => <Paragraph css="flex: 1">H</Paragraph>
+
+const DynamicProp = p => <p css={props.cssText}>H</p>
+
+const LocalInterpolation = p => (
+  <p
+    css={`
+      background: ${props.bg};
+    `}
+  >
+    H
+  </p>
+)
+
+const FuncInterpolation = p => (
+  <p
+    css={`
+      color: ${props => props.theme.a};
+    `}
+  >
+    H
+  </p>
+)
+
+const radius = 10
+const GlobalInterpolation = p => (
+  <p
+    css={`
+      border-radius: ${radius}px;
+    `}
+  >
+    H
+  </p>
+)
+
+const LocalCssHelperProp = p => (
+  <p
+    css={css`
+      color: ${p.color};
+    `}
+  >
+    A
+  </p>
+)
+
+const DynamicCssHelperProp = p => (
+  <p
+    css={css`
+      color: ${props => props.theme.color};
+    `}
+  >
+    A
+  </p>
+)
+
+const CustomCompWithDot = p => <Button.Ghost css="flex: 1">H</Button.Ghost>
+
+const NestedCompWithDot = p => (
+  <Button.Ghost.New css="flex: 1">H</Button.Ghost.New>
+)
+
+const CustomCompWithDotLowerCase = p => (
+  <button.ghost css="flex: 1">H</button.ghost>
+)
+
+const CustomElement = p => <button-ghost css="flex: 1">H</button-ghost>
+
+/* styled component defined after function it's used in */
+
+const EarlyUsageComponent = p => <Thing3 css="color: red;" />
+
+const Thing3 = styled.div`
+  color: blue;
+`
+
+const ObjectInterpolation = p => {
+  const theme = useTheme()
+
+  return (
+    <p
+      css={{
+        color: theme.colors.red,
+      }}
+    >
+      H
+    </p>
+  )
+}
+
+const ObjectInterpolationCustomComponent = p => {
+  const theme = useTheme()
+
+  return (
+    <Thing3
+      css={{
+        color: theme.colors.red,
+      }}
+    >
+      H
+    </Thing3>
+  )
+}
+
+const ObjectInterpolationInKey = p => {
+  const theme = useTheme()
+
+  return (
+    <Thing3
+      css={{
+        [theme.breakpoints.md]: {
+          color: 'red',
+        },
+      }}
+    >
+      H
+    </Thing3>
+  )
+}
+
+const ObjectFnInterpolationInKey = p => {
+  const theme = useTheme()
+
+  return (
+    <Thing3
+      css={{
+        [theme.breakpoints.md()]: {
+          color: 'red',
+        },
+      }}
+    >
+      H
+    </Thing3>
+  )
+}
+
+const ObjectFnSimpleInterpolationInKey = p => {
+  const foo = '@media screen and (max-width: 600px)'
+
+  return (
+    <Thing3
+      css={{
+        [foo]: {
+          color: 'red',
+        },
+      }}
+    >
+      H
+    </Thing3>
+  )
+}
+
+const ObjectPropMixedInputs = p => {
+  const color = 'red'
+
+  return (
+    <p
+      css={{
+        background: p.background,
+        color,
+        textAlign: 'left',
+        '::before': { content: globalVar },
+        '::after': { content: getAfterValue() },
+      }}
+    >
+      A
+    </p>
+  )
+}
+
+const ObjectPropWithSpread = () => {
+  const css = { color: 'red' }
+  const playing = true
+
+  return (
+    <div
+      css={{
+        ...css,
+        ...(playing ? { opacity: 0, bottom: '-100px' } : {}),
+      }}
+    />
+  )
+}
+
+const ObjectInterpolationLogical = ({ bg, content, height, width, ...p }) => {
+  return (
+    <p
+      css={{
+        background: bg || 'red',
+        height: height ?? '100%',
+        width: width ? `${width}px` : '100%',
+        '::before': {
+          content,
+        },
+      }}
+      {...p}
+    >
+      H
+    </p>
+  )
+}
+
+const ObjectInterpolationMember = p => {
+  const theme = useTheme()
+  const color = 'red'
+
+  return (
+    <p
+      css={{
+        color: theme.colors[color],
+      }}
+    >
+      H
+    </p>
+  )
+}
+
+const RenderPropComponentCSSProp = () => {
+  return (
+    <RenderPropComponent>
+      {() => (
+        <div
+          css={`
+            color: black;
+          `}
+        />
+      )}
+    </RenderPropComponent>
+  )
+}
+
+const RenderPropComponentSpread = props => {
+  return (
+    <RenderPropComponent>
+      {() => <div {...props.derivedProps} />}</RenderPropComponent>
+  )
+}
+
+const RenderPropComponentSpreadCSSProp = props => {
+  return (
+    <RenderPropComponent>
+      {() => (
+        <div
+          css={`
+            color: black;
+          `}
+          {...props.derivedProps}
+        />
+      )}
+    </RenderPropComponent>
+  )
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop/options.json
new file mode 100644
index 0000000000000..18c4037505835
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop/options.json
@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": "defaults"
+      }
+    ]
+  ],
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "displayName": false,
+      "transpileTemplateLiterals": false,
+      "minify": false,
+      "cssProp": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop/output.jsx b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop/output.jsx
new file mode 100644
index 0000000000000..a93ae8dab64d1
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-css-prop/output.jsx
@@ -0,0 +1,213 @@
+import _styled, { default as _styled2, default as _styled3, default as _styled4, default as _styled5, default as _styled6, default as _styled7, default as _styled8, default as _styled9, default as _styled0, default as _styled1, default as _styled10, default as _styled11, default as _styled12, default as _styled13, default as _styled14, default as _styled15, default as _styled16, default as _styled17, default as _styled18, default as _styled19, default as _styled20, default as _styled21, default as _styled22, default as _styled23, default as _styled24, default as _styled25, default as _styled26 } from "styled-components";
+/*
+ * Basic fixtures
+ */
+
+const StaticString = p => <_StyledP>A</_StyledP>;
+const StaticTemplate = p => <_StyledP2>
+    A
+  </_StyledP2>;
+const ObjectProp = p => <_StyledP3>A</_StyledP3>;
+const NoChildren = p => <_StyledP4 />;
+const CssHelperProp = p => <_StyledP5>
+    A
+  </_StyledP5>;
+
+/*
+ * Dynamic prop
+ */
+
+const CustomComp = p => <_StyledParagraph>H</_StyledParagraph>;
+const DynamicProp = p => <_StyledP6 $_css={props.cssText}>H</_StyledP6>;
+const LocalInterpolation = p => <_StyledP7 $_css2={props.bg}>
+    H
+  </_StyledP7>;
+const FuncInterpolation = p => <_StyledP8>
+    H
+  </_StyledP8>;
+const radius = 10;
+const GlobalInterpolation = p => <_StyledP9>
+    H
+  </_StyledP9>;
+const LocalCssHelperProp = p => <_StyledP0 $_css3={p.color}>
+    A
+  </_StyledP0>;
+const DynamicCssHelperProp = p => <_StyledP1>
+    A
+  </_StyledP1>;
+const CustomCompWithDot = p => <_StyledButtonGhost>H</_StyledButtonGhost>;
+const NestedCompWithDot = p => <_StyledButtonGhostNew>H</_StyledButtonGhostNew>;
+const CustomCompWithDotLowerCase = p => <_StyledButtonGhost2>H</_StyledButtonGhost2>;
+const CustomElement = p => <_StyledButtonGhost3>H</_StyledButtonGhost3>;
+
+/* styled component defined after function it's used in */
+
+const EarlyUsageComponent = p => <_StyledThing />;
+const Thing3 = styled.div`
+  color: blue;
+`;
+var _StyledThing5 = _styled20(Thing3)(p => ({
+  [p.$_css8]: {
+    color: 'red'
+  }
+}));
+var _StyledThing4 = _styled19(Thing3)(p => ({
+  [p.$_css7]: {
+    color: 'red'
+  }
+}));
+var _StyledThing3 = _styled18(Thing3)(p => ({
+  [p.$_css6]: {
+    color: 'red'
+  }
+}));
+var _StyledThing2 = _styled17(Thing3)(p => ({
+  color: p.$_css5
+}));
+var _StyledThing = _styled15(Thing3)`color: red;`;
+const ObjectInterpolation = p => {
+  const theme = useTheme();
+  return <_StyledP10 $_css4={theme.colors.red}>
+      H
+    </_StyledP10>;
+};
+const ObjectInterpolationCustomComponent = p => {
+  const theme = useTheme();
+  return <_StyledThing2 $_css5={theme.colors.red}>
+      H
+    </_StyledThing2>;
+};
+const ObjectInterpolationInKey = p => {
+  const theme = useTheme();
+  return <_StyledThing3 $_css6={theme.breakpoints.md}>
+      H
+    </_StyledThing3>;
+};
+const ObjectFnInterpolationInKey = p => {
+  const theme = useTheme();
+  return <_StyledThing4 $_css7={theme.breakpoints.md()}>
+      H
+    </_StyledThing4>;
+};
+const ObjectFnSimpleInterpolationInKey = p => {
+  const foo = '@media screen and (max-width: 600px)';
+  return <_StyledThing5 $_css8={foo}>
+      H
+    </_StyledThing5>;
+};
+const ObjectPropMixedInputs = p => {
+  const color = 'red';
+  return <_StyledP11 $_css9={p.background} $_css0={color} $_css1={globalVar} $_css10={getAfterValue()}>
+      A
+    </_StyledP11>;
+};
+const ObjectPropWithSpread = () => {
+  const css = {
+    color: 'red'
+  };
+  const playing = true;
+  return <_StyledDiv $_css11={css} $_css12={playing ? {
+    opacity: 0,
+    bottom: '-100px'
+  } : {}} />;
+};
+const ObjectInterpolationLogical = ({
+  bg,
+  content,
+  height,
+  width,
+  ...p
+}) => {
+  return <_StyledP12 {...p} $_css13={bg || 'red'} $_css14={height ?? '100%'} $_css15={width ? `${width}px` : '100%'} $_css16={content}>
+      H
+    </_StyledP12>;
+};
+const ObjectInterpolationMember = p => {
+  const theme = useTheme();
+  const color = 'red';
+  return <_StyledP13 $_css17={theme.colors[color]}>
+      H
+    </_StyledP13>;
+};
+const RenderPropComponentCSSProp = () => {
+  return <RenderPropComponent>
+      {() => <_StyledDiv2 />}
+    </RenderPropComponent>;
+};
+const RenderPropComponentSpread = props => {
+  return <RenderPropComponent>
+      {() => <div {...props.derivedProps} />}
+    </RenderPropComponent>;
+};
+const RenderPropComponentSpreadCSSProp = props => {
+  return <RenderPropComponent>
+      {() => <_StyledDiv3 {...props.derivedProps} />}
+    </RenderPropComponent>;
+};
+var _StyledP = _styled("p")`flex: 1;`;
+var _StyledP2 = _styled2("p")`
+      flex: 1;
+    `;
+var _StyledP3 = _styled3("p")({
+  color: 'blue'
+});
+var _StyledP4 = _styled4("p")`flex: 1;`;
+var _StyledP5 = _styled5("p")`
+      color: blue;
+    `;
+var _StyledParagraph = _styled6(Paragraph)`flex: 1`;
+var _StyledP6 = _styled7("p")`${p => p.$_css}`;
+var _StyledP7 = _styled8("p")`
+      background: ${p => p.$_css2};
+    `;
+var _StyledP8 = _styled9("p")`
+      color: ${props => props.theme.a};
+    `;
+var _StyledP9 = _styled0("p")`
+      border-radius: ${radius}px;
+    `;
+var _StyledP0 = _styled1("p")`
+      color: ${p => p.$_css3};
+    `;
+var _StyledP1 = _styled10("p")`
+      color: ${props => props.theme.color};
+    `;
+var _StyledButtonGhost = _styled11(Button.Ghost)`flex: 1`;
+var _StyledButtonGhostNew = _styled12(Button.Ghost.New)`flex: 1`;
+var _StyledButtonGhost2 = _styled13(button.ghost)`flex: 1`;
+var _StyledButtonGhost3 = _styled14("button-ghost")`flex: 1`;
+var _StyledP10 = _styled16("p")(p => ({
+  color: p.$_css4
+}));
+var _StyledP11 = _styled21("p")(p => ({
+  background: p.$_css9,
+  color: p.$_css0,
+  textAlign: 'left',
+  '::before': {
+    content: p.$_css1
+  },
+  '::after': {
+    content: p.$_css10
+  }
+}));
+var _StyledDiv = _styled22("div")(p => ({
+  ...p.$_css11,
+  ...p.$_css12
+}));
+var _StyledP12 = _styled23("p")(p => ({
+  background: p.$_css13,
+  height: p.$_css14,
+  width: p.$_css15,
+  '::before': {
+    content: p.$_css16
+  }
+}));
+var _StyledP13 = _styled24("p")(p => ({
+  color: p.$_css17
+}));
+var _StyledDiv2 = _styled25("div")`
+            color: black;
+          `;
+var _StyledDiv3 = _styled26("div")`
+            color: black;
+          `;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-require-default/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-require-default/input.js
new file mode 100644
index 0000000000000..314c79f3e3c57
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-require-default/input.js
@@ -0,0 +1,13 @@
+const styled_default = require("styled-components");
+
+const TestNormal = styled.div`
+  width: 100%;
+`
+
+const Test = styled_default.default.div`
+  width: 100%;
+`
+
+const TestCallExpression = styled_default.default(Test)`
+  height: 20px;
+`
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-require-default/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-require-default/options.json
new file mode 100644
index 0000000000000..64cc634ee440d
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-require-default/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["styled-components"]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-require-default/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-require-default/output.js
new file mode 100644
index 0000000000000..8c6e3d800bc83
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-require-default/output.js
@@ -0,0 +1,13 @@
+const styled_default = require("styled-components");
+const TestNormal = styled.div.withConfig({
+  displayName: "input__TestNormal",
+  componentId: "sc-1ov7kkz-0"
+})(["width:100%;"]);
+const Test = styled_default.default.div.withConfig({
+  displayName: "input__Test",
+  componentId: "sc-1ov7kkz-1"
+})(["width:100%;"]);
+const TestCallExpression = styled_default.default(Test).withConfig({
+  displayName: "input__TestCallExpression",
+  componentId: "sc-1ov7kkz-2"
+})(["height:20px;"]);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-with-config/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-with-config/input.js
new file mode 100644
index 0000000000000..c89451dee60e3
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-with-config/input.js
@@ -0,0 +1,27 @@
+import styled, { css, createGlobalStyle } from 'styled-components'
+
+const Named = styled.div`
+  width: 100%;
+`
+
+const NamedWithInterpolation = styled.div`
+  color: ${color => props.color};
+`
+
+const Wrapped = styled(Inner)`
+  color: red;
+`
+
+const Foo = styled.div({
+  color: 'green',
+})
+
+const style = css`
+  background: green;
+`
+
+const GlobalStyle = createGlobalStyle`
+  html {
+    background: silver;
+  }
+`
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-with-config/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-with-config/options.json
new file mode 100644
index 0000000000000..71d1839a837f5
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-with-config/options.json
@@ -0,0 +1,19 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": "defaults"
+      }
+    ]
+  ],
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "displayName": true,
+      "transpileTemplateLiterals": true,
+      "minify": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-with-config/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-with-config/output.js
new file mode 100644
index 0000000000000..a6124f9adf119
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-with-config/output.js
@@ -0,0 +1,17 @@
+import styled, { css, createGlobalStyle } from 'styled-components';
+const Named = styled.div.withConfig({
+  displayName: "input__Named"
+})(["\n  width: 100%;\n"]);
+const NamedWithInterpolation = styled.div.withConfig({
+  displayName: "input__NamedWithInterpolation"
+})(["\n  color: ", ";\n"], color => props.color);
+const Wrapped = styled(Inner).withConfig({
+  displayName: "input__Wrapped"
+})(["\n  color: red;\n"]);
+const Foo = styled.div.withConfig({
+  displayName: "input__Foo"
+})({
+  color: 'green'
+});
+const style = css(["\n  background: green;\n"]);
+const GlobalStyle = createGlobalStyle(["\n  html {\n    background: silver;\n  }\n"]);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-without-config/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-without-config/input.js
new file mode 100644
index 0000000000000..1e9488288d0c4
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-without-config/input.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Named = styled.div`
+  width: 100%;
+`;
+
+const NamedWithInterpolation = styled.div`
+  color: ${color => props.color};
+`;
+
+const Wrapped = styled(Inner)`color: red;`;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-without-config/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-without-config/options.json
new file mode 100644
index 0000000000000..7f77a3739e086
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-without-config/options.json
@@ -0,0 +1,19 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": "defaults"
+      }
+    ]
+  ],
+  "plugins": [
+    ["styled-components", {
+      "ssr": false,
+      "displayName": false,
+      "transpileTemplateLiterals": true,
+      "minify": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-without-config/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-without-config/output.js
new file mode 100644
index 0000000000000..1333d6fdf8ca4
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/transpile-template-literals-without-config/output.js
@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+const Named = styled.div(["\n  width: 100%;\n"]);
+const NamedWithInterpolation = styled.div(["\n  color: ", ";\n"], color => props.color);
+const Wrapped = styled(Inner)(["color: red;"]);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/input.js
new file mode 100644
index 0000000000000..e656c5d565db3
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/input.js
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+const Test = styled.div`color: red;`;
+const before = styled.div`color: blue;`;
+styled.div``;
+export default styled.button``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/options.json
new file mode 100644
index 0000000000000..59778760099cb
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/options.json
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "meaninglessFileNames": ["input"],
+      "transpileTemplateLiterals": false,
+      "ssr": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/output.js
new file mode 100644
index 0000000000000..a164bae4ca305
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/output.js
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+const Test = styled.div.withConfig({
+  displayName: "use-directory-name__Test",
+  componentId: "sc-885txi-0"
+})`color:red;`;
+const before = styled.div.withConfig({
+  displayName: "use-directory-name__before",
+  componentId: "sc-885txi-1"
+})`color:blue;`;
+styled.div.withConfig({
+  displayName: "use-directory-name",
+  componentId: "sc-885txi-2"
+})``;
+export default styled.button.withConfig({
+  displayName: "use-directory-name",
+  componentId: "sc-885txi-3"
+})``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/input.js
new file mode 100644
index 0000000000000..e656c5d565db3
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/input.js
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+const Test = styled.div`color: red;`;
+const before = styled.div`color: blue;`;
+styled.div``;
+export default styled.button``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/options.json
new file mode 100644
index 0000000000000..29e96ad7021d0
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/options.json
@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "transpileTemplateLiterals": false,
+      "ssr": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/output.js
new file mode 100644
index 0000000000000..6d58ca1c4946d
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/output.js
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+const Test = styled.div.withConfig({
+  displayName: "input__Test",
+  componentId: "sc-3maeg5-0"
+})`color:red;`;
+const before = styled.div.withConfig({
+  displayName: "input__before",
+  componentId: "sc-3maeg5-1"
+})`color:blue;`;
+styled.div.withConfig({
+  displayName: "input",
+  componentId: "sc-3maeg5-2"
+})``;
+export default styled.button.withConfig({
+  displayName: "input",
+  componentId: "sc-3maeg5-3"
+})``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/input.js
new file mode 100644
index 0000000000000..85b62c77bf5a8
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/input.js
@@ -0,0 +1,23 @@
+import * as styled from 'styled-components'
+
+const css = styled.css`
+  background: black;
+`
+
+const GlobalStyle = styled.createGlobalStyle`
+  html {
+    background: black;
+  }
+`
+
+const Test = styled.default.div`
+  color: red;
+`
+
+const before = styled.default.div`
+  color: blue;
+`
+
+styled.default.div``
+
+export default styled.default.button``
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/options.json
new file mode 100644
index 0000000000000..7dc89c775d4c1
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/options.json
@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "namespace": "test-namespace",
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/output.js
new file mode 100644
index 0000000000000..e63c4d7f7ae4b
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/output.js
@@ -0,0 +1,25 @@
+import * as styled from 'styled-components';
+const css = styled.css`
+  background: black;
+`;
+const GlobalStyle = styled.createGlobalStyle`
+  html {
+    background: black;
+  }
+`;
+const Test = styled.default.div.withConfig({
+  displayName: "input__Test",
+  componentId: "test-namespace__sc-ko2l8q-0"
+})`color:red;`;
+const before = styled.default.div.withConfig({
+  displayName: "input__before",
+  componentId: "test-namespace__sc-ko2l8q-1"
+})`color:blue;`;
+styled.default.div.withConfig({
+  displayName: "input",
+  componentId: "test-namespace__sc-ko2l8q-2"
+})``;
+export default styled.default.button.withConfig({
+  displayName: "input",
+  componentId: "test-namespace__sc-ko2l8q-3"
+})``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/input.js
new file mode 100644
index 0000000000000..f48662ec51194
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/input.js
@@ -0,0 +1,2 @@
+const Test = s.div`width: 100%;`;
+import { default as s, css } from 'styled-components';
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/options.json b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/options.json
new file mode 100644
index 0000000000000..29e96ad7021d0
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/options.json
@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "transpileTemplateLiterals": false,
+      "ssr": true
+    }]
+  ]
+}
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/output.js
new file mode 100644
index 0000000000000..994932c460cc7
--- /dev/null
+++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/output.js
@@ -0,0 +1,5 @@
+const Test = s.div.withConfig({
+  displayName: "input__Test",
+  componentId: "sc-ii5gby-0"
+})`width:100%;`;
+import { default as s, css } from 'styled-components';