diff --git a/packages/next-swc/crates/core/src/emotion/mod.rs b/packages/next-swc/crates/core/src/emotion/mod.rs index 579e5e45de96..86b6837fab53 100644 --- a/packages/next-swc/crates/core/src/emotion/mod.rs +++ b/packages/next-swc/crates/core/src/emotion/mod.rs @@ -1,18 +1,21 @@ +use std::borrow::Cow; use std::path::{Path, PathBuf}; use std::sync::Arc; use fxhash::FxHashMap; use once_cell::sync::Lazy; +use regex::Regex; use serde::{Deserialize, Serialize}; use swc::sourcemap::{RawToken, SourceMap as RawSourcemap}; +use swc_common::util::take::Take; use swc_common::{BytePos, SourceMap, DUMMY_SP}; -use swc_ecmascript::ast::{ - ExprOrSpread, Ident, KeyValueProp, Lit, MemberProp, ObjectLit, Pat, Prop, PropName, - PropOrSpread, VarDeclarator, -}; -use swc_ecmascript::codegen::util::SourceMapperExt; +use swc_ecmascript::ast::Tpl; use swc_ecmascript::{ - ast::{Callee, Expr, ImportDecl, ImportSpecifier}, + ast::{ + Callee, Expr, ExprOrSpread, Ident, ImportDecl, ImportSpecifier, KeyValueProp, Lit, + MemberProp, ObjectLit, Pat, Prop, PropName, PropOrSpread, VarDeclarator, + }, + codegen::util::SourceMapperExt, visit::{swc_ecma_ast::CallExpr, Fold, FoldWith}, }; @@ -22,19 +25,38 @@ static EMOTION_OFFICIAL_LIBRARIES: Lazy> = Lazy::new(|| vec![ EmotionModuleConfig { module_name: "@emotion/styled".to_owned(), - exported_names: vec!["styled".to_owned()], - has_default_export: Some(true), - kind: ExprKind::Styled, + exported_names: vec![], + default_export: Some(ExprKind::Styled), }, EmotionModuleConfig { module_name: "@emotion/react".to_owned(), - exported_names: vec!["css".to_owned()], - kind: ExprKind::Css, + exported_names: vec![ExportItem { + name: "css".to_owned(), + kind: ExprKind::Css, + }], ..Default::default() }, + EmotionModuleConfig { + module_name: "@emotion/primitives".to_owned(), + exported_names: vec![ExportItem { + name: "css".to_owned(), + kind: ExprKind::Css, + }], + default_export: Some(ExprKind::Styled), + }, + EmotionModuleConfig { + module_name: "@emotion/native".to_owned(), + exported_names: vec![ExportItem { + name: "css".to_owned(), + kind: ExprKind::Css, + }], + default_export: Some(ExprKind::Styled), + }, ] }); +static SPACE_AROUND_COLON: Lazy = Lazy::new(|| Regex::new(r"\s*(?P[:|;])\s*").unwrap()); + #[derive(Debug, Clone, Serialize, Deserialize)] #[serde(rename_all = "camelCase")] pub struct EmotionOptions { @@ -60,8 +82,13 @@ impl Default for EmotionOptions { #[derive(Debug, Clone, Default, Serialize, Deserialize)] pub struct EmotionModuleConfig { module_name: String, - exported_names: Vec, - has_default_export: Option, + exported_names: Vec, + default_export: Option, +} + +#[derive(Debug, Clone, Default, Serialize, Deserialize)] +struct ExportItem { + name: String, kind: ExprKind, } @@ -91,25 +118,13 @@ impl Default for ExprKind { } #[derive(Debug)] -struct PackageMeta { - _type: ImportType, - kind: ExprKind, +enum PackageMeta { + Named(ExprKind), + Namespace(EmotionModuleConfig), } -pub fn emotion( - emotion_options: EmotionOptions, - path: &Path, - cm: Arc, - react_jsx_runtime: bool, - es_module_interop: bool, -) -> impl Fold { - EmotionTransformer::new( - emotion_options, - path, - cm, - react_jsx_runtime, - es_module_interop, - ) +pub fn emotion(emotion_options: EmotionOptions, path: &Path, cm: Arc) -> impl Fold { + EmotionTransformer::new(emotion_options, path, cm) } pub struct EmotionTransformer { @@ -119,8 +134,6 @@ pub struct EmotionTransformer { dir: Option, filename: Option, cm: Arc, - _react_jsx_runtime: bool, - _es_module_interop: bool, custom_modules: Vec, import_packages: FxHashMap, emotion_target_class_name_count: usize, @@ -128,13 +141,7 @@ pub struct EmotionTransformer { } impl EmotionTransformer { - pub fn new( - options: EmotionOptions, - path: &Path, - cm: Arc, - react_jsx_runtime: bool, - es_module_interop: bool, - ) -> Self { + pub fn new(options: EmotionOptions, path: &Path, cm: Arc) -> Self { EmotionTransformer { custom_modules: options.custom_modules.clone().unwrap_or_default(), options, @@ -146,9 +153,7 @@ impl EmotionTransformer { .and_then(|filename| filename.to_str()) .map(|s| s.to_owned()), cm, - _react_jsx_runtime: react_jsx_runtime, import_packages: FxHashMap::default(), - _es_module_interop: es_module_interop, emotion_target_class_name_count: 0, current_context: None, } @@ -222,10 +227,8 @@ impl EmotionTransformer { // These import statements are supported: // import styled from '@emotion/styled' // import { default as whateverStyled } from '@emotion/styled' - // import * as styled from '@emotion/styled' // with `no_interop: true` // import { css } from '@emotion/react' - // import emotionCss from '@emotion/react' - // import * as emotionCss from '@emotion/react' // with `no_interop: true` + // import * as emotionCss from '@emotion/react' fn generate_import_info(&mut self, expr: &ImportDecl) { for c in EMOTION_OFFICIAL_LIBRARIES .iter() @@ -235,36 +238,27 @@ impl EmotionTransformer { for specifier in expr.specifiers.iter() { match specifier { ImportSpecifier::Named(named) => { - for export_name in c.exported_names.iter() { - if named.local.as_ref() == export_name { + for exported in c.exported_names.iter() { + if named.local.as_ref() == exported.name { self.import_packages.insert( named.local.as_ref().to_owned(), - PackageMeta { - _type: ImportType::Named, - kind: c.kind, - }, + PackageMeta::Named(exported.kind), ); } } } ImportSpecifier::Default(default) => { - if c.has_default_export.unwrap_or(false) { + if let Some(kind) = c.default_export { self.import_packages.insert( default.local.as_ref().to_owned(), - PackageMeta { - _type: ImportType::Default, - kind: c.kind, - }, + PackageMeta::Named(kind), ); } } ImportSpecifier::Namespace(namespace) => { self.import_packages.insert( - namespace.local.to_string(), - PackageMeta { - _type: ImportType::Namespace, - kind: c.kind, - }, + namespace.local.as_ref().to_owned(), + PackageMeta::Namespace(c.clone()), ); } } @@ -285,6 +279,33 @@ impl EmotionTransformer { value: Box::new(Expr::Lit(Lit::Str(stable_class_name.into()))), }))) } + + fn create_args_from_tagged_tpl(&self, tagged_tpl: &mut Tpl) -> Vec { + let args_len = tagged_tpl.exprs.len() + tagged_tpl.quasis.len(); + // 2 more capacity is for `label` and `sourceMap` + let mut args = Vec::with_capacity(args_len + 2); + for index in 0..args_len { + let i = index / 2; + if index % 2 == 0 { + if let Some(q) = tagged_tpl.quasis.get_mut(i) { + let q = q.take(); + let minified = minify_css_string(q.raw.value.as_ref()); + if !minified.is_empty() { + args.push(ExprOrSpread { + spread: None, + expr: Box::new(Expr::Lit(Lit::Str(minified.into()))), + }); + } + } + } else if let Some(e) = tagged_tpl.exprs.get_mut(i) { + args.push(ExprOrSpread { + spread: None, + expr: e.take(), + }); + } + } + args + } } impl Fold for EmotionTransformer { @@ -315,20 +336,24 @@ impl Fold for EmotionTransformer { // css({}) Expr::Ident(i) => { if let Some(package) = self.import_packages.get(i.as_ref()) { - if !expr.args.is_empty() && matches!(package.kind, ExprKind::Css) { - if self.options.auto_label.unwrap_or(false) { - expr.args.push(ExprOrSpread { - spread: None, - expr: Box::new(Expr::Lit(Lit::Str( - self.create_label(true).into(), - ))), - }); - } - if let Some(cm) = self.create_sourcemap(expr.span.lo) { - expr.args.push(ExprOrSpread { - spread: None, - expr: Box::new(Expr::Lit(Lit::Str(cm.into()))), - }); + if !expr.args.is_empty() { + if let PackageMeta::Named(kind) = package { + if matches!(kind, ExprKind::Css) { + if self.options.auto_label.unwrap_or(false) { + expr.args.push(ExprOrSpread { + spread: None, + expr: Box::new(Expr::Lit(Lit::Str( + self.create_label(true).into(), + ))), + }); + } + if let Some(cm) = self.create_sourcemap(expr.span.lo) { + expr.args.push(ExprOrSpread { + spread: None, + expr: Box::new(Expr::Lit(Lit::Str(cm.into()))), + }); + } + } } } } @@ -337,8 +362,10 @@ impl Fold for EmotionTransformer { Expr::Call(c) => { if let Callee::Expr(callee_exp) = &c.callee { if let Expr::Ident(i) = callee_exp.as_ref() { - if let Some(package) = self.import_packages.get(i.as_ref()) { - if !c.args.is_empty() && matches!(package.kind, ExprKind::Styled) { + if let Some(PackageMeta::Named(ExprKind::Styled)) = + self.import_packages.get(i.as_ref()) + { + if !c.args.is_empty() { let mut args_props = Vec::with_capacity(2); args_props.push(self.create_target_arg_node()); if self.options.auto_label.unwrap_or(false) { @@ -355,7 +382,7 @@ impl Fold for EmotionTransformer { ))); } if let Some(cm) = self.create_sourcemap(expr.span.lo()) { - expr.args.push(ExprOrSpread { + c.args.push(ExprOrSpread { spread: None, expr: Box::new(Expr::Lit(Lit::Str(cm.into()))), }); @@ -377,8 +404,70 @@ impl Fold for EmotionTransformer { Expr::Member(m) => { if let Expr::Ident(i) = m.obj.as_ref() { if let Some(package) = self.import_packages.get(i.as_ref()) { - match package.kind { - ExprKind::Css => { + if let PackageMeta::Named(kind) = package { + if matches!(kind, ExprKind::Styled) { + if let MemberProp::Ident(prop) = &m.prop { + let mut args_props = Vec::with_capacity(2); + args_props.push(self.create_target_arg_node()); + if self.options.auto_label.unwrap_or(false) { + args_props.push(PropOrSpread::Prop(Box::new( + Prop::KeyValue(KeyValueProp { + key: PropName::Ident(Ident::new( + "label".into(), + DUMMY_SP, + )), + value: Box::new(Expr::Lit(Lit::Str( + self.create_label(false).into(), + ))), + }), + ))); + } + if let Some(cm) = self.create_sourcemap(expr.span.lo()) { + args_props.push(PropOrSpread::Prop(Box::new( + Prop::KeyValue(KeyValueProp { + key: PropName::Ident(Ident::new( + "map".into(), + DUMMY_SP, + )), + value: Box::new(Expr::Lit(Lit::Str(cm.into()))), + }), + ))); + } + return CallExpr { + span: expr.span, + type_args: expr.type_args, + args: expr.args, + callee: Callee::Expr(Box::new(Expr::Call(CallExpr { + span: DUMMY_SP, + type_args: None, + callee: Callee::Expr(Box::new(Expr::Ident( + Ident::new(i.sym.clone(), i.span), + ))), + args: vec![ + ExprOrSpread { + spread: None, + expr: Box::new(Expr::Lit(Lit::Str( + prop.as_ref().into(), + ))), + }, + ExprOrSpread { + spread: None, + expr: Box::new(Expr::Object(ObjectLit { + span: DUMMY_SP, + props: args_props, + })), + }, + ], + }))), + }; + } + } + } + if let PackageMeta::Namespace(c) = package { + if c.exported_names + .iter() + .any(|n| match_css_export(n, &m.prop)) + { if self.options.auto_label.unwrap_or(false) { expr.args.push(ExprOrSpread { spread: None, @@ -394,12 +483,109 @@ impl Fold for EmotionTransformer { }); } } - ExprKind::Styled => { - if let MemberProp::Ident(prop) = &m.prop { - let mut args_props = Vec::with_capacity(2); - args_props.push(self.create_target_arg_node()); + } + } + } + } + _ => {} + } + } + expr + } + + fn fold_expr(&mut self, mut expr: Expr) -> Expr { + if let Expr::TaggedTpl(tagged_tpl) = &mut expr { + // styled('div')`` + match tagged_tpl.tag.as_mut() { + Expr::Call(call) => { + if let Callee::Expr(callee) = &call.callee { + if let Expr::Ident(i) = callee.as_ref() { + if let Some(PackageMeta::Named(ExprKind::Styled)) = + self.import_packages.get(i.as_ref()) + { + let mut callee = call.take(); + let mut object_props = Vec::with_capacity(2); + object_props.push(self.create_target_arg_node()); + if self.options.auto_label.unwrap_or(false) { + object_props.push(PropOrSpread::Prop(Box::new( + Prop::KeyValue(KeyValueProp { + key: PropName::Ident(Ident::new( + "label".into(), + DUMMY_SP, + )), + value: Box::new(Expr::Lit(Lit::Str( + self.create_label(false).into(), + ))), + }), + ))); + } + if let Some(cm) = self.create_sourcemap(call.span.lo()) { + callee.args.push(ExprOrSpread { + spread: None, + expr: Box::new(Expr::Lit(Lit::Str(cm.into()))), + }); + } + callee.args.push(ExprOrSpread { + spread: None, + expr: Box::new(Expr::Object(ObjectLit { + span: DUMMY_SP, + props: object_props, + })), + }); + return Expr::Call(CallExpr { + span: DUMMY_SP, + callee: Callee::Expr(Box::new(Expr::Call(callee))), + args: self + .create_args_from_tagged_tpl(&mut tagged_tpl.tpl) + .into_iter() + .map(|exp| exp.fold_children_with(self)) + .collect(), + type_args: None, + }); + } + } + } + } + // css`` + Expr::Ident(i) => { + if let Some(PackageMeta::Named(ExprKind::Css)) = + self.import_packages.get(i.as_ref()) + { + let mut args = self.create_args_from_tagged_tpl(&mut tagged_tpl.tpl); + if self.options.auto_label.unwrap_or(false) { + args.push(ExprOrSpread { + spread: None, + expr: Box::new(Expr::Lit(Lit::Str( + self.create_label(false).into(), + ))), + }); + } + if let Some(cm) = self.create_sourcemap(tagged_tpl.span.lo()) { + args.push(ExprOrSpread { + spread: None, + expr: Box::new(Expr::Lit(Lit::Str(cm.into()))), + }); + } + return Expr::Call(CallExpr { + span: DUMMY_SP, + callee: Callee::Expr(Box::new(Expr::Ident(i.take()))), + args, + type_args: None, + }); + } + } + // styled.div`` + // customEmotionReact.css`` + Expr::Member(member_expr) => { + if let Expr::Ident(i) = member_expr.obj.as_mut() { + if let Some(p) = self.import_packages.get(i.as_ref()) { + match p { + PackageMeta::Named(ExprKind::Styled) => { + if let MemberProp::Ident(prop) = &mut member_expr.prop { + let mut object_props = Vec::with_capacity(2); + object_props.push(self.create_target_arg_node()); if self.options.auto_label.unwrap_or(false) { - args_props.push(PropOrSpread::Prop(Box::new( + object_props.push(PropOrSpread::Prop(Box::new( Prop::KeyValue(KeyValueProp { key: PropName::Ident(Ident::new( "label".into(), @@ -411,41 +597,84 @@ impl Fold for EmotionTransformer { }), ))); } - if let Some(cm) = self.create_sourcemap(expr.span.lo()) { - expr.args.push(ExprOrSpread { + let mut args = + self.create_args_from_tagged_tpl(&mut tagged_tpl.tpl); + if let Some(cm) = + self.create_sourcemap(member_expr.span.lo()) + { + args.push(ExprOrSpread { spread: None, expr: Box::new(Expr::Lit(Lit::Str(cm.into()))), }); } - return CallExpr { - span: expr.span, - type_args: expr.type_args, - args: expr.args, + return Expr::Call(CallExpr { + span: DUMMY_SP, + type_args: None, callee: Callee::Expr(Box::new(Expr::Call(CallExpr { - span: DUMMY_SP, type_args: None, + span: DUMMY_SP, callee: Callee::Expr(Box::new(Expr::Ident( - Ident::new(i.sym.clone(), i.span), + i.take(), ))), args: vec![ ExprOrSpread { spread: None, expr: Box::new(Expr::Lit(Lit::Str( - prop.as_ref().into(), + prop.take().sym.into(), ))), }, ExprOrSpread { spread: None, expr: Box::new(Expr::Object(ObjectLit { span: DUMMY_SP, - props: args_props, + props: object_props, })), }, ], }))), - }; + args, + }); } } + PackageMeta::Namespace(c) => { + if c.exported_names + .iter() + .any(|item| match_css_export(item, &member_expr.prop)) + { + return Expr::Call(CallExpr { + span: DUMMY_SP, + callee: Callee::Expr(Box::new(Expr::Member( + member_expr.take(), + ))), + args: { + let mut args = self.create_args_from_tagged_tpl( + &mut tagged_tpl.tpl, + ); + if self.options.auto_label.unwrap_or(false) { + args.push(ExprOrSpread { + spread: None, + expr: Box::new(Expr::Lit(Lit::Str( + self.create_label(true).into(), + ))), + }); + } + if let Some(cm) = + self.create_sourcemap(tagged_tpl.span.lo()) + { + args.push(ExprOrSpread { + spread: None, + expr: Box::new(Expr::Lit(Lit::Str( + cm.into(), + ))), + }); + } + args + }, + type_args: None, + }); + } + } + _ => {} } } } @@ -453,6 +682,24 @@ impl Fold for EmotionTransformer { _ => {} } } - expr + + expr.fold_children_with(self) } } + +fn match_css_export(item: &ExportItem, prop: &MemberProp) -> bool { + if matches!(item.kind, ExprKind::Css) { + if let MemberProp::Ident(prop) = prop { + if item.name.as_str() == prop.sym.as_ref() { + return true; + } + } + } + false +} + +#[inline] +fn minify_css_string(input: &str) -> Cow { + let pattern = |c| c == ' ' || c == '\n'; + SPACE_AROUND_COLON.replace_all(input.trim_matches(pattern).trim_end_matches(pattern), "$s") +} diff --git a/packages/next-swc/crates/core/src/lib.rs b/packages/next-swc/crates/core/src/lib.rs index 4d0b31d8a267..74702e8ca033 100644 --- a/packages/next-swc/crates/core/src/lib.rs +++ b/packages/next-swc/crates/core/src/lib.rs @@ -40,7 +40,6 @@ use swc_common::{self, chain, pass::Optional}; use swc_common::{FileName, SourceFile, SourceMap}; use swc_ecmascript::ast::EsVersion; use swc_ecmascript::transforms::pass::noop; -use swc_ecmascript::transforms::react::Runtime; use swc_ecmascript::{ parser::{lexer::Lexer, Parser, StringInput}, visit::Fold, @@ -178,37 +177,9 @@ pub fn custom_before_pass( if !config.enabled.unwrap_or(false) { return None; } - let is_react_jsx_runtime = opts - .swc - .config - .jsc - .transform - .as_ref() - .and_then(|t| t.react.runtime) - .map(|r| matches!(r, Runtime::Automatic)) - .unwrap_or(false); - let es_module_interop = opts - .swc - .config - .module - .as_ref() - .map(|m| { - if let ModuleConfig::CommonJs(c) = m { - !c.no_interop - } else { - true - } - }) - .unwrap_or(true); if let FileName::Real(path) = &file.name { path.to_str().map(|_| { - Either::Left(emotion::EmotionTransformer::new( - config.clone(), - path, - cm, - is_react_jsx_runtime, - es_module_interop, - )) + Either::Left(emotion::EmotionTransformer::new(config.clone(), path, cm)) }) } else { None diff --git a/packages/next-swc/crates/core/tests/fixture.rs b/packages/next-swc/crates/core/tests/fixture.rs index 032d2565217a..c828a25b3976 100644 --- a/packages/next-swc/crates/core/tests/fixture.rs +++ b/packages/next-swc/crates/core/tests/fixture.rs @@ -272,7 +272,7 @@ fn shake_exports_fixture_default(input: PathBuf) { ); } -#[fixture("tests/fixture/emotion/**/input.tsx")] +#[fixture("tests/fixture/emotion/*/input.tsx")] fn next_emotion_fixture(input: PathBuf) { let output = input.parent().unwrap().join("output.ts"); test_fixture( @@ -303,8 +303,6 @@ fn next_emotion_fixture(input: PathBuf) { }, &input, tr.cm.clone(), - true, - true, ), jsx, ) diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx index c909039002d1..f9e905cef18e 100644 --- a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx +++ b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/react' +import { css, Global } from '@emotion/react' import styled from '@emotion/styled' import { PureComponent } from 'react' import ReactDOM from 'react-dom' @@ -15,25 +15,59 @@ const styles = css({ width: '20px', }) -const DicContainer = styled.div({ +const styles2 = css` + color: red; + width: 20px; +` + +const DivContainer = styled.div({ background: 'red', }) +const DivContainer2 = styled.div` + background: red; +` + const SpanContainer = styled('span')({ background: 'yellow', }) const Container = styled('button')` + background: red; ${stylesInCallback} ${() => css({ background: 'red', })} + color: yellow; + font-size: 12px; ` + +const Container2 = styled.div` + background: red; +` + export class SimpleComponent extends PureComponent { render() { return ( - + + hello ) diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts index 580b6058dd29..3ab06979ea2e 100644 --- a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts +++ b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts @@ -1,62 +1,60 @@ -import { jsx as _jsx } from 'react/jsx-runtime' -import { css } from '@emotion/react' -import styled from '@emotion/styled' -import { PureComponent } from 'react' -import ReactDOM from 'react-dom' -const stylesInCallback = (props: any) => - css( - { - color: 'red', - background: 'yellow', - width: `${props.scale * 100}px`, - }, - 'label:stylesInCallback', - '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBQdXJlQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuXG5jb25zdCBzdHlsZXNJbkNhbGxiYWNrID0gKHByb3BzOiBhbnkpID0+XG4gIGNzcyh7XG4gICAgY29sb3I6ICdyZWQnLFxuICAgIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxuICAgIHdpZHRoOiBgJHtwcm9wcy5zY2FsZSAqIDEwMH1weGAsXG4gIH0pXG5cbmNvbnN0IHN0eWxlcyA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IERpY0NvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgJHtzdHlsZXNJbkNhbGxiYWNrfVxuICAkeygpID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmQ6ICdyZWQnLFxuICAgIH0pfVxuYFxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXI+XG4gICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgPC9Db250YWluZXI+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTUUifQ== */' - ) -const styles = css( - { - color: 'red', - width: '20px', - }, - 'label:styles', - '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBQdXJlQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuXG5jb25zdCBzdHlsZXNJbkNhbGxiYWNrID0gKHByb3BzOiBhbnkpID0+XG4gIGNzcyh7XG4gICAgY29sb3I6ICdyZWQnLFxuICAgIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxuICAgIHdpZHRoOiBgJHtwcm9wcy5zY2FsZSAqIDEwMH1weGAsXG4gIH0pXG5cbmNvbnN0IHN0eWxlcyA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IERpY0NvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgJHtzdHlsZXNJbkNhbGxiYWNrfVxuICAkeygpID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmQ6ICdyZWQnLFxuICAgIH0pfVxuYFxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXI+XG4gICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgPC9Db250YWluZXI+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWWUifQ== */' -) -const DicContainer = styled('div', { - target: 'ep3ww290', - label: 'DicContainer', -})( - { - background: 'red', - }, - '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBQdXJlQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuXG5jb25zdCBzdHlsZXNJbkNhbGxiYWNrID0gKHByb3BzOiBhbnkpID0+XG4gIGNzcyh7XG4gICAgY29sb3I6ICdyZWQnLFxuICAgIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxuICAgIHdpZHRoOiBgJHtwcm9wcy5zY2FsZSAqIDEwMH1weGAsXG4gIH0pXG5cbmNvbnN0IHN0eWxlcyA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IERpY0NvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgJHtzdHlsZXNJbkNhbGxiYWNrfVxuICAkeygpID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmQ6ICdyZWQnLFxuICAgIH0pfVxuYFxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXI+XG4gICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgPC9Db250YWluZXI+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJxQiJ9 */' -) -const SpanContainer = styled('span', { - target: 'ep3ww291', - label: 'SpanContainer', -})( - { - background: 'yellow', - }, - '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBQdXJlQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuXG5jb25zdCBzdHlsZXNJbkNhbGxiYWNrID0gKHByb3BzOiBhbnkpID0+XG4gIGNzcyh7XG4gICAgY29sb3I6ICdyZWQnLFxuICAgIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxuICAgIHdpZHRoOiBgJHtwcm9wcy5zY2FsZSAqIDEwMH1weGAsXG4gIH0pXG5cbmNvbnN0IHN0eWxlcyA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IERpY0NvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgJHtzdHlsZXNJbkNhbGxiYWNrfVxuICAkeygpID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmQ6ICdyZWQnLFxuICAgIH0pfVxuYFxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXI+XG4gICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgPC9Db250YWluZXI+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJzQiJ9 */' -) -const Container = styled('button')` - ${stylesInCallback} - ${() => - css( - { - background: 'red', - }, - 'label:Container', - '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBQdXJlQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuXG5jb25zdCBzdHlsZXNJbkNhbGxiYWNrID0gKHByb3BzOiBhbnkpID0+XG4gIGNzcyh7XG4gICAgY29sb3I6ICdyZWQnLFxuICAgIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxuICAgIHdpZHRoOiBgJHtwcm9wcy5zY2FsZSAqIDEwMH1weGAsXG4gIH0pXG5cbmNvbnN0IHN0eWxlcyA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IERpY0NvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgJHtzdHlsZXNJbkNhbGxiYWNrfVxuICAkeygpID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmQ6ICdyZWQnLFxuICAgIH0pfVxuYFxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXI+XG4gICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgPC9Db250YWluZXI+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJJIn0= */' - )} -` +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { css, Global } from "@emotion/react"; +import styled from "@emotion/styled"; +import { PureComponent } from "react"; +import ReactDOM from "react-dom"; +const stylesInCallback = (props: any)=>css({ + color: "red", + background: "yellow", + width: `${props.scale * 100}px` + }, "label:stylesInCallback", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNRSJ9 */") +; +const styles = css({ + color: "red", + width: "20px" +}, "label:styles", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZZSJ9 */"); +const styles2 = css("color:red;width:20px;", "styles2", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmdCIn0= */"); +const DivContainer = styled("div", { + target: "ep3ww290", + label: "DivContainer", + map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQnFCIn0= */" +})({ + background: "red" +}); +const DivContainer2 = styled("div", { + target: "ep3ww291", + label: "DivContainer2" +})("background:red;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQnNCIn0= */"); +const SpanContainer = styled("span", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QnNCIn0= */", { + target: "ep3ww292", + label: "SpanContainer" +})({ + background: "yellow" +}); +const Container = styled("button", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIlJlYWN0LmNyZWF0ZUVsZW1lbnQiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ== */", { + target: "ep3ww293", + label: "Container" +})("background:red;", stylesInCallback, ()=>css({ + background: "red" + }, "label:Container", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ0kifQ== */") +, "color:yellow;font-size:12px;"); +const Container2 = styled("div", { + target: "ep3ww294", + label: "Container2" +})("background:red;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Q21CIn0= */"); export class SimpleComponent extends PureComponent { - render() { - return _jsx(Container, { - children: _jsx('span', { - children: 'hello', - }), - }) - } + render() { + return _jsxs(Container, { + css: css("color:hotpink;", "Container2", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRGEifQ== */"), + children: [ + _jsx(Global, { + styles: css("html,\n body {\n padding:3rem 1rem;margin:0;background:papayawhip;min-height:100%;font-family:Helvetica, Arial, sans-serif;font-size:24px;}", "Container2", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL2Nzcy1pbi1jYWxsYmFjay9pbnB1dC50c3giLCJzb3VyY2VzIjpbIi9Vc2Vycy9sb25neWluYW4vd29ya3NwYWNlL2dpdGh1Yi9uZXh0LmpzL3BhY2thZ2VzL25leHQtc3djL2NyYXRlcy9jb3JlL3Rlc3RzL2ZpeHR1cmUvZW1vdGlvbi9jc3MtaW4tY2FsbGJhY2svaW5wdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRGtCIn0= */") + }), + _jsx("span", { + children: "hello" + }) + ] + }); + } } -ReactDOM.render(_jsx(SimpleComponent, {}), document.querySelector('#app')) +ReactDOM.render(_jsx(SimpleComponent, {}), document.querySelector("#app")); \ No newline at end of file diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/namespace-import/input.tsx b/packages/next-swc/crates/core/tests/fixture/emotion/namespace-import/input.tsx new file mode 100644 index 000000000000..843b2d1d1c6d --- /dev/null +++ b/packages/next-swc/crates/core/tests/fixture/emotion/namespace-import/input.tsx @@ -0,0 +1,32 @@ +import * as emotionReact from '@emotion/react' +import { PureComponent } from 'react' +import ReactDOM from 'react-dom' + +const stylesInCallback = (props: any) => + emotionReact.css({ + color: 'red', + background: 'yellow', + width: `${props.scale * 100}px`, + }) + +const styles = emotionReact.css({ + color: 'red', + width: '20px', +}) + +const styles2 = emotionReact.css` + color: red; + width: 20px; +` + +export class SimpleComponent extends PureComponent { + render() { + return ( +
+ hello +
+ ) + } +} + +ReactDOM.render(, document.querySelector('#app')) diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/namespace-import/output.ts b/packages/next-swc/crates/core/tests/fixture/emotion/namespace-import/output.ts new file mode 100644 index 000000000000..f01e4f3a85b9 --- /dev/null +++ b/packages/next-swc/crates/core/tests/fixture/emotion/namespace-import/output.ts @@ -0,0 +1,26 @@ +import { jsx as _jsx } from "react/jsx-runtime"; +import * as emotionReact from "@emotion/react"; +import { PureComponent } from "react"; +import ReactDOM from "react-dom"; +const stylesInCallback = (props: any)=>emotionReact.css({ + color: "red", + background: "yellow", + width: `${props.scale * 100}px` + }, "label:stylesInCallback", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL25hbWVzcGFjZS1pbXBvcnQvaW5wdXQudHN4Iiwic291cmNlcyI6WyIvVXNlcnMvbG9uZ3lpbmFuL3dvcmtzcGFjZS9naXRodWIvbmV4dC5qcy9wYWNrYWdlcy9uZXh0LXN3Yy9jcmF0ZXMvY29yZS90ZXN0cy9maXh0dXJlL2Vtb3Rpb24vbmFtZXNwYWNlLWltcG9ydC9pbnB1dC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgZW1vdGlvblJlYWN0IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgUHVyZUNvbXBvbmVudCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcblxuY29uc3Qgc3R5bGVzSW5DYWxsYmFjayA9IChwcm9wczogYW55KSA9PlxuICBlbW90aW9uUmVhY3QuY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gZW1vdGlvblJlYWN0LmNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IHN0eWxlczIgPSBlbW90aW9uUmVhY3QuY3NzYFxuICBjb2xvcjogcmVkO1xuICB3aWR0aDogMjBweDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtzdHlsZXN9PlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtFIn0= */") +; +const styles = emotionReact.css({ + color: "red", + width: "20px" +}, "label:styles", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL25hbWVzcGFjZS1pbXBvcnQvaW5wdXQudHN4Iiwic291cmNlcyI6WyIvVXNlcnMvbG9uZ3lpbmFuL3dvcmtzcGFjZS9naXRodWIvbmV4dC5qcy9wYWNrYWdlcy9uZXh0LXN3Yy9jcmF0ZXMvY29yZS90ZXN0cy9maXh0dXJlL2Vtb3Rpb24vbmFtZXNwYWNlLWltcG9ydC9pbnB1dC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgZW1vdGlvblJlYWN0IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgUHVyZUNvbXBvbmVudCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcblxuY29uc3Qgc3R5bGVzSW5DYWxsYmFjayA9IChwcm9wczogYW55KSA9PlxuICBlbW90aW9uUmVhY3QuY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gZW1vdGlvblJlYWN0LmNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IHN0eWxlczIgPSBlbW90aW9uUmVhY3QuY3NzYFxuICBjb2xvcjogcmVkO1xuICB3aWR0aDogMjBweDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtzdHlsZXN9PlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdlIn0= */"); +const styles2 = emotionReact.css("color:red;width:20px;", "label:styles2", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL25hbWVzcGFjZS1pbXBvcnQvaW5wdXQudHN4Iiwic291cmNlcyI6WyIvVXNlcnMvbG9uZ3lpbmFuL3dvcmtzcGFjZS9naXRodWIvbmV4dC5qcy9wYWNrYWdlcy9uZXh0LXN3Yy9jcmF0ZXMvY29yZS90ZXN0cy9maXh0dXJlL2Vtb3Rpb24vbmFtZXNwYWNlLWltcG9ydC9pbnB1dC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgZW1vdGlvblJlYWN0IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgUHVyZUNvbXBvbmVudCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcblxuY29uc3Qgc3R5bGVzSW5DYWxsYmFjayA9IChwcm9wczogYW55KSA9PlxuICBlbW90aW9uUmVhY3QuY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gZW1vdGlvblJlYWN0LmNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IHN0eWxlczIgPSBlbW90aW9uUmVhY3QuY3NzYFxuICBjb2xvcjogcmVkO1xuICB3aWR0aDogMjBweDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtzdHlsZXN9PlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCZ0IifQ== */"); +export class SimpleComponent extends PureComponent { + render() { + return _jsx("div", { + className: styles, + children: _jsx("span", { + children: "hello" + }) + }); + } +} +ReactDOM.render(_jsx(SimpleComponent, {}), document.querySelector("#app")); \ No newline at end of file