callstack / callstack/linaria

Create a serializer for snapshotting and logging

Open
#633 0 comments 9 reactions 0 assignees View on GitHub
feature: proposal 💬 needs: triage 🏷
Dominant language
TypeScript
Stars
12.4k
Forks
413
PR merge metrics
No merged PRs in 30d

Description

## Describe the feature

A serializer for use with Jest snapshots and for logging/debugging. Should create readable, pretty-printed output of the generated CSS and HTML.

## Motivation

IMO it's critical to be able to inspect the CSS/HTML output in an immediate and granular way, when building a framework on top of any CSS-generation/-processing tool (CSS-in-JS, Sass, whatever)—serializers are important for snapshot testing, but I find them even more important for this use-case—previously, I did this in a `styled-components`-based framework using a utility like the following, now I'd like to do something similar with `linaria`:

```jsx
import React from 'react';
import { render } from '@testing-library/react';
import styled, { css} from 'styled-components';
import { print } from 'jest-styled-components/src/styleSheetSerializer';
import { resetStyleSheet } from 'jest-styled-components/src/utils';
import pretty from 'pretty';

export function logStyledComponentOutput(el) {
resetStyleSheet();
console.log(
`
${print(render(el).container, ({ innerHTML }) => pretty(innerHTML).trim())}

`,
);
}

const MyBox = styled.div`
color: red;
height: 200px;
`;

logStyledComponentOutput(
Hello World
);
```

(the above code logs the following to the console)

```sh
.c0 { 
color: red; 
height: 200px; 
} 

Hello World

```

## Possible implementations

This would be ostensibly similar to the serializer Objects from [`jest-styled-components`](https://github.com/styled-components/jest-styled-components) or from the —deprecated, afaik— [`linaria-jest`](https://github.com/thymikee/linaria-jest), which contain a `print` function for example (this seems to be a standard API); but it may also need some global setup/reset functions as well depending on linaria's internals, for example `jest-styled-components` runs a `resetStylesheet` method before each Jest run, without which the outputs become corrupted.

NOTE: one key feature that `jest-styled-components` lacks, would be **the ability to include global CSS rules in snapshots** 👍. This would be extremely helpful.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.