feat: add Style component

Flowko · Flowko · commit 2b8077d5ed4a · 2023-12-23T13:35:53.000+01:00
diff --git a/src/components/EStyle.ts b/src/components/EStyle.ts
@@ -0,0 +1,8 @@
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'EStyle',
+  setup(_, { slots }) {
+    return () => h('style', {}, slots.default?.())
+  },
+})
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -15,3 +15,4 @@ export { default as ESection } from './ESection'
 export { default as ETailwind } from './ETailwind'
 export { default as EText } from './EText'
 export { default as EMarkdown } from './EMarkdown'
+export { default as EStyle } from './EStyle'
diff --git a/tests/Style.spec.ts b/tests/Style.spec.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { h } from 'vue'
+import { EHead, EStyle, useRender } from '../src'
+
+describe('render', () => {
+  it('renders the <Style> component', async () => {
+    const component = h(EStyle, `.pager.inactive {display: none;}`)
+
+    const actualOutput = await useRender(component)
+
+    expect(actualOutput.html).toMatchInlineSnapshot(
+      '"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><style>.pager.inactive {display: none;}</style>"',
+    )
+  })
+
+  it('renders the <Head> with <Style> component with title', async () => {
+    const component = h(EHead, undefined, {
+      default: () => h(EStyle, `.pager.inactive {display: none;}`),
+    })
+
+    const actualOutput = await useRender(component)
+
+    expect(actualOutput.html).toMatchInlineSnapshot(
+      '"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style>.pager.inactive {display: none;}</style></head>"',
+    )
+  })
+})
