acrylblends 0.6.3 → 0.7.0

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

@@ -1,678 +0,0 @@
-/** @jsxImportSource ../../jsx */
-import { Acryl } from '../../index.ts'
-import { html } from '../html/index.ts'
-import type { JSXNode } from '../../jsx/index.ts'
-import { isValidElement } from '../../jsx/index.ts'
-import { Suspense, renderToReadableStream } from '../../jsx/streaming.ts'
-import type { HtmlEscapedString } from '../../utils/html.ts'
-import { HtmlEscapedCallbackPhase, resolveCallback } from '../../utils/html.ts'
-import { renderTest } from './common.case.test.tsx'
-import { Style, createCssContext, css, cx, keyframes, rawCssString, viewTransition } from './index.ts'
-
-async function toString(
-  template: JSXNode | Promise<HtmlEscapedString> | Promise<string> | HtmlEscapedString
-) {
-  if (template instanceof Promise) {
-    template = (await template) as HtmlEscapedString
-  }
-  if (isValidElement(template)) {
-    template = template.toString() as Promise<HtmlEscapedString>
-  }
-  return resolveCallback(await template, HtmlEscapedCallbackPhase.Stringify, false, template)
-}
-
-async function toCSS(
-  template: JSXNode | Promise<HtmlEscapedString> | Promise<string> | HtmlEscapedString
-) {
-  return (await toString(template))
-    .replace(/.*?=(".*")<\/script.*/, '$1')
-    .replace(/\.css-\d+/g, '.css-123')
-}
-
-describe('CSS Helper', () => {
-  renderTest(() => {
-    return {
-      css,
-      Style,
-      keyframes,
-      viewTransition,
-      rawCssString,
-      createCssContext,
-      toString,
-      toCSS,
-      support: {
-        nest: true,
-      },
-    }
-  })
-
-  describe('with `html` tag function', () => {
-    it('Should render CSS styles with `html` tag function', async () => {
-      const headerClass = css`
-        background-color: blue;
-      `
-      const template = html`${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 styles with `html` tag function and CSP nonce', async () => {
-      const headerClass = css`
-        background-color: blue;
-      `
-      const template = html`${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>`
-      )
-    })
-  })
-
-  describe('Style with content', () => {
-    it('Should append styles when the content has a newline', async () => {
-      const headerClass = css`
-        font-size: 1rem;
-      `
-      const template = (
-        <>
-          <Style>{css`
-            /* multi
-              line */
-            html {
-              color: red;
-            }
-          `}</Style>
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">/* multi\nline */\nhtml{color:red}.css-1740067317{font-size:1rem}</style><h1 class="css-1740067317">Hello!</h1>'
-      )
-    })
-  })
-
-  describe('cx()', () => {
-    it('Should render CSS with cx()', async () => {
-      const btn = css`
-        border-radius: 4px;
-      `
-      const btnPrimary = css`
-        background-color: blue;
-        color: white;
-      `
-
-      const template = (
-        <>
-          <Style />
-          <h1 class={cx(btn, btnPrimary)}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-2395710522{border-radius:4px;background-color:blue;color:white}</style><h1 class="css-2395710522">Hello!</h1>'
-      )
-    })
-
-    it('Should render CSS with cx() includes external class name', async () => {
-      const btn = css`
-        border-radius: 4px;
-      `
-
-      const template = (
-        <>
-          <Style />
-          <h1 class={cx(btn, 'external-class')}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-3467431616{border-radius:4px}</style><h1 class="css-3467431616 external-class">Hello!</h1>'
-      )
-    })
-
-    it('Should render CSS with cx() includes nested external class name', async () => {
-      const btn = css`
-        border-radius: 4px;
-      `
-      const btn2 = cx(btn, 'external-class')
-      const btn3 = css`
-        ${btn2}
-        color: white;
-      `
-      const btn4 = cx(btn3, 'external-class2')
-      const template = (
-        <>
-          <Style />
-          <h1 class={btn4}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="acryl-css">.css-3358636561{border-radius:4px;color:white}</style><h1 class="css-3358636561 external-class external-class2">Hello!</h1>'
-      )
-    })
-
-    it('Should escape external class name to prevent XSS via attribute injection', async () => {
-      const btn = css`
-        border-radius: 4px;
-      `
-
-      const template = (
-        <>
-          <Style />
-          <h1 class={cx(btn, '" onmouseover=alert(1) x="')}>Hello!</h1>
-        </>
-      )
-      // the injected `"` is escaped to `&quot;`, so it cannot close the class attribute
-      const result = await toString(template)
-      expect(result).toContain('class="css-3467431616 &quot; onmouseover=alert(1) x=&quot;"')
-    })
-
-    it('Should keep special characters in external class name working in attribute context', async () => {
-      const btn = css`
-        border-radius: 4px;
-      `
-
-      const template = (
-        <>
-          <Style />
-          <h1 class={cx(btn, '[&>*]:p-1')}>Hello!</h1>
-        </>
-      )
-      // escaped entities are decoded back to the original class name by the browser
-      expect(await toString(template)).toContain('class="css-3467431616 [&amp;&gt;*]:p-1"')
-    })
-
-    it('Should keep special characters in external class name working as a selector', async () => {
-      const btn = css`
-        border-radius: 4px;
-      `
-      const wrapper = css`
-        ${cx(btn, '[&>*]:p-1')} {
-          color: red;
-        }
-      `
-
-      const template = (
-        <>
-          <Style />
-          <div class={wrapper}>Hello!</div>
-        </>
-      )
-      // legitimate class names (incl. Tailwind arbitrary values) are kept verbatim in the selector
-      expect(await toString(template)).toContain('.css-3467431616 [&>*]:p-1{')
-    })
-
-    it('Should drop external class names that could break out of a style element', async () => {
-      const btn = css`
-        border-radius: 4px;
-      `
-      // `</style>` (HTML breakout) and `{}` (CSS rule injection) are dropped from the selector
-      for (const payload of ['</style><script>alert(1)</script>', 'a{}body{display:none}']) {
-        const wrapper = css`
-          ${cx(btn, payload)} {
-            color: red;
-          }
-        `
-        const result = await toString(
-          <>
-            <Style />
-            <div class={wrapper}>Hello!</div>
-          </>
-        )
-        expect(result).not.toContain('</style><script>')
-        expect(result).not.toContain('body{display:none}')
-      }
-    })
-  })
-
-  describe('minify', () => {
-    const data: [string, Promise<string>, string][] = [
-      [
-        'basic CSS styles',
-        css`
-          background-color: blue;
-          color: white;
-          padding: 1rem;
-        `,
-        '.css-123{background-color:blue;color:white;padding:1rem}',
-      ],
-      [
-        'remove comments',
-        css`
-          /* background-color: blue; */
-          color: white;
-          padding: 1rem;
-          // inline comment
-          margin: 1rem;
-        `,
-        '.css-123{color:white;padding:1rem;margin:1rem}',
-      ],
-      [
-        'preserve string',
-        css`
-          background-color: blue;
-          color: white;
-          padding: 1rem;
-          content: "Hel  \\\n  \\'  lo!";
-          content: 'Hel  \\\n  \\"  lo!';
-        `,
-        '.css-123{background-color:blue;color:white;padding:1rem;content:"Hel  \\\n  \\\'  lo!";content:\'Hel  \\\n  \\"  lo!\'}',
-      ],
-      [
-        'preserve nested selectors',
-        css`
-          padding: 1rem;
-          &:hover {
-            padding: 2rem;
-          }
-        `,
-        '.css-123{padding:1rem;&:hover{padding:2rem}}',
-      ],
-      [
-        'preserve unquoted url',
-        css`
-          background-image: url(https://example.com/a.png);
-          mask-image: url(${'//cdn.example.com/b.svg'});
-          color: red;
-        `,
-        '.css-123{background-image:url(https://example.com/a.png);mask-image:url(//cdn.example.com/b.svg);color:red}',
-      ],
-      [
-        'preserve descendant combinator before pseudo-class',
-        css`
-          & :first-child {
-            margin: 0;
-          }
-          &:hover :is(h1, h2) {
-            color: red;
-          }
-        `,
-        '.css-123{& :first-child{margin:0}&:hover :is(h1,h2){color:red}}',
-      ],
-    ]
-    data.forEach(([name, str, expected]) => {
-      it(`Should be minified while preserving content accurately: ${name}`, async () => {
-        expect(JSON.parse(await toCSS(str))).toBe(expected)
-      })
-    })
-  })
-
-  describe('createCssContext()', () => {
-    it('Should create a new CSS context', async () => {
-      const { css: css1, Style: Style1 } = createCssContext({ id: 'context1' })
-      const { css: css2, Style: Style2 } = createCssContext({ id: 'context2' })
-      const headerClass1 = css1`
-        background-color: blue;
-      `
-      const headerClass2 = css2`
-        background-color: red;
-      `
-      const template = (
-        <>
-          <Style1 />
-          <Style2 />
-          <h1 class={headerClass1}>Hello!</h1>
-          <h1 class={headerClass2}>Hello!</h1>
-        </>
-      )
-      expect(await toString(template)).toBe(
-        '<style id="context1">.css-2458908649{background-color:blue}</style><style id="context2">.css-960045552{background-color:red}</style><h1 class="css-2458908649">Hello!</h1><h1 class="css-960045552">Hello!</h1>'
-      )
-    })
-  })
-
-  describe('classNameSlug', () => {
-    it('Should use custom classNameSlug function', async () => {
-      const { css: customCss, Style: customStyle } = createCssContext({
-        id: 'custom-slug',
-        classNameSlug: (hash, _label, _css) => `btn-${hash.split('-')[1]}`,
-      })
-      const btnClass = customCss`
-        background-color: blue;
-      `
-      const template = (
-        <>
-          {customStyle()}
-          <button class={btnClass}>Click</button>
-        </>
-      )
-      const result = await toString(template)
-      expect(result).toContain('.btn-')
-      expect(result).not.toContain('.css-')
-    })
-
-    it('Should pass label to classNameSlug', async () => {
-      const { css: customCss, Style: customStyle } = createCssContext({
-        id: 'label-slug',
-        classNameSlug: (hash, label) => (label ? `h-${label}` : hash),
-      })
-      const headerClass = customCss`
-        /* hero section */
-        background-color: blue;
-      `
-      const template = (
-        <>
-          {customStyle()}
-          <div class={headerClass}>Hero</div>
-        </>
-      )
-      const result = await toString(template)
-      expect(result).toContain('.h-hero-section')
-      expect(result).toContain('background-color:blue')
-    })
-
-    it('Should fall back to different hash values for labels with special characters', async () => {
-      const { css: customCss, Style: customStyle } = createCssContext({
-        id: 'label-deferent-slug',
-        classNameSlug: (hash, label) => (label ? `h-${label}` : hash),
-      })
-      const headerClass1 = customCss`
-        /* hero section! */
-        background-color: blue;
-      `
-      const headerClass2 = customCss`
-        /* hero section? */
-        background-color: blue;
-      `
-      const template = (
-        <>
-          {customStyle()}
-          <div class={headerClass1}>Hero</div>
-          <div class={headerClass2}>Hero</div>
-        </>
-      )
-      const result = await toString(template)
-
-      const classes = new Set<string>()
-      result.match(/class="(.*?)"/g)?.forEach((match) => {
-        classes.add(match)
-      })
-      expect(classes.size).toBe(2)
-    })
-
-    it('Should fall back to hash when label is empty', async () => {
-      const { css: customCss, Style: customStyle } = createCssContext({
-        id: 'fallback-slug',
-        classNameSlug: (hash, label) => (label ? `h-${label}` : hash),
-      })
-      const noLabelClass = customCss`
-        color: red;
-      `
-      const template = (
-        <>
-          {customStyle()}
-          <div class={noLabelClass}>No label</div>
-        </>
-      )
-      const result = await toString(template)
-      expect(result).toContain('.css-')
-      expect(result).toContain('color:red')
-    })
-
-    it('Should not affect default context when classNameSlug is not set', async () => {
-      const headerClass = css`
-        background-color: blue;
-      `
-      const template = (
-        <>
-          <Style />
-          <h1 class={headerClass}>Default</h1>
-        </>
-      )
-      const result = await toString(template)
-      expect(result).toContain('.css-2458908649')
-      expect(result).toContain('background-color:blue')
-    })
-
-    it('Should apply classNameSlug to keyframes', async () => {
-      const {
-        css: customCss,
-        keyframes: customKeyframes,
-        Style: customStyle,
-      } = createCssContext({
-        id: 'kf-slug',
-        classNameSlug: (hash, label) => (label ? `h-${label}` : hash),
-      })
-      const animation = customKeyframes`
-        /* fade-in */
-        from { opacity: 0; }
-        to { opacity: 1; }
-      `
-      const headerClass = customCss`
-        animation: ${animation} 1s ease-in-out;
-      `
-      const template = (
-        <>
-          {customStyle()}
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      const result = await toString(template)
-      expect(result).toContain('@keyframes h-fade-in')
-      expect(result).toContain('animation:h-fade-in 1s ease-in-out')
-    })
-
-    it('Should apply classNameSlug to viewTransition', async () => {
-      const {
-        css: customCss,
-        viewTransition: customViewTransition,
-        Style: customStyle,
-      } = createCssContext({
-        id: 'vt-slug',
-        classNameSlug: (hash, label) => (label ? `h-${label}` : hash),
-      })
-      const transition = customViewTransition(customCss`
-        /* hero */
-        display: flex;
-      `)
-      const template = (
-        <>
-          {customStyle()}
-          <h1 class={transition}>Hello!</h1>
-        </>
-      )
-      const result = await toString(template)
-      expect(result).toContain('view-transition-name:h-hero')
-    })
-
-    it('Should fall back to hash when classNameSlug returns invalid characters', async () => {
-      const { css: customCss, Style: customStyle } = createCssContext({
-        id: 'empty-slug',
-        classNameSlug: () => 'name!',
-      })
-      const headerClass = customCss`
-        display: flex;
-      `
-      const template = (
-        <>
-          {customStyle()}
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      const result = await toString(template)
-      expect(result).toContain('.css-')
-      expect(result).toContain('display:flex')
-    })
-
-    it('Should fall back to hash when classNameSlug starts with a number', async () => {
-      const { css: customCss, Style: customStyle } = createCssContext({
-        id: 'numeric-slug',
-        classNameSlug: () => '1hero',
-      })
-      const headerClass = customCss`
-        display: flex;
-      `
-      const template = (
-        <>
-          {customStyle()}
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      const result = await toString(template)
-      expect(result).toContain('.css-')
-      expect(result).toContain('display:flex')
-      expect(result).not.toContain('.1hero')
-    })
-
-    it('Should fall back to hash when label is empty and classNameSlug returns label', async () => {
-      const { css: customCss, Style: customStyle } = createCssContext({
-        id: 'empty-label-slug',
-        classNameSlug: (_, label) => label,
-      })
-      const headerClass = customCss`
-        display: flex;
-      `
-      const template = (
-        <>
-          {customStyle()}
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      const result = await toString(template)
-      expect(result).toContain('.css-')
-      expect(result).toContain('display:flex')
-    })
-
-    it('Should fall back to hash when keyframes name is a reserved keyword', async () => {
-      const {
-        css: customCss,
-        keyframes: customKeyframes,
-        Style: customStyle,
-      } = createCssContext({
-        id: 'reserved-kf-slug',
-        classNameSlug: () => 'none',
-      })
-      const animation = customKeyframes`
-        from { opacity: 0; }
-        to { opacity: 1; }
-      `
-      const headerClass = customCss`
-        animation: ${animation} 1s ease-in-out;
-      `
-      const template = (
-        <>
-          {customStyle()}
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      const result = await toString(template)
-      expect(result).toContain('@keyframes css-')
-      expect(result).toContain('animation:css-')
-      expect(result).not.toContain('@keyframes none')
-      expect(result).not.toContain('animation:none 1s ease-in-out')
-    })
-
-    it('Should call onInvalidSlug when an invalid slug is returned', async () => {
-      const onInvalidSlug = vi.fn()
-      const { css: customCss, Style: customStyle } = createCssContext({
-        id: 'on-invalid-slug',
-        classNameSlug: () => '123',
-        onInvalidSlug,
-      })
-      const headerClass = customCss`
-        display: flex;
-      `
-      const template = (
-        <>
-          {customStyle()}
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-      await toString(template)
-      expect(onInvalidSlug).toHaveBeenCalledWith('123')
-    })
-  })
-
-  describe('with application', () => {
-    const app = new Acryl()
-
-    const headerClass = css`
-      background-color: blue;
-    `
-
-    app.get('/sync', (c) =>
-      c.html(
-        <>
-          <Style />
-          <h1 class={headerClass}>Hello!</h1>
-        </>
-      )
-    )
-
-    app.get('/stream', (c) => {
-      const stream = renderToReadableStream(
-        <>
-          <Style />
-          <Suspense fallback={<p>Loading...</p>}>
-            <h1 class={headerClass}>Hello!</h1>
-          </Suspense>
-        </>
-      )
-      return c.body(stream, {
-        headers: {
-          'Content-Type': 'text/html; charset=UTF-8',
-          'Transfer-Encoding': 'chunked',
-        },
-      })
-    })
-
-    app.get('/stream-with-nonce', (c) => {
-      const stream = renderToReadableStream(
-        <>
-          <Style nonce='1234' />
-          <Suspense fallback={<p>Loading...</p>}>
-            <h1 class={headerClass}>Hello!</h1>
-          </Suspense>
-        </>
-      )
-      return c.body(stream, {
-        headers: {
-          'Content-Type': 'text/html; charset=UTF-8',
-          'Transfer-Encoding': 'chunked',
-        },
-      })
-    })
-
-    it('/sync', async () => {
-      const res = await app.request('http://localhost/sync')
-      expect(res).not.toBeNull()
-      expect(await res.text()).toBe(
-        '<style id="acryl-css">.css-2458908649{background-color:blue}</style><h1 class="css-2458908649">Hello!</h1>'
-      )
-    })
-
-    it('/stream', async () => {
-      const res = await app.request('http://localhost/stream')
-      expect(res).not.toBeNull()
-      expect(await res.text()).toBe(
-        `<style id="acryl-css"></style><template id="H:0"></template><p>Loading...</p><!--/$--><script>document.querySelector('#acryl-css').textContent+=".css-2458908649{background-color:blue}"</script><template data-acryl-target="H:0"><h1 class="css-2458908649">Hello!</h1></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:0')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`
-      )
-    })
-
-    it('/stream-with-nonce', async () => {
-      const res = await app.request('http://localhost/stream-with-nonce')
-      expect(res).not.toBeNull()
-      expect(await res.text()).toBe(
-        `<style id="acryl-css" nonce="1234"></style><template id="H:1"></template><p>Loading...</p><!--/$--><script nonce="1234">document.querySelector('#acryl-css').textContent+=".css-2458908649{background-color:blue}"</script><template data-acryl-target="H:1"><h1 class="css-2458908649">Hello!</h1></template><script>
-((d,c,n) => {
-c=d.currentScript.previousSibling
-d=d.getElementById('H:1')
-if(!d)return
-do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
-d.replaceWith(c.content)
-})(document)
-</script>`
-      )
-    })
-  })
-})