consecteturquia/packages/core/src/tests/extract.test.ts

twind monorepo

import { assert, test } from 'vitest'

import presetTailwind from '@twind/preset-tailwind'

import { twind, virtual, extract } from '..'

test('expand class names', () => {
  const tw = twind({ presets: [presetTailwind({ disablePreflight: true })] }, virtual())

  const { html, css } = extract(
    `
    <main class='h-screen bg-purple-400 flex items-center justify-center'>
      <h1 class="font-bold text-(center 5xl white sm:gray-800 md:pink-700) after:content-['xxx']">
        This is <span class=font-(bold,sans)>Twind</span>!
      </h1>
    </main>
    `,
    tw,
  )

  assert.strictEqual(
    html,
    `
    <main class='h-screen bg-purple-400 flex items-center justify-center'>
      <h1 class="text-white text-5xl font-bold text-center after:content-['xxx'] sm:text-gray-800 md:text-pink-700">
        This is <span class="font-bold font-sans">Twind</span>!
      </h1>
    </main>
    `,
  )

  assert.strictEqual(
    css,
    [
      '.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}',
      '.flex{display:flex}',
      '.h-screen{height:100vh}',
      '.bg-purple-400{--tw-bg-opacity:1;background-color:rgba(192,132,252,var(--tw-bg-opacity))}',
      '.text-5xl{font-size:3rem;line-height:1}',
      '.font-bold{font-weight:700}',
      '.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}',
      '.items-center{align-items:center}',
      '.justify-center{justify-content:center}',
      '.text-center{text-align:center}',
      ".after\\:content-\\[\\'xxx\\'\\]:after{--tw-content:'xxx';content:var(--tw-content)}",
      '@media (min-width:640px){.sm\\:text-gray-800{--tw-text-opacity:1;color:rgba(31,41,55,var(--tw-text-opacity))}}',
      '@media (min-width:768px){.md\\:text-pink-700{--tw-text-opacity:1;color:rgba(190,24,93,var(--tw-text-opacity))}}',
    ].join(''),
  )
})

test('hash class names', () => {
  const tw = twind({ presets: [presetTailwind({ disablePreflight: true })], hash: true }, virtual())

  const { html, css } = extract(
    `
    <main class="h-screen bg-purple-400 flex items-center justify-center">
      <h1 class="text(center 5xl white sm:gray-800 md:pink-700)">
        This is <span class="font-bold">Twind</span>!
      </h1>
    </main>
    `,
    tw,
  )

  assert.strictEqual(
    html,
    `
    <main class="#1mjcm6l #19akslq #9athnx #8gfukc #vlgikd">
      <h1 class="#s4i0jm #1khack9 #xwomwz #vdqslz #1ke7mwv">
        This is <span class="#wf2app">Twind</span>!
      </h1>
    </main>
    `,
  )

  assert.strictEqual(
    css,
    [
      '.\\#s4i0jm{--dxr4o8:1;color:rgba(255,255,255,var(--dxr4o8))}',
      '.\\#1mjcm6l{display:flex}',
      '.\\#19akslq{height:100vh}',
      '.\\#9athnx{--17cwy6m:1;background-color:rgba(192,132,252,var(--17cwy6m))}',
      '.\\#1khack9{font-size:3rem;line-height:1}',
      '.\\#wf2app{font-weight:700}',
      '.\\#8gfukc{align-items:center}',
      '.\\#vlgikd{justify-content:center}',
      '.\\#xwomwz{text-align:center}',
      '@media (min-width:640px){.\\#vdqslz{--dxr4o8:1;color:rgba(31,41,55,var(--dxr4o8))}}',
      '@media (min-width:768px){.\\#1ke7mwv{--dxr4o8:1;color:rgba(190,24,93,var(--dxr4o8))}}',
    ].join(''),
  )
})

test('includes classes added by `tw` calls', () => {
  const tw = twind({ presets: [presetTailwind({ disablePreflight: true })] }, virtual())

  // some extra classes
  tw('block underline')

  const { html, css } = extract(`<span class='font-bold'></span>`, tw)

  assert.strictEqual(html, `<span class='font-bold'></span>`)

  assert.strictEqual(
    css,
    [
      '.block{display:block}',
      '.font-bold{font-weight:700}',
      '.underline{text-decoration-line:underline}',
    ].join(''),
  )

  // extra classes are not cleared
  assert.deepEqual(tw.target, [
    '.block{display:block}',
    '.underline{text-decoration-line:underline}',
  ])
})