Skip to content

Commit

Permalink
ignore empty class names (#141)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jantimon
jantimon authored Jul 23, 2024
1 parent d621ac1 commit 5a4042d
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 86 deletions.
101 changes: 38 additions & 63 deletions packages/next-yak/runtime/__tests__/attrs.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ it("works fine with an empty object", () => {
const Comp = styled.div.attrs({})``;
expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<div
className=""
style={{}}
/>
`);
Expand All @@ -23,11 +22,10 @@ it("works fine with an empty object", () => {
it("works fine with a function that returns an empty object", () => {
const Comp = styled.div.attrs(() => ({}))``;
expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<div
className=""
style={{}}
/>
`);
<div
style={{}}
/>
`);
});

it("pass a simple attr via object", () => {
Expand All @@ -36,7 +34,6 @@ it("pass a simple attr via object", () => {
})``;
expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<button
className=""
style={{}}
type="button"
/>
Expand All @@ -49,7 +46,6 @@ it("pass a simple attr via function with object return", () => {
}))``;
expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<button
className=""
style={{}}
type="button"
/>
Expand Down Expand Up @@ -105,7 +101,6 @@ it("defaultProps are merged into what function attrs receives", () => {

expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<button
className=""
color="red"
data-color="red"
style={{}}
Expand All @@ -120,15 +115,13 @@ it("pass props to the attr function", () => {

expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<button
className=""
style={{}}
type="button"
/>
`);
expect(TestRenderer.create(<Comp $submit />).toJSON()).toMatchInlineSnapshot(
`
<button
className=""
style={{}}
type="submit"
/>
Expand All @@ -144,30 +137,27 @@ it("should replace props with attrs", () => {

expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<button
className=""
style={{}}
tabIndex={0}
type="button"
/>
`);
expect(TestRenderer.create(<Comp type="reset" />).toJSON())
.toMatchInlineSnapshot(`
<button
className=""
style={{}}
tabIndex={0}
type="button"
/>
`);
<button
style={{}}
tabIndex={0}
type="button"
/>
`);
expect(TestRenderer.create(<Comp type="reset" tabIndex={-1} />).toJSON())
.toMatchInlineSnapshot(`
<button
className=""
style={{}}
tabIndex={0}
type="button"
/>
`);
<button
style={{}}
tabIndex={0}
type="button"
/>
`);
});

it("should merge className", () => {
Expand Down Expand Up @@ -229,7 +219,6 @@ it("should merge style", () => {
).toJSON(),
).toMatchInlineSnapshot(`
<div
className=""
style={
{
"background": "blue",
Expand All @@ -249,7 +238,6 @@ it("should work with data and aria attributes", () => {
expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<div
aria-label="A simple FooBar"
className=""
data-foo="bar"
style={{}}
/>
Expand All @@ -266,7 +254,6 @@ it("merge attrs when inheriting SC", () => {
}))``;
expect(TestRenderer.create(<Child />).toJSON()).toMatchInlineSnapshot(`
<button
className=""
style={{}}
tabIndex={0}
type="submit"
Expand Down Expand Up @@ -305,7 +292,6 @@ it("should pass through children as a normal prop", () => {
}))``;
expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<div
className=""
style={{}}
>
Probably a bad idea
Expand All @@ -319,7 +305,6 @@ it("should pass through complex children as well", () => {
}))``;
expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<div
className=""
style={{}}
>
<span>
Expand All @@ -337,15 +322,14 @@ it("should override children", () => {
}))``;
expect(TestRenderer.create(<Comp>Something else</Comp>).toJSON())
.toMatchInlineSnapshot(`
<div
className=""
style={{}}
>
<span>
Amazing
</span>
</div>
`);
<div
style={{}}
>
<span>
Amazing
</span>
</div>
`);
});

it('should shallow merge "style" prop + attr instead of overwriting', () => {
Expand Down Expand Up @@ -377,18 +361,17 @@ it('should shallow merge "style" prop + attr instead of overwriting', () => {
const rendered = TestRenderer.create(<BlueText>Hello</BlueText>);

expect(rendered.toJSON()).toMatchInlineSnapshot(`
<p
className=""
style={
{
"color": "blue",
"fontSize": "4em",
}
<p
style={
{
"color": "blue",
"fontSize": "4em",
}
>
Hello
</p>
`);
}
>
Hello
</p>
`);
});

it("does not pass transient props to HTML element", () => {
Expand All @@ -404,7 +387,6 @@ it("does not pass transient props to HTML element", () => {

expect(TestRenderer.create(<StyledComp />).toJSON()).toMatchInlineSnapshot(`
<div
className=""
style={{}}
/>
`);
Expand Down Expand Up @@ -434,14 +416,12 @@ it("should remap props", () => {

expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<button
className=""
style={{}}
type="button"
/>
`);
expect(TestRenderer.create(<Comp primary />).toJSON()).toMatchInlineSnapshot(`
<button
className=""
primary={true}
style={{}}
type="button"
Expand All @@ -450,7 +430,6 @@ it("should remap props", () => {

expect(TestRenderer.create(<Comp $submit />).toJSON()).toMatchInlineSnapshot(`
<button
className=""
style={{}}
type="submit"
/>
Expand All @@ -464,18 +443,16 @@ it("should have optional attrs props as component interface", () => {

expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot(`
<h1
className=""
style={{}}
/>
`);

expect(TestRenderer.create(<Comp $primary />).toJSON())
.toMatchInlineSnapshot(`
<h1
className=""
style={{}}
/>
`);
<h1
style={{}}
/>
`);
});

it("should have access to theme", () => {
Expand All @@ -494,7 +471,6 @@ it("should have access to theme", () => {
).toJSON(),
).toMatchInlineSnapshot(`
<pre
className=""
data-color="red"
style={{}}
/>
Expand All @@ -517,7 +493,6 @@ it("should pass theme if theme is overwritten", () => {
).toJSON(),
).toMatchInlineSnapshot(`
<pre
className=""
style={{}}
>
{"color":"blue"}
Expand Down
30 changes: 7 additions & 23 deletions packages/next-yak/runtime/__tests__/styled.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@ it("should render a literal element", () => {

expect(container).toMatchInlineSnapshot(`
<div>
<input
class=""
/>
<input />
</div>
`);
});
Expand Down Expand Up @@ -63,9 +61,7 @@ it("should forward children", () => {

expect(container).toMatchInlineSnapshot(`
<div>
<div
class=""
>
<div>
<button>
Click me!
</button>
Expand All @@ -81,9 +77,7 @@ it("should filter out properties starting with $", () => {

expect(container).toMatchInlineSnapshot(`
<div>
<input
class=""
/>
<input />
</div>
`);
});
Expand Down Expand Up @@ -111,7 +105,6 @@ it("should forward properties to the next yak component", () => {
<div>
<input
aria-label="hello world"
class=""
/>
</div>
`);
Expand Down Expand Up @@ -139,7 +132,6 @@ it("should concatenate styles", () => {
expect(container).toMatchInlineSnapshot(`
<div>
<input
class=""
style="color: red;"
/>
</div>
Expand All @@ -153,9 +145,7 @@ it("should not add class if prop is not set", () => {

expect(container).toMatchInlineSnapshot(`
<div>
<input
class=""
/>
<input />
</div>
`);
});
Expand Down Expand Up @@ -187,15 +177,9 @@ it("should allow falsy values", () => {

expect(container).toMatchInlineSnapshot(`
<div>
<input
class=""
/>
<input
class=""
/>
<input
class=""
/>
<input />
<input />
<input />
</div>
`);
});
Expand Down
1 change: 1 addition & 0 deletions packages/next-yak/runtime/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ function removePrefixedProperties<T extends Record<string, unknown>>(obj: T) {
}

const mergeClassNames = (a?: string, b?: string) => {
if (!a && !b) return undefined;
if (!a) return b;
if (!b) return a;
return a + " " + b;
Expand Down

0 comments on commit 5a4042d

Please sign in to comment.