fix(emotion): Port label tests and fix label generation

packages/emotion/transform/src/lib.rs

@@ -13,10 +13,11 @@ use sourcemap::{RawToken, SourceMap as RawSourcemap};
 use swc_atoms::JsWord;
 use swc_common::{comments::Comments, util::take::Take, BytePos, SourceMapperDyn, DUMMY_SP};
 use swc_ecma_ast::{
-    ArrayLit, CallExpr, Callee, Expr, ExprOrSpread, Id, Ident, ImportDecl, ImportSpecifier,
-    JSXAttr, JSXAttrName, JSXAttrOrSpread, JSXAttrValue, JSXElement, JSXElementName, JSXExpr,
-    JSXExprContainer, JSXObject, KeyValueProp, MemberProp, ModuleExportName, ObjectLit, Pat, Prop,
-    PropName, PropOrSpread, SourceMapperExt, SpreadElement, Tpl, VarDeclarator,
+    ArrayLit, CallExpr, Callee, ClassDecl, ClassMethod, ClassProp, Expr, ExprOrSpread, FnDecl, Id,
+    Ident, ImportDecl, ImportSpecifier, JSXAttr, JSXAttrName, JSXAttrOrSpread, JSXAttrValue,
+    JSXElement, JSXElementName, JSXExpr, JSXExprContainer, JSXObject, KeyValueProp, MemberProp,
+    MethodProp, ModuleExportName, ObjectLit, Pat, Prop, PropName, PropOrSpread, SourceMapperExt,
+    SpreadElement, Tpl, VarDeclarator,
 };
 use swc_ecma_utils::ExprFactory;
 use swc_ecma_visit::{Fold, FoldWith};
@@ -76,6 +77,9 @@ static EMOTION_OFFICIAL_LIBRARIES: Lazy<Vec<EmotionModuleConfig>> = Lazy::new(||
     ]
 });
 
+static INVALID_LABEL_SPACES: Lazy<Regex> =
+    Lazy::new(|| RegexBuilder::new(r#"\s+"#).build().unwrap());
+
 static INVALID_CSS_CLASS_NAME_CHARACTERS: Lazy<Regex> = Lazy::new(|| {
     RegexBuilder::new(r##"[!"#$%&'()*+,./:;<=>?@\[\]^`|}~{]"##)
         .build()
@@ -178,6 +182,7 @@ pub struct EmotionTransformer<C: Comments> {
     import_packages: FxHashMap<Id, PackageMeta>,
     emotion_target_class_name_count: usize,
     current_context: Option<String>,
+    current_class: Option<String>,
     // skip `css` transformation if it in JSX Element/Attribute
     in_jsx_element: bool,
 
@@ -217,13 +222,19 @@ impl<C: Comments> EmotionTransformer<C> {
             import_packages: FxHashMap::default(),
             emotion_target_class_name_count: 0,
             current_context: None,
+            current_class: None,
             in_jsx_element: false,
             registered_imports,
         }
     }
 
-    fn sanitize_label_part<'t>(&self, label_part: &'t str) -> Cow<'t, str> {
-        INVALID_CSS_CLASS_NAME_CHARACTERS.replace_all(label_part, "-")
+    fn sanitize_label_part<'t>(&self, label_part: &'t str) -> String {
+        // Existing @emotion/babel-plugin behaviour is to replace all spaces
+        // with a single hyphen
+        let without_spaces = INVALID_LABEL_SPACES.replace_all(label_part, "-");
+        INVALID_CSS_CLASS_NAME_CHARACTERS
+            .replace_all(&without_spaces, "-")
+            .to_string()
     }
 
     fn create_label(&self, with_prefix: bool) -> String {
@@ -244,6 +255,10 @@ impl<C: Comments> EmotionTransformer<C> {
             if let Some(dirname) = self.dirname.as_ref() {
                 label = label.replace("[dirname]", &self.sanitize_label_part(dirname));
             };
+        } else {
+            // Existing @emotion/babel-plugin behaviour is to
+            // not provide a label if there is no available identifier
+            return "".to_string();
         }
         label
     }
@@ -430,9 +445,72 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
         if let Pat::Ident(i) = &dec.name {
             self.current_context = Some(i.id.as_ref().to_owned());
         }
+        // If we encounter a named function expression
+        if let Expr::Fn(f) = *dec.init.clone().unwrap() {
+            if let Some(i) = &f.ident {
+                self.current_context = Some(i.sym.as_ref().to_owned());
+            }
+        }
         dec.fold_children_with(self)
     }
 
+    fn fold_key_value_prop(&mut self, kv: KeyValueProp) -> KeyValueProp {
+        match &kv.key {
+            PropName::Ident(k) => {
+                self.current_context = Some(k.sym.as_ref().to_owned());
+            }
+            PropName::Str(k) => {
+                self.current_context = Some(k.value.as_ref().to_owned());
+            }
+            _ => (),
+        }
+        kv.fold_children_with(self)
+    }
+
+    fn fold_method_prop(&mut self, mp: MethodProp) -> MethodProp {
+        if let PropName::Ident(p) = &mp.key {
+            self.current_context = Some(p.sym.as_ref().to_owned());
+        }
+        mp.fold_children_with(self)
+    }
+
+    fn fold_fn_decl(&mut self, fn_dec: FnDecl) -> FnDecl {
+        self.current_context = Some(fn_dec.ident.sym.as_ref().to_owned());
+        fn_dec.fold_children_with(self)
+    }
+
+    fn fold_class_decl(&mut self, cd: ClassDecl) -> ClassDecl {
+        self.current_class = Some(cd.ident.sym.as_ref().to_owned());
+        self.current_context = self.current_class.clone();
+        cd.fold_children_with(self)
+    }
+
+    fn fold_class_method(&mut self, cm: ClassMethod) -> ClassMethod {
+        // class methods use the class name for the context
+        if self.current_class.is_some() {
+            self.current_context = self.current_class.clone();
+        }
+        cm.fold_children_with(self)
+    }
+
+    fn fold_class_prop(&mut self, cp: ClassProp) -> ClassProp {
+        if let PropName::Ident(p) = &cp.key {
+            self.current_context = Some(p.sym.as_ref().to_owned());
+        }
+        cp.fold_children_with(self)
+    }
+
+    fn fold_computed_prop_name(
+        &mut self,
+        n: swc_ecma_ast::ComputedPropName,
+    ) -> swc_ecma_ast::ComputedPropName {
+        // Existing @emotion/babel-plugin behaviour is that computed
+        // properties do not have a label. We reset the label here as
+        // an unset label is reduced to an empty string in `create_label`.
+        self.current_context = None;
+        n.fold_children_with(self)
+    }
+
     fn fold_call_expr(&mut self, mut expr: CallExpr) -> CallExpr {
         // If no package that we care about is imported, skip the following
         // transformation logic.

packages/emotion/transform/tests/fixture.rs

@@ -72,8 +72,8 @@ fn next_emotion_fixture(input: PathBuf) {
 //   "/labels/filename" -> "[filename]"
 //   "/labels/filename-local" -> "[filename]-[local]"
 //   "/labels/local" -> "[local]"
-#[fixture("tests/labels/**/output.js")]
-fn emotion_label_fixture(output: PathBuf) {
+#[fixture("tests/labels/options/**/output.js")]
+fn emotion_label_option_fixture(output: PathBuf) {
     let output_folder = output.parent().unwrap();
     let output_folder_name = output_folder.file_name().unwrap().to_str().unwrap();
     let input = output_folder.parent().unwrap().join("input.tsx");
@@ -136,8 +136,17 @@ fn emotion_label_fixture(output: PathBuf) {
     );
 }
 
-#[fixture("tests/label-sanitisation/**/*.ts")]
+#[fixture("tests/labels/emotion-js/**/*.ts")]
+fn emotion_label_original(input: PathBuf) {
+    emotion_label(input, "[local]".to_string())
+}
+
+#[fixture("tests/labels/sanitisation/**/*.ts")]
 fn emotion_label_sanitisation(input: PathBuf) {
+    emotion_label(input, "[dirname]-[filename]-[local]".to_string())
+}
+
+fn emotion_label(input: PathBuf, label: String) {
     let output_folder_name = input
         .parent()
         .unwrap()
@@ -174,7 +183,7 @@ fn emotion_label_sanitisation(input: PathBuf) {
                         enabled: Some(true),
                         sourcemap: Some(true),
                         auto_label: Some(true),
-                        label_format: Some("[dirname]-[filename]-[local]".to_string()),
+                        label_format: Some(label.to_owned()),
                         ..Default::default()
                     },
                     &PathBuf::from(format!("{output_folder_name}/{input_file_name}")),

packages/emotion/transform/tests/fixture/comments/output.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 export default /*#__PURE__*/ styled("div", {
   target: "e1h8m75k0",
-  label: "[local]",
+  label: "",
 })(
   "color:red;.foo{color:blue;}width:10px;",
   "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5leHBvcnQgZGVmYXVsdCBzdHlsZWQuZGl2YFxuICBjb2xvcjogcmVkO1xuICAuZm9vIHtcbiAgICBjb2xvcjogYmx1ZTtcbiAgICAvKipcbiAgICAgIG11bHRpIGxpbmUgY29tbWVudHNcbiAgICAqL1xuICB9XG4gIC8qIC8qICovXG4gIHdpZHRoOiAxMHB4O1xuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZSJ9 */"

packages/emotion/transform/tests/fixture/css-in-callback/output.ts

@@ -55,7 +55,7 @@ const Container2 = /*#__PURE__*/ styled("div", {
 export class SimpleComponent extends PureComponent {
     render() {
         return /*#__PURE__*/ _jsxs(Container, {
-            css: /*#__PURE__*/ css("color:hotpink;", "Container2", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IENvbnRhaW5lcldpdGhPcHRpb25zID0gc3R5bGVkKCdkaXYnLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiAocHJvcGVydHlOYW1lOiBzdHJpbmcpID0+ICFwcm9wZXJ0eU5hbWUuc3RhcnRzV2l0aCgnJCcpLFxufSlgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jb25zdCBTcGFuQ29udGFpbmVyID0gc3R5bGVkKCdzcGFuJykoe1xuICBiYWNrZ3JvdW5kOiAneWVsbG93Jyxcbn0pXG5cbmV4cG9ydCBjb25zdCBEaXZDb250YWluZXJFeHRlbmRlZCA9IHN0eWxlZChEaXZDb250YWluZXIpYGBcbmV4cG9ydCBjb25zdCBEaXZDb250YWluZXJFeHRlbmRlZDIgPSBzdHlsZWQoRGl2Q29udGFpbmVyKSh7fSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RGEifQ== */"),
+            css: /*#__PURE__*/ css("color:hotpink;", "SimpleComponent", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IENvbnRhaW5lcldpdGhPcHRpb25zID0gc3R5bGVkKCdkaXYnLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiAocHJvcGVydHlOYW1lOiBzdHJpbmcpID0+ICFwcm9wZXJ0eU5hbWUuc3RhcnRzV2l0aCgnJCcpLFxufSlgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jb25zdCBTcGFuQ29udGFpbmVyID0gc3R5bGVkKCdzcGFuJykoe1xuICBiYWNrZ3JvdW5kOiAneWVsbG93Jyxcbn0pXG5cbmV4cG9ydCBjb25zdCBEaXZDb250YWluZXJFeHRlbmRlZCA9IHN0eWxlZChEaXZDb250YWluZXIpYGBcbmV4cG9ydCBjb25zdCBEaXZDb250YWluZXJFeHRlbmRlZDIgPSBzdHlsZWQoRGl2Q29udGFpbmVyKSh7fSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RGEifQ== */"),
             children: [
                 /*#__PURE__*/ _jsx(Global, {
                     styles: [

packages/emotion/transform/tests/fixture/import-map/vanilla/output.ts

@@ -1,4 +1,4 @@
 import { something } from 'package-three';
 /*#__PURE__*/ something({
     color: 'green'
-}, "label:[local]", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHNvbWV0aGluZyB9IGZyb20gJ3BhY2thZ2UtdGhyZWUnXG5cbnNvbWV0aGluZyh7IGNvbG9yOiAnZ3JlZW4nIH0pXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEifQ== */");
+}, "", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHNvbWV0aGluZyB9IGZyb20gJ3BhY2thZ2UtdGhyZWUnXG5cbnNvbWV0aGluZyh7IGNvbG9yOiAnZ3JlZW4nIH0pXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEifQ== */");

packages/emotion/transform/tests/fixture/issues/180/input.tsx

@@ -0,0 +1,39 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+// Example 1
+function myStyled(Component) {
+  return styled(Component)`
+    background-color: red;
+  `;
+}
+
+function myCss(color) {
+  return css`
+    background-color: ${color};
+  `;
+}
+
+const myStyles = myCss("red");
+
+const Div = myStyled("div");
+
+function App() {
+  return (
+    <>
+      <Div>one</Div>
+      <div css={myStyles}>two</div>
+    </>
+  );
+}
+
+// Example 2
+const styles = {
+  keyA: css({
+    padding: 0,
+  }),
+  keyB: css({
+    margin: 0,
+  }),
+};
+const App2 = () => <div classname={styles.keyA}>hello world</div>;