From bbdcdc876f1d9b698a8f58078695823c90bd5b02 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Thu, 15 Aug 2024 08:53:56 +0200 Subject: [PATCH 01/72] add styled dom runtime helpers --- packages/next-yak/runtime/internal.ts | 3 + packages/next-yak/runtime/styled.tsx | 11 +- packages/next-yak/runtime/styledDom.tsx | 139 ++++++++++++++++++++++++ 3 files changed, 148 insertions(+), 5 deletions(-) create mode 100644 packages/next-yak/runtime/styledDom.tsx diff --git a/packages/next-yak/runtime/internal.ts b/packages/next-yak/runtime/internal.ts index 34ecdfcd..4f926667 100644 --- a/packages/next-yak/runtime/internal.ts +++ b/packages/next-yak/runtime/internal.ts @@ -35,3 +35,6 @@ export { useTheme, YakThemeProvider } from "next-yak/context"; // runtime internals (helpers which get injected by the compiler) export { unitPostFix as __yak_unitPostFix } from "./internals/unitPostFix.js"; export { mergeCssProp as __yak_mergeCssProp } from "./internals/mergeCssProp.js"; + +// export shorthand for DOM styled components (e.g. for styled.div) +export * from "./styledDom.js"; \ No newline at end of file diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx index 1a24059c..6ad61e67 100644 --- a/packages/next-yak/runtime/styled.tsx +++ b/packages/next-yak/runtime/styled.tsx @@ -52,14 +52,13 @@ type Attrs< | ((p: Substitute) => Partial); // -// The `styled()` and `styled.` API +// The `styled()` API without `styled.` syntax // // The API design is inspired by styled-components: // https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx // https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts // - -const StyledFactory = (Component: HtmlTags | FunctionComponent) => +export const StyledFactory = (Component: HtmlTags | FunctionComponent) => Object.assign(yakStyled(Component), { attrs: < TAttrsIn extends object = {}, @@ -192,7 +191,9 @@ type StyledLiteral = ( * `; * ``` */ -export const styled = new Proxy( +export const styled = +// The proxy adds the styled.div, styled.button, etc. syntax +new Proxy( StyledFactory as typeof StyledFactory & { [Tag in HtmlTags]: StyledLiteral & { attrs: < @@ -284,4 +285,4 @@ export type Substitute = FastOmit< A, keyof B > & - B; + B; \ No newline at end of file diff --git a/packages/next-yak/runtime/styledDom.tsx b/packages/next-yak/runtime/styledDom.tsx new file mode 100644 index 00000000..5a9da3b7 --- /dev/null +++ b/packages/next-yak/runtime/styledDom.tsx @@ -0,0 +1,139 @@ +import { StyledFactory } from "./styled.js"; +/// Internal API to create styled components +/// Optimization for faster rendering and smaller bundle size in production +/// thanks to better minification and dead code elimination +/// +/// List taken from https://github.com/styled-components/styled-components/blob/e0019ba666fab4b5aaa2bff71ba6ad0005a299fd/packages/styled-components/src/utils/domElements.ts#L90 +export const __yak_a = /*#__PURE__*/StyledFactory("a"); +export const __yak_abbr = /*#__PURE__*/StyledFactory("abbr"); +export const __yak_address = /*#__PURE__*/StyledFactory("address"); +export const __yak_area = /*#__PURE__*/StyledFactory("area"); +export const __yak_article = /*#__PURE__*/StyledFactory("article"); +export const __yak_aside = /*#__PURE__*/StyledFactory("aside"); +export const __yak_audio = /*#__PURE__*/StyledFactory("audio"); +export const __yak_b = /*#__PURE__*/StyledFactory("b"); +export const __yak_base = /*#__PURE__*/StyledFactory("base"); +export const __yak_bdi = /*#__PURE__*/StyledFactory("bdi"); +export const __yak_bdo = /*#__PURE__*/StyledFactory("bdo"); +export const __yak_big = /*#__PURE__*/StyledFactory("big"); +export const __yak_blockquote = /*#__PURE__*/StyledFactory("blockquote"); +export const __yak_body = /*#__PURE__*/StyledFactory("body"); +export const __yak_br = /*#__PURE__*/StyledFactory("br"); +export const __yak_button = /*#__PURE__*/StyledFactory("button"); +export const __yak_canvas = /*#__PURE__*/StyledFactory("canvas"); +export const __yak_caption = /*#__PURE__*/StyledFactory("caption"); +export const __yak_cite = /*#__PURE__*/StyledFactory("cite"); +export const __yak_code = /*#__PURE__*/StyledFactory("code"); +export const __yak_col = /*#__PURE__*/StyledFactory("col"); +export const __yak_colgroup = /*#__PURE__*/StyledFactory("colgroup"); +export const __yak_data = /*#__PURE__*/StyledFactory("data"); +export const __yak_datalist = /*#__PURE__*/StyledFactory("datalist"); +export const __yak_dd = /*#__PURE__*/StyledFactory("dd"); +export const __yak_del = /*#__PURE__*/StyledFactory("del"); +export const __yak_details = /*#__PURE__*/StyledFactory("details"); +export const __yak_dfn = /*#__PURE__*/StyledFactory("dfn"); +export const __yak_dialog = /*#__PURE__*/StyledFactory("dialog"); +export const __yak_div = /*#__PURE__*/StyledFactory("div"); +export const __yak_dl = /*#__PURE__*/StyledFactory("dl"); +export const __yak_dt = /*#__PURE__*/StyledFactory("dt"); +export const __yak_em = /*#__PURE__*/StyledFactory("em"); +export const __yak_embed = /*#__PURE__*/StyledFactory("embed"); +export const __yak_fieldset = /*#__PURE__*/StyledFactory("fieldset"); +export const __yak_figcaption = /*#__PURE__*/StyledFactory("figcaption"); +export const __yak_figure = /*#__PURE__*/StyledFactory("figure"); +export const __yak_footer = /*#__PURE__*/StyledFactory("footer"); +export const __yak_form = /*#__PURE__*/StyledFactory("form"); +export const __yak_h1 = /*#__PURE__*/StyledFactory("h1"); +export const __yak_h2 = /*#__PURE__*/StyledFactory("h2"); +export const __yak_h3 = /*#__PURE__*/StyledFactory("h3"); +export const __yak_h4 = /*#__PURE__*/StyledFactory("h4"); +export const __yak_h5 = /*#__PURE__*/StyledFactory("h5"); +export const __yak_h6 = /*#__PURE__*/StyledFactory("h6"); +export const __yak_header = /*#__PURE__*/StyledFactory("header"); +export const __yak_hgroup = /*#__PURE__*/StyledFactory("hgroup"); +export const __yak_hr = /*#__PURE__*/StyledFactory("hr"); +export const __yak_html = /*#__PURE__*/StyledFactory("html"); +export const __yak_i = /*#__PURE__*/StyledFactory("i"); +export const __yak_iframe = /*#__PURE__*/StyledFactory("iframe"); +export const __yak_img = /*#__PURE__*/StyledFactory("img"); +export const __yak_input = /*#__PURE__*/StyledFactory("input"); +export const __yak_ins = /*#__PURE__*/StyledFactory("ins"); +export const __yak_kbd = /*#__PURE__*/StyledFactory("kbd"); +export const __yak_keygen = /*#__PURE__*/StyledFactory("keygen"); +export const __yak_label = /*#__PURE__*/StyledFactory("label"); +export const __yak_legend = /*#__PURE__*/StyledFactory("legend"); +export const __yak_li = /*#__PURE__*/StyledFactory("li"); +export const __yak_link = /*#__PURE__*/StyledFactory("link"); +export const __yak_main = /*#__PURE__*/StyledFactory("main"); +export const __yak_map = /*#__PURE__*/StyledFactory("map"); +export const __yak_mark = /*#__PURE__*/StyledFactory("mark"); +export const __yak_menu = /*#__PURE__*/StyledFactory("menu"); +export const __yak_menuitem = /*#__PURE__*/StyledFactory("menuitem"); +export const __yak_meta = /*#__PURE__*/StyledFactory("meta"); +export const __yak_meter = /*#__PURE__*/StyledFactory("meter"); +export const __yak_nav = /*#__PURE__*/StyledFactory("nav"); +export const __yak_noscript = /*#__PURE__*/StyledFactory("noscript"); +export const __yak_object = /*#__PURE__*/StyledFactory("object"); +export const __yak_ol = /*#__PURE__*/StyledFactory("ol"); +export const __yak_optgroup = /*#__PURE__*/StyledFactory("optgroup"); +export const __yak_option = /*#__PURE__*/StyledFactory("option"); +export const __yak_output = /*#__PURE__*/StyledFactory("output"); +export const __yak_p = /*#__PURE__*/StyledFactory("p"); +export const __yak_param = /*#__PURE__*/StyledFactory("param"); +export const __yak_picture = /*#__PURE__*/StyledFactory("picture"); +export const __yak_pre = /*#__PURE__*/StyledFactory("pre"); +export const __yak_progress = /*#__PURE__*/StyledFactory("progress"); +export const __yak_q = /*#__PURE__*/StyledFactory("q"); +export const __yak_rp = /*#__PURE__*/StyledFactory("rp"); +export const __yak_rt = /*#__PURE__*/StyledFactory("rt"); +export const __yak_ruby = /*#__PURE__*/StyledFactory("ruby"); +export const __yak_s = /*#__PURE__*/StyledFactory("s"); +export const __yak_samp = /*#__PURE__*/StyledFactory("samp"); +export const __yak_script = /*#__PURE__*/StyledFactory("script"); +export const __yak_section = /*#__PURE__*/StyledFactory("section"); +export const __yak_select = /*#__PURE__*/StyledFactory("select"); +export const __yak_small = /*#__PURE__*/StyledFactory("small"); +export const __yak_source = /*#__PURE__*/StyledFactory("source"); +export const __yak_span = /*#__PURE__*/StyledFactory("span"); +export const __yak_strong = /*#__PURE__*/StyledFactory("strong"); +export const __yak_style = /*#__PURE__*/StyledFactory("style"); +export const __yak_sub = /*#__PURE__*/StyledFactory("sub"); +export const __yak_summary = /*#__PURE__*/StyledFactory("summary"); +export const __yak_sup = /*#__PURE__*/StyledFactory("sup"); +export const __yak_table = /*#__PURE__*/StyledFactory("table"); +export const __yak_tbody = /*#__PURE__*/StyledFactory("tbody"); +export const __yak_td = /*#__PURE__*/StyledFactory("td"); +export const __yak_textarea = /*#__PURE__*/StyledFactory("textarea"); +export const __yak_tfoot = /*#__PURE__*/StyledFactory("tfoot"); +export const __yak_th = /*#__PURE__*/StyledFactory("th"); +export const __yak_thead = /*#__PURE__*/StyledFactory("thead"); +export const __yak_time = /*#__PURE__*/StyledFactory("time"); +export const __yak_tr = /*#__PURE__*/StyledFactory("tr"); +export const __yak_track = /*#__PURE__*/StyledFactory("track"); +export const __yak_u = /*#__PURE__*/StyledFactory("u"); +export const __yak_ul = /*#__PURE__*/StyledFactory("ul"); +export const __yak_use = /*#__PURE__*/StyledFactory("use"); +export const __yak_var = /*#__PURE__*/StyledFactory("var"); +export const __yak_video = /*#__PURE__*/StyledFactory("video"); +export const __yak_wbr = /*#__PURE__*/StyledFactory("wbr"); +export const __yak_circle = /*#__PURE__*/StyledFactory("circle"); +export const __yak_clipPath = /*#__PURE__*/StyledFactory("clipPath"); +export const __yak_defs = /*#__PURE__*/StyledFactory("defs"); +export const __yak_ellipse = /*#__PURE__*/StyledFactory("ellipse"); +export const __yak_foreignObject = /*#__PURE__*/StyledFactory("foreignObject"); +export const __yak_g = /*#__PURE__*/StyledFactory("g"); +export const __yak_image = /*#__PURE__*/StyledFactory("image"); +export const __yak_line = /*#__PURE__*/StyledFactory("line"); +export const __yak_linearGradient = /*#__PURE__*/StyledFactory("linearGradient"); +export const __yak_marker = /*#__PURE__*/StyledFactory("marker"); +export const __yak_mask = /*#__PURE__*/StyledFactory("mask"); +export const __yak_path = /*#__PURE__*/StyledFactory("path"); +export const __yak_pattern = /*#__PURE__*/StyledFactory("pattern"); +export const __yak_polygon = /*#__PURE__*/StyledFactory("polygon"); +export const __yak_polyline = /*#__PURE__*/StyledFactory("polyline"); +export const __yak_radialGradient = /*#__PURE__*/StyledFactory("radialGradient"); +export const __yak_rect = /*#__PURE__*/StyledFactory("rect"); +export const __yak_stop = /*#__PURE__*/StyledFactory("stop"); +export const __yak_svg = /*#__PURE__*/StyledFactory("svg"); +export const __yak_text = /*#__PURE__*/StyledFactory("text"); +export const __yak_tspan = /*#__PURE__*/StyledFactory("tspan"); \ No newline at end of file From 60058ebcc2bbf22dcf38845b4e92fe936571c828 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 15 Aug 2024 07:06:03 +0000 Subject: [PATCH 02/72] [autofix.ci] apply automated fixes --- packages/next-yak/runtime/internal.ts | 2 +- packages/next-yak/runtime/styled.tsx | 42 ++-- packages/next-yak/runtime/styledDom.tsx | 268 ++++++++++++------------ 3 files changed, 157 insertions(+), 155 deletions(-) diff --git a/packages/next-yak/runtime/internal.ts b/packages/next-yak/runtime/internal.ts index 4f926667..0b9c46aa 100644 --- a/packages/next-yak/runtime/internal.ts +++ b/packages/next-yak/runtime/internal.ts @@ -37,4 +37,4 @@ export { unitPostFix as __yak_unitPostFix } from "./internals/unitPostFix.js"; export { mergeCssProp as __yak_mergeCssProp } from "./internals/mergeCssProp.js"; // export shorthand for DOM styled components (e.g. for styled.div) -export * from "./styledDom.js"; \ No newline at end of file +export * from "./styledDom.js"; diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx index 6ad61e67..45d37a29 100644 --- a/packages/next-yak/runtime/styled.tsx +++ b/packages/next-yak/runtime/styled.tsx @@ -192,27 +192,27 @@ type StyledLiteral = ( * ``` */ export const styled = -// The proxy adds the styled.div, styled.button, etc. syntax -new Proxy( - StyledFactory as typeof StyledFactory & { - [Tag in HtmlTags]: StyledLiteral & { - attrs: < - TAttrsIn extends object = {}, - TAttrsOut extends AttrsMerged< - JSX.IntrinsicElements[Tag], - TAttrsIn - > = AttrsMerged, - >( - attrs: Attrs, - ) => StyledLiteral>; - }; - }, - { - get(target, TagName: keyof JSX.IntrinsicElements) { - return target(TagName); + // The proxy adds the styled.div, styled.button, etc. syntax + new Proxy( + StyledFactory as typeof StyledFactory & { + [Tag in HtmlTags]: StyledLiteral & { + attrs: < + TAttrsIn extends object = {}, + TAttrsOut extends AttrsMerged< + JSX.IntrinsicElements[Tag], + TAttrsIn + > = AttrsMerged, + >( + attrs: Attrs, + ) => StyledLiteral>; + }; }, - }, -); + { + get(target, TagName: keyof JSX.IntrinsicElements) { + return target(TagName); + }, + }, + ); // Remove all entries that start with a $ sign function removePrefixedProperties>(obj: T) { @@ -285,4 +285,4 @@ export type Substitute = FastOmit< A, keyof B > & - B; \ No newline at end of file + B; diff --git a/packages/next-yak/runtime/styledDom.tsx b/packages/next-yak/runtime/styledDom.tsx index 5a9da3b7..95765b99 100644 --- a/packages/next-yak/runtime/styledDom.tsx +++ b/packages/next-yak/runtime/styledDom.tsx @@ -4,136 +4,138 @@ import { StyledFactory } from "./styled.js"; /// thanks to better minification and dead code elimination /// /// List taken from https://github.com/styled-components/styled-components/blob/e0019ba666fab4b5aaa2bff71ba6ad0005a299fd/packages/styled-components/src/utils/domElements.ts#L90 -export const __yak_a = /*#__PURE__*/StyledFactory("a"); -export const __yak_abbr = /*#__PURE__*/StyledFactory("abbr"); -export const __yak_address = /*#__PURE__*/StyledFactory("address"); -export const __yak_area = /*#__PURE__*/StyledFactory("area"); -export const __yak_article = /*#__PURE__*/StyledFactory("article"); -export const __yak_aside = /*#__PURE__*/StyledFactory("aside"); -export const __yak_audio = /*#__PURE__*/StyledFactory("audio"); -export const __yak_b = /*#__PURE__*/StyledFactory("b"); -export const __yak_base = /*#__PURE__*/StyledFactory("base"); -export const __yak_bdi = /*#__PURE__*/StyledFactory("bdi"); -export const __yak_bdo = /*#__PURE__*/StyledFactory("bdo"); -export const __yak_big = /*#__PURE__*/StyledFactory("big"); -export const __yak_blockquote = /*#__PURE__*/StyledFactory("blockquote"); -export const __yak_body = /*#__PURE__*/StyledFactory("body"); -export const __yak_br = /*#__PURE__*/StyledFactory("br"); -export const __yak_button = /*#__PURE__*/StyledFactory("button"); -export const __yak_canvas = /*#__PURE__*/StyledFactory("canvas"); -export const __yak_caption = /*#__PURE__*/StyledFactory("caption"); -export const __yak_cite = /*#__PURE__*/StyledFactory("cite"); -export const __yak_code = /*#__PURE__*/StyledFactory("code"); -export const __yak_col = /*#__PURE__*/StyledFactory("col"); -export const __yak_colgroup = /*#__PURE__*/StyledFactory("colgroup"); -export const __yak_data = /*#__PURE__*/StyledFactory("data"); -export const __yak_datalist = /*#__PURE__*/StyledFactory("datalist"); -export const __yak_dd = /*#__PURE__*/StyledFactory("dd"); -export const __yak_del = /*#__PURE__*/StyledFactory("del"); -export const __yak_details = /*#__PURE__*/StyledFactory("details"); -export const __yak_dfn = /*#__PURE__*/StyledFactory("dfn"); -export const __yak_dialog = /*#__PURE__*/StyledFactory("dialog"); -export const __yak_div = /*#__PURE__*/StyledFactory("div"); -export const __yak_dl = /*#__PURE__*/StyledFactory("dl"); -export const __yak_dt = /*#__PURE__*/StyledFactory("dt"); -export const __yak_em = /*#__PURE__*/StyledFactory("em"); -export const __yak_embed = /*#__PURE__*/StyledFactory("embed"); -export const __yak_fieldset = /*#__PURE__*/StyledFactory("fieldset"); -export const __yak_figcaption = /*#__PURE__*/StyledFactory("figcaption"); -export const __yak_figure = /*#__PURE__*/StyledFactory("figure"); -export const __yak_footer = /*#__PURE__*/StyledFactory("footer"); -export const __yak_form = /*#__PURE__*/StyledFactory("form"); -export const __yak_h1 = /*#__PURE__*/StyledFactory("h1"); -export const __yak_h2 = /*#__PURE__*/StyledFactory("h2"); -export const __yak_h3 = /*#__PURE__*/StyledFactory("h3"); -export const __yak_h4 = /*#__PURE__*/StyledFactory("h4"); -export const __yak_h5 = /*#__PURE__*/StyledFactory("h5"); -export const __yak_h6 = /*#__PURE__*/StyledFactory("h6"); -export const __yak_header = /*#__PURE__*/StyledFactory("header"); -export const __yak_hgroup = /*#__PURE__*/StyledFactory("hgroup"); -export const __yak_hr = /*#__PURE__*/StyledFactory("hr"); -export const __yak_html = /*#__PURE__*/StyledFactory("html"); -export const __yak_i = /*#__PURE__*/StyledFactory("i"); -export const __yak_iframe = /*#__PURE__*/StyledFactory("iframe"); -export const __yak_img = /*#__PURE__*/StyledFactory("img"); -export const __yak_input = /*#__PURE__*/StyledFactory("input"); -export const __yak_ins = /*#__PURE__*/StyledFactory("ins"); -export const __yak_kbd = /*#__PURE__*/StyledFactory("kbd"); -export const __yak_keygen = /*#__PURE__*/StyledFactory("keygen"); -export const __yak_label = /*#__PURE__*/StyledFactory("label"); -export const __yak_legend = /*#__PURE__*/StyledFactory("legend"); -export const __yak_li = /*#__PURE__*/StyledFactory("li"); -export const __yak_link = /*#__PURE__*/StyledFactory("link"); -export const __yak_main = /*#__PURE__*/StyledFactory("main"); -export const __yak_map = /*#__PURE__*/StyledFactory("map"); -export const __yak_mark = /*#__PURE__*/StyledFactory("mark"); -export const __yak_menu = /*#__PURE__*/StyledFactory("menu"); -export const __yak_menuitem = /*#__PURE__*/StyledFactory("menuitem"); -export const __yak_meta = /*#__PURE__*/StyledFactory("meta"); -export const __yak_meter = /*#__PURE__*/StyledFactory("meter"); -export const __yak_nav = /*#__PURE__*/StyledFactory("nav"); -export const __yak_noscript = /*#__PURE__*/StyledFactory("noscript"); -export const __yak_object = /*#__PURE__*/StyledFactory("object"); -export const __yak_ol = /*#__PURE__*/StyledFactory("ol"); -export const __yak_optgroup = /*#__PURE__*/StyledFactory("optgroup"); -export const __yak_option = /*#__PURE__*/StyledFactory("option"); -export const __yak_output = /*#__PURE__*/StyledFactory("output"); -export const __yak_p = /*#__PURE__*/StyledFactory("p"); -export const __yak_param = /*#__PURE__*/StyledFactory("param"); -export const __yak_picture = /*#__PURE__*/StyledFactory("picture"); -export const __yak_pre = /*#__PURE__*/StyledFactory("pre"); -export const __yak_progress = /*#__PURE__*/StyledFactory("progress"); -export const __yak_q = /*#__PURE__*/StyledFactory("q"); -export const __yak_rp = /*#__PURE__*/StyledFactory("rp"); -export const __yak_rt = /*#__PURE__*/StyledFactory("rt"); -export const __yak_ruby = /*#__PURE__*/StyledFactory("ruby"); -export const __yak_s = /*#__PURE__*/StyledFactory("s"); -export const __yak_samp = /*#__PURE__*/StyledFactory("samp"); -export const __yak_script = /*#__PURE__*/StyledFactory("script"); -export const __yak_section = /*#__PURE__*/StyledFactory("section"); -export const __yak_select = /*#__PURE__*/StyledFactory("select"); -export const __yak_small = /*#__PURE__*/StyledFactory("small"); -export const __yak_source = /*#__PURE__*/StyledFactory("source"); -export const __yak_span = /*#__PURE__*/StyledFactory("span"); -export const __yak_strong = /*#__PURE__*/StyledFactory("strong"); -export const __yak_style = /*#__PURE__*/StyledFactory("style"); -export const __yak_sub = /*#__PURE__*/StyledFactory("sub"); -export const __yak_summary = /*#__PURE__*/StyledFactory("summary"); -export const __yak_sup = /*#__PURE__*/StyledFactory("sup"); -export const __yak_table = /*#__PURE__*/StyledFactory("table"); -export const __yak_tbody = /*#__PURE__*/StyledFactory("tbody"); -export const __yak_td = /*#__PURE__*/StyledFactory("td"); -export const __yak_textarea = /*#__PURE__*/StyledFactory("textarea"); -export const __yak_tfoot = /*#__PURE__*/StyledFactory("tfoot"); -export const __yak_th = /*#__PURE__*/StyledFactory("th"); -export const __yak_thead = /*#__PURE__*/StyledFactory("thead"); -export const __yak_time = /*#__PURE__*/StyledFactory("time"); -export const __yak_tr = /*#__PURE__*/StyledFactory("tr"); -export const __yak_track = /*#__PURE__*/StyledFactory("track"); -export const __yak_u = /*#__PURE__*/StyledFactory("u"); -export const __yak_ul = /*#__PURE__*/StyledFactory("ul"); -export const __yak_use = /*#__PURE__*/StyledFactory("use"); -export const __yak_var = /*#__PURE__*/StyledFactory("var"); -export const __yak_video = /*#__PURE__*/StyledFactory("video"); -export const __yak_wbr = /*#__PURE__*/StyledFactory("wbr"); -export const __yak_circle = /*#__PURE__*/StyledFactory("circle"); -export const __yak_clipPath = /*#__PURE__*/StyledFactory("clipPath"); -export const __yak_defs = /*#__PURE__*/StyledFactory("defs"); -export const __yak_ellipse = /*#__PURE__*/StyledFactory("ellipse"); -export const __yak_foreignObject = /*#__PURE__*/StyledFactory("foreignObject"); -export const __yak_g = /*#__PURE__*/StyledFactory("g"); -export const __yak_image = /*#__PURE__*/StyledFactory("image"); -export const __yak_line = /*#__PURE__*/StyledFactory("line"); -export const __yak_linearGradient = /*#__PURE__*/StyledFactory("linearGradient"); -export const __yak_marker = /*#__PURE__*/StyledFactory("marker"); -export const __yak_mask = /*#__PURE__*/StyledFactory("mask"); -export const __yak_path = /*#__PURE__*/StyledFactory("path"); -export const __yak_pattern = /*#__PURE__*/StyledFactory("pattern"); -export const __yak_polygon = /*#__PURE__*/StyledFactory("polygon"); -export const __yak_polyline = /*#__PURE__*/StyledFactory("polyline"); -export const __yak_radialGradient = /*#__PURE__*/StyledFactory("radialGradient"); -export const __yak_rect = /*#__PURE__*/StyledFactory("rect"); -export const __yak_stop = /*#__PURE__*/StyledFactory("stop"); -export const __yak_svg = /*#__PURE__*/StyledFactory("svg"); -export const __yak_text = /*#__PURE__*/StyledFactory("text"); -export const __yak_tspan = /*#__PURE__*/StyledFactory("tspan"); \ No newline at end of file +export const __yak_a = /*#__PURE__*/ StyledFactory("a"); +export const __yak_abbr = /*#__PURE__*/ StyledFactory("abbr"); +export const __yak_address = /*#__PURE__*/ StyledFactory("address"); +export const __yak_area = /*#__PURE__*/ StyledFactory("area"); +export const __yak_article = /*#__PURE__*/ StyledFactory("article"); +export const __yak_aside = /*#__PURE__*/ StyledFactory("aside"); +export const __yak_audio = /*#__PURE__*/ StyledFactory("audio"); +export const __yak_b = /*#__PURE__*/ StyledFactory("b"); +export const __yak_base = /*#__PURE__*/ StyledFactory("base"); +export const __yak_bdi = /*#__PURE__*/ StyledFactory("bdi"); +export const __yak_bdo = /*#__PURE__*/ StyledFactory("bdo"); +export const __yak_big = /*#__PURE__*/ StyledFactory("big"); +export const __yak_blockquote = /*#__PURE__*/ StyledFactory("blockquote"); +export const __yak_body = /*#__PURE__*/ StyledFactory("body"); +export const __yak_br = /*#__PURE__*/ StyledFactory("br"); +export const __yak_button = /*#__PURE__*/ StyledFactory("button"); +export const __yak_canvas = /*#__PURE__*/ StyledFactory("canvas"); +export const __yak_caption = /*#__PURE__*/ StyledFactory("caption"); +export const __yak_cite = /*#__PURE__*/ StyledFactory("cite"); +export const __yak_code = /*#__PURE__*/ StyledFactory("code"); +export const __yak_col = /*#__PURE__*/ StyledFactory("col"); +export const __yak_colgroup = /*#__PURE__*/ StyledFactory("colgroup"); +export const __yak_data = /*#__PURE__*/ StyledFactory("data"); +export const __yak_datalist = /*#__PURE__*/ StyledFactory("datalist"); +export const __yak_dd = /*#__PURE__*/ StyledFactory("dd"); +export const __yak_del = /*#__PURE__*/ StyledFactory("del"); +export const __yak_details = /*#__PURE__*/ StyledFactory("details"); +export const __yak_dfn = /*#__PURE__*/ StyledFactory("dfn"); +export const __yak_dialog = /*#__PURE__*/ StyledFactory("dialog"); +export const __yak_div = /*#__PURE__*/ StyledFactory("div"); +export const __yak_dl = /*#__PURE__*/ StyledFactory("dl"); +export const __yak_dt = /*#__PURE__*/ StyledFactory("dt"); +export const __yak_em = /*#__PURE__*/ StyledFactory("em"); +export const __yak_embed = /*#__PURE__*/ StyledFactory("embed"); +export const __yak_fieldset = /*#__PURE__*/ StyledFactory("fieldset"); +export const __yak_figcaption = /*#__PURE__*/ StyledFactory("figcaption"); +export const __yak_figure = /*#__PURE__*/ StyledFactory("figure"); +export const __yak_footer = /*#__PURE__*/ StyledFactory("footer"); +export const __yak_form = /*#__PURE__*/ StyledFactory("form"); +export const __yak_h1 = /*#__PURE__*/ StyledFactory("h1"); +export const __yak_h2 = /*#__PURE__*/ StyledFactory("h2"); +export const __yak_h3 = /*#__PURE__*/ StyledFactory("h3"); +export const __yak_h4 = /*#__PURE__*/ StyledFactory("h4"); +export const __yak_h5 = /*#__PURE__*/ StyledFactory("h5"); +export const __yak_h6 = /*#__PURE__*/ StyledFactory("h6"); +export const __yak_header = /*#__PURE__*/ StyledFactory("header"); +export const __yak_hgroup = /*#__PURE__*/ StyledFactory("hgroup"); +export const __yak_hr = /*#__PURE__*/ StyledFactory("hr"); +export const __yak_html = /*#__PURE__*/ StyledFactory("html"); +export const __yak_i = /*#__PURE__*/ StyledFactory("i"); +export const __yak_iframe = /*#__PURE__*/ StyledFactory("iframe"); +export const __yak_img = /*#__PURE__*/ StyledFactory("img"); +export const __yak_input = /*#__PURE__*/ StyledFactory("input"); +export const __yak_ins = /*#__PURE__*/ StyledFactory("ins"); +export const __yak_kbd = /*#__PURE__*/ StyledFactory("kbd"); +export const __yak_keygen = /*#__PURE__*/ StyledFactory("keygen"); +export const __yak_label = /*#__PURE__*/ StyledFactory("label"); +export const __yak_legend = /*#__PURE__*/ StyledFactory("legend"); +export const __yak_li = /*#__PURE__*/ StyledFactory("li"); +export const __yak_link = /*#__PURE__*/ StyledFactory("link"); +export const __yak_main = /*#__PURE__*/ StyledFactory("main"); +export const __yak_map = /*#__PURE__*/ StyledFactory("map"); +export const __yak_mark = /*#__PURE__*/ StyledFactory("mark"); +export const __yak_menu = /*#__PURE__*/ StyledFactory("menu"); +export const __yak_menuitem = /*#__PURE__*/ StyledFactory("menuitem"); +export const __yak_meta = /*#__PURE__*/ StyledFactory("meta"); +export const __yak_meter = /*#__PURE__*/ StyledFactory("meter"); +export const __yak_nav = /*#__PURE__*/ StyledFactory("nav"); +export const __yak_noscript = /*#__PURE__*/ StyledFactory("noscript"); +export const __yak_object = /*#__PURE__*/ StyledFactory("object"); +export const __yak_ol = /*#__PURE__*/ StyledFactory("ol"); +export const __yak_optgroup = /*#__PURE__*/ StyledFactory("optgroup"); +export const __yak_option = /*#__PURE__*/ StyledFactory("option"); +export const __yak_output = /*#__PURE__*/ StyledFactory("output"); +export const __yak_p = /*#__PURE__*/ StyledFactory("p"); +export const __yak_param = /*#__PURE__*/ StyledFactory("param"); +export const __yak_picture = /*#__PURE__*/ StyledFactory("picture"); +export const __yak_pre = /*#__PURE__*/ StyledFactory("pre"); +export const __yak_progress = /*#__PURE__*/ StyledFactory("progress"); +export const __yak_q = /*#__PURE__*/ StyledFactory("q"); +export const __yak_rp = /*#__PURE__*/ StyledFactory("rp"); +export const __yak_rt = /*#__PURE__*/ StyledFactory("rt"); +export const __yak_ruby = /*#__PURE__*/ StyledFactory("ruby"); +export const __yak_s = /*#__PURE__*/ StyledFactory("s"); +export const __yak_samp = /*#__PURE__*/ StyledFactory("samp"); +export const __yak_script = /*#__PURE__*/ StyledFactory("script"); +export const __yak_section = /*#__PURE__*/ StyledFactory("section"); +export const __yak_select = /*#__PURE__*/ StyledFactory("select"); +export const __yak_small = /*#__PURE__*/ StyledFactory("small"); +export const __yak_source = /*#__PURE__*/ StyledFactory("source"); +export const __yak_span = /*#__PURE__*/ StyledFactory("span"); +export const __yak_strong = /*#__PURE__*/ StyledFactory("strong"); +export const __yak_style = /*#__PURE__*/ StyledFactory("style"); +export const __yak_sub = /*#__PURE__*/ StyledFactory("sub"); +export const __yak_summary = /*#__PURE__*/ StyledFactory("summary"); +export const __yak_sup = /*#__PURE__*/ StyledFactory("sup"); +export const __yak_table = /*#__PURE__*/ StyledFactory("table"); +export const __yak_tbody = /*#__PURE__*/ StyledFactory("tbody"); +export const __yak_td = /*#__PURE__*/ StyledFactory("td"); +export const __yak_textarea = /*#__PURE__*/ StyledFactory("textarea"); +export const __yak_tfoot = /*#__PURE__*/ StyledFactory("tfoot"); +export const __yak_th = /*#__PURE__*/ StyledFactory("th"); +export const __yak_thead = /*#__PURE__*/ StyledFactory("thead"); +export const __yak_time = /*#__PURE__*/ StyledFactory("time"); +export const __yak_tr = /*#__PURE__*/ StyledFactory("tr"); +export const __yak_track = /*#__PURE__*/ StyledFactory("track"); +export const __yak_u = /*#__PURE__*/ StyledFactory("u"); +export const __yak_ul = /*#__PURE__*/ StyledFactory("ul"); +export const __yak_use = /*#__PURE__*/ StyledFactory("use"); +export const __yak_var = /*#__PURE__*/ StyledFactory("var"); +export const __yak_video = /*#__PURE__*/ StyledFactory("video"); +export const __yak_wbr = /*#__PURE__*/ StyledFactory("wbr"); +export const __yak_circle = /*#__PURE__*/ StyledFactory("circle"); +export const __yak_clipPath = /*#__PURE__*/ StyledFactory("clipPath"); +export const __yak_defs = /*#__PURE__*/ StyledFactory("defs"); +export const __yak_ellipse = /*#__PURE__*/ StyledFactory("ellipse"); +export const __yak_foreignObject = /*#__PURE__*/ StyledFactory("foreignObject"); +export const __yak_g = /*#__PURE__*/ StyledFactory("g"); +export const __yak_image = /*#__PURE__*/ StyledFactory("image"); +export const __yak_line = /*#__PURE__*/ StyledFactory("line"); +export const __yak_linearGradient = + /*#__PURE__*/ StyledFactory("linearGradient"); +export const __yak_marker = /*#__PURE__*/ StyledFactory("marker"); +export const __yak_mask = /*#__PURE__*/ StyledFactory("mask"); +export const __yak_path = /*#__PURE__*/ StyledFactory("path"); +export const __yak_pattern = /*#__PURE__*/ StyledFactory("pattern"); +export const __yak_polygon = /*#__PURE__*/ StyledFactory("polygon"); +export const __yak_polyline = /*#__PURE__*/ StyledFactory("polyline"); +export const __yak_radialGradient = + /*#__PURE__*/ StyledFactory("radialGradient"); +export const __yak_rect = /*#__PURE__*/ StyledFactory("rect"); +export const __yak_stop = /*#__PURE__*/ StyledFactory("stop"); +export const __yak_svg = /*#__PURE__*/ StyledFactory("svg"); +export const __yak_text = /*#__PURE__*/ StyledFactory("text"); +export const __yak_tspan = /*#__PURE__*/ StyledFactory("tspan"); From 2f684a6acd7abd7d794232603a1d8f1daa4580f9 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 22:18:48 +0900 Subject: [PATCH 03/72] Add new test which contains styled.button as well as styled(Component) usage cases --- .../tests/fixture/two-styled-components/input.tsx | 9 +++++++++ .../tests/fixture/two-styled-components/output.tsx | 12 ++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 packages/yak-swc/yak_swc/tests/fixture/two-styled-components/input.tsx create mode 100644 packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/input.tsx new file mode 100644 index 00000000..5659512e --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/input.tsx @@ -0,0 +1,9 @@ +import { styled } from "next-yak"; + +export const Button = styled.button` + background-color: #007bff; +`; + +export const FancyButton = styled(Button)` + margin-bottom: 23px; +` diff --git a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.tsx new file mode 100644 index 00000000..936d6c18 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.tsx @@ -0,0 +1,12 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button); +export const FancyButton = /*YAK Extracted CSS: +.FancyButton { + margin-bottom: 23px; +} +*/ /*#__PURE__*/ styled(Button)(__styleYak.FancyButton); From 74ce3bd80e75af81212ac19563c8a87dbd3650db Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 22:19:11 +0900 Subject: [PATCH 04/72] Replace styled.button with __yak_button while making sure the styled import only stays if it's needed --- packages/yak-swc/yak_swc/src/lib.rs | 48 +++++++++++++ .../yak-swc/yak_swc/src/yak_transforms.rs | 69 ++++++++++++++++++- 2 files changed, 115 insertions(+), 2 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index 93eddd1d..cc98af23 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -85,6 +85,7 @@ where /// Used to check if the current program is using next-yak /// to idenftify css-in-js expressions yak_library_imports: YakImportVisitor, + yak_transformed_library_imports: Vec, /// Variable Name to Unique CSS Identifier Mapping\ /// e.g. const Rotation = keyframes`...` -> Rotation\ /// e.g. const Button = styled.button`...` -> Button\ @@ -115,6 +116,7 @@ where current_exported: false, variables: VariableVisitor::new(), yak_library_imports: YakImportVisitor::new(), + yak_transformed_library_imports: vec![], naming_convention: NamingConvention::new(filename.clone(), dev_mode), variable_name_selector_mapping: FxHashMap::default(), expression_replacement: None, @@ -511,12 +513,43 @@ where for item in module.body.iter_mut() { if let ModuleItem::ModuleDecl(ModuleDecl::Import(import_declaration)) = item { if import_declaration.src.value == "next-yak/internal" { + if !self.yak_transformed_library_imports.is_empty() { + // yak styled import got transformed into specific components + // Now we remove the generic styled import and add all explicit imports + import_declaration.specifiers.retain(|import_specifier| { + match import_specifier { + ImportSpecifier::Named(ImportNamedSpecifier { local, .. }) => { + if local.sym == atom!("styled") { + return false; + } + return true; + }, + _ => true + } + }); + //Add all transformed imports + import_declaration.specifiers.extend( + self + .yak_transformed_library_imports + .iter() + .map(|imported| { + ImportSpecifier::Named(ImportNamedSpecifier { + span: DUMMY_SP, + local: Ident { span: DUMMY_SP, ctxt: imported.ctxt, sym: imported.sym.clone(), optional: false }, + imported: None, + is_type_only: false, + }) + }) + ); + } + // Add utility functions import_declaration.specifiers.extend( self .yak_library_imports .get_yak_utility_import_declaration(), ); + break; } } @@ -532,6 +565,17 @@ where last_import_index = i + 1; } } + dbg!(format!("πŸ™ˆ last import index {last_import_index}")); + + for item in module.body.iter_mut() { + if let ModuleItem::ModuleDecl(ModuleDecl::Import(import_declaration)) = item { + if import_declaration.src.value == "next-yak/internal" { + let asdf = import_declaration.specifiers.clone(); + dbg!(format!("πŸ™ˆimport specifiers {asdf:?}")); + } + } + } + module.body.insert( last_import_index, ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl { @@ -810,6 +854,10 @@ where &self.current_declaration, runtime_css_variables, ); + if let Some(id) = transform_result.import { + dbg!(format!("adding transformed import {id:?}")); + self.yak_transformed_library_imports.push(id); + } if is_top_level { self.current_declaration = vec![]; diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 4c02951f..bb85eae7 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -1,5 +1,6 @@ use itertools::Itertools; use rustc_hash::FxHashMap; +use swc_core::atoms::atom; use swc_core::common::util::move_map::MoveMap; use crate::utils::ast_helper::{create_member_prop_from_string, expr_hash_map_to_object}; @@ -24,10 +25,11 @@ pub struct YakCss { pub struct YakTransformResult { pub expression: Box, pub css: YakCss, + pub import: Option, } pub trait YakTransform { - /// Create a CSS Scope\ + /// Create a CSS Scope\xΒ§ /// This CSS Scope will surround the entire CSS for this literal\ /// e.g. const myMixin = css`...` -> .myMixin { ... } fn create_css_state( @@ -128,6 +130,7 @@ impl YakTransform for TransformNestedCss { comment_prefix: None, declarations: declarations.to_vec(), }, + import: None, expression: (Box::new(Expr::Call(CallExpr { // Use a sepcial span as this expression might be cloned as part // of a parent expression and therefore needs a unique span to @@ -255,6 +258,7 @@ impl YakTransform for TransformCssMixin { declaration }), }, + import: None, expression: (Box::new(Expr::Call(CallExpr { span: expression.span, ctxt: SyntaxContext::empty(), @@ -284,6 +288,61 @@ impl TransformStyled { pub fn new() -> TransformStyled { TransformStyled { class_name: None } } + + fn transform_styled_dot_expression<'a>(&self, expression: Box) -> (Box, Option) { + dbg!(format!("πŸ’©πŸ’© Trying to transform root expression {expression:?}")); + + return match *expression.clone() { + Expr::Member(MemberExpr { span, obj, prop }) => { + dbg!(format!("πŸ’©πŸ’© Matched MemberExpr {obj:?}")); + match *obj.clone() { + Expr::Ident(Ident { sym: symbol, span:ident_span, ctxt, optional}) => { + if symbol.as_str() == "styled" { + dbg!(format!("πŸ’©πŸ’© found styled identifier styled")); + match prop.clone() { + MemberProp::Ident(IdentName { span: _, sym }) => { + if sym.as_str() == "button" { + let ident = Ident { span, ctxt, sym: atom!("__yak_button"), optional}; + return (Box::new(Expr::Ident(ident.clone())), Some(ident) + ) + } + () + }, + _ => () + } + } + () + }, + _ => () + } + return (Box::new(Expr::Member(MemberExpr { + span: span, + obj: obj, + prop: prop + })), None) + }, + Expr::Call(CallExpr { span, ctxt, callee, args, type_args }) => { + match callee { + Callee::Expr(ex) => { + match *ex.clone() { + Expr::Ident(ident) => { + if ident.sym.as_str() == "styled" { + return (expression, Some(ident)) + } + (expression, None) + }, + _ => (expression, None) + } + }, + _ => (expression, None) + } + }, + _ => { + dbg!(format!("πŸ™ˆ Not Member or Call {expression:?}")); + (expression, None) + } + } + } } impl YakTransform for TransformStyled { @@ -312,6 +371,7 @@ impl YakTransform for TransformStyled { runtime_css_variables: FxHashMap, ) -> YakTransformResult { let mut arguments: Vec = vec![]; + dbg!(format!("transform expression {expression:?}")); if !declarations.is_empty() { arguments.push( Expr::Member(MemberExpr { @@ -332,15 +392,19 @@ impl YakTransform for TransformStyled { .into(), ); } + let (tag_expression, ident) = self.transform_styled_dot_expression(expression.tag.clone()); + + dbg!(format!("πŸ’©πŸ’© Got tag expression {tag_expression:?}")); YakTransformResult { css: YakCss { comment_prefix: Some("YAK Extracted CSS:".to_string()), declarations: declarations.to_vec(), }, + import: ident, expression: (Box::new(Expr::Call(CallExpr { span: expression.span, ctxt: SyntaxContext::empty(), - callee: Callee::Expr(expression.tag.clone()), + callee: Callee::Expr(tag_expression), args: arguments, type_args: None, }))), @@ -423,6 +487,7 @@ impl YakTransform for TransformKeyframes { comment_prefix: Some("YAK Extracted CSS:".to_string()), declarations: declarations.to_vec(), }, + import: None, expression: (Box::new(Expr::Call(CallExpr { span: expression.span, ctxt: SyntaxContext::empty(), From 99ce92d7be4c42f513b018af6e0ca63b3258cbb5 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 22:22:04 +0900 Subject: [PATCH 05/72] Update test results (styled.button => __yak_button) --- .../fixture/basic-styled-component/output.tsx | 4 ++-- .../yak_swc/tests/fixture/comments/output.tsx | 4 ++-- .../yak_swc/tests/fixture/constants/output.tsx | 4 ++-- .../fixture/cross-file-constants/output.tsx | 4 ++-- .../cross-file-mixin-dynamic-export/output.tsx | 4 ++-- .../fixture/cross-file-mixin-export/output.tsx | 4 ++-- .../fixture/cross-file-mixin-import/output.tsx | 16 ++++++++-------- .../fixture/cross-file-selectors/output.tsx | 4 ++-- .../tests/fixture/css-mixin-inline/output.tsx | 4 ++-- .../tests/fixture/css-mixin-nested/output.tsx | 6 +++--- .../yak_swc/tests/fixture/css-mixin/output.tsx | 6 +++--- .../tests/fixture/css-variables/output.tsx | 4 ++-- .../yak_swc/tests/fixture/encoded/output.tsx | 4 ++-- .../tests/fixture/extending-styles/output.tsx | 4 ++-- .../keyframe-animations-object/output.tsx | 4 ++-- .../fixture/keyframes-nested-error/output.tsx | 4 ++-- .../mixing-with-tailwind-error/output.tsx | 4 ++-- .../fixture/mixing-with-tailwind/output.tsx | 4 ++-- .../fixture/two-styled-components/output.tsx | 4 ++-- 19 files changed, 46 insertions(+), 46 deletions(-) diff --git a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.tsx index 05e5b1c9..8bc1a852 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { @@ -14,4 +14,4 @@ export const Button = /*YAK Extracted CSS: background-color: #0056b3; } } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/comments/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/comments/output.tsx index fc6c2b73..2332a770 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/comments/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/comments/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const primary = "green"; export const Button = /*YAK Extracted CSS: @@ -6,4 +6,4 @@ export const Button = /*YAK Extracted CSS: color: green; background: red; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/constants/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/constants/output.tsx index cd257ad9..01aaa8d2 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/constants/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/constants/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const colors = { primary: "#007bff", @@ -28,4 +28,4 @@ export const Button = /*YAK Extracted CSS: background-color: #343a40; } } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.tsx index a533ee24..72eeaca9 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; // @ts-ignore import { colors } from "./colorDefinitions"; // @ts-ignore @@ -14,4 +14,4 @@ export const Button = /*YAK Extracted CSS: background-color: --yak-css-import: url("./colorDefinitions:colors:light:full%20opacity",mixin); height: --yak-css-import: url("./sizeDefinitions:sizes:0",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.tsx index beb3a6f6..c143f896 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.tsx @@ -1,4 +1,4 @@ -import { css, styled } from "next-yak/internal"; +import { css, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const textColor = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.textColor__$active)); const textStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.textStyles__$active)); @@ -51,4 +51,4 @@ export const Button = /*YAK Extracted CSS: color: red; } } -*/ /*#__PURE__*/ styled.button(__styleYak.Button, ({ $isSet })=>$isSet && true && true && true && /*#__PURE__*/ css(__styleYak.Button__, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak["Button__-and-$active"])), ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.Button__$active), ({ $active })=>$active && /*#__PURE__*/ css(__styleYak["Button__$active-01"])); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button, ({ $isSet })=>$isSet && true && true && true && /*#__PURE__*/ css(__styleYak.Button__, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak["Button__-and-$active"])), ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.Button__$active), ({ $active })=>$active && /*#__PURE__*/ css(__styleYak["Button__$active-01"])); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.tsx index 3571cc30..7a468073 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.tsx @@ -1,4 +1,4 @@ -import { css, styled } from "next-yak/internal"; +import { css, __yak_button } from "next-yak/internal"; import { typogaphyMixin } from "./typography"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const textColor = /*#__PURE__*/ css(); @@ -33,7 +33,7 @@ export const Button = /*YAK Extracted CSS: color: black; } } -*/ /*#__PURE__*/ styled.button(__styleYak.Button, ({ $isSet })=>$isSet && true && true && true && /*#__PURE__*/ css(__styleYak.Button__)); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button, ({ $isSet })=>$isSet && true && true && true && /*#__PURE__*/ css(__styleYak.Button__)); export const aspectRatios = { base: /*YAK EXPORTED MIXIN:aspectRatios:base padding-top: 100%; diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx index 93c1918f..61dd5b18 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button, __yak_button, __yak_button, __yak_button, __yak_button, __yak_button, __yak_button } from "next-yak/internal"; // @ts-ignore import { fonts } from "./fonts"; // @ts-ignore @@ -10,32 +10,32 @@ export const Button = /*YAK Extracted CSS: .Button { --yak-css-import: url("./fonts:fonts:h1",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); export const Button2 = /*YAK Extracted CSS: .Button2 { --yak-css-import: url("./fonts:fonts:h1",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button2); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button2); export const Button3 = /*YAK Extracted CSS: .Button3 { --yak-css-import: url("./fonts:fonts:h1",mixin); color: green; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button3); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button3); export const Button4 = /*YAK Extracted CSS: .Button4 { --yak-css-import: url("./fonts:fonts:h1",mixin) --yak-css-import: url("./fonts:fonts:underline",mixin); color: green; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button4); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button4); export const Button5 = /*YAK Extracted CSS: .Button5 { --yak-css-import: url("./fonts:fonts:h1",mixin); --yak-css-import: url("./fancy:fancy:mixins:specialEffect",mixin); color: green; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button5); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button5); export const Button6 = /*YAK Extracted CSS: .Button6 { &:hover { @@ -45,7 +45,7 @@ export const Button6 = /*YAK Extracted CSS: ; color: green; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button6); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button6); export const Button7 = /*YAK Extracted CSS: .Button7 { &:hover { @@ -55,4 +55,4 @@ export const Button7 = /*YAK Extracted CSS: ; color: green; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button7); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button7); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.tsx index da1bc120..138a8bd9 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; // @ts-ignore import { Icon } from "./Icon"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; @@ -14,4 +14,4 @@ export const Button = /*YAK Extracted CSS: color: blue; } } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.tsx index 27d31ecf..96a635fd 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.tsx @@ -1,4 +1,4 @@ -import { styled, css } from "next-yak/internal"; +import { css, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ThemedButton = /*YAK Extracted CSS: .ThemedButton { @@ -11,4 +11,4 @@ export const ThemedButton = /*YAK Extracted CSS: color: red; } } -*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active)); +*/ /*#__PURE__*/ __yak_button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active)); diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx index c35783f4..ba7bc30d 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_unitPostFix } from "next-yak/internal"; +import { css, __yak_button, __yak_button, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { @@ -25,7 +25,7 @@ export const ThemedButton = /*YAK Extracted CSS: .ThemedButton { width: var(--ThemedButton__width_m7uBBu); } -*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active, { +*/ /*#__PURE__*/ __yak_button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active, { "style": { "--ThemedButton__max-width_m7uBBu": __yak_unitPostFix(({ $letters })=>$letters * 15, "px") } @@ -57,7 +57,7 @@ export const CustomThemedButton = /*YAK Extracted CSS: width: var(--CustomThemedButton__width_m7uBBu); } } -*/ /*#__PURE__*/ styled.button(__styleYak.CustomThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.CustomThemedButton__$active, { +*/ /*#__PURE__*/ __yak_button(__styleYak.CustomThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.CustomThemedButton__$active, { "style": { "--CustomThemedButton__max-width_m7uBBu": __yak_unitPostFix(({ $letters })=>$letters * 15, "px") } diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx index f2f25922..a288cded 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_unitPostFix } from "next-yak/internal"; +import { css, __yak_button, __yak_button, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { @@ -28,7 +28,7 @@ export const ThemedButton = /*YAK Extracted CSS: .ThemedButton__ { color: red; } -*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active, { +*/ /*#__PURE__*/ __yak_button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active, { "style": { "--ThemedButton__max-width_m7uBBu": __yak_unitPostFix(({ $letters })=>$letters * 15, "px") } @@ -57,7 +57,7 @@ export const CustomThemedButton = /*YAK Extracted CSS: .CustomThemedButton__ { color: red; } -*/ /*#__PURE__*/ styled.button(__styleYak.CustomThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.CustomThemedButton__$active, { +*/ /*#__PURE__*/ __yak_button(__styleYak.CustomThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.CustomThemedButton__$active, { "style": { "--CustomThemedButton__max-width_m7uBBu": __yak_unitPostFix(({ $letters })=>$letters * 15, "px") } diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx index c9b4b2c1..52a0db4d 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ThemedButton = /*YAK Extracted CSS: .ThemedButton { @@ -13,7 +13,7 @@ export const ThemedButton = /*YAK Extracted CSS: background-color: var(--secondary-color); } } -*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton); +*/ /*#__PURE__*/ __yak_button(__styleYak.ThemedButton); export const ThemeProvider = /*YAK Extracted CSS: .ThemeProvider { --primary-color: #007bff; diff --git a/packages/yak-swc/yak_swc/tests/fixture/encoded/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.tsx index 10a21ffe..6be78078 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/encoded/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const before = "\\2022"; export const Button = /*YAK Extracted CSS: @@ -11,4 +11,4 @@ export const Button = /*YAK Extracted CSS: content: "\2022"; } } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx index c0ab69d3..4edb7fff 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button, styled, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const BaseButton = /*YAK Extracted CSS: .BaseButton { @@ -8,7 +8,7 @@ const BaseButton = /*YAK Extracted CSS: font-size: 16px; cursor: pointer; } -*/ /*#__PURE__*/ styled.button(__styleYak.BaseButton); +*/ /*#__PURE__*/ __yak_button(__styleYak.BaseButton); export const PrimaryButton = /*YAK Extracted CSS: .PrimaryButton { background-color: #007bff; diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx index 408decd1..0ecccaa5 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx @@ -1,4 +1,4 @@ -import { styled, css, keyframes } from "next-yak/internal"; +import { css, keyframes, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FadeInText = /*YAK Extracted CSS: .FadeInText__$reverse { @@ -61,4 +61,4 @@ export const FancyButton = /*YAK Extracted CSS: animation: slides_200 1s ease-in-out, animations_fadeOut 1s ease-in; } } -*/ /*#__PURE__*/ styled.button(__styleYak.FancyButton); +*/ /*#__PURE__*/ __yak_button(__styleYak.FancyButton); diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.tsx index f2300a83..601cc029 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.tsx @@ -1,3 +1,3 @@ -import { styled, keyframes } from "next-yak/internal"; +import { keyframes, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; -export const Button = /*#__PURE__*/ styled.button(); +export const Button = /*#__PURE__*/ __yak_button(); diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.tsx index 9eb6d875..9cff06d6 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.tsx @@ -1,3 +1,3 @@ -import { styled, atoms } from "next-yak/internal"; +import { atoms, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; -export const TailwindButton = /*#__PURE__*/ styled.button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded"), atoms("bg-blue-700")); +export const TailwindButton = /*#__PURE__*/ __yak_button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded"), atoms("bg-blue-700")); diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.tsx index 83441594..caac70f8 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.tsx @@ -1,3 +1,3 @@ -import { styled, atoms } from "next-yak/internal"; +import { atoms, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; -export const TailwindButton = /*#__PURE__*/ styled.button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded")); +export const TailwindButton = /*#__PURE__*/ __yak_button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded")); diff --git a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.tsx index 936d6c18..5df4411e 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.tsx @@ -1,10 +1,10 @@ -import { styled } from "next-yak/internal"; +import { __yak_button, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { background-color: #007bff; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); export const FancyButton = /*YAK Extracted CSS: .FancyButton { margin-bottom: 23px; From dc2e14bd062693c54c966c31af9d245e780d26a7 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 22:26:03 +0900 Subject: [PATCH 06/72] remove dbg! statements --- packages/yak-swc/yak_swc/src/lib.rs | 4 ---- packages/yak-swc/yak_swc/src/yak_transforms.rs | 8 -------- 2 files changed, 12 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index cc98af23..5b94b95c 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -565,13 +565,10 @@ where last_import_index = i + 1; } } - dbg!(format!("πŸ™ˆ last import index {last_import_index}")); for item in module.body.iter_mut() { if let ModuleItem::ModuleDecl(ModuleDecl::Import(import_declaration)) = item { if import_declaration.src.value == "next-yak/internal" { - let asdf = import_declaration.specifiers.clone(); - dbg!(format!("πŸ™ˆimport specifiers {asdf:?}")); } } } @@ -855,7 +852,6 @@ where runtime_css_variables, ); if let Some(id) = transform_result.import { - dbg!(format!("adding transformed import {id:?}")); self.yak_transformed_library_imports.push(id); } diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index bb85eae7..a94774a5 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -290,15 +290,11 @@ impl TransformStyled { } fn transform_styled_dot_expression<'a>(&self, expression: Box) -> (Box, Option) { - dbg!(format!("πŸ’©πŸ’© Trying to transform root expression {expression:?}")); - return match *expression.clone() { Expr::Member(MemberExpr { span, obj, prop }) => { - dbg!(format!("πŸ’©πŸ’© Matched MemberExpr {obj:?}")); match *obj.clone() { Expr::Ident(Ident { sym: symbol, span:ident_span, ctxt, optional}) => { if symbol.as_str() == "styled" { - dbg!(format!("πŸ’©πŸ’© found styled identifier styled")); match prop.clone() { MemberProp::Ident(IdentName { span: _, sym }) => { if sym.as_str() == "button" { @@ -338,7 +334,6 @@ impl TransformStyled { } }, _ => { - dbg!(format!("πŸ™ˆ Not Member or Call {expression:?}")); (expression, None) } } @@ -371,7 +366,6 @@ impl YakTransform for TransformStyled { runtime_css_variables: FxHashMap, ) -> YakTransformResult { let mut arguments: Vec = vec![]; - dbg!(format!("transform expression {expression:?}")); if !declarations.is_empty() { arguments.push( Expr::Member(MemberExpr { @@ -393,8 +387,6 @@ impl YakTransform for TransformStyled { ); } let (tag_expression, ident) = self.transform_styled_dot_expression(expression.tag.clone()); - - dbg!(format!("πŸ’©πŸ’© Got tag expression {tag_expression:?}")); YakTransformResult { css: YakCss { comment_prefix: Some("YAK Extracted CSS:".to_string()), From 89e4ca26014a38856ff0434e00c1de0452c331d5 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 22:50:14 +0900 Subject: [PATCH 07/72] Some cleanup --- .../yak-swc/yak_swc/src/yak_transforms.rs | 53 +++++++------------ 1 file changed, 18 insertions(+), 35 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index a94774a5..46553921 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -291,47 +291,30 @@ impl TransformStyled { fn transform_styled_dot_expression<'a>(&self, expression: Box) -> (Box, Option) { return match *expression.clone() { - Expr::Member(MemberExpr { span, obj, prop }) => { - match *obj.clone() { - Expr::Ident(Ident { sym: symbol, span:ident_span, ctxt, optional}) => { - if symbol.as_str() == "styled" { - match prop.clone() { - MemberProp::Ident(IdentName { span: _, sym }) => { - if sym.as_str() == "button" { - let ident = Ident { span, ctxt, sym: atom!("__yak_button"), optional}; - return (Box::new(Expr::Ident(ident.clone())), Some(ident) - ) - } - () - }, - _ => () + Expr::Member(MemberExpr { obj: parent, prop: member, ..}) => { + if let Expr::Ident(ident) = *parent { + if ident.sym == atom!("styled") { + if let MemberProp::Ident(member_ident) = member { + // TODO: all other types of member props + if member_ident.sym == atom!("button") { + let mut new_ident = ident.clone(); + new_ident.sym = atom!("__yak_button"); + return (Box::new(Expr::Ident(new_ident.clone())), Some(new_ident) ) + } } } - () - }, - _ => () } - return (Box::new(Expr::Member(MemberExpr { - span: span, - obj: obj, - prop: prop - })), None) + return (expression, None); }, - Expr::Call(CallExpr { span, ctxt, callee, args, type_args }) => { - match callee { - Callee::Expr(ex) => { - match *ex.clone() { - Expr::Ident(ident) => { - if ident.sym.as_str() == "styled" { - return (expression, Some(ident)) - } - (expression, None) - }, - _ => (expression, None) + Expr::Call(call_expression) => { + if let Callee::Expr(callee) = call_expression.callee { + if let Expr::Ident(ident) = *callee { + if ident.sym == atom!("styled") { + return (expression, Some(ident)); } - }, - _ => (expression, None) + } } + return (expression, None) }, _ => { (expression, None) From a95e34c03d72eccf47dfac701c6a00537a441991 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 22:51:21 +0900 Subject: [PATCH 08/72] Add test which contains multiple components of the same type --- .../multiple-styled-components/input.tsx | 18 +++++++++++++++ .../multiple-styled-components/output.tsx | 22 +++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/input.tsx create mode 100644 packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/input.tsx new file mode 100644 index 00000000..67e0051a --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/input.tsx @@ -0,0 +1,18 @@ +import { styled } from "next-yak"; + +export const Button = styled.button` + background-color: #007bff; +`; + + +export const Button2 = styled.button` + background-color: #11c817; +`; + +export const FancyButton = styled(Button)` + margin-bottom: 23px; +` + +export const FancyButton2 = styled(Button2)` + margin-bottom: 17px; +` diff --git a/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.tsx new file mode 100644 index 00000000..96e9848a --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.tsx @@ -0,0 +1,22 @@ +import { __yak_button, styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; +} +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); +export const Button2 = /*YAK Extracted CSS: +.Button2 { + background-color: #11c817; +} +*/ /*#__PURE__*/ __yak_button(__styleYak.Button2); +export const FancyButton = /*YAK Extracted CSS: +.FancyButton { + margin-bottom: 23px; +} +*/ /*#__PURE__*/ styled(Button)(__styleYak.FancyButton); +export const FancyButton2 = /*YAK Extracted CSS: +.FancyButton2 { + margin-bottom: 17px; +} +*/ /*#__PURE__*/ styled(Button2)(__styleYak.FancyButton2); From f13fff80825677238b73fa3048804d74c088dd22 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 22:54:49 +0900 Subject: [PATCH 09/72] Fix duplicate imports by using set, also order imports alphabetically --- packages/yak-swc/yak_swc/src/lib.rs | 16 ++++++++++------ packages/yak-swc/yak_swc/src/yak_transforms.rs | 8 ++++---- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index 5b94b95c..68315877 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -1,6 +1,7 @@ use css_in_js_parser::{find_char, parse_css, to_css, CommentStateType}; use css_in_js_parser::{Declaration, ParserState}; -use rustc_hash::FxHashMap; +use itertools::Itertools; +use rustc_hash::{FxHashMap, FxHashSet}; use serde::Deserialize; use std::path::Path; use std::vec; @@ -85,7 +86,7 @@ where /// Used to check if the current program is using next-yak /// to idenftify css-in-js expressions yak_library_imports: YakImportVisitor, - yak_transformed_library_imports: Vec, + yak_transformed_library_imports: FxHashSet, /// Variable Name to Unique CSS Identifier Mapping\ /// e.g. const Rotation = keyframes`...` -> Rotation\ /// e.g. const Button = styled.button`...` -> Button\ @@ -116,7 +117,7 @@ where current_exported: false, variables: VariableVisitor::new(), yak_library_imports: YakImportVisitor::new(), - yak_transformed_library_imports: vec![], + yak_transformed_library_imports: FxHashSet::default(), naming_convention: NamingConvention::new(filename.clone(), dev_mode), variable_name_selector_mapping: FxHashMap::default(), expression_replacement: None, @@ -527,15 +528,18 @@ where _ => true } }); + let asdf = self.yak_transformed_library_imports.clone(); + dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©set contains: {asdf:?}")); //Add all transformed imports import_declaration.specifiers.extend( self .yak_transformed_library_imports .iter() - .map(|imported| { + .sorted_by_key(|ident| ident.0.clone()) + .map(|(sym, ctxt)| { ImportSpecifier::Named(ImportNamedSpecifier { span: DUMMY_SP, - local: Ident { span: DUMMY_SP, ctxt: imported.ctxt, sym: imported.sym.clone(), optional: false }, + local: Ident { span: DUMMY_SP, ctxt: *ctxt, sym: sym.clone(), optional: false }, imported: None, is_type_only: false, }) @@ -852,7 +856,7 @@ where runtime_css_variables, ); if let Some(id) = transform_result.import { - self.yak_transformed_library_imports.push(id); + self.yak_transformed_library_imports.insert(id); } if is_top_level { diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 46553921..31b236b2 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -25,7 +25,7 @@ pub struct YakCss { pub struct YakTransformResult { pub expression: Box, pub css: YakCss, - pub import: Option, + pub import: Option, } pub trait YakTransform { @@ -289,7 +289,7 @@ impl TransformStyled { TransformStyled { class_name: None } } - fn transform_styled_dot_expression<'a>(&self, expression: Box) -> (Box, Option) { + fn transform_styled_dot_expression<'a>(&self, expression: Box) -> (Box, Option) { return match *expression.clone() { Expr::Member(MemberExpr { obj: parent, prop: member, ..}) => { if let Expr::Ident(ident) = *parent { @@ -299,7 +299,7 @@ impl TransformStyled { if member_ident.sym == atom!("button") { let mut new_ident = ident.clone(); new_ident.sym = atom!("__yak_button"); - return (Box::new(Expr::Ident(new_ident.clone())), Some(new_ident) ) + return (Box::new(Expr::Ident(new_ident.clone())), Some(new_ident.to_id()) ) } } } @@ -310,7 +310,7 @@ impl TransformStyled { if let Callee::Expr(callee) = call_expression.callee { if let Expr::Ident(ident) = *callee { if ident.sym == atom!("styled") { - return (expression, Some(ident)); + return (expression, Some(ident.to_id())); } } } From f517585375446e6b85099eb495d4984770c29a68 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 23:14:24 +0900 Subject: [PATCH 10/72] Update tests with fixes --- .../yak_swc/tests/fixture/cross-file-mixin-import/output.tsx | 2 +- .../yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx | 2 +- packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx | 2 +- .../yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx index 61dd5b18..391f498a 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx @@ -1,4 +1,4 @@ -import { __yak_button, __yak_button, __yak_button, __yak_button, __yak_button, __yak_button, __yak_button } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; // @ts-ignore import { fonts } from "./fonts"; // @ts-ignore diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx index ba7bc30d..8f1527d7 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button, __yak_button, __yak_unitPostFix } from "next-yak/internal"; +import { css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx index a288cded..c86b8d3f 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button, __yak_button, __yak_unitPostFix } from "next-yak/internal"; +import { css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { diff --git a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx index 4edb7fff..86b42c8f 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx @@ -1,4 +1,4 @@ -import { __yak_button, styled, styled } from "next-yak/internal"; +import { __yak_button, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const BaseButton = /*YAK Extracted CSS: .BaseButton { From f18289d3da539b061df81e01b4a8d8c115366c62 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 23:19:46 +0900 Subject: [PATCH 11/72] Support all members --- .../yak-swc/yak_swc/src/yak_transforms.rs | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 31b236b2..572e5772 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -1,5 +1,6 @@ use itertools::Itertools; use rustc_hash::FxHashMap; +use swc_core::atoms::Atom; use swc_core::atoms::atom; use swc_core::common::util::move_map::MoveMap; @@ -295,16 +296,14 @@ impl TransformStyled { if let Expr::Ident(ident) = *parent { if ident.sym == atom!("styled") { if let MemberProp::Ident(member_ident) = member { - // TODO: all other types of member props - if member_ident.sym == atom!("button") { - let mut new_ident = ident.clone(); - new_ident.sym = atom!("__yak_button"); - return (Box::new(Expr::Ident(new_ident.clone())), Some(new_ident.to_id()) ) - } + let member_name = member_ident.sym.as_str(); + let mut new_ident = ident.clone(); + new_ident.sym = Atom::new(format!("__yak_{member_name}")); + return (Box::new(Expr::Ident(new_ident.clone())), Some(new_ident.to_id()) ) } } } - return (expression, None); + (expression, None) }, Expr::Call(call_expression) => { if let Callee::Expr(callee) = call_expression.callee { @@ -314,11 +313,9 @@ impl TransformStyled { } } } - return (expression, None) + (expression, None) }, - _ => { - (expression, None) - } + _ => (expression, None) } } } From 5944fd16c5890ee6f93754948aec6d94fce5bd96 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 23:22:37 +0900 Subject: [PATCH 12/72] Update all snapshots --- .../yak_swc/tests/fixture/complex-nested-structure/output.tsx | 4 ++-- .../yak-swc/yak_swc/tests/fixture/css-grid-layout/output.tsx | 4 ++-- .../yak-swc/yak_swc/tests/fixture/css-variables/output.tsx | 4 ++-- .../yak_swc/tests/fixture/dynamic-prop-error/output.tsx | 4 ++-- .../tests/fixture/keyframe-animations-function/output.tsx | 4 ++-- .../tests/fixture/keyframe-animations-object/output.tsx | 4 ++-- .../yak_swc/tests/fixture/keyframe-animations/output.tsx | 4 ++-- .../yak-swc/yak_swc/tests/fixture/media-queries/output.tsx | 4 ++-- .../yak_swc/tests/fixture/nested-dynamic-mixin/output.tsx | 4 ++-- .../yak-swc/yak_swc/tests/fixture/nested-selectors/output.tsx | 4 ++-- .../yak_swc/tests/fixture/props-and-dynamic-styles/output.tsx | 4 ++-- .../yak_swc/tests/fixture/theming-with-context/output.tsx | 4 ++-- 12 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.tsx index 05a15404..c8e95df2 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_article } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ArticleCard = /*YAK Extracted CSS: .ArticleCard { @@ -52,4 +52,4 @@ export const ArticleCard = /*YAK Extracted CSS: } } } -*/ /*#__PURE__*/ styled.article(__styleYak.ArticleCard); +*/ /*#__PURE__*/ __yak_article(__styleYak.ArticleCard); diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.tsx index f53aa6a7..172079e9 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const GridLayout = /*YAK Extracted CSS: .GridLayout { @@ -56,4 +56,4 @@ export const GridLayout = /*YAK Extracted CSS: text-align: center; } } -*/ /*#__PURE__*/ styled.div(__styleYak.GridLayout); +*/ /*#__PURE__*/ __yak_div(__styleYak.GridLayout); diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx index 52a0db4d..10fd3928 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { __yak_button, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ThemedButton = /*YAK Extracted CSS: .ThemedButton { @@ -20,4 +20,4 @@ export const ThemeProvider = /*YAK Extracted CSS: --secondary-color: #6c757d; --font-size-base: 16px; } -*/ /*#__PURE__*/ styled.div(__styleYak.ThemeProvider); +*/ /*#__PURE__*/ __yak_div(__styleYak.ThemeProvider); diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.tsx index 4d68844c..b206409d 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_unitPostFix } from "next-yak/internal"; +import { __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FlexContainer = /*YAK Extracted CSS: .FlexContainer { @@ -6,7 +6,7 @@ export const FlexContainer = /*YAK Extracted CSS: z-index: var(--FlexContainer__z-index_m7uBBu); margin-bottom: var(--FlexContainer__margin-bottom_m7uBBu); } -*/ /*#__PURE__*/ styled.div(__styleYak.FlexContainer, { +*/ /*#__PURE__*/ __yak_div(__styleYak.FlexContainer, { "style": { "--FlexContainer__margin-bottom_m7uBBu": __yak_unitPostFix(spacing[40].toString(), "px"), "--FlexContainer__z-index_m7uBBu": getZIndex() diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.tsx index b2d54cbc..17b68d00 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.tsx @@ -1,4 +1,4 @@ -import { styled, css, keyframes } from "next-yak/internal"; +import { css, keyframes, __yak_p } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FadeInText = /*YAK Extracted CSS: .FadeInText__$reverse { @@ -11,7 +11,7 @@ export const FadeInText = /*YAK Extracted CSS: font-size: 18px; color: #333; } -*/ /*#__PURE__*/ styled.p(__styleYak.FadeInText, ({ $reverse })=>$reverse ? /*#__PURE__*/ css(__styleYak.FadeInText__$reverse) : /*#__PURE__*/ css(__styleYak.FadeInText__not_$reverse)); +*/ /*#__PURE__*/ __yak_p(__styleYak.FadeInText, ({ $reverse })=>$reverse ? /*#__PURE__*/ css(__styleYak.FadeInText__$reverse) : /*#__PURE__*/ css(__styleYak.FadeInText__not_$reverse)); const fadeIn = /*YAK Extracted CSS: @keyframes fadeIn { from { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx index 0ecccaa5..bb96d7d4 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx @@ -1,4 +1,4 @@ -import { css, keyframes, __yak_button } from "next-yak/internal"; +import { css, keyframes, __yak_button, __yak_p } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FadeInText = /*YAK Extracted CSS: .FadeInText__$reverse { @@ -11,7 +11,7 @@ export const FadeInText = /*YAK Extracted CSS: font-size: 18px; color: #333; } -*/ /*#__PURE__*/ styled.p(__styleYak.FadeInText, ({ $reverse })=>$reverse ? /*#__PURE__*/ css(__styleYak.FadeInText__$reverse) : /*#__PURE__*/ css(__styleYak.FadeInText__not_$reverse)); +*/ /*#__PURE__*/ __yak_p(__styleYak.FadeInText, ({ $reverse })=>$reverse ? /*#__PURE__*/ css(__styleYak.FadeInText__$reverse) : /*#__PURE__*/ css(__styleYak.FadeInText__not_$reverse)); const animations = { fadeIn: /*YAK Extracted CSS: @keyframes animations_fadeIn { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.tsx index f0d3b3a8..116a4fad 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.tsx @@ -1,4 +1,4 @@ -import { styled, keyframes } from "next-yak/internal"; +import { keyframes, __yak_p } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const fadeIn = /*YAK Extracted CSS: @keyframes fadeIn { @@ -16,4 +16,4 @@ export const FadeInText = /*YAK Extracted CSS: font-size: 18px; color: #333; } -*/ /*#__PURE__*/ styled.p(__styleYak.FadeInText); +*/ /*#__PURE__*/ __yak_p(__styleYak.FadeInText); diff --git a/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.tsx index 51ea218f..ff514c57 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ResponsiveGrid = /*YAK Extracted CSS: .ResponsiveGrid { @@ -13,4 +13,4 @@ export const ResponsiveGrid = /*YAK Extracted CSS: grid-template-columns: repeat(3, 1fr); } } -*/ /*#__PURE__*/ styled.div(__styleYak.ResponsiveGrid); +*/ /*#__PURE__*/ __yak_div(__styleYak.ResponsiveGrid); diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.tsx index eecb17d4..8616d8f5 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_unitPostFix } from "next-yak/internal"; +import { css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; // example taken from https://github.com/jantimon/next-yak/issues/208 const spacing = "20px"; @@ -18,7 +18,7 @@ const ContainerFluid = /*YAK Extracted CSS: .ContainerFluid { margin-top: var(--ContainerFluid__margin-top_m7uBBu); } -*/ /*#__PURE__*/ styled.div(__styleYak.ContainerFluid, ({ $isApp, $pageHeaderHeight })=>$isApp ? /*#__PURE__*/ css(__styleYak.ContainerFluid__$isApp) : /*#__PURE__*/ css(__styleYak.ContainerFluid__not_$isApp), { +*/ /*#__PURE__*/ __yak_div(__styleYak.ContainerFluid, ({ $isApp, $pageHeaderHeight })=>$isApp ? /*#__PURE__*/ css(__styleYak.ContainerFluid__$isApp) : /*#__PURE__*/ css(__styleYak.ContainerFluid__not_$isApp), { "style": { "--ContainerFluid__margin-top_m7uBBu": __yak_unitPostFix(({ $pageHeaderHeight })=>$pageHeaderHeight, "px") } diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.tsx index d6806085..769d7f01 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Card = /*YAK Extracted CSS: .Card { @@ -29,4 +29,4 @@ export const Card = /*YAK Extracted CSS: } } } -*/ /*#__PURE__*/ styled.div(__styleYak.Card); +*/ /*#__PURE__*/ __yak_div(__styleYak.Card); diff --git a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.tsx index 871fecef..ae87f580 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_unitPostFix } from "next-yak/internal"; +import { css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FlexContainer = /*YAK Extracted CSS: .FlexContainer { @@ -14,7 +14,7 @@ export const FlexContainer = /*YAK Extracted CSS: .FlexContainer__ { bottom: var(--FlexContainer__bottom_m7uBBu); } -*/ /*#__PURE__*/ styled.div(__styleYak.FlexContainer, ({ $bottom })=>/*#__PURE__*/ css(__styleYak.FlexContainer__, { +*/ /*#__PURE__*/ __yak_div(__styleYak.FlexContainer, ({ $bottom })=>/*#__PURE__*/ css(__styleYak.FlexContainer__, { "style": { "--FlexContainer__bottom_m7uBBu": __yak_unitPostFix($bottom * 20, "%") } diff --git a/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.tsx index 01244715..4c7a65b4 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { styled } from "next-yak/internal"; +import { __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const ThemedComponent = /*YAK Extracted CSS: .ThemedComponent { @@ -8,7 +8,7 @@ const ThemedComponent = /*YAK Extracted CSS: padding: 20px; border-radius: 8px; } -*/ /*#__PURE__*/ styled.div(__styleYak.ThemedComponent, { +*/ /*#__PURE__*/ __yak_div(__styleYak.ThemedComponent, { "style": { "--ThemedComponent__background-color_m7uBBu": (props)=>props.theme.background, "--ThemedComponent__color_m7uBBu": (props)=>props.theme.text From 74377739d8436a5737c11af286abeab7a011a5a4 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Mon, 2 Dec 2024 15:44:30 +0100 Subject: [PATCH 13/72] cargo fmt --- packages/yak-swc/yak_swc/src/lib.rs | 64 ++++++++++--------- .../yak-swc/yak_swc/src/yak_transforms.rs | 23 ++++--- 2 files changed, 49 insertions(+), 38 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index 68315877..ad2557af 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -515,37 +515,42 @@ where if let ModuleItem::ModuleDecl(ModuleDecl::Import(import_declaration)) = item { if import_declaration.src.value == "next-yak/internal" { if !self.yak_transformed_library_imports.is_empty() { - // yak styled import got transformed into specific components - // Now we remove the generic styled import and add all explicit imports - import_declaration.specifiers.retain(|import_specifier| { - match import_specifier { - ImportSpecifier::Named(ImportNamedSpecifier { local, .. }) => { - if local.sym == atom!("styled") { - return false; - } - return true; - }, - _ => true + // yak styled import got transformed into specific components + // Now we remove the generic styled import and add all explicit imports + import_declaration + .specifiers + .retain(|import_specifier| match import_specifier { + ImportSpecifier::Named(ImportNamedSpecifier { local, .. }) => { + if local.sym == atom!("styled") { + return false; + } + return true; } + _ => true, }); - let asdf = self.yak_transformed_library_imports.clone(); - dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©set contains: {asdf:?}")); + let asdf = self.yak_transformed_library_imports.clone(); + dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©set contains: {asdf:?}")); //Add all transformed imports - import_declaration.specifiers.extend( - self - .yak_transformed_library_imports - .iter() - .sorted_by_key(|ident| ident.0.clone()) - .map(|(sym, ctxt)| { - ImportSpecifier::Named(ImportNamedSpecifier { + import_declaration.specifiers.extend( + self + .yak_transformed_library_imports + .iter() + .sorted_by_key(|ident| ident.0.clone()) + .map(|(sym, ctxt)| { + ImportSpecifier::Named(ImportNamedSpecifier { + span: DUMMY_SP, + local: Ident { span: DUMMY_SP, - local: Ident { span: DUMMY_SP, ctxt: *ctxt, sym: sym.clone(), optional: false }, - imported: None, - is_type_only: false, - }) + ctxt: *ctxt, + sym: sym.clone(), + optional: false, + }, + imported: None, + is_type_only: false, }) - ); - } + }), + ); + } // Add utility functions import_declaration.specifiers.extend( @@ -553,7 +558,7 @@ where .yak_library_imports .get_yak_utility_import_declaration(), ); - + break; } } @@ -572,11 +577,10 @@ where for item in module.body.iter_mut() { if let ModuleItem::ModuleDecl(ModuleDecl::Import(import_declaration)) = item { - if import_declaration.src.value == "next-yak/internal" { + if import_declaration.src.value == "next-yak/internal" {} } } - } - + module.body.insert( last_import_index, ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl { diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 572e5772..d1b5a351 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -1,7 +1,7 @@ use itertools::Itertools; use rustc_hash::FxHashMap; -use swc_core::atoms::Atom; use swc_core::atoms::atom; +use swc_core::atoms::Atom; use swc_core::common::util::move_map::MoveMap; use crate::utils::ast_helper::{create_member_prop_from_string, expr_hash_map_to_object}; @@ -292,19 +292,26 @@ impl TransformStyled { fn transform_styled_dot_expression<'a>(&self, expression: Box) -> (Box, Option) { return match *expression.clone() { - Expr::Member(MemberExpr { obj: parent, prop: member, ..}) => { + Expr::Member(MemberExpr { + obj: parent, + prop: member, + .. + }) => { if let Expr::Ident(ident) = *parent { if ident.sym == atom!("styled") { if let MemberProp::Ident(member_ident) = member { let member_name = member_ident.sym.as_str(); let mut new_ident = ident.clone(); new_ident.sym = Atom::new(format!("__yak_{member_name}")); - return (Box::new(Expr::Ident(new_ident.clone())), Some(new_ident.to_id()) ) + return ( + Box::new(Expr::Ident(new_ident.clone())), + Some(new_ident.to_id()), + ); } } } (expression, None) - }, + } Expr::Call(call_expression) => { if let Callee::Expr(callee) = call_expression.callee { if let Expr::Ident(ident) = *callee { @@ -313,10 +320,10 @@ impl TransformStyled { } } } - (expression, None) - }, - _ => (expression, None) - } + (expression, None) + } + _ => (expression, None), + }; } } From db90fc147f97656dde1dad2ff5fc4019f8bfc641 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Mon, 2 Dec 2024 15:44:45 +0100 Subject: [PATCH 14/72] clippy --- packages/yak-swc/yak_swc/src/lib.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index ad2557af..7c963d28 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -524,7 +524,7 @@ where if local.sym == atom!("styled") { return false; } - return true; + true } _ => true, }); From aa8060516be0682fea11161aecce990c0c669b36 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Mon, 2 Dec 2024 15:56:12 +0100 Subject: [PATCH 15/72] update fixtures --- .../__tests__/fixtures/constant/output/index.tsx | 4 ++-- .../__tests__/fixtures/namespaceConstant/output/index.tsx | 4 ++-- .../__tests__/fixtures/nestedMixin/output/icon.tsx | 4 ++-- .../__tests__/fixtures/nestedMixin/output/index.tsx | 4 ++-- .../__tests__/fixtures/sameFileMixin/output/index.tsx | 4 ++-- .../__tests__/fixtures/selector/output/icon.tsx | 6 +++--- .../__tests__/fixtures/selector/output/index.tsx | 4 ++-- .../__tests__/fixtures/staticMixin/output/index.tsx | 4 ++-- .../__tests__/fixtures/yak-file/output/index.tsx | 4 ++-- .../__tests__/fixtures/yakFileMixin/output/index.tsx | 6 +++--- 10 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx index d6ef876c..e9384d08 100644 --- a/packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx @@ -1,4 +1,4 @@ -import { styled, css } from "next-yak/internal"; +import { css, __yak_button } from "next-yak/internal"; import { colors, negative, siteMaxWidth } from "./constants"; import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Button = /*YAK Extracted CSS: @@ -13,7 +13,7 @@ export var Button = /*YAK Extracted CSS: color: --yak-css-import: url("./constants:colors:secondary",mixin); background-color: --yak-css-import: url("./constants:colors:primary",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button, function(param) { +*/ /*#__PURE__*/ __yak_button(__styleYak.Button, function(param) { var $variant = param.$variant; return $variant === "secondary" && /*#__PURE__*/ css(__styleYak.Button__); }); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx index b39e5a0a..a28871a3 100644 --- a/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import { colors } from "./constants"; import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Button = /*YAK Extracted CSS: @@ -6,4 +6,4 @@ export var Button = /*YAK Extracted CSS: color: --yak-css-import: url("./constants:colors:primary",mixin); background-color: --yak-css-import: url("./constants:colors:secondary",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); \ No newline at end of file +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx index 43d5b3ea..5848401b 100644 --- a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_span } from "next-yak/internal"; import __styleYak from "./icon.yak.module.css!=!./icon?./icon.yak.module.css"; export var Icon = /*YAK Extracted CSS: .Icon { @@ -6,4 +6,4 @@ export var Icon = /*YAK Extracted CSS: width: 20px; height: 20px; } -*/ /*#__PURE__*/ styled.span(__styleYak.Icon); \ No newline at end of file +*/ /*#__PURE__*/ __yak_span(__styleYak.Icon); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.tsx index d39f4328..e2d56cff 100644 --- a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button, styled } from "next-yak/internal"; import { buttonMixin } from './mixin'; import { primaryButtonMixin } from './helper/anotherMixin'; import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; @@ -6,7 +6,7 @@ export var Button = /*YAK Extracted CSS: .Button { --yak-css-import: url("./mixin:buttonMixin",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); export var PrimaryButton = /*YAK Extracted CSS: .PrimaryButton { --yak-css-import: url("./helper/anotherMixin:primaryButtonMixin",mixin); diff --git a/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx index 34cc625a..b6d6d353 100644 --- a/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx @@ -1,4 +1,4 @@ -import { styled, css } from "next-yak/internal"; +import { css, __yak_button } from "next-yak/internal"; import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; var buttonTextMixin = /*#__PURE__*/ css(function(param) { var $disabled = param.$disabled; @@ -17,7 +17,7 @@ var Button = /*YAK Extracted CSS: .Button__$disabled-01 { color: gray; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button, function(param) { +*/ /*#__PURE__*/ __yak_button(__styleYak.Button, function(param) { var $disabled = param.$disabled; return $disabled && /*#__PURE__*/ css(__styleYak.Button__$disabled); }, function(param) { diff --git a/packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx b/packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx index 6e4a70a6..2615558c 100644 --- a/packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_svg } from "next-yak/internal"; import __styleYak from "./icon.yak.module.css!=!./icon?./icon.yak.module.css"; -export var Icon = /*#__PURE__*/ styled.svg(); -export var AnyIcon = /*#__PURE__*/ styled.svg(); \ No newline at end of file +export var Icon = /*#__PURE__*/ __yak_svg(); +export var AnyIcon = /*#__PURE__*/ __yak_svg(); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx index 7efb25d5..15971582 100644 --- a/packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import { AnyIcon, Icon } from "./icon"; import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Button = /*YAK Extracted CSS: @@ -10,4 +10,4 @@ export var Button = /*YAK Extracted CSS: margin-right: 15px; } } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); \ No newline at end of file +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.tsx index 17156f92..d1cbf3e7 100644 --- a/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_li } from "next-yak/internal"; import { lastChildMixin } from './mixin'; import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; var ListItem = /*YAK Extracted CSS: @@ -8,5 +8,5 @@ var ListItem = /*YAK Extracted CSS: --yak-css-import: url("./mixin:lastChildMixin",mixin); } } -*/ /*#__PURE__*/ styled.li(__styleYak.ListItem); +*/ /*#__PURE__*/ __yak_li(__styleYak.ListItem); export default ListItem; \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.tsx index 7b9b6fd7..9c2131c9 100644 --- a/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import { siteMaxWidth } from "./constants.yak"; import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Button = /*YAK Extracted CSS: @@ -6,4 +6,4 @@ export var Button = /*YAK Extracted CSS: color: red; height: --yak-css-import: url("./constants.yak:siteMaxWidth",mixin)px; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); \ No newline at end of file +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx index c7e7871d..10480016 100644 --- a/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import { typography } from "./typography.yak"; import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Headline = /*YAK Extracted CSS: @@ -6,10 +6,10 @@ export var Headline = /*YAK Extracted CSS: color: red; --yak-css-import: url("./typography.yak:typography:h1",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Headline); +*/ /*#__PURE__*/ __yak_button(__styleYak.Headline); export var Button = /*YAK Extracted CSS: .Button { color: red; --yak-css-import: url("./typography.yak:typography:h3",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); \ No newline at end of file +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); \ No newline at end of file From ab2b3f98d09a5f433ad7bfc0db857a30582516e7 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Mon, 2 Dec 2024 16:16:34 +0100 Subject: [PATCH 16/72] remove proxy --- packages/next-yak/runtime/styled.tsx | 37 +++++++++++----------------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx index b4214bad..4a0af414 100644 --- a/packages/next-yak/runtime/styled.tsx +++ b/packages/next-yak/runtime/styled.tsx @@ -257,28 +257,21 @@ type StyledLiteral = ( * `; * ``` */ -export const styled = - // The proxy adds the styled.div, styled.button, etc. syntax - new Proxy( - StyledFactory as typeof StyledFactory & { - [Tag in HtmlTags]: StyledLiteral & { - attrs: < - TAttrsIn extends object = {}, - TAttrsOut extends AttrsMerged< - JSX.IntrinsicElements[Tag], - TAttrsIn - > = AttrsMerged, - >( - attrs: Attrs, - ) => StyledLiteral>; - }; - }, - { - get(target, TagName: keyof JSX.IntrinsicElements) { - return target(TagName); - }, - }, - ); +export const styled = StyledFactory as + // this type is wrong - but it will work correctly with compiled code + typeof StyledFactory & { + [Tag in HtmlTags]: StyledLiteral & { + attrs: < + TAttrsIn extends object = {}, + TAttrsOut extends AttrsMerged< + JSX.IntrinsicElements[Tag], + TAttrsIn + > = AttrsMerged, + >( + attrs: Attrs, + ) => StyledLiteral>; + }; + }; /** * Remove all entries that start with a $ sign From 704bfbcb173b73621da56835978b43f2b55658cc Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 2 Dec 2024 15:17:36 +0000 Subject: [PATCH 17/72] [autofix.ci] apply automated fixes --- packages/next-yak/runtime/styled.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx index 4a0af414..fdc823d0 100644 --- a/packages/next-yak/runtime/styled.tsx +++ b/packages/next-yak/runtime/styled.tsx @@ -257,8 +257,8 @@ type StyledLiteral = ( * `; * ``` */ -export const styled = StyledFactory as - // this type is wrong - but it will work correctly with compiled code +export const styled = + StyledFactory as // this type is wrong - but it will work correctly with compiled code typeof StyledFactory & { [Tag in HtmlTags]: StyledLiteral & { attrs: < From fedef275cc80586723a4e0f01e4b252ba4067463 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 2 Dec 2024 15:18:55 +0000 Subject: [PATCH 18/72] [autofix.ci] apply automated fixes (attempt 2/3) --- packages/next-yak/runtime/styled.tsx | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx index fdc823d0..c0d86c37 100644 --- a/packages/next-yak/runtime/styled.tsx +++ b/packages/next-yak/runtime/styled.tsx @@ -257,21 +257,19 @@ type StyledLiteral = ( * `; * ``` */ -export const styled = - StyledFactory as // this type is wrong - but it will work correctly with compiled code - typeof StyledFactory & { - [Tag in HtmlTags]: StyledLiteral & { - attrs: < - TAttrsIn extends object = {}, - TAttrsOut extends AttrsMerged< - JSX.IntrinsicElements[Tag], - TAttrsIn - > = AttrsMerged, - >( - attrs: Attrs, - ) => StyledLiteral>; - }; +export const styled = StyledFactory as typeof StyledFactory & { // this type is wrong - but it will work correctly with compiled code + [Tag in HtmlTags]: StyledLiteral & { + attrs: < + TAttrsIn extends object = {}, + TAttrsOut extends AttrsMerged< + JSX.IntrinsicElements[Tag], + TAttrsIn + > = AttrsMerged, + >( + attrs: Attrs, + ) => StyledLiteral>; }; +}; /** * Remove all entries that start with a $ sign From 1794d3c8246a5d6abf54c601a5131615964a414d Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 2 Dec 2024 15:19:40 +0000 Subject: [PATCH 19/72] [autofix.ci] apply automated fixes (attempt 3/3) --- packages/next-yak/runtime/styled.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx index c0d86c37..0d14cc27 100644 --- a/packages/next-yak/runtime/styled.tsx +++ b/packages/next-yak/runtime/styled.tsx @@ -257,7 +257,8 @@ type StyledLiteral = ( * `; * ``` */ -export const styled = StyledFactory as typeof StyledFactory & { // this type is wrong - but it will work correctly with compiled code +export const styled = StyledFactory as typeof StyledFactory & { + // this type is wrong - but it will work correctly with compiled code [Tag in HtmlTags]: StyledLiteral & { attrs: < TAttrsIn extends object = {}, From 104517ffe41958712aa76a1c911e35d2d1c18d13 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Mon, 2 Dec 2024 16:22:15 +0100 Subject: [PATCH 20/72] use styled directly --- packages/next-yak/runtime/styled.tsx | 27 +-- packages/next-yak/runtime/styledDom.tsx | 268 ++++++++++++------------ 2 files changed, 148 insertions(+), 147 deletions(-) diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx index 0d14cc27..35784417 100644 --- a/packages/next-yak/runtime/styled.tsx +++ b/packages/next-yak/runtime/styled.tsx @@ -82,7 +82,7 @@ type Attrs< // https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx // https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts // -export const StyledFactory = (Component: HtmlTags | FunctionComponent) => +const StyledFactory = (Component: HtmlTags | FunctionComponent) => Object.assign(yakStyled(Component), { attrs: < TAttrsIn extends object = {}, @@ -257,20 +257,21 @@ type StyledLiteral = ( * `; * ``` */ -export const styled = StyledFactory as typeof StyledFactory & { +export const styled = // this type is wrong - but it will work correctly with compiled code - [Tag in HtmlTags]: StyledLiteral & { - attrs: < - TAttrsIn extends object = {}, - TAttrsOut extends AttrsMerged< - JSX.IntrinsicElements[Tag], - TAttrsIn - > = AttrsMerged, - >( - attrs: Attrs, - ) => StyledLiteral>; + StyledFactory as typeof StyledFactory & { + [Tag in HtmlTags]: StyledLiteral & { + attrs: < + TAttrsIn extends object = {}, + TAttrsOut extends AttrsMerged< + JSX.IntrinsicElements[Tag], + TAttrsIn + > = AttrsMerged, + >( + attrs: Attrs + ) => StyledLiteral>; + }; }; -}; /** * Remove all entries that start with a $ sign diff --git a/packages/next-yak/runtime/styledDom.tsx b/packages/next-yak/runtime/styledDom.tsx index 95765b99..095fa854 100644 --- a/packages/next-yak/runtime/styledDom.tsx +++ b/packages/next-yak/runtime/styledDom.tsx @@ -1,141 +1,141 @@ -import { StyledFactory } from "./styled.js"; +import { styled } from "./styled.js"; /// Internal API to create styled components /// Optimization for faster rendering and smaller bundle size in production /// thanks to better minification and dead code elimination /// /// List taken from https://github.com/styled-components/styled-components/blob/e0019ba666fab4b5aaa2bff71ba6ad0005a299fd/packages/styled-components/src/utils/domElements.ts#L90 -export const __yak_a = /*#__PURE__*/ StyledFactory("a"); -export const __yak_abbr = /*#__PURE__*/ StyledFactory("abbr"); -export const __yak_address = /*#__PURE__*/ StyledFactory("address"); -export const __yak_area = /*#__PURE__*/ StyledFactory("area"); -export const __yak_article = /*#__PURE__*/ StyledFactory("article"); -export const __yak_aside = /*#__PURE__*/ StyledFactory("aside"); -export const __yak_audio = /*#__PURE__*/ StyledFactory("audio"); -export const __yak_b = /*#__PURE__*/ StyledFactory("b"); -export const __yak_base = /*#__PURE__*/ StyledFactory("base"); -export const __yak_bdi = /*#__PURE__*/ StyledFactory("bdi"); -export const __yak_bdo = /*#__PURE__*/ StyledFactory("bdo"); -export const __yak_big = /*#__PURE__*/ StyledFactory("big"); -export const __yak_blockquote = /*#__PURE__*/ StyledFactory("blockquote"); -export const __yak_body = /*#__PURE__*/ StyledFactory("body"); -export const __yak_br = /*#__PURE__*/ StyledFactory("br"); -export const __yak_button = /*#__PURE__*/ StyledFactory("button"); -export const __yak_canvas = /*#__PURE__*/ StyledFactory("canvas"); -export const __yak_caption = /*#__PURE__*/ StyledFactory("caption"); -export const __yak_cite = /*#__PURE__*/ StyledFactory("cite"); -export const __yak_code = /*#__PURE__*/ StyledFactory("code"); -export const __yak_col = /*#__PURE__*/ StyledFactory("col"); -export const __yak_colgroup = /*#__PURE__*/ StyledFactory("colgroup"); -export const __yak_data = /*#__PURE__*/ StyledFactory("data"); -export const __yak_datalist = /*#__PURE__*/ StyledFactory("datalist"); -export const __yak_dd = /*#__PURE__*/ StyledFactory("dd"); -export const __yak_del = /*#__PURE__*/ StyledFactory("del"); -export const __yak_details = /*#__PURE__*/ StyledFactory("details"); -export const __yak_dfn = /*#__PURE__*/ StyledFactory("dfn"); -export const __yak_dialog = /*#__PURE__*/ StyledFactory("dialog"); -export const __yak_div = /*#__PURE__*/ StyledFactory("div"); -export const __yak_dl = /*#__PURE__*/ StyledFactory("dl"); -export const __yak_dt = /*#__PURE__*/ StyledFactory("dt"); -export const __yak_em = /*#__PURE__*/ StyledFactory("em"); -export const __yak_embed = /*#__PURE__*/ StyledFactory("embed"); -export const __yak_fieldset = /*#__PURE__*/ StyledFactory("fieldset"); -export const __yak_figcaption = /*#__PURE__*/ StyledFactory("figcaption"); -export const __yak_figure = /*#__PURE__*/ StyledFactory("figure"); -export const __yak_footer = /*#__PURE__*/ StyledFactory("footer"); -export const __yak_form = /*#__PURE__*/ StyledFactory("form"); -export const __yak_h1 = /*#__PURE__*/ StyledFactory("h1"); -export const __yak_h2 = /*#__PURE__*/ StyledFactory("h2"); -export const __yak_h3 = /*#__PURE__*/ StyledFactory("h3"); -export const __yak_h4 = /*#__PURE__*/ StyledFactory("h4"); -export const __yak_h5 = /*#__PURE__*/ StyledFactory("h5"); -export const __yak_h6 = /*#__PURE__*/ StyledFactory("h6"); -export const __yak_header = /*#__PURE__*/ StyledFactory("header"); -export const __yak_hgroup = /*#__PURE__*/ StyledFactory("hgroup"); -export const __yak_hr = /*#__PURE__*/ StyledFactory("hr"); -export const __yak_html = /*#__PURE__*/ StyledFactory("html"); -export const __yak_i = /*#__PURE__*/ StyledFactory("i"); -export const __yak_iframe = /*#__PURE__*/ StyledFactory("iframe"); -export const __yak_img = /*#__PURE__*/ StyledFactory("img"); -export const __yak_input = /*#__PURE__*/ StyledFactory("input"); -export const __yak_ins = /*#__PURE__*/ StyledFactory("ins"); -export const __yak_kbd = /*#__PURE__*/ StyledFactory("kbd"); -export const __yak_keygen = /*#__PURE__*/ StyledFactory("keygen"); -export const __yak_label = /*#__PURE__*/ StyledFactory("label"); -export const __yak_legend = /*#__PURE__*/ StyledFactory("legend"); -export const __yak_li = /*#__PURE__*/ StyledFactory("li"); -export const __yak_link = /*#__PURE__*/ StyledFactory("link"); -export const __yak_main = /*#__PURE__*/ StyledFactory("main"); -export const __yak_map = /*#__PURE__*/ StyledFactory("map"); -export const __yak_mark = /*#__PURE__*/ StyledFactory("mark"); -export const __yak_menu = /*#__PURE__*/ StyledFactory("menu"); -export const __yak_menuitem = /*#__PURE__*/ StyledFactory("menuitem"); -export const __yak_meta = /*#__PURE__*/ StyledFactory("meta"); -export const __yak_meter = /*#__PURE__*/ StyledFactory("meter"); -export const __yak_nav = /*#__PURE__*/ StyledFactory("nav"); -export const __yak_noscript = /*#__PURE__*/ StyledFactory("noscript"); -export const __yak_object = /*#__PURE__*/ StyledFactory("object"); -export const __yak_ol = /*#__PURE__*/ StyledFactory("ol"); -export const __yak_optgroup = /*#__PURE__*/ StyledFactory("optgroup"); -export const __yak_option = /*#__PURE__*/ StyledFactory("option"); -export const __yak_output = /*#__PURE__*/ StyledFactory("output"); -export const __yak_p = /*#__PURE__*/ StyledFactory("p"); -export const __yak_param = /*#__PURE__*/ StyledFactory("param"); -export const __yak_picture = /*#__PURE__*/ StyledFactory("picture"); -export const __yak_pre = /*#__PURE__*/ StyledFactory("pre"); -export const __yak_progress = /*#__PURE__*/ StyledFactory("progress"); -export const __yak_q = /*#__PURE__*/ StyledFactory("q"); -export const __yak_rp = /*#__PURE__*/ StyledFactory("rp"); -export const __yak_rt = /*#__PURE__*/ StyledFactory("rt"); -export const __yak_ruby = /*#__PURE__*/ StyledFactory("ruby"); -export const __yak_s = /*#__PURE__*/ StyledFactory("s"); -export const __yak_samp = /*#__PURE__*/ StyledFactory("samp"); -export const __yak_script = /*#__PURE__*/ StyledFactory("script"); -export const __yak_section = /*#__PURE__*/ StyledFactory("section"); -export const __yak_select = /*#__PURE__*/ StyledFactory("select"); -export const __yak_small = /*#__PURE__*/ StyledFactory("small"); -export const __yak_source = /*#__PURE__*/ StyledFactory("source"); -export const __yak_span = /*#__PURE__*/ StyledFactory("span"); -export const __yak_strong = /*#__PURE__*/ StyledFactory("strong"); -export const __yak_style = /*#__PURE__*/ StyledFactory("style"); -export const __yak_sub = /*#__PURE__*/ StyledFactory("sub"); -export const __yak_summary = /*#__PURE__*/ StyledFactory("summary"); -export const __yak_sup = /*#__PURE__*/ StyledFactory("sup"); -export const __yak_table = /*#__PURE__*/ StyledFactory("table"); -export const __yak_tbody = /*#__PURE__*/ StyledFactory("tbody"); -export const __yak_td = /*#__PURE__*/ StyledFactory("td"); -export const __yak_textarea = /*#__PURE__*/ StyledFactory("textarea"); -export const __yak_tfoot = /*#__PURE__*/ StyledFactory("tfoot"); -export const __yak_th = /*#__PURE__*/ StyledFactory("th"); -export const __yak_thead = /*#__PURE__*/ StyledFactory("thead"); -export const __yak_time = /*#__PURE__*/ StyledFactory("time"); -export const __yak_tr = /*#__PURE__*/ StyledFactory("tr"); -export const __yak_track = /*#__PURE__*/ StyledFactory("track"); -export const __yak_u = /*#__PURE__*/ StyledFactory("u"); -export const __yak_ul = /*#__PURE__*/ StyledFactory("ul"); -export const __yak_use = /*#__PURE__*/ StyledFactory("use"); -export const __yak_var = /*#__PURE__*/ StyledFactory("var"); -export const __yak_video = /*#__PURE__*/ StyledFactory("video"); -export const __yak_wbr = /*#__PURE__*/ StyledFactory("wbr"); -export const __yak_circle = /*#__PURE__*/ StyledFactory("circle"); -export const __yak_clipPath = /*#__PURE__*/ StyledFactory("clipPath"); -export const __yak_defs = /*#__PURE__*/ StyledFactory("defs"); -export const __yak_ellipse = /*#__PURE__*/ StyledFactory("ellipse"); -export const __yak_foreignObject = /*#__PURE__*/ StyledFactory("foreignObject"); -export const __yak_g = /*#__PURE__*/ StyledFactory("g"); -export const __yak_image = /*#__PURE__*/ StyledFactory("image"); -export const __yak_line = /*#__PURE__*/ StyledFactory("line"); +export const __yak_a = /*#__PURE__*/ styled("a"); +export const __yak_abbr = /*#__PURE__*/ styled("abbr"); +export const __yak_address = /*#__PURE__*/ styled("address"); +export const __yak_area = /*#__PURE__*/ styled("area"); +export const __yak_article = /*#__PURE__*/ styled("article"); +export const __yak_aside = /*#__PURE__*/ styled("aside"); +export const __yak_audio = /*#__PURE__*/ styled("audio"); +export const __yak_b = /*#__PURE__*/ styled("b"); +export const __yak_base = /*#__PURE__*/ styled("base"); +export const __yak_bdi = /*#__PURE__*/ styled("bdi"); +export const __yak_bdo = /*#__PURE__*/ styled("bdo"); +export const __yak_big = /*#__PURE__*/ styled("big"); +export const __yak_blockquote = /*#__PURE__*/ styled("blockquote"); +export const __yak_body = /*#__PURE__*/ styled("body"); +export const __yak_br = /*#__PURE__*/ styled("br"); +export const __yak_button = /*#__PURE__*/ styled("button"); +export const __yak_canvas = /*#__PURE__*/ styled("canvas"); +export const __yak_caption = /*#__PURE__*/ styled("caption"); +export const __yak_cite = /*#__PURE__*/ styled("cite"); +export const __yak_code = /*#__PURE__*/ styled("code"); +export const __yak_col = /*#__PURE__*/ styled("col"); +export const __yak_colgroup = /*#__PURE__*/ styled("colgroup"); +export const __yak_data = /*#__PURE__*/ styled("data"); +export const __yak_datalist = /*#__PURE__*/ styled("datalist"); +export const __yak_dd = /*#__PURE__*/ styled("dd"); +export const __yak_del = /*#__PURE__*/ styled("del"); +export const __yak_details = /*#__PURE__*/ styled("details"); +export const __yak_dfn = /*#__PURE__*/ styled("dfn"); +export const __yak_dialog = /*#__PURE__*/ styled("dialog"); +export const __yak_div = /*#__PURE__*/ styled("div"); +export const __yak_dl = /*#__PURE__*/ styled("dl"); +export const __yak_dt = /*#__PURE__*/ styled("dt"); +export const __yak_em = /*#__PURE__*/ styled("em"); +export const __yak_embed = /*#__PURE__*/ styled("embed"); +export const __yak_fieldset = /*#__PURE__*/ styled("fieldset"); +export const __yak_figcaption = /*#__PURE__*/ styled("figcaption"); +export const __yak_figure = /*#__PURE__*/ styled("figure"); +export const __yak_footer = /*#__PURE__*/ styled("footer"); +export const __yak_form = /*#__PURE__*/ styled("form"); +export const __yak_h1 = /*#__PURE__*/ styled("h1"); +export const __yak_h2 = /*#__PURE__*/ styled("h2"); +export const __yak_h3 = /*#__PURE__*/ styled("h3"); +export const __yak_h4 = /*#__PURE__*/ styled("h4"); +export const __yak_h5 = /*#__PURE__*/ styled("h5"); +export const __yak_h6 = /*#__PURE__*/ styled("h6"); +export const __yak_header = /*#__PURE__*/ styled("header"); +export const __yak_hgroup = /*#__PURE__*/ styled("hgroup"); +export const __yak_hr = /*#__PURE__*/ styled("hr"); +export const __yak_html = /*#__PURE__*/ styled("html"); +export const __yak_i = /*#__PURE__*/ styled("i"); +export const __yak_iframe = /*#__PURE__*/ styled("iframe"); +export const __yak_img = /*#__PURE__*/ styled("img"); +export const __yak_input = /*#__PURE__*/ styled("input"); +export const __yak_ins = /*#__PURE__*/ styled("ins"); +export const __yak_kbd = /*#__PURE__*/ styled("kbd"); +export const __yak_keygen = /*#__PURE__*/ styled("keygen"); +export const __yak_label = /*#__PURE__*/ styled("label"); +export const __yak_legend = /*#__PURE__*/ styled("legend"); +export const __yak_li = /*#__PURE__*/ styled("li"); +export const __yak_link = /*#__PURE__*/ styled("link"); +export const __yak_main = /*#__PURE__*/ styled("main"); +export const __yak_map = /*#__PURE__*/ styled("map"); +export const __yak_mark = /*#__PURE__*/ styled("mark"); +export const __yak_menu = /*#__PURE__*/ styled("menu"); +export const __yak_menuitem = /*#__PURE__*/ styled("menuitem"); +export const __yak_meta = /*#__PURE__*/ styled("meta"); +export const __yak_meter = /*#__PURE__*/ styled("meter"); +export const __yak_nav = /*#__PURE__*/ styled("nav"); +export const __yak_noscript = /*#__PURE__*/ styled("noscript"); +export const __yak_object = /*#__PURE__*/ styled("object"); +export const __yak_ol = /*#__PURE__*/ styled("ol"); +export const __yak_optgroup = /*#__PURE__*/ styled("optgroup"); +export const __yak_option = /*#__PURE__*/ styled("option"); +export const __yak_output = /*#__PURE__*/ styled("output"); +export const __yak_p = /*#__PURE__*/ styled("p"); +export const __yak_param = /*#__PURE__*/ styled("param"); +export const __yak_picture = /*#__PURE__*/ styled("picture"); +export const __yak_pre = /*#__PURE__*/ styled("pre"); +export const __yak_progress = /*#__PURE__*/ styled("progress"); +export const __yak_q = /*#__PURE__*/ styled("q"); +export const __yak_rp = /*#__PURE__*/ styled("rp"); +export const __yak_rt = /*#__PURE__*/ styled("rt"); +export const __yak_ruby = /*#__PURE__*/ styled("ruby"); +export const __yak_s = /*#__PURE__*/ styled("s"); +export const __yak_samp = /*#__PURE__*/ styled("samp"); +export const __yak_script = /*#__PURE__*/ styled("script"); +export const __yak_section = /*#__PURE__*/ styled("section"); +export const __yak_select = /*#__PURE__*/ styled("select"); +export const __yak_small = /*#__PURE__*/ styled("small"); +export const __yak_source = /*#__PURE__*/ styled("source"); +export const __yak_span = /*#__PURE__*/ styled("span"); +export const __yak_strong = /*#__PURE__*/ styled("strong"); +export const __yak_style = /*#__PURE__*/ styled("style"); +export const __yak_sub = /*#__PURE__*/ styled("sub"); +export const __yak_summary = /*#__PURE__*/ styled("summary"); +export const __yak_sup = /*#__PURE__*/ styled("sup"); +export const __yak_table = /*#__PURE__*/ styled("table"); +export const __yak_tbody = /*#__PURE__*/ styled("tbody"); +export const __yak_td = /*#__PURE__*/ styled("td"); +export const __yak_textarea = /*#__PURE__*/ styled("textarea"); +export const __yak_tfoot = /*#__PURE__*/ styled("tfoot"); +export const __yak_th = /*#__PURE__*/ styled("th"); +export const __yak_thead = /*#__PURE__*/ styled("thead"); +export const __yak_time = /*#__PURE__*/ styled("time"); +export const __yak_tr = /*#__PURE__*/ styled("tr"); +export const __yak_track = /*#__PURE__*/ styled("track"); +export const __yak_u = /*#__PURE__*/ styled("u"); +export const __yak_ul = /*#__PURE__*/ styled("ul"); +export const __yak_use = /*#__PURE__*/ styled("use"); +export const __yak_var = /*#__PURE__*/ styled("var"); +export const __yak_video = /*#__PURE__*/ styled("video"); +export const __yak_wbr = /*#__PURE__*/ styled("wbr"); +export const __yak_circle = /*#__PURE__*/ styled("circle"); +export const __yak_clipPath = /*#__PURE__*/ styled("clipPath"); +export const __yak_defs = /*#__PURE__*/ styled("defs"); +export const __yak_ellipse = /*#__PURE__*/ styled("ellipse"); +export const __yak_foreignObject = /*#__PURE__*/ styled("foreignObject"); +export const __yak_g = /*#__PURE__*/ styled("g"); +export const __yak_image = /*#__PURE__*/ styled("image"); +export const __yak_line = /*#__PURE__*/ styled("line"); export const __yak_linearGradient = - /*#__PURE__*/ StyledFactory("linearGradient"); -export const __yak_marker = /*#__PURE__*/ StyledFactory("marker"); -export const __yak_mask = /*#__PURE__*/ StyledFactory("mask"); -export const __yak_path = /*#__PURE__*/ StyledFactory("path"); -export const __yak_pattern = /*#__PURE__*/ StyledFactory("pattern"); -export const __yak_polygon = /*#__PURE__*/ StyledFactory("polygon"); -export const __yak_polyline = /*#__PURE__*/ StyledFactory("polyline"); + /*#__PURE__*/ styled("linearGradient"); +export const __yak_marker = /*#__PURE__*/ styled("marker"); +export const __yak_mask = /*#__PURE__*/ styled("mask"); +export const __yak_path = /*#__PURE__*/ styled("path"); +export const __yak_pattern = /*#__PURE__*/ styled("pattern"); +export const __yak_polygon = /*#__PURE__*/ styled("polygon"); +export const __yak_polyline = /*#__PURE__*/ styled("polyline"); export const __yak_radialGradient = - /*#__PURE__*/ StyledFactory("radialGradient"); -export const __yak_rect = /*#__PURE__*/ StyledFactory("rect"); -export const __yak_stop = /*#__PURE__*/ StyledFactory("stop"); -export const __yak_svg = /*#__PURE__*/ StyledFactory("svg"); -export const __yak_text = /*#__PURE__*/ StyledFactory("text"); -export const __yak_tspan = /*#__PURE__*/ StyledFactory("tspan"); + /*#__PURE__*/ styled("radialGradient"); +export const __yak_rect = /*#__PURE__*/ styled("rect"); +export const __yak_stop = /*#__PURE__*/ styled("stop"); +export const __yak_svg = /*#__PURE__*/ styled("svg"); +export const __yak_text = /*#__PURE__*/ styled("text"); +export const __yak_tspan = /*#__PURE__*/ styled("tspan"); From f5b49abc8f1b090b3c0e3a962fabeb6fb34efdf3 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 2 Dec 2024 15:23:56 +0000 Subject: [PATCH 21/72] [autofix.ci] apply automated fixes --- packages/next-yak/runtime/styled.tsx | 2 +- packages/next-yak/runtime/styledDom.tsx | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx index 35784417..243c99d0 100644 --- a/packages/next-yak/runtime/styled.tsx +++ b/packages/next-yak/runtime/styled.tsx @@ -268,7 +268,7 @@ export const styled = TAttrsIn > = AttrsMerged, >( - attrs: Attrs + attrs: Attrs, ) => StyledLiteral>; }; }; diff --git a/packages/next-yak/runtime/styledDom.tsx b/packages/next-yak/runtime/styledDom.tsx index 095fa854..db3524cc 100644 --- a/packages/next-yak/runtime/styledDom.tsx +++ b/packages/next-yak/runtime/styledDom.tsx @@ -124,16 +124,14 @@ export const __yak_foreignObject = /*#__PURE__*/ styled("foreignObject"); export const __yak_g = /*#__PURE__*/ styled("g"); export const __yak_image = /*#__PURE__*/ styled("image"); export const __yak_line = /*#__PURE__*/ styled("line"); -export const __yak_linearGradient = - /*#__PURE__*/ styled("linearGradient"); +export const __yak_linearGradient = /*#__PURE__*/ styled("linearGradient"); export const __yak_marker = /*#__PURE__*/ styled("marker"); export const __yak_mask = /*#__PURE__*/ styled("mask"); export const __yak_path = /*#__PURE__*/ styled("path"); export const __yak_pattern = /*#__PURE__*/ styled("pattern"); export const __yak_polygon = /*#__PURE__*/ styled("polygon"); export const __yak_polyline = /*#__PURE__*/ styled("polyline"); -export const __yak_radialGradient = - /*#__PURE__*/ styled("radialGradient"); +export const __yak_radialGradient = /*#__PURE__*/ styled("radialGradient"); export const __yak_rect = /*#__PURE__*/ styled("rect"); export const __yak_stop = /*#__PURE__*/ styled("stop"); export const __yak_svg = /*#__PURE__*/ styled("svg"); From d5f216a4355a0cb44de167085b1c126f00c18ed1 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Mon, 2 Dec 2024 16:25:52 +0100 Subject: [PATCH 22/72] changeset --- .changeset/three-bikes-sit.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/three-bikes-sit.md diff --git a/.changeset/three-bikes-sit.md b/.changeset/three-bikes-sit.md new file mode 100644 index 00000000..0c8caacf --- /dev/null +++ b/.changeset/three-bikes-sit.md @@ -0,0 +1,6 @@ +--- +"next-yak": minor +"yak-swc": minor +--- + +compile styled.TAG_NAME for better runtime performance From 409ccc22152416b0ca52e9e9ea857ee86b73b4ba Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Mon, 2 Dec 2024 23:58:15 +0900 Subject: [PATCH 23/72] simplify matches --- .../yak-swc/yak_swc/src/yak_transforms.rs | 28 ++++++++----------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index d1b5a351..a9e53ded 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -290,16 +290,12 @@ impl TransformStyled { TransformStyled { class_name: None } } - fn transform_styled_dot_expression<'a>(&self, expression: Box) -> (Box, Option) { - return match *expression.clone() { - Expr::Member(MemberExpr { - obj: parent, - prop: member, - .. - }) => { - if let Expr::Ident(ident) = *parent { + fn transform_styled_usages(&self, expression: Box) -> (Box, Option) { + match *expression.clone() { + Expr::Member(member) => { + if let Expr::Ident(ident) = *member.obj { if ident.sym == atom!("styled") { - if let MemberProp::Ident(member_ident) = member { + if let MemberProp::Ident(member_ident) = member.prop { let member_name = member_ident.sym.as_str(); let mut new_ident = ident.clone(); new_ident.sym = Atom::new(format!("__yak_{member_name}")); @@ -312,18 +308,16 @@ impl TransformStyled { } (expression, None) } - Expr::Call(call_expression) => { - if let Callee::Expr(callee) = call_expression.callee { - if let Expr::Ident(ident) = *callee { - if ident.sym == atom!("styled") { - return (expression, Some(ident.to_id())); - } + Expr::Call(CallExpr { callee: Callee::Expr(callee), ..}) => { + if let Expr::Ident(ident) = *callee { + if ident.sym == atom!("styled") { + return (expression, Some(ident.to_id())); } } (expression, None) } _ => (expression, None), - }; + } } } @@ -373,7 +367,7 @@ impl YakTransform for TransformStyled { .into(), ); } - let (tag_expression, ident) = self.transform_styled_dot_expression(expression.tag.clone()); + let (tag_expression, ident) = self.transform_styled_usages(expression.tag.clone()); YakTransformResult { css: YakCss { comment_prefix: Some("YAK Extracted CSS:".to_string()), From 025821431af4ee5e172f8aa7dfa995bc865cfce0 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Tue, 3 Dec 2024 00:03:48 +0900 Subject: [PATCH 24/72] Cleanup --- packages/yak-swc/yak_swc/src/lib.rs | 9 ++------- packages/yak-swc/yak_swc/src/yak_transforms.rs | 2 +- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index 9d8f4a0e..3196caab 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -527,16 +527,11 @@ where import_declaration .specifiers .retain(|import_specifier| match import_specifier { - ImportSpecifier::Named(ImportNamedSpecifier { local, .. }) => { - if local.sym == atom!("styled") { - return false; - } - true + ImportSpecifier::Named(ImportNamedSpecifier { local: Ident { sym, ..}, .. }) => { + *sym != atom!("styled") } _ => true, }); - let asdf = self.yak_transformed_library_imports.clone(); - dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©set contains: {asdf:?}")); //Add all transformed imports import_declaration.specifiers.extend( self diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index a9e53ded..e7406ac7 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -30,7 +30,7 @@ pub struct YakTransformResult { } pub trait YakTransform { - /// Create a CSS Scope\xΒ§ + /// Create a CSS Scope\ /// This CSS Scope will surround the entire CSS for this literal\ /// e.g. const myMixin = css`...` -> .myMixin { ... } fn create_css_state( From d446d4dbeefda52731f2ea8e9c150b974c0de93b Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Tue, 3 Dec 2024 00:58:03 +0900 Subject: [PATCH 25/72] add test to handle unknown elements --- .../fixture/transform-only-known-elements/input.tsx | 9 +++++++++ .../fixture/transform-only-known-elements/output.tsx | 12 ++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/input.tsx create mode 100644 packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/input.tsx new file mode 100644 index 00000000..03fd12c4 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/input.tsx @@ -0,0 +1,9 @@ +import { styled } from "next-yak"; + +export const Button = styled.button` + background-color: #007bff; +`; + +export const CustomElement = styled.unknown` + margin-bottom: 23px; +` diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.tsx new file mode 100644 index 00000000..8df84ab3 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.tsx @@ -0,0 +1,12 @@ +import { __yak_button, styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; +} +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); +export const CustomElement = /*YAK Extracted CSS: +.CustomElement { + margin-bottom: 23px; +} +*/ /*#__PURE__*/ styled("unknown")(__styleYak.CustomElement); From becf291dd9a8b319e37c87adadfb369b15b75af5 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Tue, 3 Dec 2024 00:58:50 +0900 Subject: [PATCH 26/72] transform only known elements to explicit yak import --- packages/yak-swc/yak_swc/src/lib.rs | 1 + .../yak_swc/src/utils/native_elements.rs | 139 ++++++++++++++++++ .../yak-swc/yak_swc/src/yak_transforms.rs | 31 +++- 3 files changed, 165 insertions(+), 6 deletions(-) create mode 100644 packages/yak-swc/yak_swc/src/utils/native_elements.rs diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index 3196caab..f7d7753f 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -36,6 +36,7 @@ mod utils { pub(crate) mod css_hash; pub(crate) mod css_prop; pub(crate) mod encode_module_import; + pub(crate) mod native_elements; } mod naming_convention; use naming_convention::NamingConvention; diff --git a/packages/yak-swc/yak_swc/src/utils/native_elements.rs b/packages/yak-swc/yak_swc/src/utils/native_elements.rs new file mode 100644 index 00000000..03972a52 --- /dev/null +++ b/packages/yak-swc/yak_swc/src/utils/native_elements.rs @@ -0,0 +1,139 @@ +use lazy_static::lazy_static; +use rustc_hash::FxHashSet; + +lazy_static! { + pub static ref VALID_ELEMENTS: FxHashSet = FxHashSet::from_iter(vec![ + "a", +"abbr", +"address", +"area", +"article", +"aside", +"audio", +"b", +"base", +"bdi", +"bdo", +"big", +"blockquote", +"body", +"br", +"button", +"canvas", +"caption", +"cite", +"code", +"col", +"colgroup", +"data", +"datalist", +"dd", +"del", +"details", +"dfn", +"dialog", +"div", +"dl", +"dt", +"em", +"embed", +"fieldset", +"figcaption", +"figure", +"footer", +"form", +"h1", +"h2", +"h3", +"h4", +"h5", +"h6", +"header", +"hgroup", +"hr", +"html", +"i", +"iframe", +"img", +"input", +"ins", +"kbd", +"keygen", +"label", +"legend", +"li", +"link", +"main", +"map", +"mark", +"menu", +"menuitem", +"meta", +"meter", +"nav", +"noscript", +"object", +"ol", +"optgroup", +"option", +"output", +"p", +"param", +"picture", +"pre", +"progress", +"q", +"rp", +"rt", +"ruby", +"s", +"samp", +"script", +"section", +"select", +"small", +"source", +"span", +"strong", +"style", +"sub", +"summary", +"sup", +"table", +"tbody", +"td", +"textarea", +"tfoot", +"th", +"thead", +"time", +"tr", +"track", +"u", +"ul", +"use", +"var", +"video", +"wbr", +"circle", +"clipPath", +"defs", +"ellipse", +"foreignObject", +"g", +"image", +"line", +"linearGradient", +"marker", +"mask", +"path", +"pattern", +"polygon", +"polyline", +"radialGradient", +"rect", +"stop", +"svg", +"text", +"tspan"].into_iter().map(|s| s.to_string())); + } diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index e7406ac7..2de06eb5 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -6,6 +6,7 @@ use swc_core::common::util::move_map::MoveMap; use crate::utils::ast_helper::{create_member_prop_from_string, expr_hash_map_to_object}; use crate::utils::encode_module_import::encode_percent; +use crate::utils::native_elements::VALID_ELEMENTS; use crate::variable_visitor::ScopedVariableReference; use css_in_js_parser::{CssScope, Declaration, ParserState, ScopeType}; use swc_core::common::{Span, SyntaxContext, DUMMY_SP}; @@ -297,17 +298,35 @@ impl TransformStyled { if ident.sym == atom!("styled") { if let MemberProp::Ident(member_ident) = member.prop { let member_name = member_ident.sym.as_str(); - let mut new_ident = ident.clone(); - new_ident.sym = Atom::new(format!("__yak_{member_name}")); - return ( - Box::new(Expr::Ident(new_ident.clone())), - Some(new_ident.to_id()), - ); + return if VALID_ELEMENTS.contains(member_name) { + let mut new_ident = ident.clone(); + new_ident.sym = Atom::new(format!("__yak_{member_name}")); + ( + Box::new(Expr::Ident(new_ident.clone())), + Some(new_ident.to_id()), + ) + } else { + (Box::new(Expr::Call(CallExpr { + span: member.span, + ctxt: SyntaxContext::empty(), + callee: Callee::Expr(Box::new(Expr::Ident(ident.clone()))), + args: vec![ExprOrSpread::from(Box::new(Expr::Ident(Ident{ + sym: Atom::new(member_name), + span: DUMMY_SP, + ctxt: SyntaxContext::empty(), + optional: false + })))], + type_args: None, + })), Some(ident.to_id())) + } + } } } (expression, None) } + // styled.button.attrs({}) is a call expression and should be tranformed + // to __yak_button.attrs Expr::Call(CallExpr { callee: Callee::Expr(callee), ..}) => { if let Expr::Ident(ident) = *callee { if ident.sym == atom!("styled") { From 839297b588a85b484faceda51db82429aa3126ef Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Tue, 3 Dec 2024 01:06:44 +0900 Subject: [PATCH 27/72] call styled with string literal of the unknown elements --- packages/yak-swc/yak_swc/src/yak_transforms.rs | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 2de06eb5..6e798743 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -310,12 +310,12 @@ impl TransformStyled { span: member.span, ctxt: SyntaxContext::empty(), callee: Callee::Expr(Box::new(Expr::Ident(ident.clone()))), - args: vec![ExprOrSpread::from(Box::new(Expr::Ident(Ident{ - sym: Atom::new(member_name), - span: DUMMY_SP, - ctxt: SyntaxContext::empty(), - optional: false - })))], + args: vec![ExprOrSpread::from(Box::new(Expr::Lit(Lit::Str( + Str { + span: DUMMY_SP, + value: Atom::new(member_name), + raw: None, + }))))], type_args: None, })), Some(ident.to_id())) } From e38df447e6c4ecb0191968741bfe9caf99a03559 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Tue, 3 Dec 2024 01:07:52 +0900 Subject: [PATCH 28/72] Update test with attrs to correctly use direct import --- packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx index fea4c2a0..ada85862 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { @@ -14,6 +14,6 @@ export const Button = /*YAK Extracted CSS: background-color: #0056b3; } } -*/ /*#__PURE__*/ styled.button.attrs({ +*/ /*#__PURE__*/ __yak_button.attrs({ type: "button" })(__styleYak.Button); From a70e4f2ff09631033d1bb62ac800b1683c594cce Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Tue, 3 Dec 2024 01:10:24 +0900 Subject: [PATCH 29/72] add some comments --- packages/yak-swc/yak_swc/src/utils/native_elements.rs | 1 + packages/yak-swc/yak_swc/src/yak_transforms.rs | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/yak-swc/yak_swc/src/utils/native_elements.rs b/packages/yak-swc/yak_swc/src/utils/native_elements.rs index 03972a52..a91af220 100644 --- a/packages/yak-swc/yak_swc/src/utils/native_elements.rs +++ b/packages/yak-swc/yak_swc/src/utils/native_elements.rs @@ -1,6 +1,7 @@ use lazy_static::lazy_static; use rustc_hash::FxHashSet; +// All currenctly directly supported html elements lazy_static! { pub static ref VALID_ELEMENTS: FxHashSet = FxHashSet::from_iter(vec![ "a", diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 6e798743..f26dd6fd 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -296,6 +296,7 @@ impl TransformStyled { Expr::Member(member) => { if let Expr::Ident(ident) = *member.obj { if ident.sym == atom!("styled") { + // styled.element``usages if let MemberProp::Ident(member_ident) = member.prop { let member_name = member_ident.sym.as_str(); return if VALID_ELEMENTS.contains(member_name) { @@ -306,6 +307,7 @@ impl TransformStyled { Some(new_ident.to_id()), ) } else { + // Transform unknown elements to styled("element-name") (Box::new(Expr::Call(CallExpr { span: member.span, ctxt: SyntaxContext::empty(), From a6f91645163d5fe68d57f23b0fca660b475a16e1 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Tue, 3 Dec 2024 01:17:03 +0900 Subject: [PATCH 30/72] wip --- packages/yak-swc/yak_swc/src/yak_transforms.rs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index f26dd6fd..4a7109b4 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -327,9 +327,10 @@ impl TransformStyled { } (expression, None) } - // styled.button.attrs({}) is a call expression and should be tranformed - // to __yak_button.attrs Expr::Call(CallExpr { callee: Callee::Expr(callee), ..}) => { + // styled.button.attrs({}) is a call expression and should be tranformed + // to __yak_button.attrs + dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’© call case: {expression:?}")); if let Expr::Ident(ident) = *callee { if ident.sym == atom!("styled") { return (expression, Some(ident.to_id())); From a2d42f4942515850633447ef2e17bad6fcc60a50 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Thu, 5 Dec 2024 10:50:49 +0100 Subject: [PATCH 31/72] Formatting --- packages/yak-swc/yak_swc/src/lib.rs | 7 +- .../yak_swc/src/utils/native_elements.rs | 275 +++++++++--------- .../yak-swc/yak_swc/src/yak_transforms.rs | 36 ++- 3 files changed, 164 insertions(+), 154 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index f7d7753f..5e53e02d 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -528,9 +528,10 @@ where import_declaration .specifiers .retain(|import_specifier| match import_specifier { - ImportSpecifier::Named(ImportNamedSpecifier { local: Ident { sym, ..}, .. }) => { - *sym != atom!("styled") - } + ImportSpecifier::Named(ImportNamedSpecifier { + local: Ident { sym, .. }, + .. + }) => *sym != atom!("styled"), _ => true, }); //Add all transformed imports diff --git a/packages/yak-swc/yak_swc/src/utils/native_elements.rs b/packages/yak-swc/yak_swc/src/utils/native_elements.rs index a91af220..9be1ed1e 100644 --- a/packages/yak-swc/yak_swc/src/utils/native_elements.rs +++ b/packages/yak-swc/yak_swc/src/utils/native_elements.rs @@ -3,138 +3,143 @@ use rustc_hash::FxHashSet; // All currenctly directly supported html elements lazy_static! { - pub static ref VALID_ELEMENTS: FxHashSet = FxHashSet::from_iter(vec![ - "a", -"abbr", -"address", -"area", -"article", -"aside", -"audio", -"b", -"base", -"bdi", -"bdo", -"big", -"blockquote", -"body", -"br", -"button", -"canvas", -"caption", -"cite", -"code", -"col", -"colgroup", -"data", -"datalist", -"dd", -"del", -"details", -"dfn", -"dialog", -"div", -"dl", -"dt", -"em", -"embed", -"fieldset", -"figcaption", -"figure", -"footer", -"form", -"h1", -"h2", -"h3", -"h4", -"h5", -"h6", -"header", -"hgroup", -"hr", -"html", -"i", -"iframe", -"img", -"input", -"ins", -"kbd", -"keygen", -"label", -"legend", -"li", -"link", -"main", -"map", -"mark", -"menu", -"menuitem", -"meta", -"meter", -"nav", -"noscript", -"object", -"ol", -"optgroup", -"option", -"output", -"p", -"param", -"picture", -"pre", -"progress", -"q", -"rp", -"rt", -"ruby", -"s", -"samp", -"script", -"section", -"select", -"small", -"source", -"span", -"strong", -"style", -"sub", -"summary", -"sup", -"table", -"tbody", -"td", -"textarea", -"tfoot", -"th", -"thead", -"time", -"tr", -"track", -"u", -"ul", -"use", -"var", -"video", -"wbr", -"circle", -"clipPath", -"defs", -"ellipse", -"foreignObject", -"g", -"image", -"line", -"linearGradient", -"marker", -"mask", -"path", -"pattern", -"polygon", -"polyline", -"radialGradient", -"rect", -"stop", -"svg", -"text", -"tspan"].into_iter().map(|s| s.to_string())); - } + pub static ref VALID_ELEMENTS: FxHashSet = FxHashSet::from_iter( + vec![ + "a", + "abbr", + "address", + "area", + "article", + "aside", + "audio", + "b", + "base", + "bdi", + "bdo", + "big", + "blockquote", + "body", + "br", + "button", + "canvas", + "caption", + "cite", + "code", + "col", + "colgroup", + "data", + "datalist", + "dd", + "del", + "details", + "dfn", + "dialog", + "div", + "dl", + "dt", + "em", + "embed", + "fieldset", + "figcaption", + "figure", + "footer", + "form", + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "header", + "hgroup", + "hr", + "html", + "i", + "iframe", + "img", + "input", + "ins", + "kbd", + "keygen", + "label", + "legend", + "li", + "link", + "main", + "map", + "mark", + "menu", + "menuitem", + "meta", + "meter", + "nav", + "noscript", + "object", + "ol", + "optgroup", + "option", + "output", + "p", + "param", + "picture", + "pre", + "progress", + "q", + "rp", + "rt", + "ruby", + "s", + "samp", + "script", + "section", + "select", + "small", + "source", + "span", + "strong", + "style", + "sub", + "summary", + "sup", + "table", + "tbody", + "td", + "textarea", + "tfoot", + "th", + "thead", + "time", + "tr", + "track", + "u", + "ul", + "use", + "var", + "video", + "wbr", + "circle", + "clipPath", + "defs", + "ellipse", + "foreignObject", + "g", + "image", + "line", + "linearGradient", + "marker", + "mask", + "path", + "pattern", + "polygon", + "polyline", + "radialGradient", + "rect", + "stop", + "svg", + "text", + "tspan" + ] + .into_iter() + .map(|s| s.to_string()) + ); +} diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 4a7109b4..ac11d0ae 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -308,28 +308,32 @@ impl TransformStyled { ) } else { // Transform unknown elements to styled("element-name") - (Box::new(Expr::Call(CallExpr { - span: member.span, - ctxt: SyntaxContext::empty(), - callee: Callee::Expr(Box::new(Expr::Ident(ident.clone()))), - args: vec![ExprOrSpread::from(Box::new(Expr::Lit(Lit::Str( - Str { - span: DUMMY_SP, - value: Atom::new(member_name), - raw: None, - }))))], - type_args: None, - })), Some(ident.to_id())) - } - + ( + Box::new(Expr::Call(CallExpr { + span: member.span, + ctxt: SyntaxContext::empty(), + callee: Callee::Expr(Box::new(Expr::Ident(ident.clone()))), + args: vec![ExprOrSpread::from(Box::new(Expr::Lit(Lit::Str(Str { + span: DUMMY_SP, + value: Atom::new(member_name), + raw: None, + }))))], + type_args: None, + })), + Some(ident.to_id()), + ) + }; } } } (expression, None) } - Expr::Call(CallExpr { callee: Callee::Expr(callee), ..}) => { + Expr::Call(CallExpr { + callee: Callee::Expr(callee), + .. + }) => { // styled.button.attrs({}) is a call expression and should be tranformed - // to __yak_button.attrs + // to __yak_button.attrs dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’© call case: {expression:?}")); if let Expr::Ident(ident) = *callee { if ident.sym == atom!("styled") { From 4037cb1edb38f346631a8c7be333c38c1956822d Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Thu, 5 Dec 2024 10:51:59 +0100 Subject: [PATCH 32/72] Add new test --- .../transform-only-known-elements/output.dev.tsx | 12 ++++++++++++ .../transform-only-known-elements/output.prod.tsx | 12 ++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx create mode 100644 packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx new file mode 100644 index 00000000..8df84ab3 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx @@ -0,0 +1,12 @@ +import { __yak_button, styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; +} +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); +export const CustomElement = /*YAK Extracted CSS: +.CustomElement { + margin-bottom: 23px; +} +*/ /*#__PURE__*/ styled("unknown")(__styleYak.CustomElement); diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx new file mode 100644 index 00000000..8df84ab3 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx @@ -0,0 +1,12 @@ +import { __yak_button, styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; +} +*/ /*#__PURE__*/ __yak_button(__styleYak.Button); +export const CustomElement = /*YAK Extracted CSS: +.CustomElement { + margin-bottom: 23px; +} +*/ /*#__PURE__*/ styled("unknown")(__styleYak.CustomElement); From a2a9d3b1a229043d5cc46494ddfe1941de4ec858 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Thu, 5 Dec 2024 12:31:30 +0100 Subject: [PATCH 33/72] Fix simple attr case --- .../yak-swc/yak_swc/src/yak_transforms.rs | 59 ++++++++++++++++++- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index ac11d0ae..d878798c 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -294,6 +294,7 @@ impl TransformStyled { fn transform_styled_usages(&self, expression: Box) -> (Box, Option) { match *expression.clone() { Expr::Member(member) => { + dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’© member expression case: {expression:?}")); if let Expr::Ident(ident) = *member.obj { if ident.sym == atom!("styled") { // styled.element``usages @@ -330,16 +331,70 @@ impl TransformStyled { } Expr::Call(CallExpr { callee: Callee::Expr(callee), + args, .. }) => { // styled.button.attrs({}) is a call expression and should be tranformed // to __yak_button.attrs - dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’© call case: {expression:?}")); - if let Expr::Ident(ident) = *callee { + if let Expr::Ident(ident) = *callee.clone() { if ident.sym == atom!("styled") { return (expression, Some(ident.to_id())); } } + + let mut expr: Box = callee.clone(); + let mut counter = 1; + let mut ident: Option<(Ident, MemberProp)> = None; + let mut outermost: Option = None; + while let Expr::Member(ref member) = *expr { + if outermost.is_none() { + dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’© outermost member expression {member:?}")); + outermost = Some(member.clone().prop); + } + counter += 1; + match *member.clone().obj { + Expr::Ident(current_ident) => if current_ident.sym == atom!("styled") { + ident = Some((current_ident, member.clone().prop)); + break; + } else { + } + Expr::Member(inner_member) => { + expr = Box::new(Expr::Member(inner_member)); + }, + _ => { + panic!("Unepected expression"); + } + + } + if counter == 10 { + break; + } + } + if let Some((styled_ident, MemberProp::Ident(member_ident))) = ident { + if let Some(prop) = outermost { + let member_name = member_ident.sym.as_str(); + if styled_ident.sym == atom!("styled") && VALID_ELEMENTS.contains(member_name) { + let mut new_ident = styled_ident.clone(); + new_ident.sym = Atom::new(format!("__yak_{member_name}")); + return ( + Box::new(Expr::Call(CallExpr { + span: styled_ident.span, + ctxt: SyntaxContext::empty(), + callee: Callee::Expr(Box::new(Expr::Member( + MemberExpr { + prop, + span: DUMMY_SP, + obj: Box::new(Expr::Ident(new_ident.clone())) + } + ))), + args, + type_args: None, + })), + Some(new_ident.to_id()) + ) + } + } + } (expression, None) } _ => (expression, None), From 92ec409ce42abcb0d12b72e680938a8b032f26fb Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Thu, 5 Dec 2024 15:01:20 +0100 Subject: [PATCH 34/72] Update test --- .../tests/fixture/transform-only-known-elements/input.tsx | 4 ++++ .../fixture/transform-only-known-elements/output.dev.tsx | 5 +++++ .../fixture/transform-only-known-elements/output.prod.tsx | 5 +++++ 3 files changed, 14 insertions(+) diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/input.tsx index 03fd12c4..7ed120f2 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/input.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/input.tsx @@ -7,3 +7,7 @@ export const Button = styled.button` export const CustomElement = styled.unknown` margin-bottom: 23px; ` + +export const SomeThingElse = styled("something-else")` + margin-bottom: 15px; +` \ No newline at end of file diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx index 8df84ab3..27d6565c 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx @@ -10,3 +10,8 @@ export const CustomElement = /*YAK Extracted CSS: margin-bottom: 23px; } */ /*#__PURE__*/ styled("unknown")(__styleYak.CustomElement); +export const SomeThingElse = /*YAK Extracted CSS: +.SomeThingElse { + margin-bottom: 15px; +} +*/ /*#__PURE__*/ styled("something-else")(__styleYak.SomeThingElse); diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx index 8df84ab3..27d6565c 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx @@ -10,3 +10,8 @@ export const CustomElement = /*YAK Extracted CSS: margin-bottom: 23px; } */ /*#__PURE__*/ styled("unknown")(__styleYak.CustomElement); +export const SomeThingElse = /*YAK Extracted CSS: +.SomeThingElse { + margin-bottom: 15px; +} +*/ /*#__PURE__*/ styled("something-else")(__styleYak.SomeThingElse); From 932b7de5836f5264a2ec85a04180764d63ca3570 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Thu, 5 Dec 2024 15:01:29 +0100 Subject: [PATCH 35/72] =?UTF-8?q?WO=C3=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx index fea4c2a0..ada85862 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { @@ -14,6 +14,6 @@ export const Button = /*YAK Extracted CSS: background-color: #0056b3; } } -*/ /*#__PURE__*/ styled.button.attrs({ +*/ /*#__PURE__*/ __yak_button.attrs({ type: "button" })(__styleYak.Button); From a99c617aa4c5bc329546d750d453e72217416dbe Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Thu, 5 Dec 2024 15:15:28 +0100 Subject: [PATCH 36/72] Improvements --- .../yak-swc/yak_swc/src/yak_transforms.rs | 62 +++++++++---------- .../fixture/styled-componets/output.dev.tsx | 4 +- .../fixture/styled-componets/output.prod.tsx | 4 +- 3 files changed, 33 insertions(+), 37 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index d878798c..0652f241 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -296,35 +296,33 @@ impl TransformStyled { Expr::Member(member) => { dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’© member expression case: {expression:?}")); if let Expr::Ident(ident) = *member.obj { - if ident.sym == atom!("styled") { - // styled.element``usages - if let MemberProp::Ident(member_ident) = member.prop { - let member_name = member_ident.sym.as_str(); - return if VALID_ELEMENTS.contains(member_name) { - let mut new_ident = ident.clone(); - new_ident.sym = Atom::new(format!("__yak_{member_name}")); - ( - Box::new(Expr::Ident(new_ident.clone())), - Some(new_ident.to_id()), - ) - } else { - // Transform unknown elements to styled("element-name") - ( - Box::new(Expr::Call(CallExpr { - span: member.span, - ctxt: SyntaxContext::empty(), - callee: Callee::Expr(Box::new(Expr::Ident(ident.clone()))), - args: vec![ExprOrSpread::from(Box::new(Expr::Lit(Lit::Str(Str { - span: DUMMY_SP, - value: Atom::new(member_name), - raw: None, - }))))], - type_args: None, - })), - Some(ident.to_id()), - ) - }; - } + // styled.element``usages + if let MemberProp::Ident(member_ident) = member.prop { + let member_name = member_ident.sym.as_str(); + return if VALID_ELEMENTS.contains(member_name) { + let mut new_ident = ident.clone(); + new_ident.sym = Atom::new(format!("__yak_{member_name}")); + ( + Box::new(Expr::Ident(new_ident.clone())), + Some(new_ident.to_id()), + ) + } else { + // Transform unknown elements to styled("element-name") + ( + Box::new(Expr::Call(CallExpr { + span: member.span, + ctxt: SyntaxContext::empty(), + callee: Callee::Expr(Box::new(Expr::Ident(ident.clone()))), + args: vec![ExprOrSpread::from(Box::new(Expr::Lit(Lit::Str(Str { + span: DUMMY_SP, + value: Atom::new(member_name), + raw: None, + }))))], + type_args: None, + })), + Some(ident.to_id()), + ) + }; } } (expression, None) @@ -337,9 +335,7 @@ impl TransformStyled { // styled.button.attrs({}) is a call expression and should be tranformed // to __yak_button.attrs if let Expr::Ident(ident) = *callee.clone() { - if ident.sym == atom!("styled") { - return (expression, Some(ident.to_id())); - } + return (expression, Some(ident.to_id())); } let mut expr: Box = callee.clone(); @@ -373,7 +369,7 @@ impl TransformStyled { if let Some((styled_ident, MemberProp::Ident(member_ident))) = ident { if let Some(prop) = outermost { let member_name = member_ident.sym.as_str(); - if styled_ident.sym == atom!("styled") && VALID_ELEMENTS.contains(member_name) { + if VALID_ELEMENTS.contains(member_name) { let mut new_ident = styled_ident.clone(); new_ident.sym = Atom::new(format!("__yak_{member_name}")); return ( diff --git a/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.dev.tsx index f03c6889..166d898c 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.dev.tsx @@ -1,6 +1,6 @@ // @ts-ignore import styled from "styled-components"; -import { styled as styledYak } from "next-yak/internal"; +import { styled as styledYak, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const textColor = "red"; // Should be transformed as it is yak @@ -8,7 +8,7 @@ export const CustomThemedButton = /*YAK Extracted CSS: .CustomThemedButton { color: blue; } -*/ /*#__PURE__*/ styledYak.button(__styleYak.CustomThemedButton); +*/ /*#__PURE__*/ __yak_button(__styleYak.CustomThemedButton); // Should not be transformed as it is NOT yak export const StyledComponent = styled.button` color: ${textColor}; diff --git a/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx index f03c6889..166d898c 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx @@ -1,6 +1,6 @@ // @ts-ignore import styled from "styled-components"; -import { styled as styledYak } from "next-yak/internal"; +import { styled as styledYak, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const textColor = "red"; // Should be transformed as it is yak @@ -8,7 +8,7 @@ export const CustomThemedButton = /*YAK Extracted CSS: .CustomThemedButton { color: blue; } -*/ /*#__PURE__*/ styledYak.button(__styleYak.CustomThemedButton); +*/ /*#__PURE__*/ __yak_button(__styleYak.CustomThemedButton); // Should not be transformed as it is NOT yak export const StyledComponent = styled.button` color: ${textColor}; From 5a3f9f2a2a6a92cb20e602883e4b1c673c4ccd8c Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Thu, 5 Dec 2024 15:28:26 +0100 Subject: [PATCH 37/72] don't manually eliminate dead code --- packages/yak-swc/yak_swc/src/lib.rs | 11 +---------- packages/yak-swc/yak_swc/src/yak_transforms.rs | 2 -- .../yak_swc/tests/fixture/attrs/output.dev.tsx | 2 +- .../yak_swc/tests/fixture/attrs/output.prod.tsx | 2 +- .../fixture/basic-styled-component/output.dev.tsx | 2 +- .../fixture/basic-styled-component/output.prod.tsx | 2 +- .../yak_swc/tests/fixture/comments/output.dev.tsx | 2 +- .../yak_swc/tests/fixture/comments/output.prod.tsx | 2 +- .../fixture/complex-nested-structure/output.dev.tsx | 2 +- .../fixture/complex-nested-structure/output.prod.tsx | 2 +- .../yak_swc/tests/fixture/constants/output.dev.tsx | 2 +- .../yak_swc/tests/fixture/constants/output.prod.tsx | 2 +- .../tests/fixture/cross-file-constants/output.dev.tsx | 2 +- .../fixture/cross-file-constants/output.prod.tsx | 2 +- .../cross-file-mixin-dynamic-export/output.dev.tsx | 2 +- .../cross-file-mixin-dynamic-export/output.prod.tsx | 2 +- .../fixture/cross-file-mixin-export/output.dev.tsx | 2 +- .../fixture/cross-file-mixin-export/output.prod.tsx | 2 +- .../fixture/cross-file-mixin-import/output.dev.tsx | 2 +- .../fixture/cross-file-mixin-import/output.prod.tsx | 2 +- .../tests/fixture/cross-file-selectors/output.dev.tsx | 2 +- .../fixture/cross-file-selectors/output.prod.tsx | 2 +- .../tests/fixture/css-grid-layout/output.dev.tsx | 2 +- .../tests/fixture/css-grid-layout/output.prod.tsx | 2 +- .../tests/fixture/css-import-order/output.dev.tsx | 2 +- .../tests/fixture/css-import-order/output.prod.tsx | 2 +- .../tests/fixture/css-mixin-inline/output.dev.tsx | 2 +- .../tests/fixture/css-mixin-inline/output.prod.tsx | 2 +- .../tests/fixture/css-mixin-nested/output.dev.tsx | 2 +- .../tests/fixture/css-mixin-nested/output.prod.tsx | 2 +- .../yak_swc/tests/fixture/css-mixin/output.dev.tsx | 2 +- .../yak_swc/tests/fixture/css-mixin/output.prod.tsx | 2 +- .../tests/fixture/css-variables/output.dev.tsx | 2 +- .../tests/fixture/css-variables/output.prod.tsx | 2 +- .../tests/fixture/dynamic-prop-error/output.dev.tsx | 2 +- .../tests/fixture/dynamic-prop-error/output.prod.tsx | 2 +- .../yak_swc/tests/fixture/encoded/output.dev.tsx | 2 +- .../yak_swc/tests/fixture/encoded/output.prod.tsx | 2 +- .../tests/fixture/extending-styles/output.dev.tsx | 2 +- .../tests/fixture/extending-styles/output.prod.tsx | 2 +- .../keyframe-animations-function/output.dev.tsx | 2 +- .../keyframe-animations-function/output.prod.tsx | 2 +- .../fixture/keyframe-animations-object/output.dev.tsx | 2 +- .../keyframe-animations-object/output.prod.tsx | 2 +- .../tests/fixture/keyframe-animations/output.dev.tsx | 2 +- .../tests/fixture/keyframe-animations/output.prod.tsx | 2 +- .../fixture/keyframes-nested-error/output.dev.tsx | 2 +- .../fixture/keyframes-nested-error/output.prod.tsx | 2 +- .../tests/fixture/media-queries/output.dev.tsx | 2 +- .../tests/fixture/media-queries/output.prod.tsx | 2 +- .../fixture/mixing-with-tailwind-error/output.dev.tsx | 2 +- .../mixing-with-tailwind-error/output.prod.tsx | 2 +- .../tests/fixture/mixing-with-tailwind/output.dev.tsx | 2 +- .../fixture/mixing-with-tailwind/output.prod.tsx | 2 +- .../fixture/multiple-styled-components/output.dev.tsx | 2 +- .../multiple-styled-components/output.prod.tsx | 2 +- .../tests/fixture/nested-dynamic-mixin/output.dev.tsx | 2 +- .../fixture/nested-dynamic-mixin/output.prod.tsx | 2 +- .../tests/fixture/nested-selectors/output.dev.tsx | 2 +- .../tests/fixture/nested-selectors/output.prod.tsx | 2 +- .../yak_swc/tests/fixture/parens/output.dev.tsx | 2 +- .../yak_swc/tests/fixture/parens/output.prod.tsx | 2 +- .../fixture/props-and-dynamic-styles/output.dev.tsx | 2 +- .../fixture/props-and-dynamic-styles/output.prod.tsx | 2 +- .../tests/fixture/theming-with-context/output.dev.tsx | 2 +- .../fixture/theming-with-context/output.prod.tsx | 2 +- .../transform-only-known-elements/output.dev.tsx | 2 +- .../transform-only-known-elements/output.prod.tsx | 2 +- .../fixture/two-styled-components/output.dev.tsx | 2 +- .../fixture/two-styled-components/output.prod.tsx | 2 +- 70 files changed, 69 insertions(+), 80 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index 5e53e02d..8c525070 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -524,16 +524,6 @@ where if import_declaration.src.value == "next-yak/internal" { if !self.yak_transformed_library_imports.is_empty() { // yak styled import got transformed into specific components - // Now we remove the generic styled import and add all explicit imports - import_declaration - .specifiers - .retain(|import_specifier| match import_specifier { - ImportSpecifier::Named(ImportNamedSpecifier { - local: Ident { sym, .. }, - .. - }) => *sym != atom!("styled"), - _ => true, - }); //Add all transformed imports import_declaration.specifiers.extend( self @@ -864,6 +854,7 @@ where runtime_css_variables, ); if let Some(id) = transform_result.import { + dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’© Adding to import {id:?}")); self.yak_transformed_library_imports.insert(id); } diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 0652f241..e80c5ca9 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -294,7 +294,6 @@ impl TransformStyled { fn transform_styled_usages(&self, expression: Box) -> (Box, Option) { match *expression.clone() { Expr::Member(member) => { - dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’© member expression case: {expression:?}")); if let Expr::Ident(ident) = *member.obj { // styled.element``usages if let MemberProp::Ident(member_ident) = member.prop { @@ -344,7 +343,6 @@ impl TransformStyled { let mut outermost: Option = None; while let Expr::Member(ref member) = *expr { if outermost.is_none() { - dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’© outermost member expression {member:?}")); outermost = Some(member.clone().prop); } counter += 1; diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx index ada85862..bef2b540 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx index ada85862..bef2b540 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx index 8bc1a852..6a4f5d0a 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx index 8bc1a852..6a4f5d0a 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx index 2332a770..cd3f45a2 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const primary = "green"; export const Button = /*YAK Extracted CSS: diff --git a/packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx index 2332a770..cd3f45a2 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const primary = "green"; export const Button = /*YAK Extracted CSS: diff --git a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx index c8e95df2..1139ca7e 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_article } from "next-yak/internal"; +import { styled, __yak_article } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ArticleCard = /*YAK Extracted CSS: .ArticleCard { diff --git a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx index c8e95df2..1139ca7e 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_article } from "next-yak/internal"; +import { styled, __yak_article } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ArticleCard = /*YAK Extracted CSS: .ArticleCard { diff --git a/packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx index 01aaa8d2..e8f0c94e 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const colors = { primary: "#007bff", diff --git a/packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx index 01aaa8d2..e8f0c94e 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const colors = { primary: "#007bff", diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx index 72eeaca9..acd464a4 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; // @ts-ignore import { colors } from "./colorDefinitions"; // @ts-ignore diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx index 72eeaca9..acd464a4 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; // @ts-ignore import { colors } from "./colorDefinitions"; // @ts-ignore diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.tsx index c143f896..afedfd51 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button } from "next-yak/internal"; +import { css, styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const textColor = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.textColor__$active)); const textStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.textStyles__$active)); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx index 1bec0a6a..5c087f51 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button } from "next-yak/internal"; +import { css, styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const textColor = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.textColor__$active)); const textStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.textStyles__$active)); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.dev.tsx index 7a468073..937eca4b 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.dev.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button } from "next-yak/internal"; +import { css, styled, __yak_button } from "next-yak/internal"; import { typogaphyMixin } from "./typography"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const textColor = /*#__PURE__*/ css(); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx index 7a468073..937eca4b 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button } from "next-yak/internal"; +import { css, styled, __yak_button } from "next-yak/internal"; import { typogaphyMixin } from "./typography"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const textColor = /*#__PURE__*/ css(); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.dev.tsx index 391f498a..2f4fb622 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; // @ts-ignore import { fonts } from "./fonts"; // @ts-ignore diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx index 391f498a..2f4fb622 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; // @ts-ignore import { fonts } from "./fonts"; // @ts-ignore diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.dev.tsx index 138a8bd9..30f8b98b 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; // @ts-ignore import { Icon } from "./Icon"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx index 138a8bd9..30f8b98b 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; // @ts-ignore import { Icon } from "./Icon"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.dev.tsx index 172079e9..eac75656 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_div } from "next-yak/internal"; +import { styled, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const GridLayout = /*YAK Extracted CSS: .GridLayout { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx index 172079e9..eac75656 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_div } from "next-yak/internal"; +import { styled, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const GridLayout = /*YAK Extracted CSS: .GridLayout { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx index baecd4a8..15784df7 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { styled, styled } from "next-yak/internal"; import { IconButton } from "./iconButton"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FancyIconButton = /*YAK Extracted CSS: diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx index baecd4a8..15784df7 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { styled, styled } from "next-yak/internal"; import { IconButton } from "./iconButton"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FancyIconButton = /*YAK Extracted CSS: diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.dev.tsx index 96a635fd..68f08497 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.dev.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button } from "next-yak/internal"; +import { styled, css, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ThemedButton = /*YAK Extracted CSS: .ThemedButton { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx index 96a635fd..68f08497 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button } from "next-yak/internal"; +import { styled, css, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ThemedButton = /*YAK Extracted CSS: .ThemedButton { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx index 8f1527d7..78abf2e3 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx index 065fb42e..20930493 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx index c86b8d3f..4d4da24e 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx index ed38ee50..fa4bfcfc 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx @@ -1,4 +1,4 @@ -import { css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.dev.tsx index 10fd3928..9b49a25d 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button, __yak_div } from "next-yak/internal"; +import { styled, __yak_button, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ThemedButton = /*YAK Extracted CSS: .ThemedButton { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx index 10fd3928..9b49a25d 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button, __yak_div } from "next-yak/internal"; +import { styled, __yak_button, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ThemedButton = /*YAK Extracted CSS: .ThemedButton { diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx index b206409d..2d72c907 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FlexContainer = /*YAK Extracted CSS: .FlexContainer { diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx index 107c73dc..3309d0d2 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FlexContainer = /*YAK Extracted CSS: .FlexContainer { diff --git a/packages/yak-swc/yak_swc/tests/fixture/encoded/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.dev.tsx index 6be78078..817e95b0 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/encoded/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const before = "\\2022"; export const Button = /*YAK Extracted CSS: diff --git a/packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx index 6be78078..817e95b0 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const before = "\\2022"; export const Button = /*YAK Extracted CSS: diff --git a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx index 86b42c8f..a0a787c1 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const BaseButton = /*YAK Extracted CSS: .BaseButton { diff --git a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx index 86b42c8f..a0a787c1 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const BaseButton = /*YAK Extracted CSS: .BaseButton { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.dev.tsx index 17b68d00..95addb2c 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.dev.tsx @@ -1,4 +1,4 @@ -import { css, keyframes, __yak_p } from "next-yak/internal"; +import { styled, css, keyframes, __yak_p } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FadeInText = /*YAK Extracted CSS: .FadeInText__$reverse { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx index 17b68d00..95addb2c 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx @@ -1,4 +1,4 @@ -import { css, keyframes, __yak_p } from "next-yak/internal"; +import { styled, css, keyframes, __yak_p } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FadeInText = /*YAK Extracted CSS: .FadeInText__$reverse { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx index bb96d7d4..2dfbc6fd 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx @@ -1,4 +1,4 @@ -import { css, keyframes, __yak_button, __yak_p } from "next-yak/internal"; +import { styled, css, keyframes, __yak_button, __yak_p } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FadeInText = /*YAK Extracted CSS: .FadeInText__$reverse { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx index bb96d7d4..2dfbc6fd 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx @@ -1,4 +1,4 @@ -import { css, keyframes, __yak_button, __yak_p } from "next-yak/internal"; +import { styled, css, keyframes, __yak_button, __yak_p } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FadeInText = /*YAK Extracted CSS: .FadeInText__$reverse { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.dev.tsx index 116a4fad..abdee2c5 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.dev.tsx @@ -1,4 +1,4 @@ -import { keyframes, __yak_p } from "next-yak/internal"; +import { styled, keyframes, __yak_p } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const fadeIn = /*YAK Extracted CSS: @keyframes fadeIn { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx index 116a4fad..abdee2c5 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx @@ -1,4 +1,4 @@ -import { keyframes, __yak_p } from "next-yak/internal"; +import { styled, keyframes, __yak_p } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const fadeIn = /*YAK Extracted CSS: @keyframes fadeIn { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.tsx index 601cc029..a39ff84f 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.tsx @@ -1,3 +1,3 @@ -import { keyframes, __yak_button } from "next-yak/internal"; +import { styled, keyframes, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*#__PURE__*/ __yak_button(); diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx index 601cc029..a39ff84f 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx @@ -1,3 +1,3 @@ -import { keyframes, __yak_button } from "next-yak/internal"; +import { styled, keyframes, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*#__PURE__*/ __yak_button(); diff --git a/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.dev.tsx index ff514c57..806ceb3a 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_div } from "next-yak/internal"; +import { styled, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ResponsiveGrid = /*YAK Extracted CSS: .ResponsiveGrid { diff --git a/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx index ff514c57..806ceb3a 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_div } from "next-yak/internal"; +import { styled, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const ResponsiveGrid = /*YAK Extracted CSS: .ResponsiveGrid { diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.tsx index 9cff06d6..9008efd8 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.tsx @@ -1,3 +1,3 @@ -import { atoms, __yak_button } from "next-yak/internal"; +import { styled, atoms, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const TailwindButton = /*#__PURE__*/ __yak_button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded"), atoms("bg-blue-700")); diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx index 9cff06d6..9008efd8 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx @@ -1,3 +1,3 @@ -import { atoms, __yak_button } from "next-yak/internal"; +import { styled, atoms, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const TailwindButton = /*#__PURE__*/ __yak_button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded"), atoms("bg-blue-700")); diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.dev.tsx index caac70f8..ac33b44d 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.dev.tsx @@ -1,3 +1,3 @@ -import { atoms, __yak_button } from "next-yak/internal"; +import { styled, atoms, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const TailwindButton = /*#__PURE__*/ __yak_button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded")); diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx index caac70f8..ac33b44d 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx @@ -1,3 +1,3 @@ -import { atoms, __yak_button } from "next-yak/internal"; +import { styled, atoms, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const TailwindButton = /*#__PURE__*/ __yak_button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded")); diff --git a/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.dev.tsx index 96e9848a..14c16a00 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.prod.tsx index 96e9848a..14c16a00 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx index 8616d8f5..30aa926b 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx @@ -1,4 +1,4 @@ -import { css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; // example taken from https://github.com/jantimon/next-yak/issues/208 const spacing = "20px"; diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx index b5f1d6ac..2977a75b 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx @@ -1,4 +1,4 @@ -import { css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; // example taken from https://github.com/jantimon/next-yak/issues/208 const spacing = "20px"; diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.dev.tsx index 769d7f01..6c797cd0 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_div } from "next-yak/internal"; +import { styled, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Card = /*YAK Extracted CSS: .Card { diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx index 769d7f01..6c797cd0 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_div } from "next-yak/internal"; +import { styled, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Card = /*YAK Extracted CSS: .Card { diff --git a/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx index 6aa969a2..a32c9268 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx @@ -1,4 +1,4 @@ -import { css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Card = /*YAK Extracted CSS: .Card { diff --git a/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx index de21fe93..d6dbc4c4 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx @@ -1,4 +1,4 @@ -import { css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Card = /*YAK Extracted CSS: .Card { diff --git a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx index ae87f580..9fb96fda 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx @@ -1,4 +1,4 @@ -import { css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FlexContainer = /*YAK Extracted CSS: .FlexContainer { diff --git a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx index 8041e81c..2678583f 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx @@ -1,4 +1,4 @@ -import { css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FlexContainer = /*YAK Extracted CSS: .FlexContainer { diff --git a/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.dev.tsx index 4c7a65b4..634f4ac2 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.dev.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { __yak_div } from "next-yak/internal"; +import { styled, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const ThemedComponent = /*YAK Extracted CSS: .ThemedComponent { diff --git a/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx index 10fdafd3..bbd0440a 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { __yak_div } from "next-yak/internal"; +import { styled, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const ThemedComponent = /*YAK Extracted CSS: .ThemedComponent { diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx index 27d6565c..80d38210 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx index 27d6565c..80d38210 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.dev.tsx index 5df4411e..eb1ba5a8 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.dev.tsx @@ -1,4 +1,4 @@ -import { __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.prod.tsx index 5df4411e..eb1ba5a8 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.prod.tsx @@ -1,4 +1,4 @@ -import { __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button, styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { From 4ef40d29aa64d8a20810aa5e18a834e5c85bce55 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Thu, 5 Dec 2024 15:48:35 +0100 Subject: [PATCH 38/72] Don't sort imports --- packages/yak-swc/yak_swc/src/lib.rs | 1 - packages/yak-swc/yak_swc/src/yak_transforms.rs | 11 ++++++----- .../tests/fixture/css-import-order/output.dev.tsx | 2 +- .../tests/fixture/css-import-order/output.prod.tsx | 2 +- .../tests/fixture/extending-styles/output.dev.tsx | 2 +- .../tests/fixture/extending-styles/output.prod.tsx | 2 +- .../keyframe-animations-object/output.dev.tsx | 2 +- .../keyframe-animations-object/output.prod.tsx | 2 +- .../multiple-styled-components/output.dev.tsx | 2 +- .../multiple-styled-components/output.prod.tsx | 2 +- .../transform-only-known-elements/output.dev.tsx | 2 +- .../transform-only-known-elements/output.prod.tsx | 2 +- .../tests/fixture/two-styled-components/input.tsx | 8 ++++++++ .../fixture/two-styled-components/output.dev.tsx | 12 +++++++++++- .../fixture/two-styled-components/output.prod.tsx | 12 +++++++++++- 15 files changed, 46 insertions(+), 18 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index 8c525070..afc828d3 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -529,7 +529,6 @@ where self .yak_transformed_library_imports .iter() - .sorted_by_key(|ident| ident.0.clone()) .map(|(sym, ctxt)| { ImportSpecifier::Named(ImportNamedSpecifier { span: DUMMY_SP, diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index e80c5ca9..ae1d1543 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -319,7 +319,7 @@ impl TransformStyled { }))))], type_args: None, })), - Some(ident.to_id()), + None, ) }; } @@ -331,12 +331,13 @@ impl TransformStyled { args, .. }) => { - // styled.button.attrs({}) is a call expression and should be tranformed - // to __yak_button.attrs - if let Expr::Ident(ident) = *callee.clone() { - return (expression, Some(ident.to_id())); + // styled(Component) + if let Expr::Ident(_) = *callee.clone() { + return (expression, None); } + // styled.button.attrs({}) is a call expression and should be tranformed + // to __yak_button.attrs let mut expr: Box = callee.clone(); let mut counter = 1; let mut ident: Option<(Ident, MemberProp)> = None; diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx index 15784df7..baecd4a8 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, styled } from "next-yak/internal"; +import { styled } from "next-yak/internal"; import { IconButton } from "./iconButton"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FancyIconButton = /*YAK Extracted CSS: diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx index 15784df7..baecd4a8 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, styled } from "next-yak/internal"; +import { styled } from "next-yak/internal"; import { IconButton } from "./iconButton"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FancyIconButton = /*YAK Extracted CSS: diff --git a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx index a0a787c1..554019ae 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const BaseButton = /*YAK Extracted CSS: .BaseButton { diff --git a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx index a0a787c1..554019ae 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const BaseButton = /*YAK Extracted CSS: .BaseButton { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx index 2dfbc6fd..f3db160d 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, css, keyframes, __yak_button, __yak_p } from "next-yak/internal"; +import { styled, css, keyframes, __yak_p, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FadeInText = /*YAK Extracted CSS: .FadeInText__$reverse { diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx index 2dfbc6fd..f3db160d 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, css, keyframes, __yak_button, __yak_p } from "next-yak/internal"; +import { styled, css, keyframes, __yak_p, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FadeInText = /*YAK Extracted CSS: .FadeInText__$reverse { diff --git a/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.dev.tsx index 14c16a00..2d1bef74 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.prod.tsx index 14c16a00..2d1bef74 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/multiple-styled-components/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx index 80d38210..b7d3b9a1 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx index 80d38210..b7d3b9a1 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/transform-only-known-elements/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/input.tsx index 5659512e..ebecc774 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/input.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/input.tsx @@ -7,3 +7,11 @@ export const Button = styled.button` export const FancyButton = styled(Button)` margin-bottom: 23px; ` + +export const Button2 = styled.button` + background-color: #007bfb; +` + +export const Button3 = styled("button")` + background-color: #007bfb; +` \ No newline at end of file diff --git a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.dev.tsx index eb1ba5a8..9bc90ba2 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { @@ -10,3 +10,13 @@ export const FancyButton = /*YAK Extracted CSS: margin-bottom: 23px; } */ /*#__PURE__*/ styled(Button)(__styleYak.FancyButton); +export const Button2 = /*YAK Extracted CSS: +.Button2 { + background-color: #007bfb; +} +*/ /*#__PURE__*/ __yak_button(__styleYak.Button2); +export const Button3 = /*YAK Extracted CSS: +.Button3 { + background-color: #007bfb; +} +*/ /*#__PURE__*/ styled("button")(__styleYak.Button3); diff --git a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.prod.tsx index eb1ba5a8..9bc90ba2 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/two-styled-components/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_button, styled } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { @@ -10,3 +10,13 @@ export const FancyButton = /*YAK Extracted CSS: margin-bottom: 23px; } */ /*#__PURE__*/ styled(Button)(__styleYak.FancyButton); +export const Button2 = /*YAK Extracted CSS: +.Button2 { + background-color: #007bfb; +} +*/ /*#__PURE__*/ __yak_button(__styleYak.Button2); +export const Button3 = /*YAK Extracted CSS: +.Button3 { + background-color: #007bfb; +} +*/ /*#__PURE__*/ styled("button")(__styleYak.Button3); From f32a716ae4933cb9045174c03d50e166c431245f Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 10:58:37 +0100 Subject: [PATCH 39/72] Store yak component imports in YakImports --- packages/yak-swc/yak_swc/src/lib.rs | 36 ++--------- packages/yak-swc/yak_swc/src/yak_imports.rs | 45 ++++++++++++- .../yak-swc/yak_swc/src/yak_transforms.rs | 63 ++++++++----------- 3 files changed, 75 insertions(+), 69 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index 0c92a6bd..d811ec4c 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -529,36 +529,11 @@ where for item in module.body.iter_mut() { if let ModuleItem::ModuleDecl(ModuleDecl::Import(import_declaration)) = item { if import_declaration.src.value == "next-yak/internal" { - if !self.yak_transformed_library_imports.is_empty() { - // yak styled import got transformed into specific components - //Add all transformed imports - import_declaration.specifiers.extend( - self - .yak_transformed_library_imports - .iter() - .map(|(sym, ctxt)| { - ImportSpecifier::Named(ImportNamedSpecifier { - span: DUMMY_SP, - local: Ident { - span: DUMMY_SP, - ctxt: *ctxt, - sym: sym.clone(), - optional: false, - }, - imported: None, - is_type_only: false, - }) - }), - ); - } - - // Add utility functions + // Add all stored imports import_declaration.specifiers.extend( self - .yak_library_imports - .as_ref() - .unwrap() - .get_yak_utility_import_declaration(), + .yak_imports() + .get_yak_import_declarations() ); break; @@ -866,11 +841,8 @@ where runtime_expressions, &self.current_declaration, runtime_css_variables, + self.yak_library_imports.as_mut().unwrap() ); - if let Some(id) = transform_result.import { - dbg!(format!("πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’©πŸ’© Adding to import {id:?}")); - self.yak_transformed_library_imports.insert(id); - } if is_top_level { self.current_declaration = vec![]; diff --git a/packages/yak-swc/yak_swc/src/yak_imports.rs b/packages/yak-swc/yak_swc/src/yak_imports.rs index cab6f443..e92e50a0 100644 --- a/packages/yak-swc/yak_swc/src/yak_imports.rs +++ b/packages/yak-swc/yak_swc/src/yak_imports.rs @@ -7,6 +7,8 @@ use swc_core::{ ecma::{ast::*, visit::VisitMut}, }; +use crate::utils::native_elements::VALID_ELEMENTS; + #[derive(Debug)] pub struct YakImports { @@ -16,6 +18,9 @@ pub struct YakImports { /// Imports from "next-yak" /// Local to Imported mapping yak_library_imports: FxHashMap, + /// Direct component imports from "next-yak/internal" + /// e.g. __yak_button + yak_component_imports: FxHashMap, /// Local Identifiers for the next-yak css function \ /// Most of the time it is just `css#0` for `import { css } from "next-yak"` \ /// but it might also contain renamings like `import { css as css_ } from "next-yak"` @@ -67,6 +72,7 @@ impl YakImports { ) -> Self { Self { yak_utilities: FxHashMap::default(), + yak_component_imports: FxHashMap::default(), yak_library_imports, yak_css_idents, yak_keyframes_idents, @@ -138,8 +144,24 @@ impl YakImports { } } + /// Returns the ident for the given component + /// e.g. __yak_button for button + pub fn get_yak_component_import(&mut self, name: impl AsRef) -> Ident { + if !VALID_ELEMENTS.contains(name.as_ref()) { + panic!("Valid yak element not found: {}", name.as_ref()); + } + if let Some(id) = self.yak_component_imports.get(name.as_ref()) { + id.clone() + } else { + let prefixed_name = format!("__yak_{}", name.as_ref()); + let ident = Ident::from(prefixed_name); + self.yak_component_imports.insert(name.as_ref().into(), ident.clone()); + ident + } + } + /// Get the import declaration specifiers for all used utility functions - pub fn get_yak_utility_import_declaration(&self) -> Vec { + fn get_yak_utility_import_declaration(&self) -> Vec { self .yak_utilities .values() @@ -153,6 +175,27 @@ impl YakImports { }) .collect() } + /// Get the import declaration specifiers for all used utility functions + fn get_yak_component_import_declarations(&self) -> Vec { + self + .yak_component_imports + .values() + .map(|imported| { + ImportSpecifier::Named(ImportNamedSpecifier { + span: DUMMY_SP, + local: imported.clone(), + imported: None, + is_type_only: false, + }) + }) + .collect() + } + + pub fn get_yak_import_declarations(&self) -> Vec { + let mut imports = self.get_yak_utility_import_declaration(); + imports.append(&mut self.get_yak_component_import_declarations()); + imports + } } struct YakImportVisitor { diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index ae1d1543..2225586a 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -8,6 +8,8 @@ use crate::utils::ast_helper::{create_member_prop_from_string, expr_hash_map_to_ use crate::utils::encode_module_import::encode_percent; use crate::utils::native_elements::VALID_ELEMENTS; use crate::variable_visitor::ScopedVariableReference; +use crate::yak_imports; +use crate::yak_imports::YakImports; use css_in_js_parser::{CssScope, Declaration, ParserState, ScopeType}; use swc_core::common::{Span, SyntaxContext, DUMMY_SP}; use swc_core::ecma::ast::*; @@ -27,7 +29,6 @@ pub struct YakCss { pub struct YakTransformResult { pub expression: Box, pub css: YakCss, - pub import: Option, } pub trait YakTransform { @@ -49,6 +50,7 @@ pub trait YakTransform { runtime_expressions: Vec, declarations: &[Declaration], runtime_css_variables: FxHashMap, + yak_imports: &mut YakImports, ) -> YakTransformResult; /// Get animation or styled component selector name fn get_css_reference_name(&self) -> Option { @@ -105,6 +107,7 @@ impl YakTransform for TransformNestedCss { runtime_expressions: Vec, declarations: &[Declaration], runtime_css_variables: FxHashMap, + _yak_imports: &mut YakImports, ) -> YakTransformResult { let mut arguments: Vec = vec![]; if !declarations.is_empty() { @@ -132,7 +135,6 @@ impl YakTransform for TransformNestedCss { comment_prefix: None, declarations: declarations.to_vec(), }, - import: None, expression: (Box::new(Expr::Call(CallExpr { // Use a sepcial span as this expression might be cloned as part // of a parent expression and therefore needs a unique span to @@ -193,6 +195,7 @@ impl YakTransform for TransformCssMixin { runtime_expressions: Vec, declarations: &[Declaration], runtime_css_variables: FxHashMap, + _yak_imports: &mut YakImports, ) -> YakTransformResult { let has_dynamic_content = !runtime_expressions.is_empty() || !runtime_css_variables.is_empty(); @@ -260,7 +263,6 @@ impl YakTransform for TransformCssMixin { declaration }), }, - import: None, expression: (Box::new(Expr::Call(CallExpr { span: expression.span, ctxt: SyntaxContext::empty(), @@ -291,7 +293,7 @@ impl TransformStyled { TransformStyled { class_name: None } } - fn transform_styled_usages(&self, expression: Box) -> (Box, Option) { + fn transform_styled_usages(&self, expression: Box, yak_imports: &mut YakImports) -> Box { match *expression.clone() { Expr::Member(member) => { if let Expr::Ident(ident) = *member.obj { @@ -299,32 +301,24 @@ impl TransformStyled { if let MemberProp::Ident(member_ident) = member.prop { let member_name = member_ident.sym.as_str(); return if VALID_ELEMENTS.contains(member_name) { - let mut new_ident = ident.clone(); - new_ident.sym = Atom::new(format!("__yak_{member_name}")); - ( - Box::new(Expr::Ident(new_ident.clone())), - Some(new_ident.to_id()), - ) + Box::new(Expr::Ident(yak_imports.get_yak_component_import(member_name))) } else { // Transform unknown elements to styled("element-name") - ( - Box::new(Expr::Call(CallExpr { - span: member.span, - ctxt: SyntaxContext::empty(), - callee: Callee::Expr(Box::new(Expr::Ident(ident.clone()))), - args: vec![ExprOrSpread::from(Box::new(Expr::Lit(Lit::Str(Str { - span: DUMMY_SP, - value: Atom::new(member_name), - raw: None, - }))))], - type_args: None, - })), - None, - ) + Box::new(Expr::Call(CallExpr { + span: member.span, + ctxt: SyntaxContext::empty(), + callee: Callee::Expr(Box::new(Expr::Ident(ident.clone()))), + args: vec![ExprOrSpread::from(Box::new(Expr::Lit(Lit::Str(Str { + span: DUMMY_SP, + value: Atom::new(member_name), + raw: None, + }))))], + type_args: None, + })) }; } } - (expression, None) + expression } Expr::Call(CallExpr { callee: Callee::Expr(callee), @@ -333,7 +327,7 @@ impl TransformStyled { }) => { // styled(Component) if let Expr::Ident(_) = *callee.clone() { - return (expression, None); + return expression; } // styled.button.attrs({}) is a call expression and should be tranformed @@ -371,8 +365,7 @@ impl TransformStyled { if VALID_ELEMENTS.contains(member_name) { let mut new_ident = styled_ident.clone(); new_ident.sym = Atom::new(format!("__yak_{member_name}")); - return ( - Box::new(Expr::Call(CallExpr { + return Box::new(Expr::Call(CallExpr { span: styled_ident.span, ctxt: SyntaxContext::empty(), callee: Callee::Expr(Box::new(Expr::Member( @@ -384,15 +377,13 @@ impl TransformStyled { ))), args, type_args: None, - })), - Some(new_ident.to_id()) - ) + })) } } } - (expression, None) + expression } - _ => (expression, None), + _ => expression, } } } @@ -421,6 +412,7 @@ impl YakTransform for TransformStyled { runtime_expressions: Vec, declarations: &[Declaration], runtime_css_variables: FxHashMap, + yak_imports: &mut YakImports, ) -> YakTransformResult { let mut arguments: Vec = vec![]; if !declarations.is_empty() { @@ -443,13 +435,12 @@ impl YakTransform for TransformStyled { .into(), ); } - let (tag_expression, ident) = self.transform_styled_usages(expression.tag.clone()); + let tag_expression = self.transform_styled_usages(expression.tag.clone(), yak_imports); YakTransformResult { css: YakCss { comment_prefix: Some("YAK Extracted CSS:".to_string()), declarations: declarations.to_vec(), }, - import: ident, expression: (Box::new(Expr::Call(CallExpr { span: expression.span, ctxt: SyntaxContext::empty(), @@ -510,6 +501,7 @@ impl YakTransform for TransformKeyframes { _runtime_expressions: Vec, declarations: &[Declaration], runtime_css_variables: FxHashMap, + _yak_imports: &mut YakImports, ) -> YakTransformResult { let mut arguments: Vec = vec![]; if !declarations.is_empty() { @@ -536,7 +528,6 @@ impl YakTransform for TransformKeyframes { comment_prefix: Some("YAK Extracted CSS:".to_string()), declarations: declarations.to_vec(), }, - import: None, expression: (Box::new(Expr::Call(CallExpr { span: expression.span, ctxt: SyntaxContext::empty(), From 980ac43da765d26d10b11d7470a4f5c105ea81f8 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 10:59:20 +0100 Subject: [PATCH 40/72] Update tests (imports reordered) --- packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx | 2 +- packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx | 2 +- .../yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx | 2 +- .../yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx | 2 +- packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx | 2 +- .../yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx | 2 +- .../yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx | 2 +- .../yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx | 2 +- .../yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx | 2 +- .../yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx | 2 +- packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx | 2 +- packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx | 2 +- .../tests/fixture/props-and-dynamic-styles/output.dev.tsx | 2 +- .../tests/fixture/props-and-dynamic-styles/output.prod.tsx | 2 +- 14 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx index bef2b540..24045b1c 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_button } from "next-yak/internal"; +import { styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx index bef2b540..24045b1c 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_button } from "next-yak/internal"; +import { styled } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx index 78abf2e3..6ca330c2 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_unitPostFix, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx index 20930493..92358a7d 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_unitPostFix, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx index 4d4da24e..81624229 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_unitPostFix, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx index fa4bfcfc..4ba5f520 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_button, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_unitPostFix, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { "style": { diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx index 2d72c907..2ac91bc3 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, __yak_unitPostFix, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FlexContainer = /*YAK Extracted CSS: .FlexContainer { diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx index 3309d0d2..9f3efdf7 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, __yak_unitPostFix, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FlexContainer = /*YAK Extracted CSS: .FlexContainer { diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx index 30aa926b..471c5c68 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_unitPostFix, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; // example taken from https://github.com/jantimon/next-yak/issues/208 const spacing = "20px"; diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx index 2977a75b..669793f0 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_unitPostFix, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; // example taken from https://github.com/jantimon/next-yak/issues/208 const spacing = "20px"; diff --git a/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx index a32c9268..261ea421 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/parens/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_unitPostFix, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Card = /*YAK Extracted CSS: .Card { diff --git a/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx index d6dbc4c4..b5e0c9eb 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/parens/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_unitPostFix, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Card = /*YAK Extracted CSS: .Card { diff --git a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx index 9fb96fda..7c4f3dfe 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_unitPostFix, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FlexContainer = /*YAK Extracted CSS: .FlexContainer { diff --git a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx index 2678583f..0adb9839 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled, css, __yak_div, __yak_unitPostFix } from "next-yak/internal"; +import { styled, css, __yak_unitPostFix, __yak_div } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const FlexContainer = /*YAK Extracted CSS: .FlexContainer { From bb33f34abbdfce7a9f8df5979450ddafc11a9d17 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 11:01:09 +0100 Subject: [PATCH 41/72] Simplify check --- packages/yak-swc/yak_swc/src/lib.rs | 12 ++--- packages/yak-swc/yak_swc/src/yak_imports.rs | 12 +++-- .../yak-swc/yak_swc/src/yak_transforms.rs | 53 ++++++++++--------- 3 files changed, 39 insertions(+), 38 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index d811ec4c..b00d21fb 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -1,7 +1,7 @@ use css_in_js_parser::{find_char, parse_css, to_css, CommentStateType}; use css_in_js_parser::{Declaration, ParserState}; use itertools::Itertools; -use rustc_hash::{FxHashMap, FxHashSet}; +use rustc_hash::FxHashMap; use serde::Deserialize; use std::path::Path; use std::vec; @@ -530,11 +530,9 @@ where if let ModuleItem::ModuleDecl(ModuleDecl::Import(import_declaration)) = item { if import_declaration.src.value == "next-yak/internal" { // Add all stored imports - import_declaration.specifiers.extend( - self - .yak_imports() - .get_yak_import_declarations() - ); + import_declaration + .specifiers + .extend(self.yak_imports().get_yak_import_declarations()); break; } @@ -841,7 +839,7 @@ where runtime_expressions, &self.current_declaration, runtime_css_variables, - self.yak_library_imports.as_mut().unwrap() + self.yak_library_imports.as_mut().unwrap(), ); if is_top_level { diff --git a/packages/yak-swc/yak_swc/src/yak_imports.rs b/packages/yak-swc/yak_swc/src/yak_imports.rs index e92e50a0..4d644b1e 100644 --- a/packages/yak-swc/yak_swc/src/yak_imports.rs +++ b/packages/yak-swc/yak_swc/src/yak_imports.rs @@ -146,17 +146,19 @@ impl YakImports { /// Returns the ident for the given component /// e.g. __yak_button for button - pub fn get_yak_component_import(&mut self, name: impl AsRef) -> Ident { + pub fn get_yak_component_import(&mut self, name: impl AsRef) -> Option { if !VALID_ELEMENTS.contains(name.as_ref()) { - panic!("Valid yak element not found: {}", name.as_ref()); + return None; } if let Some(id) = self.yak_component_imports.get(name.as_ref()) { - id.clone() + Some(id.clone()) } else { let prefixed_name = format!("__yak_{}", name.as_ref()); let ident = Ident::from(prefixed_name); - self.yak_component_imports.insert(name.as_ref().into(), ident.clone()); - ident + self + .yak_component_imports + .insert(name.as_ref().into(), ident.clone()); + Some(ident) } } diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 2225586a..d62f0614 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -8,7 +8,6 @@ use crate::utils::ast_helper::{create_member_prop_from_string, expr_hash_map_to_ use crate::utils::encode_module_import::encode_percent; use crate::utils::native_elements::VALID_ELEMENTS; use crate::variable_visitor::ScopedVariableReference; -use crate::yak_imports; use crate::yak_imports::YakImports; use css_in_js_parser::{CssScope, Declaration, ParserState, ScopeType}; use swc_core::common::{Span, SyntaxContext, DUMMY_SP}; @@ -293,15 +292,19 @@ impl TransformStyled { TransformStyled { class_name: None } } - fn transform_styled_usages(&self, expression: Box, yak_imports: &mut YakImports) -> Box { + fn transform_styled_usages( + &self, + expression: Box, + yak_imports: &mut YakImports, + ) -> Box { match *expression.clone() { Expr::Member(member) => { if let Expr::Ident(ident) = *member.obj { // styled.element``usages if let MemberProp::Ident(member_ident) = member.prop { let member_name = member_ident.sym.as_str(); - return if VALID_ELEMENTS.contains(member_name) { - Box::new(Expr::Ident(yak_imports.get_yak_component_import(member_name))) + if let Some(ident) = yak_imports.get_yak_component_import(member_name) { + Box::new(Expr::Ident(ident)) } else { // Transform unknown elements to styled("element-name") Box::new(Expr::Call(CallExpr { @@ -342,18 +345,18 @@ impl TransformStyled { } counter += 1; match *member.clone().obj { - Expr::Ident(current_ident) => if current_ident.sym == atom!("styled") { - ident = Some((current_ident, member.clone().prop)); - break; - } else { + Expr::Ident(current_ident) => { + if current_ident.sym == atom!("styled") { + ident = Some((current_ident, member.clone().prop)); + break; + } } Expr::Member(inner_member) => { expr = Box::new(Expr::Member(inner_member)); - }, - _ => { + } + _ => { panic!("Unepected expression"); } - } if counter == 10 { break; @@ -364,21 +367,19 @@ impl TransformStyled { let member_name = member_ident.sym.as_str(); if VALID_ELEMENTS.contains(member_name) { let mut new_ident = styled_ident.clone(); - new_ident.sym = Atom::new(format!("__yak_{member_name}")); - return Box::new(Expr::Call(CallExpr { - span: styled_ident.span, - ctxt: SyntaxContext::empty(), - callee: Callee::Expr(Box::new(Expr::Member( - MemberExpr { - prop, - span: DUMMY_SP, - obj: Box::new(Expr::Ident(new_ident.clone())) - } - ))), - args, - type_args: None, - })) - } + new_ident.sym = Atom::new(format!("__yak_{member_name}")); + return Box::new(Expr::Call(CallExpr { + span: styled_ident.span, + ctxt: SyntaxContext::empty(), + callee: Callee::Expr(Box::new(Expr::Member(MemberExpr { + prop, + span: DUMMY_SP, + obj: Box::new(Expr::Ident(new_ident.clone())), + }))), + args, + type_args: None, + })); + } } } expression From 3eb4cb85dd44e974775dc2d04ffeb6aa09e9a143 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 11:02:24 +0100 Subject: [PATCH 42/72] Simplify more --- packages/yak-swc/yak_swc/src/yak_transforms.rs | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index d62f0614..8882ae61 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -349,7 +349,7 @@ impl TransformStyled { if current_ident.sym == atom!("styled") { ident = Some((current_ident, member.clone().prop)); break; - } + } } Expr::Member(inner_member) => { expr = Box::new(Expr::Member(inner_member)); @@ -365,16 +365,14 @@ impl TransformStyled { if let Some((styled_ident, MemberProp::Ident(member_ident))) = ident { if let Some(prop) = outermost { let member_name = member_ident.sym.as_str(); - if VALID_ELEMENTS.contains(member_name) { - let mut new_ident = styled_ident.clone(); - new_ident.sym = Atom::new(format!("__yak_{member_name}")); + if let Some(ident) = yak_imports.get_yak_component_import(member_name) { return Box::new(Expr::Call(CallExpr { span: styled_ident.span, ctxt: SyntaxContext::empty(), callee: Callee::Expr(Box::new(Expr::Member(MemberExpr { prop, span: DUMMY_SP, - obj: Box::new(Expr::Ident(new_ident.clone())), + obj: Box::new(Expr::Ident(ident)), }))), args, type_args: None, From 65bc66a937c77456a462edb3585ec4d40678d85a Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 11:03:43 +0100 Subject: [PATCH 43/72] Cleanup --- packages/yak-swc/yak_swc/src/lib.rs | 1 - packages/yak-swc/yak_swc/src/yak_transforms.rs | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index b00d21fb..fb113175 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -1,6 +1,5 @@ use css_in_js_parser::{find_char, parse_css, to_css, CommentStateType}; use css_in_js_parser::{Declaration, ParserState}; -use itertools::Itertools; use rustc_hash::FxHashMap; use serde::Deserialize; use std::path::Path; diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 8882ae61..9606ef55 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -6,7 +6,6 @@ use swc_core::common::util::move_map::MoveMap; use crate::utils::ast_helper::{create_member_prop_from_string, expr_hash_map_to_object}; use crate::utils::encode_module_import::encode_percent; -use crate::utils::native_elements::VALID_ELEMENTS; use crate::variable_visitor::ScopedVariableReference; use crate::yak_imports::YakImports; use css_in_js_parser::{CssScope, Declaration, ParserState, ScopeType}; From ba197591500334df75dec4362b6137e45f794a02 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 11:26:12 +0100 Subject: [PATCH 44/72] Fixes --- packages/yak-swc/yak_swc/src/yak_transforms.rs | 6 ++++-- packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx | 2 +- .../yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 9606ef55..5b5b6c72 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -1,3 +1,5 @@ +use std::fmt::format; + use itertools::Itertools; use rustc_hash::FxHashMap; use swc_core::atoms::atom; @@ -302,10 +304,10 @@ impl TransformStyled { // styled.element``usages if let MemberProp::Ident(member_ident) = member.prop { let member_name = member_ident.sym.as_str(); - if let Some(ident) = yak_imports.get_yak_component_import(member_name) { + return if let Some(ident) = yak_imports.get_yak_component_import(member_name) { Box::new(Expr::Ident(ident)) } else { - // Transform unknown elements to styled("element-name") + // Transform elements without yakcomponent import to styled("element-name") Box::new(Expr::Call(CallExpr { span: member.span, ctxt: SyntaxContext::empty(), diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx index 24045b1c..bef2b540 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx index 24045b1c..bef2b540 100644 --- a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx @@ -1,4 +1,4 @@ -import { styled } from "next-yak/internal"; +import { styled, __yak_button } from "next-yak/internal"; import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; export const Button = /*YAK Extracted CSS: .Button { From 164c6623be5739ac10002a02645278bad4c7325f Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 12:25:22 +0100 Subject: [PATCH 45/72] Cleanup --- packages/yak-swc/yak_swc/src/yak_transforms.rs | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 5b5b6c72..7975adf1 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -1,4 +1,3 @@ -use std::fmt::format; use itertools::Itertools; use rustc_hash::FxHashMap; From 52ee8046c51261cd364d3e94dc33e2c6b45be374 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 12:45:52 +0100 Subject: [PATCH 46/72] Add new tests --- .../tests/fixture/attrs-on-function-component/input.tsx | 5 +++++ .../fixture/attrs-on-function-component/output.dev.tsx | 9 +++++++++ .../fixture/attrs-on-function-component/output.prod.tsx | 9 +++++++++ .../tests/fixture/function-on-component/input.tsx | 5 +++++ .../tests/fixture/function-on-component/output.dev.tsx | 9 +++++++++ .../tests/fixture/function-on-component/output.prod.tsx | 9 +++++++++ 6 files changed, 46 insertions(+) create mode 100644 packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/input.tsx create mode 100644 packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/output.dev.tsx create mode 100644 packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/output.prod.tsx create mode 100644 packages/yak-swc/yak_swc/tests/fixture/function-on-component/input.tsx create mode 100644 packages/yak-swc/yak_swc/tests/fixture/function-on-component/output.dev.tsx create mode 100644 packages/yak-swc/yak_swc/tests/fixture/function-on-component/output.prod.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/input.tsx new file mode 100644 index 00000000..a3dc86cd --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/input.tsx @@ -0,0 +1,5 @@ +import { styled } from "next-yak"; + +export const Button = styled("button").attrs({ type: "button" })` + background-color: #007bff; +`; diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/output.dev.tsx new file mode 100644 index 00000000..640d060b --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/output.dev.tsx @@ -0,0 +1,9 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; +} +*/ /*#__PURE__*/ styled("button").attrs({ + type: "button" +})(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/output.prod.tsx new file mode 100644 index 00000000..640d060b --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs-on-function-component/output.prod.tsx @@ -0,0 +1,9 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; +} +*/ /*#__PURE__*/ styled("button").attrs({ + type: "button" +})(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/function-on-component/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/function-on-component/input.tsx new file mode 100644 index 00000000..88c6df4f --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/function-on-component/input.tsx @@ -0,0 +1,5 @@ +import { styled } from "next-yak"; + +export const Button = styled.button.functionName({ arg: "something" })` + background-color: #007bff; +`; \ No newline at end of file diff --git a/packages/yak-swc/yak_swc/tests/fixture/function-on-component/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/function-on-component/output.dev.tsx new file mode 100644 index 00000000..bf664191 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/function-on-component/output.dev.tsx @@ -0,0 +1,9 @@ +import { styled, __yak_button } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; +} +*/ /*#__PURE__*/ __yak_button.functionName({ + arg: "something" +})(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/function-on-component/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/function-on-component/output.prod.tsx new file mode 100644 index 00000000..bf664191 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/function-on-component/output.prod.tsx @@ -0,0 +1,9 @@ +import { styled, __yak_button } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; +} +*/ /*#__PURE__*/ __yak_button.functionName({ + arg: "something" +})(__styleYak.Button); From 736a510686351accb4d4ed88348920252527bd05 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 12:46:08 +0100 Subject: [PATCH 47/72] Simplify function call transformation --- .../yak-swc/yak_swc/src/yak_transforms.rs | 72 +++++++------------ 1 file changed, 24 insertions(+), 48 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 7975adf1..2d1313f8 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -1,9 +1,12 @@ +use std::fmt::format; + use itertools::Itertools; use rustc_hash::FxHashMap; use swc_core::atoms::atom; use swc_core::atoms::Atom; use swc_core::common::util::move_map::MoveMap; +use swc_core::common::Spanned; use crate::utils::ast_helper::{create_member_prop_from_string, expr_hash_map_to_object}; use crate::utils::encode_module_import::encode_percent; @@ -326,60 +329,33 @@ impl TransformStyled { Expr::Call(CallExpr { callee: Callee::Expr(callee), args, - .. + type_args, + ctxt, + span }) => { - // styled(Component) + // e.g. styled(Component) if let Expr::Ident(_) = *callee.clone() { return expression; } - // styled.button.attrs({}) is a call expression and should be tranformed - // to __yak_button.attrs - let mut expr: Box = callee.clone(); - let mut counter = 1; - let mut ident: Option<(Ident, MemberProp)> = None; - let mut outermost: Option = None; - while let Expr::Member(ref member) = *expr { - if outermost.is_none() { - outermost = Some(member.clone().prop); - } - counter += 1; - match *member.clone().obj { - Expr::Ident(current_ident) => { - if current_ident.sym == atom!("styled") { - ident = Some((current_ident, member.clone().prop)); - break; - } - } - Expr::Member(inner_member) => { - expr = Box::new(Expr::Member(inner_member)); - } - _ => { - panic!("Unepected expression"); - } - } - if counter == 10 { - break; - } - } - if let Some((styled_ident, MemberProp::Ident(member_ident))) = ident { - if let Some(prop) = outermost { - let member_name = member_ident.sym.as_str(); - if let Some(ident) = yak_imports.get_yak_component_import(member_name) { - return Box::new(Expr::Call(CallExpr { - span: styled_ident.span, - ctxt: SyntaxContext::empty(), - callee: Callee::Expr(Box::new(Expr::Member(MemberExpr { - prop, - span: DUMMY_SP, - obj: Box::new(Expr::Ident(ident)), - }))), - args, - type_args: None, - })); - } - } + // e.g. styled.button.function(args) => __yak_button.function(args) + if let Expr::Member(ref member) = *callee.clone() { + let call_name = member.clone().prop; + let rest_identifier = self.transform_styled_usages(member.obj.clone(), yak_imports); + + return Box::new(Expr::Call(CallExpr { + span, + ctxt, + callee: Callee::Expr(Box::new(Expr::Member(MemberExpr { + prop: call_name, + span: DUMMY_SP, + obj: rest_identifier, + }))), + args, + type_args, + })) } + // Anything else is left untransformed expression } _ => expression, From b08c789cf7d6c169c62860d7230980ae8641cb08 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 12:47:56 +0100 Subject: [PATCH 48/72] Cleanup --- packages/yak-swc/yak_swc/src/yak_transforms.rs | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 2d1313f8..16f7cce7 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -1,12 +1,7 @@ - -use std::fmt::format; - use itertools::Itertools; use rustc_hash::FxHashMap; -use swc_core::atoms::atom; use swc_core::atoms::Atom; use swc_core::common::util::move_map::MoveMap; -use swc_core::common::Spanned; use crate::utils::ast_helper::{create_member_prop_from_string, expr_hash_map_to_object}; use crate::utils::encode_module_import::encode_percent; @@ -331,7 +326,7 @@ impl TransformStyled { args, type_args, ctxt, - span + span, }) => { // e.g. styled(Component) if let Expr::Ident(_) = *callee.clone() { @@ -340,20 +335,22 @@ impl TransformStyled { // e.g. styled.button.function(args) => __yak_button.function(args) if let Expr::Member(ref member) = *callee.clone() { - let call_name = member.clone().prop; + let function_name = member.prop.clone(); + // transform the member expression on which the function is called, e.g. styled.button let rest_identifier = self.transform_styled_usages(member.obj.clone(), yak_imports); + // call the original function on the transformed expression return Box::new(Expr::Call(CallExpr { span, ctxt, callee: Callee::Expr(Box::new(Expr::Member(MemberExpr { - prop: call_name, + prop: function_name, span: DUMMY_SP, obj: rest_identifier, }))), args, type_args, - })) + })); } // Anything else is left untransformed expression From c5900a0b35c2d1198b0812c03433bc535b3772aa Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 12:54:45 +0100 Subject: [PATCH 49/72] Move function out of object because no self reference is needed --- .../yak-swc/yak_swc/src/yak_transforms.rs | 120 +++++++++--------- 1 file changed, 58 insertions(+), 62 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 16f7cce7..6ae3fff5 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -289,74 +289,70 @@ impl TransformStyled { pub fn new() -> TransformStyled { TransformStyled { class_name: None } } +} - fn transform_styled_usages( - &self, - expression: Box, - yak_imports: &mut YakImports, - ) -> Box { - match *expression.clone() { - Expr::Member(member) => { - if let Expr::Ident(ident) = *member.obj { - // styled.element``usages - if let MemberProp::Ident(member_ident) = member.prop { - let member_name = member_ident.sym.as_str(); - return if let Some(ident) = yak_imports.get_yak_component_import(member_name) { - Box::new(Expr::Ident(ident)) - } else { - // Transform elements without yakcomponent import to styled("element-name") - Box::new(Expr::Call(CallExpr { - span: member.span, - ctxt: SyntaxContext::empty(), - callee: Callee::Expr(Box::new(Expr::Ident(ident.clone()))), - args: vec![ExprOrSpread::from(Box::new(Expr::Lit(Lit::Str(Str { - span: DUMMY_SP, - value: Atom::new(member_name), - raw: None, - }))))], - type_args: None, - })) - }; - } +fn transform_styled_usages(expression: Box, yak_imports: &mut YakImports) -> Box { + match *expression.clone() { + Expr::Member(member) => { + if let Expr::Ident(ident) = *member.obj { + // styled.element``usages + if let MemberProp::Ident(member_ident) = member.prop { + let member_name = member_ident.sym.as_str(); + return if let Some(ident) = yak_imports.get_yak_component_import(member_name) { + Box::new(Expr::Ident(ident)) + } else { + // Transform elements without yakcomponent import to styled("element-name") + Box::new(Expr::Call(CallExpr { + span: member.span, + ctxt: SyntaxContext::empty(), + callee: Callee::Expr(Box::new(Expr::Ident(ident.clone()))), + args: vec![ExprOrSpread::from(Box::new(Expr::Lit(Lit::Str(Str { + span: DUMMY_SP, + value: Atom::new(member_name), + raw: None, + }))))], + type_args: None, + })) + }; } - expression } - Expr::Call(CallExpr { - callee: Callee::Expr(callee), - args, - type_args, - ctxt, - span, - }) => { - // e.g. styled(Component) - if let Expr::Ident(_) = *callee.clone() { - return expression; - } + expression + } + Expr::Call(CallExpr { + callee: Callee::Expr(callee), + args, + type_args, + ctxt, + span, + }) => { + // e.g. styled(Component) + if let Expr::Ident(_) = *callee.clone() { + return expression; + } - // e.g. styled.button.function(args) => __yak_button.function(args) - if let Expr::Member(ref member) = *callee.clone() { - let function_name = member.prop.clone(); - // transform the member expression on which the function is called, e.g. styled.button - let rest_identifier = self.transform_styled_usages(member.obj.clone(), yak_imports); + // e.g. styled.button.function(args) => __yak_button.function(args) + if let Expr::Member(ref member) = *callee.clone() { + let function_name = member.prop.clone(); + // transform the member expression on which the function is called, e.g. styled.button + let rest_identifier = transform_styled_usages(member.obj.clone(), yak_imports); - // call the original function on the transformed expression - return Box::new(Expr::Call(CallExpr { - span, - ctxt, - callee: Callee::Expr(Box::new(Expr::Member(MemberExpr { - prop: function_name, - span: DUMMY_SP, - obj: rest_identifier, - }))), - args, - type_args, - })); - } - // Anything else is left untransformed - expression + // call the original function on the transformed expression + return Box::new(Expr::Call(CallExpr { + span, + ctxt, + callee: Callee::Expr(Box::new(Expr::Member(MemberExpr { + prop: function_name, + span: DUMMY_SP, + obj: rest_identifier, + }))), + args, + type_args, + })); } - _ => expression, + // Anything else is left untransformed + expression } + _ => expression, } } @@ -407,7 +403,7 @@ impl YakTransform for TransformStyled { .into(), ); } - let tag_expression = self.transform_styled_usages(expression.tag.clone(), yak_imports); + let tag_expression = transform_styled_usages(expression.tag.clone(), yak_imports); YakTransformResult { css: YakCss { comment_prefix: Some("YAK Extracted CSS:".to_string()), From 37663a0a41c723bff07a4160e0e1cd245259852b Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 13:24:43 +0100 Subject: [PATCH 50/72] Cleanup --- packages/yak-swc/yak_swc/src/lib.rs | 2 +- packages/yak-swc/yak_swc/src/yak_imports.rs | 2 +- packages/yak-swc/yak_swc/src/yak_transforms.rs | 8 +++++--- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index 19b75af4..aa57452a 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -531,7 +531,7 @@ where // Add all stored imports import_declaration .specifiers - .extend(self.yak_imports().get_yak_import_declarations()); + .extend(self.yak_imports().get_generated_yak_import_declarations()); break; } diff --git a/packages/yak-swc/yak_swc/src/yak_imports.rs b/packages/yak-swc/yak_swc/src/yak_imports.rs index 8c5f655d..1c839d57 100644 --- a/packages/yak-swc/yak_swc/src/yak_imports.rs +++ b/packages/yak-swc/yak_swc/src/yak_imports.rs @@ -193,7 +193,7 @@ impl YakImports { .collect() } - pub fn get_yak_import_declarations(&self) -> Vec { + pub fn get_generated_yak_import_declarations(&self) -> Vec { let mut imports = self.get_yak_utility_import_declaration(); imports.append(&mut self.get_yak_component_import_declarations()); imports diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 6ae3fff5..e9639eda 100644 --- a/packages/yak-swc/yak_swc/src/yak_transforms.rs +++ b/packages/yak-swc/yak_swc/src/yak_transforms.rs @@ -299,6 +299,7 @@ fn transform_styled_usages(expression: Box, yak_imports: &mut YakImports) if let MemberProp::Ident(member_ident) = member.prop { let member_name = member_ident.sym.as_str(); return if let Some(ident) = yak_imports.get_yak_component_import(member_name) { + // styled.button -> __yak_button Box::new(Expr::Ident(ident)) } else { // Transform elements without yakcomponent import to styled("element-name") @@ -330,11 +331,12 @@ fn transform_styled_usages(expression: Box, yak_imports: &mut YakImports) return expression; } - // e.g. styled.button.function(args) => __yak_button.function(args) + // e.g. styled.button.functionName(args) -> __yak_button.functionName(args) if let Expr::Member(ref member) = *callee.clone() { + // e.g. functionName let function_name = member.prop.clone(); // transform the member expression on which the function is called, e.g. styled.button - let rest_identifier = transform_styled_usages(member.obj.clone(), yak_imports); + let transformed_identifier = transform_styled_usages(member.obj.clone(), yak_imports); // call the original function on the transformed expression return Box::new(Expr::Call(CallExpr { @@ -343,7 +345,7 @@ fn transform_styled_usages(expression: Box, yak_imports: &mut YakImports) callee: Callee::Expr(Box::new(Expr::Member(MemberExpr { prop: function_name, span: DUMMY_SP, - obj: rest_identifier, + obj: transformed_identifier, }))), args, type_args, From f7682aecc248fd1296670693f8ac480f70a8fe92 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Fri, 6 Dec 2024 14:20:20 +0100 Subject: [PATCH 51/72] mark as pure --- packages/next-yak/package.json | 1 + packages/next-yak/tsup.config.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/next-yak/package.json b/packages/next-yak/package.json index 65ee3d2a..6a84da4e 100644 --- a/packages/next-yak/package.json +++ b/packages/next-yak/package.json @@ -3,6 +3,7 @@ "version": "3.1.0", "type": "module", "types": "./dist/", + "sideEffects": false, "license": "MIT", "description": "next-yak is a CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration", "homepage": "https://yak.js.org/", diff --git a/packages/next-yak/tsup.config.ts b/packages/next-yak/tsup.config.ts index 2be6e312..bc13ff0a 100644 --- a/packages/next-yak/tsup.config.ts +++ b/packages/next-yak/tsup.config.ts @@ -26,8 +26,8 @@ export default defineConfig([ // internal { entryPoints: ["runtime/internal.ts"], - format: ["cjs", "esm"], - minify: true, + format: ["esm"], + minify: false, sourcemap: true, dts: false, external: ["react", "next-yak/context"], From 86566db85955404c96b1eb45173009adb89f07d7 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Fri, 6 Dec 2024 14:40:36 +0100 Subject: [PATCH 52/72] next 15.0.4 --- packages/benchmarks/package.json | 2 +- packages/docs/package.json | 2 +- packages/example/package.json | 2 +- packages/next-yak/package.json | 2 +- pnpm-lock.yaml | 257 +++++++++++++++++-------------- 5 files changed, 144 insertions(+), 121 deletions(-) diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.json index f9374734..863a36bb 100644 --- a/packages/benchmarks/package.json +++ b/packages/benchmarks/package.json @@ -16,7 +16,7 @@ }, "dependencies": { "@swc/core": "1.7.42", - "next": "15.0.2", + "next": "15.0.4", "next-yak": "workspace:*", "react": "18.3.1", "react-dom": "18.3.1", diff --git a/packages/docs/package.json b/packages/docs/package.json index 863c852d..c3fe2a7a 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -24,7 +24,7 @@ "fumadocs-openapi": "5.5.9", "fumadocs-twoslash": "2.0.1", "fumadocs-ui": "14.3.1", - "next": "15.0.2", + "next": "15.0.4", "next-themes": "0.4.3", "next-yak": "workspace:*", "raw-loader": "4.0.2", diff --git a/packages/example/package.json b/packages/example/package.json index 273f7aa6..666ce98e 100644 --- a/packages/example/package.json +++ b/packages/example/package.json @@ -20,7 +20,7 @@ "@types/node": "20.4.5", "@types/react": "18.3.12", "@types/react-dom": "18.3.1", - "next": "15.0.2", + "next": "15.0.4", "next-yak": "workspace:*", "postcss-nested": "^6.2.0", "react": "18.3.1", diff --git a/packages/next-yak/package.json b/packages/next-yak/package.json index 6a84da4e..fdbd5269 100644 --- a/packages/next-yak/package.json +++ b/packages/next-yak/package.json @@ -93,7 +93,7 @@ "@types/react-test-renderer": "^18.0.3", "fast-glob": "3.3.2", "jsdom": "^22.1.0", - "next": "15.0.2", + "next": "15.0.4", "react": "18.3.1", "react-test-renderer": "18.3.1", "typescript": "5.5.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 50873a97..c960d6e3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ importers: specifier: 1.7.42 version: 1.7.42(@swc/helpers@0.5.13) next: - specifier: 15.0.2 - version: 15.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 15.0.4 + version: 15.0.4(@babel/core@7.23.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-yak: specifier: workspace:* version: link:../next-yak @@ -62,7 +62,7 @@ importers: version: 1.2.2 tsup: specifier: 7.2.0 - version: 7.2.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(postcss@8.4.47)(typescript@5.5.2) + version: 7.2.0(@swc/core@1.7.42)(postcss@8.4.47)(typescript@5.5.2) typescript: specifier: 5.5.2 version: 5.5.2 @@ -119,22 +119,22 @@ importers: version: 1.7.42(@swc/helpers@0.5.13) fumadocs-core: specifier: 14.3.1 - version: 14.3.1(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.3.1(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) fumadocs-mdx: specifier: 11.1.1 - version: 11.1.1(acorn@8.14.0)(fumadocs-core@14.3.1(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) + version: 11.1.1(acorn@8.14.0)(fumadocs-core@14.3.1(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) fumadocs-openapi: specifier: 5.5.9 - version: 5.5.9(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14) + version: 5.5.9(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14) fumadocs-twoslash: specifier: 2.0.1 - version: 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(fumadocs-ui@14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(shiki@1.22.2)(typescript@5.5.2) + version: 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(fumadocs-ui@14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(shiki@1.22.2)(typescript@5.5.2) fumadocs-ui: specifier: 14.3.1 - version: 14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14) + version: 14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14) next: - specifier: 15.0.2 - version: 15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 15.0.4 + version: 15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-themes: specifier: 0.4.3 version: 0.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -200,8 +200,8 @@ importers: specifier: 18.3.1 version: 18.3.1 next: - specifier: 15.0.2 - version: 15.0.2(@babel/core@7.23.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 15.0.4 + version: 15.0.4(@babel/core@7.23.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-yak: specifier: workspace:* version: link:../next-yak @@ -290,7 +290,7 @@ importers: version: 18.0.3 '@types/webpack': specifier: 5.28.5 - version: 5.28.5(@swc/core@1.7.42(@swc/helpers@0.5.13)) + version: 5.28.5(@swc/core@1.7.42) fast-glob: specifier: 3.3.2 version: 3.3.2 @@ -298,8 +298,8 @@ importers: specifier: ^22.1.0 version: 22.1.0 next: - specifier: 15.0.2 - version: 15.0.2(@babel/core@7.23.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 15.0.4 + version: 15.0.4(@babel/core@7.23.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: 18.3.1 version: 18.3.1 @@ -308,7 +308,7 @@ importers: version: 18.3.1(react@18.3.1) tsup: specifier: 7.2.0 - version: 7.2.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(postcss@8.4.47)(typescript@5.5.2) + version: 7.2.0(@swc/core@1.7.42)(postcss@8.4.47)(typescript@5.5.2) typescript: specifier: 5.5.2 version: 5.5.2 @@ -1340,8 +1340,8 @@ packages: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - '@next/env@15.0.2': - resolution: {integrity: sha512-c0Zr0ModK5OX7D4ZV8Jt/wqoXtitLNPwUfG9zElCZztdaZyNVnN40rDXVZ/+FGuR4CcNV5AEfM6N8f+Ener7Dg==} + '@next/env@15.0.4': + resolution: {integrity: sha512-WNRvtgnRVDD4oM8gbUcRc27IAhaL4eXQ/2ovGbgLnPGUvdyDr8UdXP4Q/IBDdAdojnD2eScryIDirv0YUCjUVw==} '@next/mdx@15.0.2': resolution: {integrity: sha512-CANCD3snLdLJxCcqn0DBAl5qMUBvAPdWA2cWljt+lnVtcvIfGXRVLwraqSOHBjddvZ3ClCYcf3AvjEBHA4NBxA==} @@ -1354,50 +1354,50 @@ packages: '@mdx-js/react': optional: true - '@next/swc-darwin-arm64@15.0.2': - resolution: {integrity: sha512-GK+8w88z+AFlmt+ondytZo2xpwlfAR8U6CRwXancHImh6EdGfHMIrTSCcx5sOSBei00GyLVL0ioo1JLKTfprgg==} + '@next/swc-darwin-arm64@15.0.4': + resolution: {integrity: sha512-QecQXPD0yRHxSXWL5Ff80nD+A56sUXZG9koUsjWJwA2Z0ZgVQfuy7gd0/otjxoOovPVHR2eVEvPMHbtZP+pf9w==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] - '@next/swc-darwin-x64@15.0.2': - resolution: {integrity: sha512-KUpBVxIbjzFiUZhiLIpJiBoelqzQtVZbdNNsehhUn36e2YzKHphnK8eTUW1s/4aPy5kH/UTid8IuVbaOpedhpw==} + '@next/swc-darwin-x64@15.0.4': + resolution: {integrity: sha512-pb7Bye3y1Og3PlCtnz2oO4z+/b3pH2/HSYkLbL0hbVuTGil7fPen8/3pyyLjdiTLcFJ+ymeU3bck5hd4IPFFCA==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] - '@next/swc-linux-arm64-gnu@15.0.2': - resolution: {integrity: sha512-9J7TPEcHNAZvwxXRzOtiUvwtTD+fmuY0l7RErf8Yyc7kMpE47MIQakl+3jecmkhOoIyi/Rp+ddq7j4wG6JDskQ==} + '@next/swc-linux-arm64-gnu@15.0.4': + resolution: {integrity: sha512-12oSaBFjGpB227VHzoXF3gJoK2SlVGmFJMaBJSu5rbpaoT5OjP5OuCLuR9/jnyBF1BAWMs/boa6mLMoJPRriMA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@15.0.2': - resolution: {integrity: sha512-BjH4ZSzJIoTTZRh6rG+a/Ry4SW0HlizcPorqNBixBWc3wtQtj4Sn9FnRZe22QqrPnzoaW0ctvSz4FaH4eGKMww==} + '@next/swc-linux-arm64-musl@15.0.4': + resolution: {integrity: sha512-QARO88fR/a+wg+OFC3dGytJVVviiYFEyjc/Zzkjn/HevUuJ7qGUUAUYy5PGVWY1YgTzeRYz78akQrVQ8r+sMjw==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@next/swc-linux-x64-gnu@15.0.2': - resolution: {integrity: sha512-i3U2TcHgo26sIhcwX/Rshz6avM6nizrZPvrDVDY1bXcLH1ndjbO8zuC7RoHp0NSK7wjJMPYzm7NYL1ksSKFreA==} + '@next/swc-linux-x64-gnu@15.0.4': + resolution: {integrity: sha512-Z50b0gvYiUU1vLzfAMiChV8Y+6u/T2mdfpXPHraqpypP7yIT2UV9YBBhcwYkxujmCvGEcRTVWOj3EP7XW/wUnw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@15.0.2': - resolution: {integrity: sha512-AMfZfSVOIR8fa+TXlAooByEF4OB00wqnms1sJ1v+iu8ivwvtPvnkwdzzFMpsK5jA2S9oNeeQ04egIWVb4QWmtQ==} + '@next/swc-linux-x64-musl@15.0.4': + resolution: {integrity: sha512-7H9C4FAsrTAbA/ENzvFWsVytqRYhaJYKa2B3fyQcv96TkOGVMcvyS6s+sj4jZlacxxTcn7ygaMXUPkEk7b78zw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@next/swc-win32-arm64-msvc@15.0.2': - resolution: {integrity: sha512-JkXysDT0/hEY47O+Hvs8PbZAeiCQVxKfGtr4GUpNAhlG2E0Mkjibuo8ryGD29Qb5a3IOnKYNoZlh/MyKd2Nbww==} + '@next/swc-win32-arm64-msvc@15.0.4': + resolution: {integrity: sha512-Z/v3WV5xRaeWlgJzN9r4PydWD8sXV35ywc28W63i37G2jnUgScA4OOgS8hQdiXLxE3gqfSuHTicUhr7931OXPQ==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] - '@next/swc-win32-x64-msvc@15.0.2': - resolution: {integrity: sha512-foaUL0NqJY/dX0Pi/UcZm5zsmSk5MtP/gxx3xOPyREkMFN+CTjctPfu3QaqrQHinaKdPnMWPJDKt4VjDfTBe/Q==} + '@next/swc-win32-x64-msvc@15.0.4': + resolution: {integrity: sha512-NGLchGruagh8lQpDr98bHLyWJXOBSmkEAfK980OiNBa7vNm6PsNoPvzTfstT78WyOeMRQphEQ455rggd7Eo+Dw==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -1641,8 +1641,8 @@ packages: '@radix-ui/react-primitive@2.0.0': resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==} peerDependencies: - '@types/react': npm:types-react@19.0.0-rc.1 - '@types/react-dom': npm:types-react-dom@19.0.0-rc.1 + '@types/react': '*' + '@types/react-dom': '*' react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc peerDependenciesMeta: @@ -1680,8 +1680,8 @@ packages: '@radix-ui/react-select@2.1.2': resolution: {integrity: sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==} peerDependencies: - '@types/react': npm:types-react@19.0.0-rc.1 - '@types/react-dom': npm:types-react-dom@19.0.0-rc.1 + '@types/react': '*' + '@types/react-dom': '*' react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc peerDependenciesMeta: @@ -3919,16 +3919,16 @@ packages: react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc - next@15.0.2: - resolution: {integrity: sha512-rxIWHcAu4gGSDmwsELXacqAPUk+j8dV/A9cDF5fsiCMpkBDYkO2AEaL1dfD+nNmDiU6QMCFN8Q30VEKapT9UHQ==} - engines: {node: '>=18.18.0'} + next@15.0.4: + resolution: {integrity: sha512-nuy8FH6M1FG0lktGotamQDCXhh5hZ19Vo0ht1AOIQWrYJLP598TIUagKtvJrfJ5AGwB/WmDqkKaKhMpVifvGPA==} + engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0} hasBin: true peerDependencies: '@opentelemetry/api': ^1.1.0 '@playwright/test': ^1.41.2 babel-plugin-react-compiler: '*' - react: ^18.2.0 || 19.0.0-rc-02c0e824-20241028 - react-dom: ^18.2.0 || 19.0.0-rc-02c0e824-20241028 + react: ^18.2.0 || 19.0.0-rc-66855b96-20241106 || ^19.0.0 + react-dom: ^18.2.0 || 19.0.0-rc-66855b96-20241106 || ^19.0.0 sass: ^1.3.0 peerDependenciesMeta: '@opentelemetry/api': @@ -6233,34 +6233,34 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@next/env@15.0.2': {} + '@next/env@15.0.4': {} '@next/mdx@15.0.2': dependencies: source-map: 0.7.4 - '@next/swc-darwin-arm64@15.0.2': + '@next/swc-darwin-arm64@15.0.4': optional: true - '@next/swc-darwin-x64@15.0.2': + '@next/swc-darwin-x64@15.0.4': optional: true - '@next/swc-linux-arm64-gnu@15.0.2': + '@next/swc-linux-arm64-gnu@15.0.4': optional: true - '@next/swc-linux-arm64-musl@15.0.2': + '@next/swc-linux-arm64-musl@15.0.4': optional: true - '@next/swc-linux-x64-gnu@15.0.2': + '@next/swc-linux-x64-gnu@15.0.4': optional: true - '@next/swc-linux-x64-musl@15.0.2': + '@next/swc-linux-x64-musl@15.0.4': optional: true - '@next/swc-win32-arm64-msvc@15.0.2': + '@next/swc-win32-arm64-msvc@15.0.4': optional: true - '@next/swc-win32-x64-msvc@15.0.2': + '@next/swc-win32-x64-msvc@15.0.4': optional: true '@nodelib/fs.scandir@2.1.5': @@ -7022,6 +7022,17 @@ snapshots: - uglify-js - webpack-cli + '@types/webpack@5.28.5(@swc/core@1.7.42)': + dependencies: + '@types/node': 22.9.0 + tapable: 2.2.1 + webpack: 5.92.1(@swc/core@1.7.42) + transitivePeerDependencies: + - '@swc/core' + - esbuild + - uglify-js + - webpack-cli + '@types/yargs-parser@21.0.3': {} '@types/yargs@17.0.33': @@ -7999,7 +8010,7 @@ snapshots: fsevents@2.3.3: optional: true - fumadocs-core@14.3.1(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + fumadocs-core@14.3.1(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@formatjs/intl-localematcher': 0.5.7 '@orama/orama': 3.0.1 @@ -8016,14 +8027,14 @@ snapshots: shiki: 1.22.2 unist-util-visit: 5.0.0 optionalDependencies: - next: 15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) transitivePeerDependencies: - '@types/react' - supports-color - fumadocs-mdx@11.1.1(acorn@8.14.0)(fumadocs-core@14.3.1(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)): + fumadocs-mdx@11.1.1(acorn@8.14.0)(fumadocs-core@14.3.1(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)): dependencies: '@mdx-js/mdx': 3.1.0(acorn@8.14.0) chokidar: 4.0.1 @@ -8031,16 +8042,16 @@ snapshots: esbuild: 0.24.0 estree-util-value-to-estree: 3.2.1 fast-glob: 3.3.2 - fumadocs-core: 14.3.1(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + fumadocs-core: 14.3.1(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) gray-matter: 4.0.3 micromatch: 4.0.8 - next: 15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) zod: 3.23.8 transitivePeerDependencies: - acorn - supports-color - fumadocs-openapi@5.5.9(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14): + fumadocs-openapi@5.5.9(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14): dependencies: '@apidevtools/json-schema-ref-parser': 11.7.2 '@fumari/json-schema-to-typescript': 1.1.1 @@ -8048,12 +8059,12 @@ snapshots: '@radix-ui/react-slot': 1.1.0(@types/react@18.3.12)(react@18.3.1) class-variance-authority: 0.7.0 fast-glob: 3.3.2 - fumadocs-core: 14.3.1(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - fumadocs-ui: 14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14) + fumadocs-core: 14.3.1(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + fumadocs-ui: 14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14) github-slugger: 2.0.0 hast-util-to-jsx-runtime: 2.3.2 js-yaml: 4.1.0 - next: 15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) openapi-sampler: 1.5.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -8069,11 +8080,11 @@ snapshots: - supports-color - tailwindcss - fumadocs-twoslash@2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(fumadocs-ui@14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(shiki@1.22.2)(typescript@5.5.2): + fumadocs-twoslash@2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(fumadocs-ui@14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(shiki@1.22.2)(typescript@5.5.2): dependencies: '@radix-ui/react-popover': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@shikijs/twoslash': 1.22.2(typescript@5.5.2) - fumadocs-ui: 14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14) + fumadocs-ui: 14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14) mdast-util-from-markdown: 2.0.2 mdast-util-gfm: 3.0.0 mdast-util-to-hast: 13.2.0 @@ -8087,7 +8098,7 @@ snapshots: - supports-color - typescript - fumadocs-ui@14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14): + fumadocs-ui@14.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.14): dependencies: '@radix-ui/react-accordion': 1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-collapsible': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -8100,9 +8111,9 @@ snapshots: '@radix-ui/react-tabs': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@tailwindcss/typography': 0.5.15(tailwindcss@3.4.14) class-variance-authority: 0.7.0 - fumadocs-core: 14.3.1(@types/react@18.3.12)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + fumadocs-core: 14.3.1(@types/react@18.3.12)(next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) lucide-react: 0.455.0(react@18.3.1) - next: 15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-themes: 0.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -9541,9 +9552,9 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - next@15.0.2(@babel/core@7.23.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next@15.0.4(@babel/core@7.23.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@next/env': 15.0.2 + '@next/env': 15.0.4 '@swc/counter': 0.1.3 '@swc/helpers': 0.5.13 busboy: 1.6.0 @@ -9553,22 +9564,22 @@ snapshots: react-dom: 18.3.1(react@18.3.1) styled-jsx: 5.1.6(@babel/core@7.23.2)(react@18.3.1) optionalDependencies: - '@next/swc-darwin-arm64': 15.0.2 - '@next/swc-darwin-x64': 15.0.2 - '@next/swc-linux-arm64-gnu': 15.0.2 - '@next/swc-linux-arm64-musl': 15.0.2 - '@next/swc-linux-x64-gnu': 15.0.2 - '@next/swc-linux-x64-musl': 15.0.2 - '@next/swc-win32-arm64-msvc': 15.0.2 - '@next/swc-win32-x64-msvc': 15.0.2 + '@next/swc-darwin-arm64': 15.0.4 + '@next/swc-darwin-x64': 15.0.4 + '@next/swc-linux-arm64-gnu': 15.0.4 + '@next/swc-linux-arm64-musl': 15.0.4 + '@next/swc-linux-x64-gnu': 15.0.4 + '@next/swc-linux-x64-musl': 15.0.4 + '@next/swc-win32-arm64-msvc': 15.0.4 + '@next/swc-win32-x64-msvc': 15.0.4 sharp: 0.33.5 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros - next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next@15.0.4(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@next/env': 15.0.2 + '@next/env': 15.0.4 '@swc/counter': 0.1.3 '@swc/helpers': 0.5.13 busboy: 1.6.0 @@ -9578,39 +9589,14 @@ snapshots: react-dom: 18.3.1(react@18.3.1) styled-jsx: 5.1.6(@babel/core@7.26.0)(react@18.3.1) optionalDependencies: - '@next/swc-darwin-arm64': 15.0.2 - '@next/swc-darwin-x64': 15.0.2 - '@next/swc-linux-arm64-gnu': 15.0.2 - '@next/swc-linux-arm64-musl': 15.0.2 - '@next/swc-linux-x64-gnu': 15.0.2 - '@next/swc-linux-x64-musl': 15.0.2 - '@next/swc-win32-arm64-msvc': 15.0.2 - '@next/swc-win32-x64-msvc': 15.0.2 - sharp: 0.33.5 - transitivePeerDependencies: - - '@babel/core' - - babel-plugin-macros - - next@15.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - '@next/env': 15.0.2 - '@swc/counter': 0.1.3 - '@swc/helpers': 0.5.13 - busboy: 1.6.0 - caniuse-lite: 1.0.30001679 - postcss: 8.4.31 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - styled-jsx: 5.1.6(react@18.3.1) - optionalDependencies: - '@next/swc-darwin-arm64': 15.0.2 - '@next/swc-darwin-x64': 15.0.2 - '@next/swc-linux-arm64-gnu': 15.0.2 - '@next/swc-linux-arm64-musl': 15.0.2 - '@next/swc-linux-x64-gnu': 15.0.2 - '@next/swc-linux-x64-musl': 15.0.2 - '@next/swc-win32-arm64-msvc': 15.0.2 - '@next/swc-win32-x64-msvc': 15.0.2 + '@next/swc-darwin-arm64': 15.0.4 + '@next/swc-darwin-x64': 15.0.4 + '@next/swc-linux-arm64-gnu': 15.0.4 + '@next/swc-linux-arm64-musl': 15.0.4 + '@next/swc-linux-x64-gnu': 15.0.4 + '@next/swc-linux-x64-musl': 15.0.4 + '@next/swc-win32-arm64-msvc': 15.0.4 + '@next/swc-win32-x64-msvc': 15.0.4 sharp: 0.33.5 transitivePeerDependencies: - '@babel/core' @@ -10377,11 +10363,6 @@ snapshots: optionalDependencies: '@babel/core': 7.26.0 - styled-jsx@5.1.6(react@18.3.1): - dependencies: - client-only: 0.0.1 - react: 18.3.1 - stylis@4.3.4: {} sucrase@3.35.0: @@ -10456,6 +10437,17 @@ snapshots: optionalDependencies: '@swc/core': 1.7.42(@swc/helpers@0.5.13) + terser-webpack-plugin@5.3.10(@swc/core@1.7.42)(webpack@5.92.1(@swc/core@1.7.42)): + dependencies: + '@jridgewell/trace-mapping': 0.3.25 + jest-worker: 27.5.1 + schema-utils: 3.3.0 + serialize-javascript: 6.0.2 + terser: 5.36.0 + webpack: 5.92.1(@swc/core@1.7.42) + optionalDependencies: + '@swc/core': 1.7.42(@swc/helpers@0.5.13) + terser@5.36.0: dependencies: '@jridgewell/source-map': 0.3.6 @@ -10534,7 +10526,7 @@ snapshots: tslib@2.8.1: {} - tsup@7.2.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(postcss@8.4.47)(typescript@5.5.2): + tsup@7.2.0(@swc/core@1.7.42)(postcss@8.4.47)(typescript@5.5.2): dependencies: bundle-require: 4.2.1(esbuild@0.18.20) cac: 6.7.14 @@ -10839,6 +10831,37 @@ snapshots: - esbuild - uglify-js + webpack@5.92.1(@swc/core@1.7.42): + dependencies: + '@types/eslint-scope': 3.7.7 + '@types/estree': 1.0.6 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/wasm-edit': 1.14.1 + '@webassemblyjs/wasm-parser': 1.14.1 + acorn: 8.14.0 + acorn-import-attributes: 1.9.5(acorn@8.14.0) + browserslist: 4.24.2 + chrome-trace-event: 1.0.4 + enhanced-resolve: 5.17.1 + es-module-lexer: 1.5.4 + eslint-scope: 5.1.1 + events: 3.3.0 + glob-to-regexp: 0.4.1 + graceful-fs: 4.2.11 + json-parse-even-better-errors: 2.3.1 + loader-runner: 4.3.0 + mime-types: 2.1.35 + neo-async: 2.6.2 + schema-utils: 3.3.0 + tapable: 2.2.1 + terser-webpack-plugin: 5.3.10(@swc/core@1.7.42)(webpack@5.92.1(@swc/core@1.7.42)) + watchpack: 2.4.2 + webpack-sources: 3.2.3 + transitivePeerDependencies: + - '@swc/core' + - esbuild + - uglify-js + whatwg-encoding@2.0.0: dependencies: iconv-lite: 0.6.3 From 63cd1e1e246da2f4f21e1b4dcc7e41cd72091747 Mon Sep 17 00:00:00 2001 From: Gabriel Nadler Date: Fri, 6 Dec 2024 15:43:14 +0100 Subject: [PATCH 53/72] Fix tests --- .../next-yak/runtime/__tests__/attrs.test.tsx | 55 ++++++++++--------- .../runtime/__tests__/styled.test.tsx | 34 ++++++------ packages/next-yak/runtime/mocks/styled.ts | 10 +++- packages/next-yak/tsup.config.ts | 2 +- 4 files changed, 55 insertions(+), 46 deletions(-) diff --git a/packages/next-yak/runtime/__tests__/attrs.test.tsx b/packages/next-yak/runtime/__tests__/attrs.test.tsx index 83457c3d..e15134da 100644 --- a/packages/next-yak/runtime/__tests__/attrs.test.tsx +++ b/packages/next-yak/runtime/__tests__/attrs.test.tsx @@ -11,7 +11,7 @@ beforeEach(() => { type DataAttributes = { [key: `data-${string}`]: any }; it("works fine with an empty object", () => { - const Comp = styled.div.attrs({})``; + const Comp = (styled("div") as typeof styled.div).attrs({})``; expect(TestRenderer.create().toJSON()).toMatchInlineSnapshot(`
{ }); it("works fine with a function that returns an empty object", () => { - const Comp = styled.div.attrs(() => ({}))``; + const Comp = (styled("div") as typeof styled.div).attrs(() => ({}))``; expect(TestRenderer.create().toJSON()).toMatchInlineSnapshot(`
{ }); it("pass a simple attr via object", () => { - const Comp = styled.button.attrs({ + const Comp = (styled("button") as typeof styled.button).attrs({ type: "button", })``; expect(TestRenderer.create().toJSON()).toMatchInlineSnapshot(` @@ -41,7 +41,7 @@ it("pass a simple attr via object", () => { }); it("pass a simple attr via function with object return", () => { - const Comp = styled.button.attrs(() => ({ + const Comp = (styled("button") as typeof styled.button).attrs(() => ({ type: "button", }))``; expect(TestRenderer.create().toJSON()).toMatchInlineSnapshot(` @@ -81,7 +81,7 @@ it("pass a React component", () => { it("should not call a function passed to attrs as an object value", () => { const stub = vi.fn(() => "div"); - const Comp = styled.button.attrs<{ foo?: typeof stub }>(() => ({ + const Comp = styled("button").attrs<{ foo?: typeof stub }>(() => ({ foo: stub, }))``; @@ -91,13 +91,14 @@ it("should not call a function passed to attrs as an object value", () => { }); it("defaultProps are merged into what function attrs receives", () => { - const Comp = styled.button.attrs((props) => ({ + const Comp = (styled("button") as typeof styled.button).attrs((props) => ({ "data-color": props.color, }))``; Comp.defaultProps = { color: "red", }; + //YakComponent, HTMLButtonElement> expect(TestRenderer.create().toJSON()).toMatchInlineSnapshot(`