feat: Support Emotion already + Add note about styled-jsx and stiches

README.md

@@ -42,7 +42,9 @@ When writing tests using Jest, we usually debug by reading the HTML code. Someti
 - 🔄 Auto reload browser when execute `preview.debug()`.
 - 💅 Support CSS:
   - ✅ [Direct CSS import](#3-configure-jests-transform-to-intercept-css-and-files)
-  - ✅ [Styled-components](https://styled-components.com/)
+  - ✅ Number of CSS-in-JS libraries, such as:
+    - ✅ [Styled-components](https://styled-components.com/)
+    - ✅ [Emotion](https://emotion.sh/)
   - ✅ [External CSS](#4-optional-configure-external-css)
   - ✅ [CSS Modules](https://github.com/css-modules/css-modules)
   - ✅ [Sass](https://sass-lang.com/)

demo/App.tsx

@@ -1,5 +1,9 @@
 import { useState } from 'react';
 import styled from 'styled-components';
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import emotionStyled from '@emotion/styled';
+import { styled as stichesStyled } from '@stitches/react';
 
 import logo2 from './assets/images/logo.svg';
 import './App.css';
@@ -24,6 +28,24 @@ function App() {
           This text is styled by global configured SASS
         </p>
         <p className="imported-sass">This text is styled by imported SASS</p>
+        <button
+          css={css`
+            padding: 32px;
+            background-color: hotpink;
+            font-size: 24px;
+            border-radius: 4px;
+            &:hover {
+              color: white;
+            }
+          `}
+        >
+          Hover to change color.
+        </button>
+        <EmotionP>Styled by Emotion</EmotionP>
+        {/* TODO: Not work with Stiches yet since output css does not present directly in the head, but in Constructable Stylesheet Objects */}
+        {/* Reference: https://developer.chrome.com/blog/css-in-js/ */}
+        {/* https://wicg.github.io/construct-stylesheets/ */}
+        <StichesP>Styled by Stiches</StichesP>
         <p>
           <button
             data-testid="increase"
@@ -64,4 +86,11 @@ const StyledText = styled.p`
   color: red;
 `;
 
+const EmotionP = emotionStyled.p`
+  color: orange;
+`;
+
+const StichesP = stichesStyled('p', {
+  color: 'Purple',
+});
 export default App;

demo/__tests__/App.test.tsx

@@ -7,7 +7,7 @@ import { debug } from '../../dist/index';
 describe('App', () => {
   it('should work as expected', () => {
     render(<App />);
-
+    // console.log(document.documentElement.outerHTML);
     userEvent.click(screen.getByTestId('increase'));
     userEvent.click(screen.getByTestId('increase'));
     userEvent.click(screen.getByTestId('increase'));

demo/__tests__/style.test.tsx

@@ -5,6 +5,7 @@ import App from '../App';
 describe('Style', () => {
   it('should render CSS correctly in JSDOM', () => {
     render(<App />);
+    // console.log(document.documentElement.outerHTML);
     // vanilla CSS
     // Global CSS
     // TODO: Global CSS is saved into the `.cache` folder, so we can't assert it directly within the JSDOM
@@ -21,6 +22,11 @@ describe('Style', () => {
       '<style data-styled="active" data-styled-version="5.3.5">.dgihId{color:red;}</style>',
     );
 
+    // emotion
+    expect(document.documentElement.outerHTML).toContain(
+      '<style data-emotion="css" data-s="">.css-2m18qq{color:orange;}</style>',
+    );
+
     // CSS Modules
     // Global
     // TODO: not implemented yet
@@ -42,9 +48,7 @@ describe('Style', () => {
     expect(document.documentElement.outerHTML)
       .toContain(`header .imported-sass {
   color: pink;
-}</style><style type="text/css">._cssModule_16r0j_1 {
-  color: green;
-}`);
+}</style>`);
     // import ~
     // TODO: Not implemented yet
     // loadPaths

examples/nextjs/pages/index.tsx

@@ -1,7 +1,7 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import type { NextPage } from 'next';
+import Head from 'next/head';
+import Image from 'next/image';
+import styles from '../styles/Home.module.css';
 
 const Home: NextPage = () => {
   return (
@@ -21,7 +21,18 @@ const Home: NextPage = () => {
           Get started by editing{' '}
           <code className={styles.code}>pages/index.tsx</code>
         </p>
-
+        <p className="styleJsx">
+          Styled by styled-jsx
+          {/* Jest Preview accidentally support styled-jsx partially (without scoping) */}
+          {/* TODO: To make styled-jsx works in Jest */}
+          <style jsx>
+            {`
+              .styleJsx {
+                color: red;
+              }
+            `}
+          </style>
+        </p>
         <div className={styles.grid}>
           <a href="https://nextjs.org/docs" className={styles.card}>
             <h2>Documentation &rarr;</h2>
@@ -65,8 +76,10 @@ const Home: NextPage = () => {
           </span>
         </a>
       </footer>
+      {/* This is supposed not to be styled, but it does. Since `.styleJsx` leaks from above */}
+      <p className="styleJsx">Styled by styled-jsx</p>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;