yak-swc 9.10.2 → 9.10.3

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # yak-swc
 
+## 9.10.3
+
 ## 9.10.2
 
 ## 9.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yak-swc",
-  "version": "9.10.2",
+  "version": "9.10.3",
   "description": "next-yak rust based swc plugin to compile styled components at build time",
   "keywords": [
     "css-in-js",

package/yak_swc/src/lib.rs

@@ -1223,12 +1223,19 @@ where
     let is_top_level = !self.is_inside_css_expression();
     let current_variable_id = self.get_current_component_id();
     let is_default_exported = self.is_default_exported(&current_variable_id);
+    // Exported through a local export list e.g. `export { Button, Button as Alias }`
+    let local_export_names = self
+      .variables
+      .get_local_export_names(&current_variable_id.id)
+      .to_vec();
+    let is_exported =
+      self.current_exported || is_default_exported || !local_export_names.is_empty();
 
     let mut is_exported_styled = false;
     let mut transform: Box<dyn YakTransform> = match yak_library_function_name.deref() {
       // Styled Components transform works only on top level
       "styled" if is_top_level => {
-        is_exported_styled = self.current_exported || is_default_exported;
+        is_exported_styled = is_exported;
         // Track exported styled component names for $RefreshReg$ injection
         if self.react_refresh_reg && is_exported_styled {
           let name = current_variable_id.to_readable_string();
@@ -1240,7 +1247,7 @@ where
           &mut self.naming_convention,
           current_variable_id.clone(),
           self.display_names,
-          self.current_exported || is_default_exported,
+          is_exported,
           self.import_mode.transpilation_mode(),
         ))
       }
@@ -1276,7 +1283,7 @@ where
       "css" if is_top_level => Box::new(TransformCssMixin::new(
         &mut self.naming_convention,
         current_variable_id.clone(),
-        self.current_exported || is_default_exported,
+        is_exported,
         self.inside_element_with_css_attribute,
         self.import_mode.transpilation_mode(),
       )),
@@ -1358,7 +1365,7 @@ where
     let result_span = transform_result.expression.span();
     // A globalStyle literal that errored produced malformed declarations; keep the
     // bare `globalStyle()` call as the anchor but emit no extracted CSS for it.
-    if (!css_code.is_empty() || self.current_exported) && is_top_level && !self.global_style_error {
+    if (!css_code.is_empty() || is_exported) && is_top_level && !self.global_style_error {
       if let Some(comment_prefix) = transform_result.css.comment_prefix {
         // Don't add invalid CSS rules to the list of all CSS rules
         // Mixin code should always be used in other components so that they target the correct element
@@ -1384,6 +1391,24 @@ where
               text: format!("{}\n{}\n", comment_prefix, css_code.trim()).into(),
             },
           );
+          // One more marker for every other name in a local export list
+          // e.g. `export { Button as Alias }` or `export { Button as default }`
+          let local_name = current_variable_id.parts.first();
+          for exported_name in &local_export_names {
+            if Some(exported_name) == local_name {
+              continue;
+            }
+            if let Some(text) = transform.get_export_name_comment(exported_name, css_code.trim()) {
+              self.comments.add_leading(
+                result_span.lo,
+                Comment {
+                  kind: swc_core::common::comments::CommentKind::Block,
+                  span: DUMMY_SP,
+                  text: text.into(),
+                },
+              );
+            }
+          }
         }
       }
     }

package/yak_swc/src/variable_visitor.rs

@@ -24,6 +24,9 @@ pub struct VariableVisitor {
   variables: FxHashMap<Id, Box<Expr>>,
   imports: FxHashMap<Id, ImportKind>,
   default_export: Option<ScopedVariableReference>,
+  /// Names each local binding is exported as through a local export list
+  /// e.g. `export { foo, foo as bar, foo as default }` -> foo#3: [foo, bar, default]
+  local_exports: FxHashMap<Id, Vec<Wtf8Atom>>,
 }
 
 #[derive(Debug, Clone, Hash, Eq, PartialEq)]
@@ -67,6 +70,7 @@ impl VariableVisitor {
       variables: FxHashMap::default(),
       imports: FxHashMap::default(),
       default_export: None,
+      local_exports: FxHashMap::default(),
     }
   }
 
@@ -157,6 +161,16 @@ impl VariableVisitor {
   pub fn get_default_export(&self) -> Option<ScopedVariableReference> {
     self.default_export.clone()
   }
+
+  /// Returns the names a local binding is exported as through a local export list
+  /// e.g. `export { foo as bar }` -> [bar]
+  pub fn get_local_export_names(&self, id: &Id) -> &[Wtf8Atom] {
+    self
+      .local_exports
+      .get(id)
+      .map(Vec::as_slice)
+      .unwrap_or_default()
+  }
 }
 
 impl Fold for VariableVisitor {}
@@ -173,6 +187,31 @@ impl VisitMut for VariableVisitor {
     }
     n.visit_mut_children_with(self);
   }
+  /// Scans local export lists (without a `from`) to store the exported names
+  /// e.g. `export { foo, foo as bar, foo as default }`
+  fn visit_mut_named_export(&mut self, n: &mut NamedExport) {
+    if n.src.is_none() {
+      for specifier in &n.specifiers {
+        if let ExportSpecifier::Named(named) = specifier {
+          if let ModuleExportName::Ident(local) = &named.orig {
+            let exported: Wtf8Atom = match &named.exported {
+              Some(ModuleExportName::Ident(ident)) => ident.sym.clone().into(),
+              Some(ModuleExportName::Str(name)) => name.value.clone(),
+              None => local.sym.clone().into(),
+              #[cfg(swc_ast_unknown)]
+              Some(_) => continue,
+            };
+            self
+              .local_exports
+              .entry(local.to_id())
+              .or_default()
+              .push(exported);
+          }
+        }
+      }
+    }
+    n.visit_mut_children_with(self);
+  }
   /// Scans the AST for variable declarations and extracts the variable names
   fn visit_mut_var_decl(&mut self, var: &mut VarDecl) {
     var.decls.iter_mut().for_each(|decl| {

package/yak_swc/src/yak_transforms.rs

@@ -1,4 +1,5 @@
 use rustc_hash::FxHashMap;
+use swc_core::atoms::Wtf8Atom;
 use swc_core::common::util::move_map::MoveMap;
 
 use crate::utils::ast_helper::expr_hash_map_to_object;
@@ -53,6 +54,11 @@ pub trait YakTransform {
   fn get_default_export_comment_prefix(&self) -> Option<String> {
     None
   }
+  /// Get a comment marker for the current variable exported under another name
+  /// through a local export list e.g. `export { foo as bar }` or `export { foo as default }`
+  fn get_export_name_comment(&self, _exported_name: &Wtf8Atom, _css_code: &str) -> Option<String> {
+    None
+  }
   /// The root class name a compiled styled component carries as the first
   /// argument of its runtime call - `None` for other transforms
   /// Used to fold static JSX usages
@@ -306,6 +312,19 @@ impl YakTransform for TransformCssMixin {
         .join(":"),
     ))
   }
+
+  /// Same marker as for the variable itself, with the first name part replaced by the exported name
+  fn get_export_name_comment(&self, exported_name: &Wtf8Atom, css_code: &str) -> Option<String> {
+    if !self.is_exported || self.is_within_jsx_attribute {
+      return None;
+    }
+    let name = std::iter::once(exported_name)
+      .chain(self.export_name.parts.iter().skip(1))
+      .map(|atom| encode_percent(atom.to_string_lossy().as_ref()))
+      .collect::<Vec<_>>()
+      .join(":");
+    Some(format!("YAK EXPORTED MIXIN:{}\n{}\n", name, css_code))
+  }
 }
 
 /// Transform styled component api
@@ -552,6 +571,19 @@ impl YakTransform for TransformStyled {
       self.class_name.clone()
     ))
   }
+
+  /// Marker only (the CSS is already extracted with the variable itself)
+  fn get_export_name_comment(&self, exported_name: &Wtf8Atom, _css_code: &str) -> Option<String> {
+    if !self.is_exported {
+      return None;
+    }
+    let name = std::iter::once(exported_name)
+      .chain(self.declaration_name.parts.iter().skip(1))
+      .map(|atom| atom.to_string_lossy())
+      .collect::<Vec<_>>()
+      .join(".");
+    Some(format!("YAK EXPORTED STYLED:{}:{}", name, self.class_name))
+  }
 }
 
 /// Transform for global styles

package/yak_swc/tests/fixture/default-export-mixed/output.dev.tsx

@@ -1,7 +1,7 @@
 import { styled } from "next-yak/internal";
 import * as __yak from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
-const Button = /*YAK Extracted CSS:
+const Button = /*YAK EXPORTED STYLED:Button:input_Button_m7uBBu*//*YAK Extracted CSS:
 :global(.input_Button_m7uBBu) {
   background: red;
 }

package/yak_swc/tests/fixture/default-export-mixed/output.prod.tsx

@@ -1,7 +1,7 @@
 import { styled } from "next-yak/internal";
 import * as __yak from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
-const Button = /*YAK Extracted CSS:
+const Button = /*YAK EXPORTED STYLED:Button:ym7uBBu*//*YAK Extracted CSS:
 :global(.ym7uBBu) {
   background: red;
 }

package/yak_swc/tests/fixture/default-export-mixed/output.turbo.dev.tsx

@@ -1,7 +1,7 @@
 import { styled } from "next-yak/internal";
 import * as __yak from "next-yak/internal";
 import "data:text/css;base64,LmlucHV0X0J1dHRvbl9tN3VCQnUgewogIGJhY2tncm91bmQ6IHJlZDsKfS5pbnB1dF9UaXRsZV9tN3VCQnUgewogIGNvbG9yOiBibHVlOwogIGZvbnQtc2l6ZTogMjRweDsKfS5pbnB1dF9Db250YWluZXJfbTd1QkJ1IHsKICBwYWRkaW5nOiAyMHB4OwogIGJhY2tncm91bmQ6IHllbGxvdzsKfQ==";
-const Button = /*YAK Extracted CSS:
+const Button = /*YAK EXPORTED STYLED:Button:input_Button_m7uBBu*//*YAK Extracted CSS:
 .input_Button_m7uBBu {
   background: red;
 }

package/yak_swc/tests/fixture/default-export-mixed/output.turbo.prod.tsx

@@ -1,7 +1,7 @@
 import { styled } from "next-yak/internal";
 import * as __yak from "next-yak/internal";
 import "data:text/css;base64,LnltN3VCQnUgewogIGJhY2tncm91bmQ6IHJlZDsKfS55bTd1QkJ1MSB7CiAgY29sb3I6IGJsdWU7CiAgZm9udC1zaXplOiAyNHB4Owp9LnltN3VCQnUyIHsKICBwYWRkaW5nOiAyMHB4OwogIGJhY2tncm91bmQ6IHllbGxvdzsKfQ==";
-const Button = /*YAK Extracted CSS:
+const Button = /*YAK EXPORTED STYLED:Button:ym7uBBu*//*YAK Extracted CSS:
 .ym7uBBu {
   background: red;
 }

package/yak_swc/tests/fixture/export-list-hoisted/input.tsx

@@ -0,0 +1,11 @@
+import { css, styled } from "next-yak";
+
+export { outlined, Title as Heading };
+
+const outlined = css`
+  outline: 3px solid red;
+`;
+
+const Title = styled.h1`
+  color: green;
+`;

package/yak_swc/tests/fixture/export-list-hoisted/output.dev.tsx

@@ -0,0 +1,14 @@
+import { css, styled } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
+import "./input.yak.module.css!=!./input?./input.yak.module.css";
+export { outlined, Title as Heading };
+const outlined = /*YAK EXPORTED MIXIN:outlined
+outline: 3px solid red;
+*/ /*#__PURE__*/ css();
+const Title = /*YAK EXPORTED STYLED:Title:input_Title_m7uBBu*//*YAK Extracted CSS:
+:global(.input_Title_m7uBBu) {
+  color: green;
+}
+*/ /*YAK EXPORTED STYLED:Heading:input_Title_m7uBBu*/ /*#__PURE__*/ Object.assign(/*#__PURE__*/ __yak.__yak_h1("input_Title_m7uBBu"), {
+    "displayName": "Title"
+});

package/yak_swc/tests/fixture/export-list-hoisted/output.prod.tsx

@@ -0,0 +1,12 @@
+import { css, styled } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
+import "./input.yak.module.css!=!./input?./input.yak.module.css";
+export { outlined, Title as Heading };
+const outlined = /*YAK EXPORTED MIXIN:outlined
+outline: 3px solid red;
+*/ /*#__PURE__*/ css();
+const Title = /*YAK EXPORTED STYLED:Title:ym7uBBu1*//*YAK Extracted CSS:
+:global(.ym7uBBu1) {
+  color: green;
+}
+*/ /*YAK EXPORTED STYLED:Heading:ym7uBBu1*/ /*#__PURE__*/ __yak.__yak_h1("ym7uBBu1");

package/yak_swc/tests/fixture/export-list-hoisted/output.turbo.dev.tsx

@@ -0,0 +1,14 @@
+import { css, styled } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
+import "data:text/css;base64,LmlucHV0X1RpdGxlX203dUJCdSB7CiAgY29sb3I6IGdyZWVuOwp9";
+export { outlined, Title as Heading };
+const outlined = /*YAK EXPORTED MIXIN:outlined
+outline: 3px solid red;
+*/ /*#__PURE__*/ css();
+const Title = /*YAK EXPORTED STYLED:Title:input_Title_m7uBBu*//*YAK Extracted CSS:
+.input_Title_m7uBBu {
+  color: green;
+}
+*/ /*YAK EXPORTED STYLED:Heading:input_Title_m7uBBu*/ /*#__PURE__*/ Object.assign(/*#__PURE__*/ __yak.__yak_h1("input_Title_m7uBBu"), {
+    "displayName": "Title"
+});

package/yak_swc/tests/fixture/export-list-hoisted/output.turbo.prod.tsx

@@ -0,0 +1,12 @@
+import { css, styled } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
+import "data:text/css;base64,LnltN3VCQnUxIHsKICBjb2xvcjogZ3JlZW47Cn0=";
+export { outlined, Title as Heading };
+const outlined = /*YAK EXPORTED MIXIN:outlined
+outline: 3px solid red;
+*/ /*#__PURE__*/ css();
+const Title = /*YAK EXPORTED STYLED:Title:ym7uBBu1*//*YAK Extracted CSS:
+.ym7uBBu1 {
+  color: green;
+}
+*/ /*YAK EXPORTED STYLED:Heading:ym7uBBu1*/ /*#__PURE__*/ __yak.__yak_h1("ym7uBBu1");

package/yak_swc/tests/fixture/export-list-local/input.tsx

@@ -0,0 +1,15 @@
+import { css, styled } from "next-yak";
+
+const outlined = css`
+  outline: 3px solid red;
+`;
+
+const Title = styled.h1`
+  color: green;
+`;
+
+const highlighted = css`
+  color: blue;
+`;
+
+export { outlined, Title, outlined as alias, Title as Heading, highlighted as default };

package/yak_swc/tests/fixture/export-list-local/output.dev.tsx

@@ -0,0 +1,21 @@
+import { css, styled } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
+import "./input.yak.module.css!=!./input?./input.yak.module.css";
+const outlined = /*YAK EXPORTED MIXIN:outlined
+outline: 3px solid red;
+*/ /*YAK EXPORTED MIXIN:alias
+outline: 3px solid red;
+*/ /*#__PURE__*/ css();
+const Title = /*YAK EXPORTED STYLED:Title:input_Title_m7uBBu*//*YAK Extracted CSS:
+:global(.input_Title_m7uBBu) {
+  color: green;
+}
+*/ /*YAK EXPORTED STYLED:Heading:input_Title_m7uBBu*/ /*#__PURE__*/ Object.assign(/*#__PURE__*/ __yak.__yak_h1("input_Title_m7uBBu"), {
+    "displayName": "Title"
+});
+const highlighted = /*YAK EXPORTED MIXIN:highlighted
+color: blue;
+*/ /*YAK EXPORTED MIXIN:default
+color: blue;
+*/ /*#__PURE__*/ css();
+export { outlined, Title, outlined as alias, Title as Heading, highlighted as default };

package/yak_swc/tests/fixture/export-list-local/output.prod.tsx

@@ -0,0 +1,19 @@
+import { css, styled } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
+import "./input.yak.module.css!=!./input?./input.yak.module.css";
+const outlined = /*YAK EXPORTED MIXIN:outlined
+outline: 3px solid red;
+*/ /*YAK EXPORTED MIXIN:alias
+outline: 3px solid red;
+*/ /*#__PURE__*/ css();
+const Title = /*YAK EXPORTED STYLED:Title:ym7uBBu1*//*YAK Extracted CSS:
+:global(.ym7uBBu1) {
+  color: green;
+}
+*/ /*YAK EXPORTED STYLED:Heading:ym7uBBu1*/ /*#__PURE__*/ __yak.__yak_h1("ym7uBBu1");
+const highlighted = /*YAK EXPORTED MIXIN:highlighted
+color: blue;
+*/ /*YAK EXPORTED MIXIN:default
+color: blue;
+*/ /*#__PURE__*/ css();
+export { outlined, Title, outlined as alias, Title as Heading, highlighted as default };

package/yak_swc/tests/fixture/export-list-local/output.turbo.dev.tsx

@@ -0,0 +1,21 @@
+import { css, styled } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
+import "data:text/css;base64,LmlucHV0X1RpdGxlX203dUJCdSB7CiAgY29sb3I6IGdyZWVuOwp9";
+const outlined = /*YAK EXPORTED MIXIN:outlined
+outline: 3px solid red;
+*/ /*YAK EXPORTED MIXIN:alias
+outline: 3px solid red;
+*/ /*#__PURE__*/ css();
+const Title = /*YAK EXPORTED STYLED:Title:input_Title_m7uBBu*//*YAK Extracted CSS:
+.input_Title_m7uBBu {
+  color: green;
+}
+*/ /*YAK EXPORTED STYLED:Heading:input_Title_m7uBBu*/ /*#__PURE__*/ Object.assign(/*#__PURE__*/ __yak.__yak_h1("input_Title_m7uBBu"), {
+    "displayName": "Title"
+});
+const highlighted = /*YAK EXPORTED MIXIN:highlighted
+color: blue;
+*/ /*YAK EXPORTED MIXIN:default
+color: blue;
+*/ /*#__PURE__*/ css();
+export { outlined, Title, outlined as alias, Title as Heading, highlighted as default };

package/yak_swc/tests/fixture/export-list-local/output.turbo.prod.tsx

@@ -0,0 +1,19 @@
+import { css, styled } from "next-yak/internal";
+import * as __yak from "next-yak/internal";
+import "data:text/css;base64,LnltN3VCQnUxIHsKICBjb2xvcjogZ3JlZW47Cn0=";
+const outlined = /*YAK EXPORTED MIXIN:outlined
+outline: 3px solid red;
+*/ /*YAK EXPORTED MIXIN:alias
+outline: 3px solid red;
+*/ /*#__PURE__*/ css();
+const Title = /*YAK EXPORTED STYLED:Title:ym7uBBu1*//*YAK Extracted CSS:
+.ym7uBBu1 {
+  color: green;
+}
+*/ /*YAK EXPORTED STYLED:Heading:ym7uBBu1*/ /*#__PURE__*/ __yak.__yak_h1("ym7uBBu1");
+const highlighted = /*YAK EXPORTED MIXIN:highlighted
+color: blue;
+*/ /*YAK EXPORTED MIXIN:default
+color: blue;
+*/ /*#__PURE__*/ css();
+export { outlined, Title, outlined as alias, Title as Heading, highlighted as default };