feat(styled-components): Implement pure option

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);
 

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,9 +41,13 @@ pub struct Config {
     #[serde(default)]
     pub top_level_import_paths: Vec<JsWord>,
 
+    /// NOTE: This option is enabled by default in
+    /// `babel-plugin-styled-components` but not in this plugin.
     #[serde(default)]
     pub transpile_template_literals: bool,
 
+    /// NOTE: This option is enabled by default in
+    /// `babel-plugin-styled-components` but not in this plugin.
     #[serde(default)]
     pub minify: bool,
 
@@ -70,14 +75,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 +100,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)
+        },
     )
 }

packages/styled-components/transform/src/utils/mod.rs

@@ -253,6 +253,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),

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;

packages/styled-components/transform/src/visitors/pure_annotation.rs

@@ -0,0 +1,63 @@
+//! 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, Spanned, DUMMY_SP};
+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 is_styled_or_pure_helper = match expr {
+            Expr::Call(CallExpr {
+                callee: Callee::Expr(callee),
+                ..
+            }) => {
+                self.state.borrow().is_styled(callee) || self.state.borrow().is_pure_helper(callee)
+            }
+            Expr::TaggedTpl(tagged) => {
+                self.state.borrow().is_styled(&tagged.tag)
+                    || self.state.borrow().is_pure_helper(&tagged.tag)
+            }
+            _ => false,
+        };
+        if !is_styled_or_pure_helper {
+            return;
+        }
+
+        let span = expr.span();
+        if span == DUMMY_SP {
+            // NOTE: Styled components generated by transpile_css_prop don't have span.
+            // Currently there is no way to add comments to them.
+            return;
+        }
+        if !self.comments.has_flag(span.lo, "PURE") {
+            self.comments.add_pure_comment(span.lo);
+        }
+    }
+}

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,

packages/styled-components/transform/tests/fixtures/annotate-create-global-style-with-pure-comments/config.json

@@ -0,0 +1,5 @@
+{
+  "transpileTemplateLiterals": true,
+  "minify": true,
+  "pure": true
+}

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;}"
+]);

packages/styled-components/transform/tests/fixtures/annotate-css-with-pure-comments/config.json

@@ -0,0 +1,5 @@
+{
+  "transpileTemplateLiterals": true,
+  "minify": true,
+  "pure": true
+}

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);

packages/styled-components/transform/tests/fixtures/annotate-keyframes-with-pure-comments/config.json

@@ -0,0 +1,5 @@
+{
+  "transpileTemplateLiterals": true,
+  "minify": true,
+  "pure": true
+}

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;}"
+]);

packages/styled-components/transform/tests/fixtures/annotate-styled-calls-with-pure-comments/config.json

@@ -0,0 +1,5 @@
+{
+  "transpileTemplateLiterals": true,
+  "minify": true,
+  "pure": true
+}