Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

show error messages for nested mixins which can not be extracted #42

Merged
merged 1 commit into from
Dec 13, 2023
Merged

show error messages for nested mixins which can not be extracted #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions packages/next-yak/loaders/__tests__/classifier.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import quasiClassifier from '../lib/quasiClassifier.cjs';
import { describe, it, expect } from "vitest";

describe('quasiClassifier', () => {
it('should classify empty quasi', () => {
expect(quasiClassifier('', [])).toEqual({
empty: true,
unknownSelector: false,
insideCssValue: false,
currentNestingScopes: [],
});
});
it("should recognize a comment as empty", () => {
expect(quasiClassifier("/* comment */", [])).toEqual({
empty: true,
unknownSelector: false,
insideCssValue: false,
currentNestingScopes: [],
});
});
it("should find incomplete css - unknownSelector", () => {
expect(quasiClassifier("{ color: blue;", [])).toEqual({
empty: false,
unknownSelector: true,
insideCssValue: false,
currentNestingScopes: [],
});
});
it("should find incomplete css - insideCssValue", () => {
expect(quasiClassifier("color: ", [
".foo"
])).toEqual({
empty: false,
unknownSelector: false,
insideCssValue: true,
currentNestingScopes: [".foo"],
});
});
it("should find incomplete css - insideCssValue after a media query", () => {
expect(quasiClassifier("} .foo { color: ", [
"@media (min-width: 640px)"
])).toEqual({
empty: false,
unknownSelector: false,
insideCssValue: true,
currentNestingScopes: [".foo"],
});
});
it("should find incomplete css - insideCssValue in a multi value", () => {
expect(quasiClassifier("} .foo { transition: 200ms ", [
"@media (min-width: 640px)"
])).toEqual({
empty: false,
unknownSelector: false,
insideCssValue: true,
currentNestingScopes: [".foo"],
});
});
it("should find nesting scopes", () => {
expect(quasiClassifier(`
.foo {
.bar {
@supports (display: grid) {
`, [
"@media (min-width: 640px)"
])).toEqual({
empty: false,
unknownSelector: false,
insideCssValue: false,
currentNestingScopes: [
"@media (min-width: 640px)",
".foo",
".bar",
"@supports (display: grid)",
],
});
});
it("should find nesting scopes with properties", () => {
expect(quasiClassifier(`
.foo {
color: purple;
.x {
color: green;
}
.bar {
color: orange;
@supports (display: grid) {
color: blue;
`, [
"@media (min-width: 640px)"
])).toEqual({
empty: false,
unknownSelector: false,
insideCssValue: false,
currentNestingScopes: [
"@media (min-width: 640px)",
".foo",
".bar",
"@supports (display: grid)",
],
});
});

it("should find nesting scopes with properties and closing nestings", () => {
expect(quasiClassifier(`
.foo {
/* }}}}} */
color: purple;
.x {
color: green;
}
.bar {
:before {
content: '{';
}
color: orange;
@supports (display: grid) {
color: blue;
}
}
`, [
"@media (min-width: 640px)"
])).toEqual({
empty: false,
unknownSelector: false,
insideCssValue: false,
currentNestingScopes: [
"@media (min-width: 640px)",
".foo",
],
});
});
});
148 changes: 100 additions & 48 deletions packages/next-yak/loaders/__tests__/tsloader.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,13 +166,12 @@ const FancyButton = styled(Button)\`
const FancyButton = styled(Button)(__styleYak.FancyButton_2);"
`);
});
});

it("should support attrs on intrinsic elements", async () => {
expect(
await tsloader.call(
loaderContext,
`
it("should support attrs on intrinsic elements", async () => {
expect(
await tsloader.call(
loaderContext,
`
import { styled } from "next-yak";

const headline = styled.input.attrs({
Expand All @@ -181,21 +180,21 @@ const headline = styled.input.attrs({
color: red;
\`;
`
)
).toMatchInlineSnapshot(`
)
).toMatchInlineSnapshot(`
"import { styled } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const headline = styled.input.attrs({
type: \\"text\\"
})(__styleYak.headline_0);"
`);
});
});

it("should support attrs on wrapped elements", async () => {
expect(
await tsloader.call(
loaderContext,
`
it("should support attrs on wrapped elements", async () => {
expect(
await tsloader.call(
loaderContext,
`
import { styled } from "next-yak";

const headline = styled.input\`
Expand All @@ -208,22 +207,22 @@ const newHeadline = styled(headline).attrs({
color: black;
\`;
`
)
).toMatchInlineSnapshot(`
)
).toMatchInlineSnapshot(`
"import { styled } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const headline = styled.input(__styleYak.headline_0);
const newHeadline = styled(headline).attrs({
type: \\"text\\"
})(__styleYak.newHeadline_1);"
`);
});
});

it("should support css variables with spaces", async () => {
expect(
await tsloader.call(
loaderContext,
`
it("should support css variables with spaces", async () => {
expect(
await tsloader.call(
loaderContext,
`
import styles from "./page.module.css";
import { css } from "next-yak";
import { easing } from "styleguide";
Expand All @@ -235,8 +234,8 @@ const headline = css\`
\${css\`color: blue\`}
\`;
`
)
).toMatchInlineSnapshot(`
)
).toMatchInlineSnapshot(`
"import styles from \\"./page.module.css\\";
import { css } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
Expand All @@ -250,13 +249,13 @@ const headline = css\`
}
});"
`);
});
});

it("should convert keyframes", async () => {
expect(
await tsloader.call(
loaderContext,
`
it("should convert keyframes", async () => {
expect(
await tsloader.call(
loaderContext,
`
import styles from "./page.module.css";
import { styled, keyframes } from "next-yak";

Expand All @@ -273,8 +272,8 @@ const FadeInButton = styled.button\`
animation: 1s \${fadeIn} ease-out;
\`
`
)
).toMatchInlineSnapshot(`
)
).toMatchInlineSnapshot(`
"import styles from \\"./page.module.css\\";
import { styled, keyframes } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
Expand All @@ -285,13 +284,13 @@ const FadeInButton = styled.button\`
}
});"
`);
});
});

it("should allow to target components", async () => {
expect(
await tsloader.call(
loaderContext,
`
it("should allow to target components", async () => {
expect(
await tsloader.call(
loaderContext,
`
import { styled, keyframes } from "next-yak";

const Link = styled.a\`
Expand All @@ -317,21 +316,21 @@ const Wrapper = styled.div\`
\`

`
)
).toMatchInlineSnapshot(`
)
).toMatchInlineSnapshot(`
"import { styled, keyframes } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const Link = styled.a(__styleYak.Link_0);
const Icon = styled.svg(__styleYak.Icon_1);
const Wrapper = styled.div(__styleYak.Wrapper_2);"
`);
});
});

it("should allow to target components even if they don't have styles", async () => {
expect(
await tsloader.call(
loaderContext,
`
it("should allow to target components even if they don't have styles", async () => {
expect(
await tsloader.call(
loaderContext,
`
import { styled, keyframes } from "next-yak";

const Link = styled.a\`
Expand All @@ -347,12 +346,65 @@ const Wrapper = styled.div\`
\`

`
)
).toMatchInlineSnapshot(`
)
).toMatchInlineSnapshot(`
"import { styled, keyframes } from \\"next-yak\\";
import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
const Link = styled.a();
const Icon = styled.svg(__styleYak.Icon_1);
const Wrapper = styled.div(__styleYak.Wrapper_2);"
`);
});

it("should show error when mixin is used in nested selector", async () => {
await expect(() =>
tsloader.call(
loaderContext,
`
import { styled, css } from "next-yak";

const bold = css\`
font-weight: bold;
\`

const Icon = styled.div\`
@media (min-width: 640px) {
.bar {
\${bold}
}
}
\`
`
)
).rejects.toThrowErrorMatchingInlineSnapshot(`
"/some/special/path/page.tsx: Expressions are not allowed inside nested selectors:
line 11: found \\"bold\\" inside \\"@media (min-width: 640px) { .bar {\\""
`);
});

it("should show error when mixin is used in nested selector inside a css", async () => {
await expect(() =>
tsloader.call(
loaderContext,
`
import { styled, css } from "next-yak";

const bold = css\`
font-weight: bold;
\`

const Icon = styled.div\`
@media (min-width: 640px) {
.bar {
\${() => css\`\${bold}\`}
}
}
\`
`
)
).rejects.toThrowErrorMatchingInlineSnapshot(`
"/some/special/path/page.tsx: Expressions are not allowed inside nested selectors:
line 11: found Expression inside \\"@media (min-width: 640px) { .bar {\\""
`);
});
});
Loading
Loading