diff --git a/Cargo.lock b/Cargo.lock
index be2585842..8929b70d9 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -215,9 +215,9 @@ dependencies = [
 
 [[package]]
 name = "anstream"
-version = "0.6.8"
+version = "0.6.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "628a8f9bd1e24b4e0db2b4bc2d000b001e7dd032d54afa60a68836aeec5aa54a"
+checksum = "6e2e1ebcb11de5c03c67de28a7df593d32191b44939c482e97702baaaa6ab6a5"
 dependencies = [
  "anstyle",
  "anstyle-parse",
@@ -700,9 +700,9 @@ dependencies = [
 
 [[package]]
 name = "browserslist-rs"
-version = "0.13.0"
+version = "0.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e33066f72a558361eeb1077b0aff0f1dce1ac75bdc20b38a642f155f767b2824"
+checksum = "4f2557836820eed97f79071bb3294b2640e71e0bc4301336a210a1b8b4947c15"
 dependencies = [
  "ahash 0.8.7",
  "anyhow",
@@ -808,9 +808,9 @@ dependencies = [
 
 [[package]]
 name = "cached_proc_macro_types"
-version = "0.1.0"
+version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3a4f925191b4367301851c6d99b09890311d74b0d43f274c0b34c86d308a3663"
+checksum = "ade8366b8bd5ba243f0a58f036cc0ca8a2f069cff1a2351ef1cac6b083e16fc0"
 
 [[package]]
 name = "calloop"
@@ -911,14 +911,14 @@ dependencies = [
 
 [[package]]
 name = "chrono"
-version = "0.4.31"
+version = "0.4.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7f2c685bad3eb3d45a01354cedb7d5faa66194d1d58ba6e267a8de788f79db38"
+checksum = "41daef31d7a747c5c847246f36de49ced6f7403b4cdabc807a97b5cc184cda7a"
 dependencies = [
  "android-tzdata",
  "iana-time-zone",
  "num-traits",
- "windows-targets 0.48.5",
+ "windows-targets 0.52.0",
 ]
 
 [[package]]
@@ -1973,9 +1973,9 @@ dependencies = [
 
 [[package]]
 name = "h2"
-version = "0.3.23"
+version = "0.3.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b553656127a00601c8ae5590fcfdc118e4083a7924b6cf4ffc1ea4b99dc429d7"
+checksum = "bb2c4422095b67ee78da96fbb51a4cc413b3b25883c7717ff7ca1ab31022c9c9"
 dependencies = [
  "bytes",
  "fnv",
@@ -2035,9 +2035,9 @@ dependencies = [
 
 [[package]]
 name = "hermit-abi"
-version = "0.3.3"
+version = "0.3.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d77f7ec81a6d05a3abb01ab6eb7590f6083d08449fe5a1c8b1e620283546ccb7"
+checksum = "5d3d0e0f38255e7fa3cf31335b3a56f05febd18025f4db5ef7a0cfb4f8da651f"
 
 [[package]]
 name = "hex"
@@ -2296,7 +2296,7 @@ version = "1.0.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "eae7b9aee968036d54dce06cebaefd919e4472e753296daccd6d344e3e2df0c2"
 dependencies = [
- "hermit-abi 0.3.3",
+ "hermit-abi 0.3.4",
  "libc",
  "windows-sys 0.48.0",
 ]
@@ -2332,7 +2332,7 @@ version = "0.4.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0bad00257d07be169d870ab665980b06cdb366d792ad690bf2e76876dc503455"
 dependencies = [
- "hermit-abi 0.3.3",
+ "hermit-abi 0.3.4",
  "rustix 0.38.30",
  "windows-sys 0.52.0",
 ]
@@ -2345,9 +2345,9 @@ checksum = "616cde7c720bb2bb5824a224687d8f77bfd38922027f01d825cd7453be5099fb"
 
 [[package]]
 name = "itertools"
-version = "0.10.5"
+version = "0.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b0fd2260e829bddf4cb6ea802289de2f86d6a7a690192fbe91b3f46e0f2c8473"
+checksum = "25db6b064527c5d482d0423354fcd07a89a2dfe07b67892e62411946db7f07b0"
 dependencies = [
  "either",
 ]
@@ -2682,7 +2682,9 @@ dependencies = [
  "serde-xml-rs",
  "serde_json",
  "serde_yaml",
+ "styled_components",
  "svgr-rs",
+ "swc_common 0.33.12",
  "swc_core 0.86.104",
  "swc_emotion",
  "swc_error_reporters 0.17.12",
@@ -2743,7 +2745,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d5a92219a0cd59dad0c894e6600f56cab2def3cd7a3752c66af2800e4db2548c"
 dependencies = [
  "markdown",
- "swc_core 0.87.24",
+ "swc_core 0.87.28",
 ]
 
 [[package]]
@@ -2831,7 +2833,7 @@ dependencies = [
  "owo-colors",
  "supports-color 2.1.0",
  "supports-hyperlinks 2.1.0",
- "supports-unicode 2.0.0",
+ "supports-unicode 2.1.0",
  "terminal_size",
  "textwrap",
  "thiserror",
@@ -3166,7 +3168,7 @@ version = "1.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4161fcb6d602d4d2081af7c3a45852d875a03dd337a6bfdd6e06407b61342a43"
 dependencies = [
- "hermit-abi 0.3.3",
+ "hermit-abi 0.3.4",
  "libc",
 ]
 
@@ -3595,9 +3597,9 @@ dependencies = [
 
 [[package]]
 name = "pkg-config"
-version = "0.3.28"
+version = "0.3.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "69d3587f8a9e599cc7ec2c00e331f71c4e69a5f9a4b8a6efd5b07466b9736f9a"
+checksum = "2900ede94e305130c13ddd391e0ab7cbaeb783945ae07a279c268cb05109c6cb"
 
 [[package]]
 name = "pmutil"
@@ -3684,9 +3686,9 @@ checksum = "925383efa346730478fb4838dbe9137d2a47675ad789c546d150a6e1dd4ab31c"
 
 [[package]]
 name = "preset_env_base"
-version = "0.4.9"
+version = "0.4.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ff96707a8ddcf6230b2249554d5dc78bbe93cfe28af5ef880174a0f2e63d0d53"
+checksum = "d4e9bedef66806cb32828719aa5cad298e363ad50d190538db40b5631b89d456"
 dependencies = [
  "ahash 0.8.7",
  "anyhow",
@@ -3752,9 +3754,9 @@ checksum = "dc375e1527247fe1a97d8b7156678dfe7c1af2fc075c9a4db3690ecd2a148068"
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.76"
+version = "1.0.78"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "95fc56cda0b5c3325f5fbbd7ff9fda9e02bb00bb3dac51252d2f1bfa1cb8cc8c"
+checksum = "e2422ad645d89c99f8f3e6b88a9fdeca7fabeac836b1002371c4367c8f984aae"
 dependencies = [
  "unicode-ident",
 ]
@@ -3880,9 +3882,9 @@ checksum = "f2ff9a1f06a88b01621b7ae906ef0211290d1c8a168a15542486a8f61c0833b9"
 
 [[package]]
 name = "rayon"
-version = "1.8.0"
+version = "1.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9c27db03db7734835b3f53954b534c91069375ce6ccaa2e065441e07d9b6cdb1"
+checksum = "fa7237101a77a10773db45d62004a272517633fbcc3df19d96455ede1122e051"
 dependencies = [
  "either",
  "rayon-core",
@@ -3890,9 +3892,9 @@ dependencies = [
 
 [[package]]
 name = "rayon-core"
-version = "1.12.0"
+version = "1.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5ce3fb6ad83f861aac485e76e1985cd109d9a3713802152be56c3b1f0e0658ed"
+checksum = "1465873a3dfdaa8ae7cb14b4383657caab0b3e8a0aa9ae8e04b044854c8dfce2"
 dependencies = [
  "crossbeam-deque",
  "crossbeam-utils",
@@ -3918,13 +3920,13 @@ dependencies = [
 
 [[package]]
 name = "regex"
-version = "1.10.2"
+version = "1.10.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "380b951a9c5e80ddfd6136919eef32310721aa4aacd4889a8d39124b026ab343"
+checksum = "b62dbe01f0b06f9d8dc7d49e05a0785f153b00b2c227856282f671e0318c9b15"
 dependencies = [
  "aho-corasick",
  "memchr",
- "regex-automata 0.4.3",
+ "regex-automata 0.4.4",
  "regex-syntax 0.8.2",
 ]
 
@@ -3939,9 +3941,9 @@ dependencies = [
 
 [[package]]
 name = "regex-automata"
-version = "0.4.3"
+version = "0.4.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5f804c7828047e88b2d32e2d7fe5a105da8ee3264f01902f796c8e067dc2483f"
+checksum = "3b7fa1134405e2ec9353fd416b17f8dacd46c473d7d3fd1cf202706a14eb792a"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -4364,9 +4366,9 @@ dependencies = [
 
 [[package]]
 name = "smallvec"
-version = "1.12.0"
+version = "1.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2593d31f82ead8df961d8bd23a64c2ccf2eb5dd34b0a34bfb4dd54011c72009e"
+checksum = "e6ecd384b10a64542d77071bd64bd7b231f4ed5940fba55e98c3de13824cf3d7"
 
 [[package]]
 name = "smartstring"
@@ -4568,6 +4570,24 @@ version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "73473c0e59e6d5812c5dfe2a064a6444949f089e20eec9a2e5506596494e4623"
 
+[[package]]
+name = "styled_components"
+version = "0.87.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f568dc2fc13684dda88fe3182e6ef0bdc99346943cd57e893cae01cb375f69c4"
+dependencies = [
+ "Inflector",
+ "once_cell",
+ "regex",
+ "serde",
+ "swc_atoms 0.6.5",
+ "swc_common 0.33.12",
+ "swc_ecma_ast 0.110.17",
+ "swc_ecma_utils 0.124.39",
+ "swc_ecma_visit 0.96.17",
+ "tracing",
+]
+
 [[package]]
 name = "supports-color"
 version = "1.3.1"
@@ -4617,9 +4637,9 @@ dependencies = [
 
 [[package]]
 name = "supports-unicode"
-version = "2.0.0"
+version = "2.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4b6c2cb240ab5dd21ed4906895ee23fe5a48acdbd15a3ce388e7b62a9b66baf7"
+checksum = "f850c19edd184a205e883199a261ed44471c81e39bd95b1357f5febbef00e77a"
 dependencies = [
  "is-terminal",
 ]
@@ -4668,7 +4688,7 @@ dependencies = [
  "swc_compiler_base",
  "swc_config",
  "swc_ecma_ast 0.110.17",
- "swc_ecma_codegen 0.146.54",
+ "swc_ecma_codegen 0.146.55",
  "swc_ecma_ext_transforms",
  "swc_ecma_lints",
  "swc_ecma_loader 0.45.13",
@@ -4884,7 +4904,7 @@ dependencies = [
  "swc_common 0.33.12",
  "swc_config",
  "swc_ecma_ast 0.110.17",
- "swc_ecma_codegen 0.146.54",
+ "swc_ecma_codegen 0.146.55",
  "swc_ecma_minifier",
  "swc_ecma_parser 0.141.37",
  "swc_ecma_visit 0.96.17",
@@ -4953,7 +4973,7 @@ dependencies = [
  "swc_css_utils",
  "swc_css_visit",
  "swc_ecma_ast 0.110.17",
- "swc_ecma_codegen 0.146.54",
+ "swc_ecma_codegen 0.146.55",
  "swc_ecma_minifier",
  "swc_ecma_parser 0.141.37",
  "swc_ecma_preset_env",
@@ -4972,23 +4992,23 @@ dependencies = [
  "swc_plugin",
  "swc_plugin_macro",
  "swc_plugin_proxy",
- "vergen 8.3.0",
+ "vergen 8.3.1",
 ]
 
 [[package]]
 name = "swc_core"
-version = "0.87.24"
+version = "0.87.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5afa41784305e5a87e27e30e672f903fcd4f3e66b43d95de926c7cf4f6a17190"
+checksum = "8b3e389aed344d9d738f7e0901a1778a8402f10e459556c6d3a7a5b4501bf4cf"
 dependencies = [
  "swc_atoms 0.6.5",
  "swc_common 0.33.12",
  "swc_ecma_ast 0.110.17",
- "swc_ecma_codegen 0.146.54",
+ "swc_ecma_codegen 0.146.55",
  "swc_ecma_parser 0.141.37",
- "swc_ecma_transforms_base 0.135.11",
+ "swc_ecma_transforms_base 0.135.12",
  "swc_ecma_visit 0.96.17",
- "vergen 8.3.0",
+ "vergen 8.3.1",
 ]
 
 [[package]]
@@ -5094,9 +5114,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_prefixer"
-version = "0.153.25"
+version = "0.153.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "74adc2822de64d5215ad253ce360dc39f99686dbb46840b6ae374aad69133cfa"
+checksum = "44090217e193fd7c2713de099b9590f2bc39832b78e163aadcce1fa45a047424"
 dependencies = [
  "once_cell",
  "preset_env_base",
@@ -5230,9 +5250,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_codegen"
-version = "0.146.54"
+version = "0.146.55"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "99b61ca275e3663238b71c4b5da8e6fb745bde9989ef37d94984dfc81fc6d009"
+checksum = "aa20d5c61563c5ec9ba469a7701512f4d6bc29790718cd198f43e61148e8aff2"
 dependencies = [
  "memchr",
  "num-bigint",
@@ -5546,7 +5566,7 @@ dependencies = [
  "swc_common 0.33.12",
  "swc_config",
  "swc_ecma_ast 0.110.17",
- "swc_ecma_codegen 0.146.54",
+ "swc_ecma_codegen 0.146.55",
  "swc_ecma_parser 0.141.37",
  "swc_ecma_transforms_base 0.134.58",
  "swc_ecma_transforms_optimization 0.195.74",
@@ -5779,9 +5799,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_base"
-version = "0.135.11"
+version = "0.135.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d4ab26ec124b03e47f54d4daade8e9a9dcd66d3a4ca3cd47045f138d267a60e"
+checksum = "f6f0efec63cc56f3f2b93d1367d16e684d1c6f4a6cb85436db2c91448867df2b"
 dependencies = [
  "better_scoped_tls",
  "bitflags 2.4.2",
@@ -6025,7 +6045,7 @@ dependencies = [
  "sourcemap 6.4.1",
  "swc_common 0.33.12",
  "swc_ecma_ast 0.110.17",
- "swc_ecma_codegen 0.146.54",
+ "swc_ecma_codegen 0.146.55",
  "swc_ecma_parser 0.141.37",
  "swc_ecma_testing 0.22.15",
  "swc_ecma_transforms_base 0.134.58",
@@ -6201,7 +6221,7 @@ dependencies = [
  "swc_atoms 0.6.5",
  "swc_common 0.33.12",
  "swc_ecma_ast 0.110.17",
- "swc_ecma_codegen 0.146.54",
+ "swc_ecma_codegen 0.146.55",
  "swc_ecma_utils 0.125.4",
  "swc_ecma_visit 0.96.17",
  "swc_trace_macro",
@@ -6329,9 +6349,9 @@ dependencies = [
 
 [[package]]
 name = "swc_plugin_macro"
-version = "0.9.15"
+version = "0.9.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "785309d342a69df4c929ee59e14e36889ca832f1d2a3c1d03c47c93126c72dbc"
+checksum = "3232db481484070637b20a155c064096c0ea1ba04fa2247b89b618661b3574f4"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -6354,9 +6374,9 @@ dependencies = [
 
 [[package]]
 name = "swc_timer"
-version = "0.21.14"
+version = "0.21.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b37010da5874d241c9e11ef020b8e4473f3af4e5d2e19219e92d99c04f12e0c6"
+checksum = "ada05e875bc7b0a78f8724eb0ad2cab04db8d2d80483d689423dfbd88551b145"
 dependencies = [
  "tracing",
 ]
@@ -6981,9 +7001,9 @@ dependencies = [
 
 [[package]]
 name = "unicode-bidi"
-version = "0.3.14"
+version = "0.3.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6f2528f27a9eb2b21e69c95319b30bd0efd85d09c379741b0f78ea1d86be2416"
+checksum = "08f95100a766bf4f8f28f90d77e0a5461bbdb219042e7679bebe79004fed8d75"
 
 [[package]]
 name = "unicode-id"
@@ -7055,9 +7075,9 @@ checksum = "711b9620af191e0cdc7468a8d14e709c3dcdb115b36f838e601583af800a370a"
 
 [[package]]
 name = "uuid"
-version = "1.6.1"
+version = "1.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5e395fcf16a7a3d8127ec99782007af141946b4795001f876d54fb0d55978560"
+checksum = "f00cc9702ca12d3c81455259621e676d0f7251cec66a21e98fe2e9a37db93b2a"
 
 [[package]]
 name = "valuable"
@@ -7094,9 +7114,9 @@ dependencies = [
 
 [[package]]
 name = "vergen"
-version = "8.3.0"
+version = "8.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec0d895592fa7710eba03fe072e614e3dc6a61ab76ae7ae10d2eb4a7ed5b00ca"
+checksum = "e27d6bdd219887a9eadd19e1c34f32e47fa332301184935c6d9bca26f3cca525"
 dependencies = [
  "anyhow",
  "cargo_metadata 0.18.1",
diff --git a/crates/core/Cargo.toml b/crates/core/Cargo.toml
index 70c9eaf13..c39b25151 100644
--- a/crates/core/Cargo.toml
+++ b/crates/core/Cargo.toml
@@ -47,6 +47,8 @@ swc_core = { workspace = true, features = [
 swc_error_reporters = "0.17.12"
 swc_node_comments   = "0.20.12"
 swc_emotion         = "0.67.0"
+swc_common          = "=0.33.12"
+styled_components   = "0.87.0"
 
 base64                = "0.21.2"
 petgraph              = "0.6.3"
diff --git a/crates/core/src/lib.rs b/crates/core/src/lib.rs
index 7a7aa02db..cb648bc3b 100644
--- a/crates/core/src/lib.rs
+++ b/crates/core/src/lib.rs
@@ -24,9 +24,9 @@ pub use {
     anyhow, base64, cached, clap, colored, config, convert_case, fs_extra, futures, glob, hyper,
     hyper_staticfile, hyper_tungstenite, indexmap, lazy_static, md5, mdxjs, merge_source_map,
     mime_guess, nodejs_resolver, notify, notify_debouncer_full, path_clean, pathdiff, petgraph,
-    rayon, regex, sailfish, serde, serde_json, serde_xml_rs, serde_yaml, svgr_rs, swc_emotion,
-    swc_error_reporters, swc_node_comments, thiserror, tokio, tokio_tungstenite, toml, tracing,
-    tracing_subscriber, tungstenite, twox_hash,
+    rayon, regex, sailfish, serde, serde_json, serde_xml_rs, serde_yaml, styled_components,
+    svgr_rs, swc_emotion, swc_error_reporters, swc_node_comments, thiserror, tokio,
+    tokio_tungstenite, toml, tracing, tracing_subscriber, tungstenite, twox_hash,
 };
 
 #[macro_export]
diff --git a/crates/mako/src/compiler.rs b/crates/mako/src/compiler.rs
index e17f2802a..698709265 100644
--- a/crates/mako/src/compiler.rs
+++ b/crates/mako/src/compiler.rs
@@ -255,6 +255,7 @@ impl Compiler {
             Arc::new(plugins::wasm_runtime::WasmRuntimePlugin {}),
             Arc::new(plugins::async_runtime::AsyncRuntimePlugin {}),
             Arc::new(plugins::emotion::EmotionPlugin {}),
+            Arc::new(plugins::styled_components::StyledComponentsPlugin {}),
             Arc::new(plugins::node_stuff::NodeStuffPlugin {}),
         ];
         plugins.extend(builtin_plugins);
diff --git a/crates/mako/src/config.rs b/crates/mako/src/config.rs
index e3dffca89..8485bbc2b 100644
--- a/crates/mako/src/config.rs
+++ b/crates/mako/src/config.rs
@@ -19,6 +19,10 @@ use serde::Serialize;
 use crate::plugins::node_polyfill::get_all_modules;
 use crate::{optimize_chunk, plugins, transformers};
 
+fn true_by_default() -> bool {
+    true
+}
+
 #[derive(Debug, Diagnostic)]
 #[diagnostic(code("mako.config.json parsed failed"))]
 struct ConfigParseError {
@@ -99,6 +103,7 @@ create_deserialize_fn!(deserialize_devtool, DevtoolConfig);
 create_deserialize_fn!(deserialize_tree_shaking, TreeShakingStrategy);
 create_deserialize_fn!(deserialize_optimization, OptimizationConfig);
 create_deserialize_fn!(deserialize_minifish, MinifishConfig);
+create_deserialize_fn!(deserialize_styled_components, StyledComponentsConfig);
 
 #[derive(Deserialize, Serialize, Debug)]
 #[serde(rename_all = "camelCase")]
@@ -351,6 +356,30 @@ pub struct HmrConfig {
     pub host: String,
     pub port: u16,
 }
+#[derive(Deserialize, Serialize, Debug)]
+#[serde(rename_all = "camelCase")]
+pub struct StyledComponentsConfig {
+    #[serde(default = "true_by_default")]
+    pub display_name: bool,
+    #[serde(default = "true_by_default")]
+    pub ssr: bool,
+    #[serde(default = "true_by_default")]
+    pub file_name: bool,
+    #[serde(default)]
+    pub meaningless_file_names: Vec<String>,
+    #[serde(default)]
+    pub top_level_import_paths: Vec<String>,
+    #[serde(default)]
+    pub namespace: String,
+    #[serde(default)]
+    pub transpile_template_literals: bool,
+    #[serde(default)]
+    pub minify: bool,
+    #[serde(default)]
+    pub pure: bool,
+    #[serde(default = "true_by_default")]
+    pub css_prop: bool,
+}
 
 #[derive(Deserialize, Serialize, Debug)]
 #[serde(rename_all = "camelCase")]
@@ -407,6 +436,11 @@ pub struct Config {
     #[serde(rename = "optimizePackageImports")]
     pub optimize_package_imports: bool,
     pub emotion: bool,
+    #[serde(
+        rename = "styledComponents",
+        deserialize_with = "deserialize_styled_components"
+    )]
+    pub styled_components: Option<StyledComponentsConfig>,
     pub flex_bugs: bool,
     #[serde(deserialize_with = "deserialize_optimization")]
     pub optimization: Option<OptimizationConfig>,
@@ -560,6 +594,7 @@ const DEFAULT_CONFIG: &str = r#"
     "ignores": [],
     "optimizePackageImports": false,
     "emotion": false,
+    "styledComponents": false,
     "flexBugs": false,
     "cjs": false,
     "optimization": { "skipModules": true },
diff --git a/crates/mako/src/plugins/mod.rs b/crates/mako/src/plugins/mod.rs
index 7c3ea4e60..e66641ff5 100644
--- a/crates/mako/src/plugins/mod.rs
+++ b/crates/mako/src/plugins/mod.rs
@@ -20,6 +20,7 @@ pub mod node_polyfill;
 pub mod node_stuff;
 pub mod raw;
 pub mod runtime;
+pub mod styled_components;
 pub mod svg;
 pub mod toml;
 pub mod wasm;
diff --git a/crates/mako/src/plugins/styled_components.rs b/crates/mako/src/plugins/styled_components.rs
new file mode 100644
index 000000000..fb19ddf99
--- /dev/null
+++ b/crates/mako/src/plugins/styled_components.rs
@@ -0,0 +1,55 @@
+use std::sync::Arc;
+
+use mako_core::anyhow::Result;
+use mako_core::styled_components::{styled_components, Config};
+use mako_core::swc_common::FileName;
+use mako_core::swc_ecma_ast::Module;
+use mako_core::swc_ecma_visit::VisitMutWith;
+
+use crate::compiler::Context;
+use crate::plugin::{Plugin, PluginTransformJsParam};
+
+pub struct StyledComponentsPlugin {}
+
+impl Plugin for StyledComponentsPlugin {
+    fn name(&self) -> &str {
+        "styled_components"
+    }
+
+    fn transform_js(
+        &self,
+        param: &PluginTransformJsParam,
+        ast: &mut Module,
+        context: &Arc<Context>,
+    ) -> Result<()> {
+        if context.config.styled_components.is_some() {
+            let raw_config = context.config.styled_components.as_ref().unwrap();
+            let pos = context.meta.script.cm.lookup_char_pos(ast.span.lo);
+            let hash = pos.file.src_hash;
+            let mut styled_visitor = styled_components(
+                FileName::Real(param.path.into()),
+                hash,
+                Config {
+                    display_name: raw_config.display_name,
+                    ssr: raw_config.ssr,
+                    file_name: raw_config.file_name,
+                    meaningless_file_names: raw_config.meaningless_file_names.clone(),
+                    namespace: raw_config.namespace.clone(),
+                    transpile_template_literals: raw_config.transpile_template_literals,
+                    minify: raw_config.minify,
+                    pure: raw_config.pure,
+                    css_prop: raw_config.css_prop,
+                    top_level_import_paths: raw_config
+                        .top_level_import_paths
+                        .clone()
+                        .into_iter()
+                        .map(|s| s.into())
+                        .collect(),
+                },
+            );
+            ast.visit_mut_with(&mut styled_visitor);
+        }
+
+        Ok(())
+    }
+}
diff --git a/examples/with-styled-components/index.tsx b/examples/with-styled-components/index.tsx
new file mode 100644
index 000000000..c81e5f580
--- /dev/null
+++ b/examples/with-styled-components/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import styled from 'styled-components';
+
+const DivContainer = styled.div({
+  background: 'red',
+});
+
+const SpanContainer = styled('span')({
+  background: 'yellow',
+});
+
+const Child = styled.div`
+  color: red;
+`;
+
+const Parent = styled.div`
+  ${Child} {
+    color: green;
+  }
+`;
+
+const App = () => {
+  return [
+    '3333',
+    <DivContainer>red div</DivContainer>,
+    <SpanContainer>yellow span</SpanContainer>,
+    <Parent>
+      <Child>Green because I am inside a Parent</Child>
+    </Parent>,
+    <Child>Red because I am not inside a Parent</Child>,
+  ];
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
diff --git a/examples/with-styled-components/mako.config.json b/examples/with-styled-components/mako.config.json
new file mode 100644
index 000000000..058226be3
--- /dev/null
+++ b/examples/with-styled-components/mako.config.json
@@ -0,0 +1,8 @@
+{
+  "styledComponents": {
+    "namespace": "mako_app"
+  },
+  "optimization": {},
+  "minify": false,
+  "moduleIdStrategy": "named"
+}
diff --git a/examples/with-styled-components/package.json b/examples/with-styled-components/package.json
new file mode 100644
index 000000000..73c65c1e1
--- /dev/null
+++ b/examples/with-styled-components/package.json
@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "build": "cargo run -- $PWD"
+  },
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "^5.3.10"
+  }
+}
diff --git a/examples/with-styled-components/public/index.html b/examples/with-styled-components/public/index.html
new file mode 100644
index 000000000..89ae4adf7
--- /dev/null
+++ b/examples/with-styled-components/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+</head>
+
+<body>
+	<div id="root"></div>
+	<script src="index.js"></script>
+</body>
+
+</html>