From 66f0b1b73ab28755c92af0276770bf0209b435dd Mon Sep 17 00:00:00 2001
From: ciffelia <mc.prince.0203@gmail.com>
Date: Mon, 27 Nov 2023 02:37:34 +0900
Subject: [PATCH] feat(styled-components): Implement `pure` option (#238)

This implements `pure` option in styled-components plugin.

cf. vercel/next.js#30802
---
 Cargo.lock                                    | 18 +++---
 packages/constify/package.json                |  2 +-
 packages/constify/transform/Cargo.toml        |  2 +-
 packages/emotion/package.json                 |  2 +-
 packages/emotion/transform/Cargo.toml         |  2 +-
 packages/jest/package.json                    |  2 +-
 packages/loadable-components/package.json     |  2 +-
 packages/noop/package.json                    |  2 +-
 packages/react-remove-properties/package.json |  2 +-
 .../transform/Cargo.toml                      |  2 +-
 packages/relay/package.json                   |  2 +-
 packages/relay/transform/Cargo.toml           |  2 +-
 packages/remove-console/package.json          |  2 +-
 packages/remove-console/transform/Cargo.toml  |  2 +-
 packages/styled-components/package.json       |  2 +-
 packages/styled-components/src/lib.rs         |  8 ++-
 .../styled-components/transform/Cargo.toml    |  2 +-
 .../styled-components/transform/src/lib.rs    | 28 +++++----
 .../transform/src/utils/mod.rs                |  8 +++
 .../transform/src/visitors/mod.rs             |  1 +
 .../transform/src/visitors/pure_annotation.rs | 58 +++++++++++++++++++
 .../transform/tests/fixture.rs                |  7 ++-
 .../.babelrc                                  | 10 ----
 .../output.js                                 |  2 -
 .../.annotate-css-with-pure-comments/.babelrc | 10 ----
 .../output.js                                 |  6 --
 .../.babelrc                                  | 10 ----
 .../output.js                                 |  2 -
 .../.babelrc                                  | 10 ----
 .../output.js                                 | 44 --------------
 .../.babelrc                                  | 10 ----
 .../output.js                                 |  2 -
 .../fixtures/add-display-names/output.js      |  4 +-
 .../config.json                               |  3 +-
 .../add-identifier-and-display-name/output.js | 19 ++----
 .../config.json                               |  2 -
 .../output.js                                 |  4 +-
 .../config.json                               |  1 -
 .../output.js                                 |  4 +-
 .../tests/fixtures/add-identifier/config.json |  3 +-
 .../tests/fixtures/add-identifier/output.js   |  4 +-
 .../code.js                                   |  0
 .../config.json                               |  3 +
 .../output.js                                 |  4 ++
 .../code.js                                   |  0
 .../config.json                               |  3 +
 .../annotate-css-with-pure-comments/output.js | 11 ++++
 .../code.js                                   |  0
 .../config.json                               |  3 +
 .../output.js                                 |  4 ++
 .../code.js                                   |  0
 .../config.json                               |  3 +
 .../output.js                                 | 58 +++++++++++++++++++
 .../code.js                                   |  0
 .../config.json                               |  3 +
 .../output.js                                 |  2 +
 .../output.js                                 | 18 +++---
 .../ignore-external-styled-import/output.js   |  9 ++-
 .../tests/fixtures/issue-224/output.js        | 26 ++++++---
 .../minify-css-in-helpers/config.json         |  3 +-
 .../config.json                               |  4 +-
 .../config.json                               |  4 +-
 .../config.json                               |  5 +-
 .../output.js                                 |  2 +-
 .../track-the-imported-variable/config.json   |  3 +-
 .../track-the-imported-variable/output.js     |  2 +-
 .../transpile-css-prop-add-import/config.json |  3 +-
 .../config.json                               |  3 +-
 .../config.json                               |  8 +--
 .../fixtures/transpile-css-prop/config.json   |  3 +-
 .../transpile-require-default/output.js       | 18 +++---
 .../config.json                               |  2 -
 .../tests/fixtures/use-file-name/config.json  |  3 +-
 .../tests/fixtures/use-file-name/output.js    |  4 +-
 .../tests/fixtures/use-namespace/output.js    | 20 ++++---
 .../config.json                               |  3 +-
 packages/styled-jsx/package.json              |  2 +-
 packages/styled-jsx/transform/Cargo.toml      |  2 +-
 packages/swc-magic/package.json               |  2 +-
 packages/swc-magic/transform/Cargo.toml       |  2 +-
 packages/transform-imports/package.json       |  2 +-
 .../transform-imports/transform/Cargo.toml    |  2 +-
 82 files changed, 298 insertions(+), 259 deletions(-)
 create mode 100644 packages/styled-components/transform/src/visitors/pure_annotation.rs
 delete mode 100644 packages/styled-components/transform/tests/fixtures/.annotate-create-global-style-with-pure-comments/.babelrc
 delete mode 100644 packages/styled-components/transform/tests/fixtures/.annotate-create-global-style-with-pure-comments/output.js
 delete mode 100644 packages/styled-components/transform/tests/fixtures/.annotate-css-with-pure-comments/.babelrc
 delete mode 100644 packages/styled-components/transform/tests/fixtures/.annotate-css-with-pure-comments/output.js
 delete mode 100644 packages/styled-components/transform/tests/fixtures/.annotate-keyframes-with-pure-comments/.babelrc
 delete mode 100644 packages/styled-components/transform/tests/fixtures/.annotate-keyframes-with-pure-comments/output.js
 delete mode 100644 packages/styled-components/transform/tests/fixtures/.annotate-styled-calls-with-pure-comments/.babelrc
 delete mode 100644 packages/styled-components/transform/tests/fixtures/.annotate-styled-calls-with-pure-comments/output.js
 delete mode 100644 packages/styled-components/transform/tests/fixtures/.annotate-withtheme-with-pure-comments/.babelrc
 delete mode 100644 packages/styled-components/transform/tests/fixtures/.annotate-withtheme-with-pure-comments/output.js
 rename packages/styled-components/transform/tests/fixtures/{.annotate-create-global-style-with-pure-comments => annotate-create-global-style-with-pure-comments}/code.js (100%)
 create mode 100644 packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/config.json
 create mode 100644 packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/output.js
 rename packages/styled-components/transform/tests/fixtures/{.annotate-css-with-pure-comments => annotate-css-with-pure-comments}/code.js (100%)
 create mode 100644 packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/config.json
 create mode 100644 packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/output.js
 rename packages/styled-components/transform/tests/fixtures/{.annotate-keyframes-with-pure-comments => annotate-keyframes-with-pure-comments}/code.js (100%)
 create mode 100644 packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/config.json
 create mode 100644 packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/output.js
 rename packages/styled-components/transform/tests/fixtures/{.annotate-styled-calls-with-pure-comments => annotate-styled-calls-with-pure-comments}/code.js (100%)
 create mode 100644 packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/config.json
 create mode 100644 packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/output.js
 rename packages/styled-components/transform/tests/fixtures/{.annotate-withtheme-with-pure-comments => annotate-withtheme-with-pure-comments}/code.js (100%)
 create mode 100644 packages/styled-components/transform/tests/fixtures/annotate-withtheme-with-pure-comments/config.json
 create mode 100644 packages/styled-components/transform/tests/fixtures/annotate-withtheme-with-pure-comments/output.js

diff --git a/Cargo.lock b/Cargo.lock
index 7ca339a5d..e4a36348f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1172,7 +1172,7 @@ dependencies = [
 
 [[package]]
 name = "modularize_imports"
-version = "0.60.0"
+version = "0.61.0"
 dependencies = [
  "convert_case",
  "handlebars",
@@ -1716,7 +1716,7 @@ dependencies = [
 
 [[package]]
 name = "react_remove_properties"
-version = "0.16.0"
+version = "0.17.0"
 dependencies = [
  "serde",
  "swc_atoms",
@@ -1791,7 +1791,7 @@ checksum = "c707298afce11da2efef2f600116fa93ffa7a032b5d7b628aa17711ec81383ca"
 
 [[package]]
 name = "remove_console"
-version = "0.17.0"
+version = "0.18.0"
 dependencies = [
  "serde",
  "swc_atoms",
@@ -2167,7 +2167,7 @@ checksum = "73473c0e59e6d5812c5dfe2a064a6444949f089e20eec9a2e5506596494e4623"
 
 [[package]]
 name = "styled_components"
-version = "0.88.0"
+version = "0.89.0"
 dependencies = [
  "Inflector",
  "once_cell",
@@ -2188,7 +2188,7 @@ dependencies = [
 
 [[package]]
 name = "styled_jsx"
-version = "0.65.0"
+version = "0.66.0"
 dependencies = [
  "easy-error",
  "lightningcss",
@@ -2329,7 +2329,7 @@ dependencies = [
 
 [[package]]
 name = "swc_constify"
-version = "0.28.0"
+version = "0.29.0"
 dependencies = [
  "once_cell",
  "rustc-hash",
@@ -2794,7 +2794,7 @@ dependencies = [
 
 [[package]]
 name = "swc_emotion"
-version = "0.64.0"
+version = "0.65.0"
 dependencies = [
  "base64",
  "byteorder",
@@ -2870,7 +2870,7 @@ dependencies = [
 
 [[package]]
 name = "swc_magic"
-version = "0.11.0"
+version = "0.12.0"
 dependencies = [
  "serde",
  "swc_atoms",
@@ -3107,7 +3107,7 @@ dependencies = [
 
 [[package]]
 name = "swc_relay"
-version = "0.36.0"
+version = "0.37.0"
 dependencies = [
  "once_cell",
  "regex",
diff --git a/packages/constify/package.json b/packages/constify/package.json
index 79e8871ce..0ac767fd1 100644
--- a/packages/constify/package.json
+++ b/packages/constify/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-constify",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "SWC plugin for optimization",
   "main": "swc_plugin_constify.wasm",
   "scripts": {
diff --git a/packages/constify/transform/Cargo.toml b/packages/constify/transform/Cargo.toml
index 932d169c4..948dbbfe7 100644
--- a/packages/constify/transform/Cargo.toml
+++ b/packages/constify/transform/Cargo.toml
@@ -5,7 +5,7 @@ edition = "2021"
 license = "Apache-2.0"
 name = "swc_constify"
 repository = "https://github.com/swc-project/plugins.git"
-version = "0.28.0"
+version = "0.29.0"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
diff --git a/packages/emotion/package.json b/packages/emotion/package.json
index 37412e554..9ff36f35b 100644
--- a/packages/emotion/package.json
+++ b/packages/emotion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-emotion",
-  "version": "2.5.103",
+  "version": "2.5.104",
   "description": "SWC plugin for emotion css-in-js library",
   "main": "swc_plugin_emotion.wasm",
   "scripts": {
diff --git a/packages/emotion/transform/Cargo.toml b/packages/emotion/transform/Cargo.toml
index 611ff2cdf..990e3dcbc 100644
--- a/packages/emotion/transform/Cargo.toml
+++ b/packages/emotion/transform/Cargo.toml
@@ -5,7 +5,7 @@ edition = "2021"
 license = "Apache-2.0"
 name = "swc_emotion"
 repository = "https://github.com/swc-project/plugins.git"
-version = "0.64.0"
+version = "0.65.0"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
diff --git a/packages/jest/package.json b/packages/jest/package.json
index ce095162b..ba9f92685 100644
--- a/packages/jest/package.json
+++ b/packages/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-jest",
-  "version": "1.5.103",
+  "version": "1.5.104",
   "description": "SWC plugin for jest",
   "main": "swc_plugin_jest.wasm",
   "scripts": {
diff --git a/packages/loadable-components/package.json b/packages/loadable-components/package.json
index 05345ad0f..66b381942 100644
--- a/packages/loadable-components/package.json
+++ b/packages/loadable-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-loadable-components",
-  "version": "0.3.103",
+  "version": "0.3.104",
   "description": "SWC plugin for `@loadable/components`",
   "main": "swc_plugin_loadable_components.wasm",
   "scripts": {
diff --git a/packages/noop/package.json b/packages/noop/package.json
index ec118dfba..747cc24ce 100644
--- a/packages/noop/package.json
+++ b/packages/noop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-noop",
-  "version": "1.5.101",
+  "version": "1.5.102",
   "description": "Noop SWC plugin, for debugging",
   "main": "swc_plugin_noop.wasm",
   "scripts": {
diff --git a/packages/react-remove-properties/package.json b/packages/react-remove-properties/package.json
index 272b97bc3..f07e4421f 100644
--- a/packages/react-remove-properties/package.json
+++ b/packages/react-remove-properties/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-react-remove-properties",
-  "version": "1.5.103",
+  "version": "1.5.104",
   "description": "SWC plugin for https://www.npmjs.com/package/babel-plugin-react-remove-properties",
   "main": "swc_plugin_react_remove_properties.wasm",
   "scripts": {
diff --git a/packages/react-remove-properties/transform/Cargo.toml b/packages/react-remove-properties/transform/Cargo.toml
index 87c618c53..37992139c 100644
--- a/packages/react-remove-properties/transform/Cargo.toml
+++ b/packages/react-remove-properties/transform/Cargo.toml
@@ -5,7 +5,7 @@ edition = "2021"
 license = "Apache-2.0"
 name = "react_remove_properties"
 repository = "https://github.com/swc-project/plugins.git"
-version = "0.16.0"
+version = "0.17.0"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
diff --git a/packages/relay/package.json b/packages/relay/package.json
index b654c03d0..ebfef10e0 100644
--- a/packages/relay/package.json
+++ b/packages/relay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-relay",
-  "version": "1.5.103",
+  "version": "1.5.104",
   "description": "SWC plugin for relay",
   "main": "swc_plugin_relay.wasm",
   "types": "./types.d.ts",
diff --git a/packages/relay/transform/Cargo.toml b/packages/relay/transform/Cargo.toml
index d14ddb293..3b17d52d6 100644
--- a/packages/relay/transform/Cargo.toml
+++ b/packages/relay/transform/Cargo.toml
@@ -5,7 +5,7 @@ edition = "2021"
 license = "Apache-2.0"
 name = "swc_relay"
 repository = "https://github.com/swc-project/plugins.git"
-version = "0.36.0"
+version = "0.37.0"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
diff --git a/packages/remove-console/package.json b/packages/remove-console/package.json
index a3677d9a3..88b596c34 100644
--- a/packages/remove-console/package.json
+++ b/packages/remove-console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-remove-console",
-  "version": "1.5.103",
+  "version": "1.5.104",
   "description": "SWC plugin for https://www.npmjs.com/package/babel-plugin-remove-console",
   "main": "swc_plugin_remove_console.wasm",
   "scripts": {
diff --git a/packages/remove-console/transform/Cargo.toml b/packages/remove-console/transform/Cargo.toml
index fc0dfe118..ab59b5890 100644
--- a/packages/remove-console/transform/Cargo.toml
+++ b/packages/remove-console/transform/Cargo.toml
@@ -5,7 +5,7 @@ edition = "2021"
 license = "Apache-2.0"
 name = "remove_console"
 repository = "https://github.com/swc-project/plugins.git"
-version = "0.17.0"
+version = "0.18.0"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
diff --git a/packages/styled-components/package.json b/packages/styled-components/package.json
index 472490d58..90ab61add 100644
--- a/packages/styled-components/package.json
+++ b/packages/styled-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-styled-components",
-  "version": "1.5.103",
+  "version": "1.5.104",
   "description": "SWC plugin for styled-components",
   "main": "swc_plugin_styled_components.wasm",
   "scripts": {
diff --git a/packages/styled-components/src/lib.rs b/packages/styled-components/src/lib.rs
index d488182ee..d4b873088 100644
--- a/packages/styled-components/src/lib.rs
+++ b/packages/styled-components/src/lib.rs
@@ -6,8 +6,9 @@ use swc_core::{
     common::FileName,
     ecma::{ast::Program, visit::VisitMutWith},
     plugin::{
-        metadata::TransformPluginMetadataContextKind, plugin_transform,
-        proxies::TransformPluginProgramMetadata,
+        metadata::TransformPluginMetadataContextKind,
+        plugin_transform,
+        proxies::{PluginCommentsProxy, TransformPluginProgramMetadata},
     },
 };
 
@@ -28,7 +29,8 @@ fn styled_components(mut program: Program, data: TransformPluginProgramMetadata)
     let pos = data.source_map.lookup_char_pos(program.span().lo);
     let hash = pos.file.src_hash;
 
-    let mut pass = styled_components::styled_components(file_name, hash, config);
+    let mut pass =
+        styled_components::styled_components(file_name, hash, config, PluginCommentsProxy);
 
     program.visit_mut_with(&mut pass);
 
diff --git a/packages/styled-components/transform/Cargo.toml b/packages/styled-components/transform/Cargo.toml
index 92a6532c4..90dc996d1 100644
--- a/packages/styled-components/transform/Cargo.toml
+++ b/packages/styled-components/transform/Cargo.toml
@@ -6,7 +6,7 @@ include = ["Cargo.toml", "src/**/*.rs"]
 license = "Apache-2.0"
 name = "styled_components"
 repository = "https://github.com/swc-project/plugins.git"
-version = "0.88.0"
+version = "0.89.0"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
diff --git a/packages/styled-components/transform/src/lib.rs b/packages/styled-components/transform/src/lib.rs
index a3ee28b27..e52bdf719 100644
--- a/packages/styled-components/transform/src/lib.rs
+++ b/packages/styled-components/transform/src/lib.rs
@@ -4,14 +4,15 @@ use std::{cell::RefCell, rc::Rc};
 
 use serde::Deserialize;
 use swc_atoms::JsWord;
-use swc_common::{chain, pass::Optional, FileName};
+use swc_common::{chain, comments::Comments, pass::Optional, FileName};
 use swc_ecma_visit::{Fold, VisitMut};
 
 pub use crate::{
     utils::{analyze, analyzer, State},
     visitors::{
         display_name_and_id::display_name_and_id, minify::visitor::minify,
-        template_literals::template_literals, transpile_css_prop::transpile::transpile_css_prop,
+        pure_annotation::pure_annotation, template_literals::template_literals,
+        transpile_css_prop::transpile::transpile_css_prop,
     },
 };
 
@@ -40,10 +41,10 @@ pub struct Config {
     #[serde(default)]
     pub top_level_import_paths: Vec<JsWord>,
 
-    #[serde(default)]
+    #[serde(default = "true_by_default")]
     pub transpile_template_literals: bool,
 
-    #[serde(default)]
+    #[serde(default = "true_by_default")]
     pub minify: bool,
 
     #[serde(default)]
@@ -70,14 +71,15 @@ impl Config {
     }
 }
 
-/// NOTE: **This is not complete**.
-///
-/// [pure] is not implemented.
-pub fn styled_components(
+pub fn styled_components<C>(
     file_name: FileName,
     src_file_hash: u128,
     config: Config,
-) -> impl Fold + VisitMut {
+    comments: C,
+) -> impl Fold + VisitMut
+where
+    C: Comments,
+{
     let state: Rc<RefCell<State>> = Default::default();
     let config = Rc::new(config);
 
@@ -94,7 +96,11 @@ pub fn styled_components(
         display_name_and_id(file_name, src_file_hash, config.clone(), state.clone()),
         Optional {
             enabled: config.transpile_template_literals,
-            visitor: template_literals(state)
-        }
+            visitor: template_literals(state.clone())
+        },
+        Optional {
+            enabled: config.pure,
+            visitor: pure_annotation(comments, state)
+        },
     )
 }
diff --git a/packages/styled-components/transform/src/utils/mod.rs b/packages/styled-components/transform/src/utils/mod.rs
index b49edc8c8..8b26e258a 100644
--- a/packages/styled-components/transform/src/utils/mod.rs
+++ b/packages/styled-components/transform/src/utils/mod.rs
@@ -262,6 +262,14 @@ impl State {
             || self.is_with_theme_helper(e)
     }
 
+    pub(crate) fn is_pure_helper(&self, e: &Expr) -> bool {
+        self.is_create_global_style_helper(e)
+            || self.is_css_helper(e)
+            || self.is_use_theme(e)
+            || self.is_keyframes_helper(e)
+            || self.is_with_theme_helper(e)
+    }
+
     fn is_css_helper(&self, e: &Expr) -> bool {
         match e {
             Expr::Ident(e) => Some(e.to_id()) == self.import_local_name("css", None),
diff --git a/packages/styled-components/transform/src/visitors/mod.rs b/packages/styled-components/transform/src/visitors/mod.rs
index 56dbb493e..219b98b90 100644
--- a/packages/styled-components/transform/src/visitors/mod.rs
+++ b/packages/styled-components/transform/src/visitors/mod.rs
@@ -1,5 +1,6 @@
 pub mod assign_style_required;
 pub mod display_name_and_id;
 pub mod minify;
+pub mod pure_annotation;
 pub mod template_literals;
 pub mod transpile_css_prop;
diff --git a/packages/styled-components/transform/src/visitors/pure_annotation.rs b/packages/styled-components/transform/src/visitors/pure_annotation.rs
new file mode 100644
index 000000000..596a5ee69
--- /dev/null
+++ b/packages/styled-components/transform/src/visitors/pure_annotation.rs
@@ -0,0 +1,58 @@
+//! Port of https://github.com/styled-components/babel-plugin-styled-components/blob/4e2eb388d9c90f2921c306c760657d059d01a518/src/visitors/pure.js
+
+use std::{cell::RefCell, rc::Rc};
+
+use swc_common::{comments::Comments, Span};
+use swc_ecma_ast::*;
+use swc_ecma_visit::{as_folder, noop_visit_mut_type, Fold, VisitMut, VisitMutWith};
+
+use crate::utils::State;
+
+pub fn pure_annotation<C>(comments: C, state: Rc<RefCell<State>>) -> impl Fold + VisitMut
+where
+    C: Comments,
+{
+    as_folder(PureAnnotation { comments, state })
+}
+
+#[derive(Debug)]
+struct PureAnnotation<C>
+where
+    C: Comments,
+{
+    comments: C,
+    state: Rc<RefCell<State>>,
+}
+
+impl<C> VisitMut for PureAnnotation<C>
+where
+    C: Comments,
+{
+    noop_visit_mut_type!();
+
+    fn visit_mut_expr(&mut self, expr: &mut Expr) {
+        expr.visit_mut_children_with(self);
+
+        let (callee_or_tag, span) = match expr {
+            Expr::Call(CallExpr {
+                span,
+                callee: Callee::Expr(callee),
+                ..
+            }) => (callee, span),
+            Expr::TaggedTpl(TaggedTpl { span, tag, .. }) => (tag, span),
+            _ => return,
+        };
+        if !self.state.borrow().is_styled(callee_or_tag)
+            && !self.state.borrow().is_pure_helper(callee_or_tag)
+        {
+            return;
+        }
+
+        if span.is_dummy_ignoring_cmt() {
+            *span = Span::dummy_with_cmt();
+        }
+        if !self.comments.has_flag(span.lo, "PURE") {
+            self.comments.add_pure_comment(span.lo);
+        }
+    }
+}
diff --git a/packages/styled-components/transform/tests/fixture.rs b/packages/styled-components/transform/tests/fixture.rs
index b993987ce..41e99657f 100644
--- a/packages/styled-components/transform/tests/fixture.rs
+++ b/packages/styled-components/transform/tests/fixture.rs
@@ -26,7 +26,12 @@ fn fixture(input: PathBuf) {
 
             chain!(
                 resolver(Mark::new(), Mark::new(), false),
-                styled_components(fm.name.clone(), fm.src_hash, config.clone())
+                styled_components(
+                    fm.name.clone(),
+                    fm.src_hash,
+                    config.clone(),
+                    t.comments.clone()
+                )
             )
         },
         &input,
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-create-global-style-with-pure-comments/.babelrc b/packages/styled-components/transform/tests/fixtures/.annotate-create-global-style-with-pure-comments/.babelrc
deleted file mode 100644
index 8232aac0a..000000000
--- a/packages/styled-components/transform/tests/fixtures/.annotate-create-global-style-with-pure-comments/.babelrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "plugins": [
-    [
-      "../../../src",
-      {
-        "pure": true
-      }
-    ]
-  ]
-}
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-create-global-style-with-pure-comments/output.js b/packages/styled-components/transform/tests/fixtures/.annotate-create-global-style-with-pure-comments/output.js
deleted file mode 100644
index a067223cd..000000000
--- a/packages/styled-components/transform/tests/fixtures/.annotate-create-global-style-with-pure-comments/output.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-const GlobalStyle = /*#__PURE__*/createGlobalStyle(["body{color:red;}"]);
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-css-with-pure-comments/.babelrc b/packages/styled-components/transform/tests/fixtures/.annotate-css-with-pure-comments/.babelrc
deleted file mode 100644
index 8232aac0a..000000000
--- a/packages/styled-components/transform/tests/fixtures/.annotate-css-with-pure-comments/.babelrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "plugins": [
-    [
-      "../../../src",
-      {
-        "pure": true
-      }
-    ]
-  ]
-}
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-css-with-pure-comments/output.js b/packages/styled-components/transform/tests/fixtures/.annotate-css-with-pure-comments/output.js
deleted file mode 100644
index a2d039574..000000000
--- a/packages/styled-components/transform/tests/fixtures/.annotate-css-with-pure-comments/output.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import styled, { css } from 'styled-components';
-const partial = /*#__PURE__*/css(["color:red;"]);
-const Component = /*#__PURE__*/styled.div.withConfig({
-  displayName: "code__Component",
-  componentId: "sc-4wpzk3-0"
-})(["", ";background:blue;"], partial);
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-keyframes-with-pure-comments/.babelrc b/packages/styled-components/transform/tests/fixtures/.annotate-keyframes-with-pure-comments/.babelrc
deleted file mode 100644
index 8232aac0a..000000000
--- a/packages/styled-components/transform/tests/fixtures/.annotate-keyframes-with-pure-comments/.babelrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "plugins": [
-    [
-      "../../../src",
-      {
-        "pure": true
-      }
-    ]
-  ]
-}
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-keyframes-with-pure-comments/output.js b/packages/styled-components/transform/tests/fixtures/.annotate-keyframes-with-pure-comments/output.js
deleted file mode 100644
index f34babf3d..000000000
--- a/packages/styled-components/transform/tests/fixtures/.annotate-keyframes-with-pure-comments/output.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { keyframes } from 'styled-components';
-const Animation = /*#__PURE__*/keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-styled-calls-with-pure-comments/.babelrc b/packages/styled-components/transform/tests/fixtures/.annotate-styled-calls-with-pure-comments/.babelrc
deleted file mode 100644
index 8232aac0a..000000000
--- a/packages/styled-components/transform/tests/fixtures/.annotate-styled-calls-with-pure-comments/.babelrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "plugins": [
-    [
-      "../../../src",
-      {
-        "pure": true
-      }
-    ]
-  ]
-}
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-styled-calls-with-pure-comments/output.js b/packages/styled-components/transform/tests/fixtures/.annotate-styled-calls-with-pure-comments/output.js
deleted file mode 100644
index 8b81f90aa..000000000
--- a/packages/styled-components/transform/tests/fixtures/.annotate-styled-calls-with-pure-comments/output.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from 'styled-components';
-const Test = /*#__PURE__*/styled.div.withConfig({
-  displayName: "code__Test",
-  componentId: "sc-u20i28-0"
-})(["width:100%;"]);
-const Test2 = /*#__PURE__*/styled('div').withConfig({
-  displayName: "code__Test2",
-  componentId: "sc-u20i28-1"
-})([""]);
-const Test3 = true ? styled.div.withConfig({
-  displayName: "code__Test3",
-  componentId: "sc-u20i28-2"
-})([""]) : styled.div.withConfig({
-  displayName: "code__Test3",
-  componentId: "sc-u20i28-3"
-})([""]);
-const styles = {
-  One: styled.div.withConfig({
-    displayName: "code__One",
-    componentId: "sc-u20i28-4"
-  })([""])
-};
-let Component;
-Component = styled.div.withConfig({
-  displayName: "code__Component",
-  componentId: "sc-u20i28-5"
-})([""]);
-const WrappedComponent = /*#__PURE__*/styled(Inner).withConfig({
-  displayName: "code__WrappedComponent",
-  componentId: "sc-u20i28-6"
-})([""]);
-const StyledObjectForm = /*#__PURE__*/styled.div.withConfig({
-  displayName: "code__StyledObjectForm",
-  componentId: "sc-u20i28-7"
-})({
-  color: red
-});
-const StyledFunctionForm = /*#__PURE__*/styled.div.withConfig({
-  displayName: "code__StyledFunctionForm",
-  componentId: "sc-u20i28-8"
-})(p => ({
-  color: p.color || 'red'
-}));
-const normalFunc = add(5, 3);
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-withtheme-with-pure-comments/.babelrc b/packages/styled-components/transform/tests/fixtures/.annotate-withtheme-with-pure-comments/.babelrc
deleted file mode 100644
index 8232aac0a..000000000
--- a/packages/styled-components/transform/tests/fixtures/.annotate-withtheme-with-pure-comments/.babelrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "plugins": [
-    [
-      "../../../src",
-      {
-        "pure": true
-      }
-    ]
-  ]
-}
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-withtheme-with-pure-comments/output.js b/packages/styled-components/transform/tests/fixtures/.annotate-withtheme-with-pure-comments/output.js
deleted file mode 100644
index a2cd31f02..000000000
--- a/packages/styled-components/transform/tests/fixtures/.annotate-withtheme-with-pure-comments/output.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { withTheme } from 'styled-components';
-const ThemedComponent = /*#__PURE__*/withTheme(() => null);
diff --git a/packages/styled-components/transform/tests/fixtures/add-display-names/output.js b/packages/styled-components/transform/tests/fixtures/add-display-names/output.js
index a07fd4eaa..2926b5dd0 100644
--- a/packages/styled-components/transform/tests/fixtures/add-display-names/output.js
+++ b/packages/styled-components/transform/tests/fixtures/add-display-names/output.js
@@ -1,9 +1,7 @@
 import styled from 'styled-components';
 const Test = styled.div.withConfig({
     displayName: "Test"
-})`
-  width: 100%;
-`;
+})`width:100%;`;
 const Test2 = styled('div').withConfig({
     displayName: "Test2"
 })``;
diff --git a/packages/styled-components/transform/tests/fixtures/add-identifier-and-display-name/config.json b/packages/styled-components/transform/tests/fixtures/add-identifier-and-display-name/config.json
index e9120a57d..cac4e72b0 100644
--- a/packages/styled-components/transform/tests/fixtures/add-identifier-and-display-name/config.json
+++ b/packages/styled-components/transform/tests/fixtures/add-identifier-and-display-name/config.json
@@ -1,5 +1,4 @@
 {
   "fileName": false,
-  "transpileTemplateLiterals": false,
-  "ssr": true
+  "transpileTemplateLiterals": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/add-identifier-and-display-name/output.js b/packages/styled-components/transform/tests/fixtures/add-identifier-and-display-name/output.js
index c433af915..70224be39 100644
--- a/packages/styled-components/transform/tests/fixtures/add-identifier-and-display-name/output.js
+++ b/packages/styled-components/transform/tests/fixtures/add-identifier-and-display-name/output.js
@@ -2,9 +2,7 @@ import styled from 'styled-components';
 const Test = styled.div.withConfig({
     displayName: "Test",
     componentId: "sc-e0d5b7ad-0"
-})`
-  width: 100%;
-`;
+})`width:100%;`;
 const Test2 = true ? styled.div.withConfig({
     displayName: "Test2",
     componentId: "sc-e0d5b7ad-1"
@@ -37,16 +35,13 @@ const WrappedComponent3 = styled(Inner).withConfig({
 })({});
 const WrappedComponent4 = styled(Inner).attrs(()=>({
         something: 'else'
-    })
-)({});
+    }))({});
 const WrappedComponent5 = styled.div.attrs(()=>({
         something: 'else'
-    })
-)({});
+    }))({});
 const WrappedComponent6 = styled.div.attrs(()=>({
         something: 'else'
-    })
-).withConfig({
+    })).withConfig({
     displayName: "WrappedComponent6",
     componentId: "sc-e0d5b7ad-8"
 })``;
@@ -59,12 +54,10 @@ const WrappedComponent8 = styled.div.withConfig({
     shouldForwardProp: ()=>{}
 }).attrs(()=>({
         something: 'else'
-    })
-)({});
+    }))({});
 const WrappedComponent9 = styled.div.attrs(()=>({
         something: 'else'
-    })
-).withConfig({
+    })).withConfig({
     shouldForwardProp: ()=>{},
     displayName: "WrappedComponent9",
     componentId: "sc-e0d5b7ad-10"
diff --git a/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths-and-named-import/config.json b/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths-and-named-import/config.json
index ba50ffd21..f572ba05a 100644
--- a/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths-and-named-import/config.json
+++ b/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths-and-named-import/config.json
@@ -1,7 +1,5 @@
 {
-  "displayName": true,
   "fileName": false,
-  "ssr": true,
   "topLevelImportPaths": ["@example/example"],
   "transpileTemplateLiterals": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js b/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js
index 3c46bbb61..c13ad4583 100644
--- a/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js
+++ b/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js
@@ -2,9 +2,7 @@ import { styled } from '@example/example';
 const Test = styled.div.withConfig({
     displayName: "Test",
     componentId: "sc-bd3b1624-0"
-})`
-  width: 100%;
-`;
+})`width:100%;`;
 const Test2 = true ? styled.div.withConfig({
     displayName: "Test2",
     componentId: "sc-bd3b1624-1"
diff --git a/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths/config.json b/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths/config.json
index 370d53674..16b359b3c 100644
--- a/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths/config.json
+++ b/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths/config.json
@@ -1,7 +1,6 @@
 {
   "displayName": false,
   "fileName": false,
-  "ssr": true,
   "topLevelImportPaths": [
     "@xstyled/styled-components",
     "@xstyled/styled-components/no-tags",
diff --git a/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths/output.js b/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths/output.js
index 55f99140d..25c6c153c 100644
--- a/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths/output.js
+++ b/packages/styled-components/transform/tests/fixtures/add-identifier-with-top-level-import-paths/output.js
@@ -1,9 +1,7 @@
 import styled from '@xstyled/styled-components';
 const Test = styled.div.withConfig({
     componentId: "sc-2fd35b87-0"
-})`
-  width: 100%;
-`;
+})`width:100%;`;
 const Test2 = true ? styled.div.withConfig({
     componentId: "sc-2fd35b87-1"
 })`` : styled.div.withConfig({
diff --git a/packages/styled-components/transform/tests/fixtures/add-identifier/config.json b/packages/styled-components/transform/tests/fixtures/add-identifier/config.json
index c525ec53c..f46066fc9 100644
--- a/packages/styled-components/transform/tests/fixtures/add-identifier/config.json
+++ b/packages/styled-components/transform/tests/fixtures/add-identifier/config.json
@@ -1,6 +1,5 @@
 {
   "displayName": false,
   "fileName": false,
-  "transpileTemplateLiterals": false,
-  "ssr": true
+  "transpileTemplateLiterals": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/add-identifier/output.js b/packages/styled-components/transform/tests/fixtures/add-identifier/output.js
index 9374f5b3c..c3ddbd6c2 100644
--- a/packages/styled-components/transform/tests/fixtures/add-identifier/output.js
+++ b/packages/styled-components/transform/tests/fixtures/add-identifier/output.js
@@ -1,9 +1,7 @@
 import styled from 'styled-components';
 const Test = styled.div.withConfig({
     componentId: "sc-bc9ba4b0-0"
-})`
-  width: 100%;
-`;
+})`width:100%;`;
 const Test2 = true ? styled.div.withConfig({
     componentId: "sc-bc9ba4b0-1"
 })`` : styled.div.withConfig({
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-create-global-style-with-pure-comments/code.js b/packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/code.js
similarity index 100%
rename from packages/styled-components/transform/tests/fixtures/.annotate-create-global-style-with-pure-comments/code.js
rename to packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/code.js
diff --git a/packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/config.json b/packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/config.json
new file mode 100644
index 000000000..a964ff5e5
--- /dev/null
+++ b/packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/config.json
@@ -0,0 +1,3 @@
+{
+  "pure": true
+}
diff --git a/packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/output.js b/packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/output.js
new file mode 100644
index 000000000..9ca957ab6
--- /dev/null
+++ b/packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/output.js
@@ -0,0 +1,4 @@
+import { createGlobalStyle } from 'styled-components';
+const GlobalStyle = /*#__PURE__*/ createGlobalStyle([
+    "body{color:red;}"
+]);
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-css-with-pure-comments/code.js b/packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/code.js
similarity index 100%
rename from packages/styled-components/transform/tests/fixtures/.annotate-css-with-pure-comments/code.js
rename to packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/code.js
diff --git a/packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/config.json b/packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/config.json
new file mode 100644
index 000000000..a964ff5e5
--- /dev/null
+++ b/packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/config.json
@@ -0,0 +1,3 @@
+{
+  "pure": true
+}
diff --git a/packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/output.js b/packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/output.js
new file mode 100644
index 000000000..3cf39094e
--- /dev/null
+++ b/packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/output.js
@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+const partial = /*#__PURE__*/ css([
+    "color:red;"
+]);
+const Component = /*#__PURE__*/ styled.div.withConfig({
+    displayName: "code__Component",
+    componentId: "sc-c31dfdff-0"
+})([
+    "",
+    ";background:blue;"
+], partial);
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-keyframes-with-pure-comments/code.js b/packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/code.js
similarity index 100%
rename from packages/styled-components/transform/tests/fixtures/.annotate-keyframes-with-pure-comments/code.js
rename to packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/code.js
diff --git a/packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/config.json b/packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/config.json
new file mode 100644
index 000000000..a964ff5e5
--- /dev/null
+++ b/packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/config.json
@@ -0,0 +1,3 @@
+{
+  "pure": true
+}
diff --git a/packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/output.js b/packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/output.js
new file mode 100644
index 000000000..ec4e9c356
--- /dev/null
+++ b/packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/output.js
@@ -0,0 +1,4 @@
+import { keyframes } from 'styled-components';
+const Animation = /*#__PURE__*/ keyframes([
+    "0%{opacity:0;}100%{opacity:1;}"
+]);
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-styled-calls-with-pure-comments/code.js b/packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/code.js
similarity index 100%
rename from packages/styled-components/transform/tests/fixtures/.annotate-styled-calls-with-pure-comments/code.js
rename to packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/code.js
diff --git a/packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/config.json b/packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/config.json
new file mode 100644
index 000000000..a964ff5e5
--- /dev/null
+++ b/packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/config.json
@@ -0,0 +1,3 @@
+{
+  "pure": true
+}
diff --git a/packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/output.js b/packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/output.js
new file mode 100644
index 000000000..f16b183fe
--- /dev/null
+++ b/packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/output.js
@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+const Test = /*#__PURE__*/ styled.div.withConfig({
+    displayName: "code__Test",
+    componentId: "sc-6822c540-0"
+})([
+    "width:100%;"
+]);
+const Test2 = /*#__PURE__*/ styled('div').withConfig({
+    displayName: "code__Test2",
+    componentId: "sc-6822c540-1"
+})([
+    ""
+]);
+const Test3 = true ? /*#__PURE__*/ styled.div.withConfig({
+    displayName: "code__Test3",
+    componentId: "sc-6822c540-2"
+})([
+    ""
+]) : /*#__PURE__*/ styled.div.withConfig({
+    displayName: "code__Test3",
+    componentId: "sc-6822c540-3"
+})([
+    ""
+]);
+const styles = {
+    One: /*#__PURE__*/ styled.div.withConfig({
+        displayName: "code__One",
+        componentId: "sc-6822c540-4"
+    })([
+        ""
+    ])
+};
+let Component;
+Component = /*#__PURE__*/ styled.div.withConfig({
+    displayName: "code__Component",
+    componentId: "sc-6822c540-5"
+})([
+    ""
+]);
+const WrappedComponent = /*#__PURE__*/ styled(Inner).withConfig({
+    displayName: "code__WrappedComponent",
+    componentId: "sc-6822c540-6"
+})([
+    ""
+]);
+const StyledObjectForm = /*#__PURE__*/ styled.div.withConfig({
+    displayName: "code__StyledObjectForm",
+    componentId: "sc-6822c540-7"
+})({
+    color: red
+});
+const StyledFunctionForm = /*#__PURE__*/ styled.div.withConfig({
+    displayName: "code__StyledFunctionForm",
+    componentId: "sc-6822c540-8"
+})((p)=>({
+        color: p.color || 'red'
+    }));
+const normalFunc = add(5, 3);
diff --git a/packages/styled-components/transform/tests/fixtures/.annotate-withtheme-with-pure-comments/code.js b/packages/styled-components/transform/tests/fixtures/annotate-withtheme-with-pure-comments/code.js
similarity index 100%
rename from packages/styled-components/transform/tests/fixtures/.annotate-withtheme-with-pure-comments/code.js
rename to packages/styled-components/transform/tests/fixtures/annotate-withtheme-with-pure-comments/code.js
diff --git a/packages/styled-components/transform/tests/fixtures/annotate-withtheme-with-pure-comments/config.json b/packages/styled-components/transform/tests/fixtures/annotate-withtheme-with-pure-comments/config.json
new file mode 100644
index 000000000..a964ff5e5
--- /dev/null
+++ b/packages/styled-components/transform/tests/fixtures/annotate-withtheme-with-pure-comments/config.json
@@ -0,0 +1,3 @@
+{
+  "pure": true
+}
diff --git a/packages/styled-components/transform/tests/fixtures/annotate-withtheme-with-pure-comments/output.js b/packages/styled-components/transform/tests/fixtures/annotate-withtheme-with-pure-comments/output.js
new file mode 100644
index 000000000..c0f0fb5a5
--- /dev/null
+++ b/packages/styled-components/transform/tests/fixtures/annotate-withtheme-with-pure-comments/output.js
@@ -0,0 +1,2 @@
+import { withTheme } from 'styled-components';
+const ThemedComponent = /*#__PURE__*/ withTheme(()=>null);
diff --git a/packages/styled-components/transform/tests/fixtures/does-not-replace-native-with-no-tags/output.js b/packages/styled-components/transform/tests/fixtures/does-not-replace-native-with-no-tags/output.js
index 6e8728945..0911771ed 100644
--- a/packages/styled-components/transform/tests/fixtures/does-not-replace-native-with-no-tags/output.js
+++ b/packages/styled-components/transform/tests/fixtures/does-not-replace-native-with-no-tags/output.js
@@ -2,18 +2,18 @@ const styled_default = require('styled-components/native');
 const TestNormal = styled.div.withConfig({
     displayName: "code__TestNormal",
     componentId: "sc-1f1c6df5-0"
-})`
-  width: 100%;
-`;
+})([
+    "width:100%;"
+]);
 const Test = styled_default.default.div.withConfig({
     displayName: "code__Test",
     componentId: "sc-1f1c6df5-1"
-})`
-  width: 100%;
-`;
+})([
+    "width:100%;"
+]);
 const TestCallExpression = styled_default.default(Test).withConfig({
     displayName: "code__TestCallExpression",
     componentId: "sc-1f1c6df5-2"
-})`
-  height: 20px;
-`;
+})([
+    "height:20px;"
+]);
diff --git a/packages/styled-components/transform/tests/fixtures/ignore-external-styled-import/output.js b/packages/styled-components/transform/tests/fixtures/ignore-external-styled-import/output.js
index 5ce96a0ea..23890b682 100644
--- a/packages/styled-components/transform/tests/fixtures/ignore-external-styled-import/output.js
+++ b/packages/styled-components/transform/tests/fixtures/ignore-external-styled-import/output.js
@@ -3,11 +3,10 @@ import s from 'styled-components';
 const Paragraph = s.p.withConfig({
     displayName: "code__Paragraph",
     componentId: "sc-c285d12a-0"
-})`
-  color: green;
-`;
-const Foo = (p)=><Paragraph {...p}/>
-;
+})([
+    "color:green;"
+]);
+const Foo = (p)=><Paragraph {...p}/>;
 const TestNormal = styled(Foo)({
     color: red
 });
diff --git a/packages/styled-components/transform/tests/fixtures/issue-224/output.js b/packages/styled-components/transform/tests/fixtures/issue-224/output.js
index be61cde0b..d0b165d1c 100644
--- a/packages/styled-components/transform/tests/fixtures/issue-224/output.js
+++ b/packages/styled-components/transform/tests/fixtures/issue-224/output.js
@@ -2,28 +2,38 @@ import { styled } from 'styled-components';
 const Test = styled.div.withConfig({
     displayName: "code__Test",
     componentId: "sc-8043c6cb-0"
-})`
-  width: 100%;
-`;
+})([
+    "width:100%;"
+]);
 const Test2 = true ? styled.div.withConfig({
     displayName: "code__Test2",
     componentId: "sc-8043c6cb-1"
-})`` : styled.div.withConfig({
+})([
+    ""
+]) : styled.div.withConfig({
     displayName: "code__Test2",
     componentId: "sc-8043c6cb-2"
-})``;
+})([
+    ""
+]);
 const styles = {
     One: styled.div.withConfig({
         displayName: "code__One",
         componentId: "sc-8043c6cb-3"
-    })``
+    })([
+        ""
+    ])
 };
 let Component;
 Component = styled.div.withConfig({
     displayName: "code__Component",
     componentId: "sc-8043c6cb-4"
-})``;
+})([
+    ""
+]);
 const WrappedComponent = styled(Inner).withConfig({
     displayName: "code__WrappedComponent",
     componentId: "sc-8043c6cb-5"
-})``;
+})([
+    ""
+]);
diff --git a/packages/styled-components/transform/tests/fixtures/minify-css-in-helpers/config.json b/packages/styled-components/transform/tests/fixtures/minify-css-in-helpers/config.json
index 385f8d2d0..b174f8d7b 100644
--- a/packages/styled-components/transform/tests/fixtures/minify-css-in-helpers/config.json
+++ b/packages/styled-components/transform/tests/fixtures/minify-css-in-helpers/config.json
@@ -1,6 +1,5 @@
 {
   "ssr": false,
   "displayName": false,
-  "transpileTemplateLiterals": false,
-  "minify": true
+  "transpileTemplateLiterals": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/config.json b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/config.json
index ea04750a8..5cc132f1e 100644
--- a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/config.json
+++ b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/config.json
@@ -1,6 +1,4 @@
 {
   "ssr": false,
-  "displayName": false,
-  "transpileTemplateLiterals": true,
-  "minify": true
+  "displayName": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/config.json b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/config.json
index ea04750a8..5cc132f1e 100644
--- a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/config.json
+++ b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/config.json
@@ -1,6 +1,4 @@
 {
   "ssr": false,
-  "displayName": false,
-  "transpileTemplateLiterals": true,
-  "minify": true
+  "displayName": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/config.json b/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/config.json
index 998b45899..0967ef424 100644
--- a/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/config.json
+++ b/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/config.json
@@ -1,4 +1 @@
-{
-  "transpileTemplateLiterals": true,
-  "minify": true
-}
+{}
diff --git a/packages/styled-components/transform/tests/fixtures/not-use-private-api-if-not-required/output.js b/packages/styled-components/transform/tests/fixtures/not-use-private-api-if-not-required/output.js
index fe6459359..9dc45e0df 100644
--- a/packages/styled-components/transform/tests/fixtures/not-use-private-api-if-not-required/output.js
+++ b/packages/styled-components/transform/tests/fixtures/not-use-private-api-if-not-required/output.js
@@ -1,2 +1,2 @@
 import styled from 'styled-components';
-const Test = styled.div`width: 100%;`;
+const Test = styled.div`width:100%;`;
diff --git a/packages/styled-components/transform/tests/fixtures/track-the-imported-variable/config.json b/packages/styled-components/transform/tests/fixtures/track-the-imported-variable/config.json
index e9120a57d..cac4e72b0 100644
--- a/packages/styled-components/transform/tests/fixtures/track-the-imported-variable/config.json
+++ b/packages/styled-components/transform/tests/fixtures/track-the-imported-variable/config.json
@@ -1,5 +1,4 @@
 {
   "fileName": false,
-  "transpileTemplateLiterals": false,
-  "ssr": true
+  "transpileTemplateLiterals": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/track-the-imported-variable/output.js b/packages/styled-components/transform/tests/fixtures/track-the-imported-variable/output.js
index 07ebdb8f4..c6b7e9b92 100644
--- a/packages/styled-components/transform/tests/fixtures/track-the-imported-variable/output.js
+++ b/packages/styled-components/transform/tests/fixtures/track-the-imported-variable/output.js
@@ -2,7 +2,7 @@ import s from "styled-components";
 const Test = s.div.withConfig({
     displayName: "Test",
     componentId: "sc-d5028521-0"
-})`width: 100%;`;
+})`width:100%;`;
 const Test2 = true ? s.div.withConfig({
     displayName: "Test2",
     componentId: "sc-d5028521-1"
diff --git a/packages/styled-components/transform/tests/fixtures/transpile-css-prop-add-import/config.json b/packages/styled-components/transform/tests/fixtures/transpile-css-prop-add-import/config.json
index ca4eac71a..e50b4bea8 100644
--- a/packages/styled-components/transform/tests/fixtures/transpile-css-prop-add-import/config.json
+++ b/packages/styled-components/transform/tests/fixtures/transpile-css-prop-add-import/config.json
@@ -2,6 +2,5 @@
   "ssr": false,
   "displayName": false,
   "transpileTemplateLiterals": false,
-  "minify": false,
-  "cssProp": true
+  "minify": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/transpile-css-prop-add-require/config.json b/packages/styled-components/transform/tests/fixtures/transpile-css-prop-add-require/config.json
index ca4eac71a..e50b4bea8 100644
--- a/packages/styled-components/transform/tests/fixtures/transpile-css-prop-add-require/config.json
+++ b/packages/styled-components/transform/tests/fixtures/transpile-css-prop-add-require/config.json
@@ -2,6 +2,5 @@
   "ssr": false,
   "displayName": false,
   "transpileTemplateLiterals": false,
-  "minify": false,
-  "cssProp": true
+  "minify": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/config.json b/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/config.json
index ede0eaf29..0967ef424 100644
--- a/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/config.json
+++ b/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/config.json
@@ -1,7 +1 @@
-{
-  "ssr": true,
-  "displayName": true,
-  "transpileTemplateLiterals": true,
-  "minify": true,
-  "cssProp": true
-}
+{}
diff --git a/packages/styled-components/transform/tests/fixtures/transpile-css-prop/config.json b/packages/styled-components/transform/tests/fixtures/transpile-css-prop/config.json
index ca4eac71a..e50b4bea8 100644
--- a/packages/styled-components/transform/tests/fixtures/transpile-css-prop/config.json
+++ b/packages/styled-components/transform/tests/fixtures/transpile-css-prop/config.json
@@ -2,6 +2,5 @@
   "ssr": false,
   "displayName": false,
   "transpileTemplateLiterals": false,
-  "minify": false,
-  "cssProp": true
+  "minify": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/transpile-require-default/output.js b/packages/styled-components/transform/tests/fixtures/transpile-require-default/output.js
index 3089326d8..e822cb06d 100644
--- a/packages/styled-components/transform/tests/fixtures/transpile-require-default/output.js
+++ b/packages/styled-components/transform/tests/fixtures/transpile-require-default/output.js
@@ -2,18 +2,18 @@ const styled_default = require("styled-components");
 const TestNormal = styled.div.withConfig({
     displayName: "code__TestNormal",
     componentId: "sc-1dd7c523-0"
-})`
-  width: 100%;
-`;
+})([
+    "width:100%;"
+]);
 const Test = styled_default.default.div.withConfig({
     displayName: "code__Test",
     componentId: "sc-1dd7c523-1"
-})`
-  width: 100%;
-`;
+})([
+    "width:100%;"
+]);
 const TestCallExpression = styled_default.default(Test).withConfig({
     displayName: "code__TestCallExpression",
     componentId: "sc-1dd7c523-2"
-})`
-  height: 20px;
-`;
+})([
+    "height:20px;"
+]);
diff --git a/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/config.json b/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/config.json
index 8f1987508..d3c217eda 100644
--- a/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/config.json
+++ b/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/config.json
@@ -1,6 +1,4 @@
 {
   "ssr": false,
-  "displayName": true,
-  "transpileTemplateLiterals": true,
   "minify": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/use-file-name/config.json b/packages/styled-components/transform/tests/fixtures/use-file-name/config.json
index 2c6790858..543f450bf 100644
--- a/packages/styled-components/transform/tests/fixtures/use-file-name/config.json
+++ b/packages/styled-components/transform/tests/fixtures/use-file-name/config.json
@@ -1,4 +1,3 @@
 {
-  "transpileTemplateLiterals": false,
-  "ssr": true
+  "transpileTemplateLiterals": false
 }
diff --git a/packages/styled-components/transform/tests/fixtures/use-file-name/output.js b/packages/styled-components/transform/tests/fixtures/use-file-name/output.js
index b382d2770..5002fc67d 100644
--- a/packages/styled-components/transform/tests/fixtures/use-file-name/output.js
+++ b/packages/styled-components/transform/tests/fixtures/use-file-name/output.js
@@ -2,11 +2,11 @@ import styled from "styled-components";
 const Test = styled.div.withConfig({
     displayName: "code__Test",
     componentId: "sc-a2611da4-0"
-})`color: red;`;
+})`color:red;`;
 const before = styled.div.withConfig({
     displayName: "code__before",
     componentId: "sc-a2611da4-1"
-})`color: blue;`;
+})`color:blue;`;
 styled.div.withConfig({
     displayName: "code",
     componentId: "sc-a2611da4-2"
diff --git a/packages/styled-components/transform/tests/fixtures/use-namespace/output.js b/packages/styled-components/transform/tests/fixtures/use-namespace/output.js
index 5d9ba2732..a0f929cc4 100644
--- a/packages/styled-components/transform/tests/fixtures/use-namespace/output.js
+++ b/packages/styled-components/transform/tests/fixtures/use-namespace/output.js
@@ -10,20 +10,24 @@ const GlobalStyle = styled.createGlobalStyle`
 const Test = styled.default.div.withConfig({
     displayName: "code__Test",
     componentId: "test-namespace__sc-d9ced075-0"
-})`
-  color: red;
-`;
+})([
+    "color:red;"
+]);
 const before = styled.default.div.withConfig({
     displayName: "code__before",
     componentId: "test-namespace__sc-d9ced075-1"
-})`
-  color: blue;
-`;
+})([
+    "color:blue;"
+]);
 styled.default.div.withConfig({
     displayName: "code",
     componentId: "test-namespace__sc-d9ced075-2"
-})``;
+})([
+    ""
+]);
 export default styled.default.button.withConfig({
     displayName: "code",
     componentId: "test-namespace__sc-d9ced075-3"
-})``;
+})([
+    ""
+]);
diff --git a/packages/styled-components/transform/tests/fixtures/work-with-hoisted-default-as-import/config.json b/packages/styled-components/transform/tests/fixtures/work-with-hoisted-default-as-import/config.json
index 91a67609f..543f450bf 100644
--- a/packages/styled-components/transform/tests/fixtures/work-with-hoisted-default-as-import/config.json
+++ b/packages/styled-components/transform/tests/fixtures/work-with-hoisted-default-as-import/config.json
@@ -1,4 +1,3 @@
 {
-  "transpileTemplateLiterals": false,
-  "minify": true
+  "transpileTemplateLiterals": false
 }
diff --git a/packages/styled-jsx/package.json b/packages/styled-jsx/package.json
index 9f5eb96fd..71d2e903a 100644
--- a/packages/styled-jsx/package.json
+++ b/packages/styled-jsx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-styled-jsx",
-  "version": "1.5.103",
+  "version": "1.5.104",
   "description": "SWC plugin for styled-jsx",
   "main": "swc_plugin_styled_jsx.wasm",
   "scripts": {
diff --git a/packages/styled-jsx/transform/Cargo.toml b/packages/styled-jsx/transform/Cargo.toml
index 6bb8b3d78..e4802b063 100644
--- a/packages/styled-jsx/transform/Cargo.toml
+++ b/packages/styled-jsx/transform/Cargo.toml
@@ -4,7 +4,7 @@ description = "AST transforms visitor for styled-jsx"
 edition = "2021"
 license = "Apache-2.0"
 name = "styled_jsx"
-version = "0.65.0"
+version = "0.66.0"
 
 [features]
 custom_transform = ["swc_common/concurrent"]
diff --git a/packages/swc-magic/package.json b/packages/swc-magic/package.json
index 1382cf184..4b896453f 100644
--- a/packages/swc-magic/package.json
+++ b/packages/swc-magic/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-swc-magic",
-  "version": "1.5.103",
+  "version": "1.5.104",
   "description": "SWC plugin for swc-magic",
   "main": "swc_plugin_swc_magic.wasm",
   "scripts": {
diff --git a/packages/swc-magic/transform/Cargo.toml b/packages/swc-magic/transform/Cargo.toml
index 2f5e3c17f..7a817f0ca 100644
--- a/packages/swc-magic/transform/Cargo.toml
+++ b/packages/swc-magic/transform/Cargo.toml
@@ -4,7 +4,7 @@ description = "AST transforms visitor for swc-magic"
 edition = "2021"
 license = "Apache-2.0"
 name = "swc_magic"
-version = "0.11.0"
+version = "0.12.0"
 
 [dependencies]
 serde = { version = "1.0.189", features = ["derive"] }
diff --git a/packages/transform-imports/package.json b/packages/transform-imports/package.json
index d5c10117d..e03690293 100644
--- a/packages/transform-imports/package.json
+++ b/packages/transform-imports/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-transform-imports",
-  "version": "1.5.103",
+  "version": "1.5.104",
   "description": "SWC plugin for https://www.npmjs.com/package/babel-plugin-transform-imports",
   "main": "swc_plugin_transform_imports.wasm",
   "scripts": {
diff --git a/packages/transform-imports/transform/Cargo.toml b/packages/transform-imports/transform/Cargo.toml
index b6d774904..63f0a1b8d 100644
--- a/packages/transform-imports/transform/Cargo.toml
+++ b/packages/transform-imports/transform/Cargo.toml
@@ -5,7 +5,7 @@ edition = "2021"
 license = "Apache-2.0"
 name = "modularize_imports"
 repository = "https://github.com/swc-project/plugins.git"
-version = "0.60.0"
+version = "0.61.0"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html