Skip to content

Commit

Permalink
add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
jantimon committed Jan 22, 2024
1 parent 3b273a7 commit a823839
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 39 deletions.
42 changes: 21 additions & 21 deletions packages/next-yak/loaders/__tests__/cssloader.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const headline = css\`
`
)
).toMatchInlineSnapshot(`
".yak_q {
".yak_0 {
font-size: 2rem;
font-weight: bold;
color: red;
Expand Down Expand Up @@ -77,15 +77,15 @@ const headline = css\`
`
)
).toMatchInlineSnapshot(`
".yak_q {
".yak_0 {
font-size: 2rem;
font-weight: bold;
color: red;
&:where(.yak_r) {
&:where(.yak_1) {
color: orange;
}
&:where(.yak_s) {
&:where(.yak_2) {
color: teal;
}
&:hover {
Expand Down Expand Up @@ -113,9 +113,9 @@ const headline = css\`
`
)
).toMatchInlineSnapshot(`
".yak_q {
".yak_0 {
/* comment */
&:where(.yak_r) {
&:where(.yak_1) {
color: blue;
}
}"
Expand All @@ -138,7 +138,7 @@ const headline = css\`
`
)
).toMatchInlineSnapshot(`
".yak_q {
".yak_0 {
&:hover {
color: var(--🦬18fi82j0);
}
Expand Down Expand Up @@ -211,10 +211,10 @@ const headline = css\`
`
)
).toMatchInlineSnapshot(`
".yak_q {
".yak_0 {
transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
display: block;
&:where(.yak_r) {
&:where(.yak_1) {
color: orange
}
}"
Expand All @@ -241,14 +241,14 @@ const headline = css\`
`
)
).toMatchInlineSnapshot(`
".yak_q {
".yak_0 {
color: blue;
@media (min-width: 640px) {
color: red;
}
transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
display: block;
&:where(.yak_r) {
&:where(.yak_1) {
color: orange
}
}"
Expand All @@ -275,14 +275,14 @@ const headline = css\`
`
)
).toMatchInlineSnapshot(`
".yak_q {
".yak_0 {
color: blue;
@media (min-width: 640px) {
color: red;
}
transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
display: block;
&:where(.yak_r) {
&:where(.yak_1) {
color: orange
}
}"
Expand Down Expand Up @@ -311,7 +311,7 @@ const headline = css\`
`
)
).toMatchInlineSnapshot(`
".yak_q {
".yak_0 {
:before {
content: \\"\\\\2022\\";
}
Expand Down Expand Up @@ -481,16 +481,16 @@ const Component2 = styled.div\`
".Component {
background-color: red;
color: white;
&:where(.is_active_q) {
&:where(.is_active_0) {
background-color: blue;
}
border: 1px solid black;
&:focus {
background-color: green;
&:where(.is_active_r) {
&:where(.is_active_1) {
background-color: blue;
&:where(.is_active_s) {
&:where(.is_active_2) {
background-color: brown;
}
}
Expand Down Expand Up @@ -535,17 +535,17 @@ const Component = styled.div\`
".Component {
background-color: red;
color: white;
&:where(.is_active_q) {
&:where(.is_active_0) {
background-color: blue;
}
&:where(.is_not_active_r) {
&:where(.is_not_active_1) {
background-color: var(--🦬18fi82j0);
}
border: 1px solid black;
&:where(.is_active_s) {
&:where(.is_active_2) {
color: orange;
}
&:where(.is_not_active_t) {
&:where(.is_not_active_3) {
transition: color var(--🦬18fi82j1) var(--🦬18fi82j2);
}
}"
Expand Down
81 changes: 81 additions & 0 deletions packages/next-yak/loaders/__tests__/getCssName.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { parse } from "@babel/parser";
import traverse from "@babel/traverse";
import { NodePath } from "@babel/core";
import getCssName from "../lib/getCssName.cjs";
import type { TaggedTemplateExpression } from "@babel/types";
import { describe, it, expect } from "vitest";

function extractConditionsWithBabel(code: string) {
let result: string = "";
const ast = parse(code);
traverse(ast, {
TaggedTemplateExpression(path: NodePath<TaggedTemplateExpression>) {
if (path.node.tag.type === "Identifier" && path.node.tag.name === "css") {
result = getCssName(path);
}
},
});
return result;
}

describe("getCssName", () => {
it("should guess the css name from the condition of a logical expression", () => {
const code = `({$active}) => $active && css\`\``;
const cssName = extractConditionsWithBabel(code);
expect(cssName).toBe("is_active");
});

it("should guess the css name from the condition of a ternary expression", () => {
const code = `({$active}) => $active ? css\`\` : null`;
const cssName = extractConditionsWithBabel(code);
expect(cssName).toBe("is_active");
});

it("should guess the css name from the condition of a logical expression with negation", () => {
const code = `({$active}) => !$active && css\`\``;
const cssName = extractConditionsWithBabel(code);
expect(cssName).toBe("is_not_active");
});

it("should guess the css name from the condition of a ternary expression for the else case", () => {
const code = `({$active}) => $active ? null : css\`\``;
const cssName = extractConditionsWithBabel(code);
expect(cssName).toBe("is_not_active");
});

it("should guess the css name from the condition of a logical expression with multiple conditions", () => {
const code = `({$active, $visible}) => $active && $visible && css\`\``;
const cssName = extractConditionsWithBabel(code);
expect(cssName).toBe("is_active_and_visible");
});

it("should guess the css name from the condition of a ternary expression with multiple conditions", () => {
const code = `({$active, $visible}) => $active ? ($visible ? css\`\` : null) : null`;
const cssName = extractConditionsWithBabel(code);
expect(cssName).toBe("is_active_and_visible");
});

it("should guess the css name from the condition of a logical expression with negation and multiple conditions", () => {
const code = `({$active, $visible}) => !$active && $visible && css\`\``;
const cssName = extractConditionsWithBabel(code);
expect(cssName).toBe("is_not_active_and_visible");
});

it("should guess the css name from the condition of a ternary expression with negation and multiple conditions", () => {
const code = `({$active, $visible}) => !$active ? ($visible ? css\`\`: null) : null`;
const cssName = extractConditionsWithBabel(code);
expect(cssName).toBe("is_not_active_and_visible");
});

it("should guess the css name from the condition of a logical expression with negation and multiple conditions for the else case", () => {
const code = `({$active, $visible}) => $active && !$visible && css\`\``;
const cssName = extractConditionsWithBabel(code);
expect(cssName).toBe("is_active_and_not_visible");
});

it("should guess the css name from the condition of a ternary expression with negation and multiple conditions for the else case", () => {
const code = `({$active, $visible}) => $active ? ($visible ? null : css\`\`) : null`;
const cssName = extractConditionsWithBabel(code);
expect(cssName).toBe("is_active_and_not_visible");
});
});
14 changes: 7 additions & 7 deletions packages/next-yak/loaders/__tests__/tsloader.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const Main = () => <h1 className={headline({}).className}>Hello World</h1
import { css } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
type x = number;
const headline = css(__styleYak.yak_q);
const headline = css(__styleYak.yak_0);
export const Main = () => <h1 className={headline({}).className}>Hello World</h1>;"
`);
});
Expand Down Expand Up @@ -91,7 +91,7 @@ const headline = css\`
import { css } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const x = Math.random();
const headline = css(__styleYak.yak_q, x > 0.5 && css(__styleYak.yak_r));"
const headline = css(__styleYak.yak_0, x > 0.5 && css(__styleYak.yak_1));"
`);
});

Expand Down Expand Up @@ -125,7 +125,7 @@ const FancyButton = styled(Button)\`
import { styled, css } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const x = Math.random();
const Button = styled.button(__styleYak.Button, x > 0.5 && css(__styleYak.yak_q));
const Button = styled.button(__styleYak.Button, x > 0.5 && css(__styleYak.yak_0));
const FancyButton = styled(Button)(__styleYak.FancyButton);"
`);
});
Expand Down Expand Up @@ -162,7 +162,7 @@ const FancyButton = styled(Button)\`
const x = Math.random();
const Button = styled.button(__styleYak.Button, ({
theme
}) => theme.mode === \\"dark\\" && css(__styleYak.yak_q));
}) => theme.mode === \\"dark\\" && css(__styleYak.yak_0));
const FancyButton = styled(Button)(__styleYak.FancyButton);"
`);
});
Expand Down Expand Up @@ -240,7 +240,7 @@ const headline = css\`
import { css } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
import { easing } from \\"styleguide\\";
const headline = css(__styleYak.yak_q, css(__styleYak.yak_r), css(__styleYak.yak_s), {
const headline = css(__styleYak.yak_0, css(__styleYak.yak_1), css(__styleYak.yak_2), {
\\"style\\": {
\\"--\\\\uD83E\\\\uDDAC18fi82j0\\": ({
i
Expand Down Expand Up @@ -481,7 +481,7 @@ const headline = css\`
import { css } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const x = Math.random();
const headline = css(__styleYak.yak_q, x > 0.5 && css(__styleYak.yak_r));"
const headline = css(__styleYak.yak_0, x > 0.5 && css(__styleYak.yak_1));"
`);
});

Expand Down Expand Up @@ -558,7 +558,7 @@ const Button = styled.button\`
const Icon = styled.svg(__styleYak.Icon);
const Button = styled.button(__styleYak.Button, ({
$primary
}) => $primary && css(__styleYak.is_primary_q));"
}) => $primary && css(__styleYak.is_primary_0));"
`);
});
});
3 changes: 3 additions & 0 deletions packages/next-yak/loaders/lib/getCssName.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ function extractConditions(path) {
currentPath &&
(currentPath.isLogicalExpression() || currentPath.isConditionalExpression())
) {
if (currentPath.isConditionalExpression() && conditions.length > 0) {
conditions.push(operatorToWord("&&", false));
}
let left = currentPath.isLogicalExpression()
? currentPath.node.left
: currentPath.node.test;
Expand Down
14 changes: 3 additions & 11 deletions packages/next-yak/loaders/lib/localIdent.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,15 @@
function localIdent(variableName, i, kind) {
switch (kind) {
case "selector":
return `.${variableName}${i === null ? "" : `_${unreadableNumber(i)}`}`;
return `.${variableName}${i === null ? "" : `_${i}`}`;
case "className":
case "animation":
return `${variableName}${i === null ? "" : `_${unreadableNumber(i)}`}`;
return `${variableName}${i === null ? "" : `_${i}`}`;
case "keyframes":
return `@keyframes ${variableName}${i === null ? "" : `_${unreadableNumber(i)}`}`;
return `@keyframes ${variableName}${i === null ? "" : `_${i}`}`;
default:
throw new Error("unknown kind");
}
}

/**
* Generates a non readable number to not distract from the actual class name.
* @param {number} i
*/
function unreadableNumber(i) {
return i.toString(25).replace(/\d/g, (m) => (Number(m)+26).toString(36));
}

module.exports = localIdent;

0 comments on commit a823839

Please sign in to comment.