Error on styled syntax

Author: shanshrew

packages/swc-plugin/src/lib.rs

@@ -172,6 +172,12 @@ impl CompiledTransform {
                                         }
                                         imports.css_map.as_mut().unwrap().push(local_name);
                                     }
+                                    "styled" => {
+                                        if imports.styled.is_none() {
+                                            imports.styled = Some(Vec::new());
+                                        }
+                                        imports.styled.as_mut().unwrap().push(local_name);
+                                    }
                                     _ => {
                                         should_remove_import = false;
                                     }
@@ -312,6 +318,27 @@ impl VisitMut for CompiledTransform {
     }
 
     fn visit_mut_call_expr(&mut self, n: &mut CallExpr) {
+        // Error on any styled usage (styled.tag`...` or styled(tag)(...))
+        if let Some(ref imports) = self.state.compiled_imports {
+            if let Some(ref styled_locals) = imports.styled {
+                // Check for styled("div")(...) pattern or styled.tag(...) pattern
+                let is_styled_call = match &n.callee {
+                    Callee::Expr(expr) => match expr.as_ref() {
+                        Expr::Ident(ident) => styled_locals.contains(&ident.sym.to_string()),
+                        Expr::Member(MemberExpr { obj, .. }) => match obj.as_ref() {
+                            Expr::Ident(ident) => styled_locals.contains(&ident.sym.to_string()),
+                            _ => false,
+                        },
+                        _ => false,
+                    },
+                    _ => false,
+                };
+                if is_styled_call {
+                    panic!("styled API is not supported by the SWC plugin. Please use css/cssMap or the Babel plugin.");
+                }
+            }
+        }
+
         let mut handled_css_prop = false;
         let is_react_jsx_like = match &n.callee {
             Callee::Expr(callee_expr) => match callee_expr.as_ref() {
@@ -398,6 +425,20 @@ impl VisitMut for CompiledTransform {
     }
 
     fn visit_mut_expr(&mut self, n: &mut Expr) {
+        // Error on any styled tagged template usage like styled.div`...`
+        if let Expr::TaggedTpl(tagged) = n {
+            if let Expr::Member(MemberExpr { obj, .. }) = tagged.tag.as_ref() {
+                if let Expr::Ident(ident) = obj.as_ref() {
+                    if let Some(ref imports) = self.state.compiled_imports {
+                        if let Some(ref styled_locals) = imports.styled {
+                            if styled_locals.contains(&ident.sym.to_string()) {
+                                panic!("styled API is not supported by the SWC plugin. Please use css/cssMap or the Babel plugin.");
+                            }
+                        }
+                    }
+                }
+            }
+        }
         if let Expr::Call(call) = n {
             if visitors::css::is_css_call(call, &self.state) {
                 if self.options.strict_mode {

packages/swc-plugin/src/types.rs

@@ -17,13 +17,15 @@ pub struct TransformState {
 pub struct CompiledImports {
     pub css: Option<Vec<String>>,
     pub css_map: Option<Vec<String>>,
+    pub styled: Option<Vec<String>>,
 }
 
 impl CompiledImports {
     pub fn new() -> Self {
         Self {
             css: None,
             css_map: None,
+            styled: None,
         }
     }
 }

packages/swc-plugin/tests/strict-mode.test.js

@@ -494,63 +494,28 @@ describe('Strict Mode - SWC Plugin', () => {
       `);
     });
 
-    it('should not transform styled components', async () => {
+    it('should error on styled tagged template usage', async () => {
       const code = `
         import { styled } from '@compiled/react';
         
         const Button = styled.div\`
           color: red;
         \`;
       `;
-
-      const out = await transformResultString(code);
-      expect(out).toMatchInlineSnapshot(`
-        "function _tagged_template_literal(strings, raw) {
-            if (!raw) {
-                raw = strings.slice(0);
-            }
-            return Object.freeze(Object.defineProperties(strings, {
-                raw: {
-                    value: Object.freeze(raw)
-                }
-            }));
-        }
-        function _templateObject() {
-            var data = _tagged_template_literal([
-                "\\n          color: red;\\n        "
-            ]);
-            _templateObject = function _templateObject() {
-                return data;
-            };
-            return data;
-        }
-        import * as React from "react";
-        import { ax, ix, CC, CS } from "@compiled/react/runtime";
-        import { styled } from "@compiled/react";
-        var Button = styled.div(_templateObject());
-        "
-      `);
+      const error = await expectToThrow(code);
+      expectToContain(String(error), 'RuntimeError: unreachable');
     });
 
-    it('should not transform styled component calls', async () => {
+    it('should error on styled component factory calls', async () => {
       const code = `
         import { styled } from '@compiled/react';
         
         const Button = styled('div')({
           color: 'red'
         });
       `;
-
-      const out = await transformResultString(code);
-      expect(out).toMatchInlineSnapshot(`
-        "import * as React from "react";
-        import { ax, ix, CC, CS } from "@compiled/react/runtime";
-        import { styled } from "@compiled/react";
-        var Button = styled("div")({
-            color: "red"
-        });
-        "
-      `);
+      const error = await expectToThrow(code);
+      expectToContain(String(error), 'RuntimeError: unreachable');
     });
   });