import { describe, expect, it } from 'bun:test'
import {
createCSSRuntime,
createHeadlessCSSRuntime,
exportHTMLBundle,
serializeHTML
} from '@open-pencil/dom-css'
import { DOM_CSS_COLORS, simpleCardDocument } from '#tests/helpers/dom-css'
describe('@open-pencil/dom-css', () => {
it('serializes DesignDOM as HTML', () => {
expect(serializeHTML(simpleCardDocument)).toBe(
'OpenPencil
'
)
})
it('serializes inline styles as Tailwind classes when requested', () => {
const html = serializeHTML(
{
type: 'document',
children: [
{
type: 'element',
tagName: 'section',
attrs: { class: 'card' },
inlineStyle: {
display: 'flex',
padding: '16px',
gap: '8px',
'background-color': 'white'
},
children: [{ type: 'text', text: 'OpenPencil' }]
}
]
},
{ style: 'tailwind' }
)
expect(html).toBe('')
})
it('exports standalone HTML documents when requested', async () => {
const bundle = await exportHTMLBundle(simpleCardDocument, { html: 'standalone' })
const html = String(bundle.files[0]?.content)
expect(html).toContain('')
expect(html).toContain('data-open-pencil-html="standalone"')
expect(html).toContain('OpenPencil')
expect(html).not.toContain('@tailwindcss/browser@4')
})
it('precompiles Tailwind CSS for standalone Tailwind HTML', async () => {
const bundle = await exportHTMLBundle(simpleCardDocument, {
html: 'standalone',
style: 'tailwind'
})
const html = String(bundle.files[0]?.content)
expect(html).toContain('