feat(styled-components): Implement transpileTemplateLiterals

packages/styled-components/transform/src/lib.rs

@@ -11,7 +11,7 @@ pub use crate::{
     utils::{analyze, analyzer, State},
     visitors::{
         display_name_and_id::display_name_and_id, minify::visitor::minify,
-        transpile_css_prop::transpile::transpile_css_prop,
+        template_literals::template_literals, transpile_css_prop::transpile::transpile_css_prop,
     },
 };
 
@@ -72,8 +72,7 @@ impl Config {
 
 /// NOTE: **This is not complete**.
 ///
-/// Only [transpile_css_prop], [minify] and [display_name_and_id] is
-/// implemented.
+/// [pure] is not implemented.
 pub fn styled_components(
     file_name: FileName,
     src_file_hash: u128,
@@ -92,6 +91,10 @@ pub fn styled_components(
             enabled: config.minify,
             visitor: minify(state.clone())
         },
-        display_name_and_id(file_name, src_file_hash, config.clone(), state)
+        display_name_and_id(file_name, src_file_hash, config.clone(), state.clone()),
+        Optional {
+            enabled: config.transpile_template_literals,
+            visitor: template_literals(state)
+        }
     )
 }

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

@@ -1,4 +1,5 @@
 pub mod assign_style_required;
 pub mod display_name_and_id;
 pub mod minify;
+pub mod template_literals;
 pub mod transpile_css_prop;

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

@@ -0,0 +1,70 @@
+//! Port of https://github.com/styled-components/babel-plugin-styled-components/blob/4e2eb388d9c90f2921c306c760657d059d01a518/src/visitors/templateLiterals/transpile.js
+
+use std::{cell::RefCell, iter, rc::Rc};
+
+use swc_common::{util::take::Take, 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 template_literals(state: Rc<RefCell<State>>) -> impl Fold + VisitMut {
+    as_folder(TemplateLiterals { state })
+}
+
+#[derive(Debug)]
+struct TemplateLiterals {
+    state: Rc<RefCell<State>>,
+}
+
+impl VisitMut for TemplateLiterals {
+    noop_visit_mut_type!();
+
+    fn visit_mut_expr(&mut self, expr: &mut Expr) {
+        expr.visit_mut_children_with(self);
+
+        let Expr::TaggedTpl(tagged) = expr else {
+            return;
+        };
+        if !self.state.borrow().is_styled(&tagged.tag)
+            && !self.state.borrow().is_helper(&tagged.tag)
+        {
+            return;
+        }
+
+        expr.map_with_mut(|expr| {
+            let tagged = expr.expect_tagged_tpl();
+
+            let quasis = tagged
+                .tpl
+                .quasis
+                .into_iter()
+                .map(|q| {
+                    Expr::Lit(Lit::Str(Str {
+                        span: q.span,
+                        value: q.cooked.unwrap_or(q.raw),
+                        raw: None,
+                    }))
+                })
+                .map(ExprOrSpread::from)
+                .map(Some);
+            let exprs = tagged.tpl.exprs.into_iter().map(ExprOrSpread::from);
+            let args = iter::once(
+                Expr::Array(ArrayLit {
+                    span: DUMMY_SP,
+                    elems: quasis.collect(),
+                })
+                .into(),
+            )
+            .chain(exprs)
+            .collect();
+
+            Expr::Call(CallExpr {
+                span: tagged.span,
+                callee: tagged.tag.into(),
+                args,
+                type_args: tagged.type_params,
+            })
+        });
+    }
+}

packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/output.js

@@ -1,6 +1,18 @@
 import styled from 'styled-components';
-const Simple = styled.div`width:100%;`;
-const Interpolation = styled.div`content:"  ${(props)=>props.text}  ";`;
-const SpecialCharacters = styled.div`content:"  ${(props)=>props.text}  ";color:red;`;
-const Comment = styled.div`color:red;`;
-const Parens = styled.div`&:hover{color:blue;}`;
+const Simple = styled.div([
+    "width:100%;"
+]);
+const Interpolation = styled.div([
+    'content:"  ',
+    '  ";'
+], (props)=>props.text);
+const SpecialCharacters = styled.div([
+    'content:"  ',
+    '  ";color:red;'
+], (props)=>props.text);
+const Comment = styled.div([
+    "color:red;"
+]);
+const Parens = styled.div([
+    "&:hover{color:blue;}"
+]);

packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/output.js

@@ -1,7 +1,21 @@
 import styled from 'styled-components';
-const Simple = styled.div`width:100%;`;
-const Interpolation = styled.div`content:"https://test.com/${props => props.endpoint}";`;
-const SpecialCharacters = styled.div`content:"  ${props => props.text}  ";color:red;`;
-const Comment = styled.div`width:100%;color:red;`;
-const Parens = styled.div`&:hover{color:blue;}color:red;`;
-const UrlComments = styled.div`color:red;background:red;border:1px solid green;`;
+const Simple = styled.div([
+    "width:100%;"
+]);
+const Interpolation = styled.div([
+    'content:"https://test.com/',
+    '";'
+], (props)=>props.endpoint);
+const SpecialCharacters = styled.div([
+    'content:"  ',
+    '  ";color:red;'
+], (props)=>props.text);
+const Comment = styled.div([
+    "width:100%;color:red;"
+]);
+const Parens = styled.div([
+    "&:hover{color:blue;}color:red;"
+]);
+const UrlComments = styled.div([
+    "color:red;background:red;border:1px solid green;"
+]);

packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/output.js

@@ -2,28 +2,47 @@ import styled from 'styled-components';
 const Test1 = styled.div.withConfig({
     displayName: "code__Test1",
     componentId: "sc-bfa13f91-0"
-})`width:100%;`;
+})([
+    "width:100%;"
+]);
 const Test2 = styled.div.withConfig({
     displayName: "code__Test2",
     componentId: "sc-bfa13f91-1"
-})`width:100%;`;
+})([
+    "width:100%;"
+]);
 const Test3 = styled.div.withConfig({
     displayName: "code__Test3",
     componentId: "sc-bfa13f91-2"
-})`width:100%;${'red'};`;
+})([
+    "width:100%;",
+    ";"
+], 'red');
 const Test4 = styled.div.withConfig({
     displayName: "code__Test4",
     componentId: "sc-bfa13f91-3"
-})`width:100%;`;
+})([
+    "width:100%;"
+]);
 const Test5 = styled.div.withConfig({
     displayName: "code__Test5",
     componentId: "sc-bfa13f91-4"
-})`width:100%;`;
+})([
+    "width:100%;"
+]);
 const Test6 = styled.div.withConfig({
     displayName: "code__Test6",
     componentId: "sc-bfa13f91-5"
-})`background:url("https://google.com");width:100%;${'green'} `;
+})([
+    'background:url("https://google.com");width:100%;',
+    " "
+], 'green');
 const Test7 = styled.div.withConfig({
     displayName: "code__Test7",
     componentId: "sc-bfa13f91-6"
-})`background:url("https://google.com");width:${(p)=>p.props.width};${'green'}  height:${(p)=>p.props.height};`;
+})([
+    'background:url("https://google.com");width:',
+    ";",
+    "  height:",
+    ";"
+], (p)=>p.props.width, 'green', (p)=>p.props.height);