Skip to content

Commit

Permalink
Don't use merge when not needed
Browse files Browse the repository at this point in the history
  • Loading branch information
Luca Schneider committed May 24, 2024
1 parent 8e97874 commit 38b2202
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 34 deletions.
43 changes: 17 additions & 26 deletions packages/next-yak/loaders/__tests__/tsloader.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1344,15 +1344,14 @@ describe("css prop", () => {
),
).toMatchInlineSnapshot(`
"import { css } from \\"next-yak\\";
import { __yak_mergeCssProp } from \\"next-yak/runtime-internals\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const elem = <div {...__yak_mergeCssProp(
const elem = <div {...
/*YAK Extracted CSS:
.elem {
padding: 10px;
}*/
/*#__PURE__*/
css(__styleYak.elem)({}))} />;"
css(__styleYak.elem)({})} />;"
`);
});
it("should work with a css property that is not in the root jsx element", async () => {
Expand All @@ -1368,15 +1367,14 @@ describe("css prop", () => {
),
).toMatchInlineSnapshot(`
"import { css, styled } from \\"next-yak\\";
import { __yak_mergeCssProp } from \\"next-yak/runtime-internals\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const MyComp = () => <div><p><div {...__yak_mergeCssProp(
const MyComp = () => <div><p><div {...
/*YAK Extracted CSS:
.MyComp {
padding: 10px;
}*/
/*#__PURE__*/
css(__styleYak.MyComp)({}))}>anything</div></p></div>;"
css(__styleYak.MyComp)({})}>anything</div></p></div>;"
`);
});

Expand All @@ -1394,16 +1392,15 @@ describe("css prop", () => {
),
).toMatchInlineSnapshot(`
"import { css, styled } from \\"next-yak\\";
import { __yak_mergeCssProp } from \\"next-yak/runtime-internals\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const MyComp = p => <div {...p}>anything</div>;
const MyComp2 = () => <MyComp {...__yak_mergeCssProp(
const MyComp2 = () => <MyComp {...
/*YAK Extracted CSS:
.MyComp2 {
padding: 10px;
}*/
/*#__PURE__*/
css(__styleYak.MyComp2)({}))} />;"
css(__styleYak.MyComp2)({})} />;"
`);
});

Expand All @@ -1423,18 +1420,17 @@ describe("css prop", () => {
),
).toMatchInlineSnapshot(`
"import { css, styled } from \\"next-yak\\";
import { __yak_mergeCssProp } from \\"next-yak/runtime-internals\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const TestObj = {
TestMem: p => <div {...p}>anything</div>
};
const MyComp2 = () => <TestObj.TestMem {...__yak_mergeCssProp(
const MyComp2 = () => <TestObj.TestMem {...
/*YAK Extracted CSS:
.MyComp2 {
padding: 10px;
}*/
/*#__PURE__*/
css(__styleYak.MyComp2)({}))} />;"
css(__styleYak.MyComp2)({})} />;"
`);
});

Expand All @@ -1456,20 +1452,19 @@ describe("css prop", () => {
),
).toMatchInlineSnapshot(`
"import { css, styled } from \\"next-yak\\";
import { __yak_mergeCssProp } from \\"next-yak/runtime-internals\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const test = {
nested: {
TestMem: p => <div {...p}>anything</div>
}
};
const MyComp2 = () => <test.nested.TestMem {...__yak_mergeCssProp(
const MyComp2 = () => <test.nested.TestMem {...
/*YAK Extracted CSS:
.MyComp2 {
padding: 10px;
}*/
/*#__PURE__*/
css(__styleYak.MyComp2)({}))} />;"
css(__styleYak.MyComp2)({})} />;"
`);
});

Expand All @@ -1486,15 +1481,14 @@ describe("css prop", () => {
),
).toMatchInlineSnapshot(`
"import { css, styled } from \\"next-yak\\";
import { __yak_mergeCssProp } from \\"next-yak/runtime-internals\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const MyComp2 = () => <custom-element {...__yak_mergeCssProp(
const MyComp2 = () => <custom-element {...
/*YAK Extracted CSS:
.MyComp2 {
padding: 10px;
}*/
/*#__PURE__*/
css(__styleYak.MyComp2)({}))} />;"
css(__styleYak.MyComp2)({})} />;"
`);
});

Expand Down Expand Up @@ -1527,7 +1521,6 @@ describe("css prop", () => {
),
).toMatchInlineSnapshot(`
"import { css, styled } from \\"next-yak\\";
import { __yak_mergeCssProp } from \\"next-yak/runtime-internals\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const padding =
/*YAK Extracted CSS:
Expand All @@ -1536,7 +1529,7 @@ describe("css prop", () => {
}*/
/*#__PURE__*/
css(__styleYak.padding);
const Elem = () => <div {...__yak_mergeCssProp(padding({}))} />;"
const Elem = () => <div {...padding({})} />;"
`);
});

Expand All @@ -1553,15 +1546,14 @@ describe("css prop", () => {
),
).toMatchInlineSnapshot(`
"import { css, styled } from \\"next-yak\\";
import { __yak_mergeCssProp } from \\"next-yak/runtime-internals\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const MyComp = () => <div {...__yak_mergeCssProp((true &&
const MyComp = () => <div {...(true &&
/*YAK Extracted CSS:
.MyComp {
padding: 10px;
}*/
/*#__PURE__*/
css(__styleYak.MyComp))({}))}>anything</div>;"
css(__styleYak.MyComp))({})}>anything</div>;"
`);
});

Expand All @@ -1582,7 +1574,6 @@ describe("css prop", () => {
),
).toMatchInlineSnapshot(`
"import { css, styled } from \\"next-yak\\";
import { __yak_mergeCssProp } from \\"next-yak/runtime-internals\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const padding =
/*YAK Extracted CSS:
Expand All @@ -1591,13 +1582,13 @@ describe("css prop", () => {
}*/
/*#__PURE__*/
css(__styleYak.padding);
const Elem = () => <div {...__yak_mergeCssProp((true ? padding :
const Elem = () => <div {...(true ? padding :
/*YAK Extracted CSS:
.Elem {
padding: 20px;
}*/
/*#__PURE__*/
css(__styleYak.Elem))({}))} />;"
css(__styleYak.Elem))({})} />;"
`);
});
describe("merge properties", () => {
Expand Down
14 changes: 6 additions & 8 deletions packages/next-yak/loaders/lib/transpileCssProp.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,7 @@ export const transpileCssProp = (
return;
}

// add import to the custom merge function to the top of the file
// import { __yak_mergeCssProp } from "next-yak/runtime-internals";
runtimeInternalHelpers.add("__yak_mergeCssProp");


// simple case where we don't have any other relevant props
if (
Expand All @@ -59,11 +57,7 @@ export const transpileCssProp = (
// adding a spread attribute with the css prop, in order to be able to use `className` and `style` props that are
// returned from the css prop
openingElement.attributes.push(
t.jsxSpreadAttribute(
t.callExpression(t.identifier("__yak_mergeCssProp"), [
t.callExpression(cssExpression, [t.objectExpression([])]),
]),
),
t.jsxSpreadAttribute(t.callExpression(cssExpression, [t.objectExpression([])])),
);
return;
}
Expand Down Expand Up @@ -126,4 +120,8 @@ export const transpileCssProp = (
t.callExpression(t.identifier("__yak_mergeCssProp"), mapped),
),
);

// add import to the custom merge function to the top of the file
// import { __yak_mergeCssProp } from "next-yak/runtime-internals";
runtimeInternalHelpers.add("__yak_mergeCssProp");
};

0 comments on commit 38b2202

Please sign in to comment.