acrylblends 0.6.3 → 0.7.0

package/plugins/acryl-router/src/core/helper/css/common.case.test.tsx

@@ -1,506 +0,0 @@
-/** @jsxImportSource ../../jsx */
-import type {
-  Style as StyleComponent,
-  css as cssHelper,
-  keyframes as keyframesHelper,
-  rawCssString as rawCssStringHelper,
-  viewTransition as viewTransitionHelper,
-} from './index.ts'
-
-interface Support {
-  nest: boolean
-}
-export const renderTest = (
-  getEnv: () => {
-    css: typeof cssHelper
-    keyframes: typeof keyframesHelper
-    viewTransition: typeof viewTransitionHelper
-    rawCssString: typeof rawCssStringHelper
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    toString: (template: any) => Promise<string>
-    Style: typeof StyleComponent
-    support: Support
-  }
-) => {
-  const { support } = getEnv()
-
-  let css: typeof cssHelper
-  let keyframes: typeof keyframesHelper
-  let viewTransition: typeof viewTransitionHelper
-  let rawCssString: typeof rawCssStringHelper
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let toString: (template: any) => Promise<string>
-  let Style: typeof StyleComponent
-  beforeEach(() => {
-    ;({ css, keyframes, viewTransition, rawCssString, toString, Style } = getEnv())
-  })
-
-  describe('render css', () => {
-    it('Should render CSS styles with JSX', async () => {
-      const headerClass = css`
-        background-color: blue;
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-2458908649{background-color:blue}</style><h1 class="css-2458908649">Hello!</h1>'
-      )
-    })
-
-    it('Should render CSS with keyframes', async () => {
-      const animation = keyframes`
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      `
-      const headerClass = css`
-        background-color: blue;
-        animation: ${animation} 1s ease-in-out;
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-1580801783{background-color:blue;animation:css-9294673 1s ease-in-out}@keyframes css-9294673{from{opacity:0}to{opacity:1}}</style><h1 class="css-1580801783">Hello!</h1>'
-      )
-    })
-
-    it('Should not output the same class name multiple times.', async () => {
-      const headerClass = css`
-        background-color: blue;
-      `
-      const headerClass2 = css`
-        background-color: blue;
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClass}>Hello!</h1>
-          <h1 class={headerClass2}>Hello2!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-2458908649{background-color:blue}</style><h1 class="css-2458908649">Hello!</h1><h1 class="css-2458908649">Hello2!</h1>'
-      )
-    })
-
-    it('Should render CSS with variable', async () => {
-      const headerClass = css`
-        background-color: blue;
-        content: '${"I'm a variable!"}';
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-4027435072{background-color:blue;content:\'I\\\'m a variable!\'}</style><h1 class="css-4027435072">Hello!</h1>'
-      )
-    })
-
-    it('Should escape </style>', async () => {
-      const headerClass = css`
-        background-color: blue;
-        content: '${'</style>'}';
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-372954897{background-color:blue;content:\'<\\/style>\'}</style><h1 class="css-372954897">Hello!</h1>'
-      )
-    })
-
-    it('Should not escape URL', async () => {
-      const headerClass = css`
-        background-color: blue;
-        background: url('${'http://www.example.com/path/to/file.jpg'}');
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-1321888780{background-color:blue;background:url(\'http://www.example.com/path/to/file.jpg\')}</style><h1 class="css-1321888780">Hello!</h1>'
-      )
-    })
-
-    it('Should render CSS with escaped variable', async () => {
-      const headerClass = css`
-        background-color: blue;
-        content: '${rawCssString('say "Hello!"')}';
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-2238574885{background-color:blue;content:\'say "Hello!"\'}</style><h1 class="css-2238574885">Hello!</h1>'
-      )
-    })
-
-    it('Should render CSS with number', async () => {
-      const headerClass = css`
-        background-color: blue;
-        font-size: ${1}rem;
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-1847536026{background-color:blue;font-size:1rem}</style><h1 class="css-1847536026">Hello!</h1>'
-      )
-    })
-
-    it('Should render CSS with array', async () => {
-      const animation = keyframes`
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      `
-      const headerClass = css`
-        background-color: blue;
-        animation: ${animation} 1s ease-in-out;
-      `
-      const extendedHeaderClass = css`
-        ${headerClass}
-        color: red;
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={extendedHeaderClass}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-2558359670{background-color:blue;animation:css-9294673 1s ease-in-out;color:red}@keyframes css-9294673{from{opacity:0}to{opacity:1}}</style><h1 class="css-2558359670">Hello!</h1>'
-      )
-    })
-
-    it.runIf(support.nest)(
-      'Should be used as a class name for syntax `${className} {`',
-      async () => {
-        const headerClass = css`
-          font-weight: bold;
-        `
-        const containerClass = css`
-          ${headerClass} {
-            h1 {
-              color: red;
-            }
-          }
-        `
-        const template = (
-          <>
-            <Style />
-            <div class={containerClass}>
-              <h1 class={headerClass}>Hello!</h1>
-            </div>
-          </>
-        )
-        expect(await toString(template)).toBe(
-          '<style id="acryl-css">.css-4220297002{.css-1032195302{h1{color:red}}}.css-1032195302{font-weight:bold}</style><div class="css-4220297002"><h1 class="css-1032195302">Hello!</h1></div>'
-        )
-      }
-    )
-
-    it('Should be inserted to global if style string starts with :-acryl-root', async () => {
-      const globalClass = css`
-        :-acryl-global {
-          html {
-            color: red;
-          }
-          body {
-            display: flex;
-          }
-        }
-      `
-      const template = (
-        <>
-          <Style />
-          <div class={globalClass}>
-            <h1>Hello!</h1>
-          </div>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">html{color:red}body{display:flex}</style><div class=""><h1>Hello!</h1></div>'
-      )
-    })
-
-    it.runIf(support.nest)(
-      'Should be inserted to global if style string starts with :-acryl-root and extends class name',
-      async () => {
-        const headerClass = css`
-          display: flex;
-        `
-        const specialHeaderClass = css`
-          :-acryl-global {
-            ${headerClass} {
-              h1 {
-                color: red;
-              }
-            }
-          }
-        `
-        const template = (
-          <>
-            <Style />
-            <div class={specialHeaderClass}>
-              <h1>Hello!</h1>
-            </div>
-          </>
-        )
-        expect(await toString(template)).toBe(
-          '<style id="acryl-css">.css-3980466870{h1{color:red}}.css-3980466870{display:flex}</style><div class="css-3980466870"><h1>Hello!</h1></div>'
-        )
-      }
-    )
-
-    it('Should be inserted as global css if passed css`` to Style component', async () => {
-      const headerClass = css`
-        font-size: 1rem;
-      `
-      const template = (
-        <>
-          <Style>{css`
-            html {
-              color: red;
-            }
-            body {
-              display: flex;
-            }
-          `}</Style>
-          <div>
-            <h1 class={headerClass}>Hello!</h1>
-          </div>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">html{color:red}body{display:flex}.css-1740067317{font-size:1rem}</style><div><h1 class="css-1740067317">Hello!</h1></div>'
-      )
-    })
-
-    it('Should be ignored :-acryl-root inside Style component', async () => {
-      const headerClass = css`
-        font-size: 1rem;
-      `
-      const template = (
-        <>
-          <Style>{css`
-            :-acryl-global {
-              html {
-                color: red;
-              }
-              body {
-                display: flex;
-              }
-            }
-          `}</Style>
-          <div>
-            <h1 class={headerClass}>Hello!</h1>
-          </div>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">html{color:red}body{display:flex}.css-1740067317{font-size:1rem}</style><div><h1 class="css-1740067317">Hello!</h1></div>'
-      )
-    })
-
-    describe('viewTransition', () => {
-      it('Should render CSS with unique view-transition-name', async () => {
-        const transition = viewTransition()
-        const template = (
-          <>
-            <Style />
-            <h1 class={transition}>Hello!</h1>
-          </>
-        )
-        expect(await toString(template)).toBe(
-          '<style id="acryl-css">.css-1644952339{view-transition-name:css-1644952339}</style><h1 class="css-1644952339">Hello!</h1>'
-        )
-      })
-
-      it('Should render CSS with css and keyframes', async () => {
-        const kf = keyframes`
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      `
-        const transition = viewTransition(css`
-          ::view-transition-old() {
-            animation-name: ${kf};
-          }
-          ::view-transition-new() {
-            animation-name: ${kf};
-          }
-        `)
-        const headerClass = css`
-          ${transition}
-          background-color: blue;
-        `
-        const template = (
-          <>
-            <Style />
-            <h1 class={headerClass}>Hello!</h1>
-          </>
-        )
-        expect(await toString(template)).toBe(
-          '<style id="acryl-css">.css-1245070278{view-transition-name:css-399742870;background-color:blue}@keyframes css-9294673{from{opacity:0}to{opacity:1}}::view-transition-old(css-399742870){animation-name:css-9294673}::view-transition-new(css-399742870){animation-name:css-9294673}</style><h1 class="css-1245070278">Hello!</h1>'
-        )
-      })
-
-      it('Should works as a template tag function', async () => {
-        const kf = keyframes`
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      `
-        const transition = viewTransition`
-          ::view-transition-old() {
-            animation-name: ${kf};
-          }
-          ::view-transition-new() {
-            animation-name: ${kf};
-          }
-        `
-        const headerClass = css`
-          ${transition}
-          background-color: blue;
-        `
-        const template = (
-          <>
-            <Style />
-            <h1 class={headerClass}>Hello!</h1>
-          </>
-        )
-        expect(await toString(template)).toBe(
-          '<style id="acryl-css">.css-1245070278{view-transition-name:css-399742870;background-color:blue}@keyframes css-9294673{from{opacity:0}to{opacity:1}}::view-transition-old(css-399742870){animation-name:css-9294673}::view-transition-new(css-399742870){animation-name:css-9294673}</style><h1 class="css-1245070278">Hello!</h1>'
-        )
-      })
-    })
-
-    it.runIf(support.nest)('Should render sub CSS with keyframe', async () => {
-      const headerClass = css`
-        background-color: blue;
-        ${[1, 2].map(
-          (i) => css`
-            :nth-child(${i}) {
-              color: red;
-            }
-          `
-        )}
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-1539881271{background-color:blue;:nth-child(1){color:red}:nth-child(2){color:red}}</style><h1 class="css-1539881271">Hello!</h1>'
-      )
-    })
-
-    it('Should be generated deferent class name for deferent first line comment even if the content is the same', async () => {
-      const headerClassA = css`
-        /* class A */
-        display: flex;
-      `
-      const headerClassB = css`
-        /* class B */
-        display: flex;
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClassA}>Hello!</h1>
-          <h1 class={headerClassB}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-3170754153{display:flex}.css-896513246{display:flex}</style><h1 class="css-3170754153">Hello!</h1><h1 class="css-896513246">Hello!</h1>'
-      )
-    })
-
-    describe('Booleans, Null, and Undefined Are Ignored', () => {
-      it.each([true, false, undefined, null])('%s', async (value) => {
-        const headerClass = css`
-          ${value}
-          background-color: blue;
-        `
-        const template = (
-          <>
-            <Style />
-            <h1 class={headerClass}>Hello!</h1>
-          </>
-        )
-        expect(await toString(template)).toBe(
-          '<style id="acryl-css">.css-2458908649{background-color:blue}</style><h1 class="css-2458908649">Hello!</h1>'
-        )
-      })
-
-      it('falsy value', async () => {
-        const value = 0
-        const headerClass = css`
-          padding: ${value};
-        `
-        const template = (
-          <>
-            <Style />
-            <h1 class={headerClass}>Hello!</h1>
-          </>
-        )
-        expect(await toString(template)).toBe(
-          '<style id="acryl-css">.css-478287868{padding:0}</style><h1 class="css-478287868">Hello!</h1>'
-        )
-      })
-
-      it('Should render CSS styles with CSP nonce', async () => {
-        const headerClass = css`
-          background-color: blue;
-        `
-        const template = (
-          <>
-            <Style nonce='1234' />
-            <h1 class={headerClass}>Hello!</h1>
-          </>
-        )
-        expect(await toString(template)).toBe(
-          '<style id="acryl-css" nonce="1234">.css-2458908649{background-color:blue}</style><h1 class="css-2458908649">Hello!</h1>'
-        )
-      })
-    })
-  })
-}