Merge pull request #71 from enhance-dev/empty-style

Fixes #70 Updates styleTransform function to not error when style tag…

index.mjs

@@ -373,13 +373,16 @@ function applyScriptTransforms({ node, scriptTransforms, tagName }) {
 
 function applyStyleTransforms({ node, styleTransforms, tagName, context='' }) {
   const attrs = node?.attrs || []
-  const raw = node.childNodes[0].value
-  let out = raw
-  styleTransforms.forEach(transform => {
-    out = transform({ attrs, raw: out, tagName, context })
-  })
-  if (!out.length) { return }
-  node.childNodes[0].value = out
+  if (node.childNodes.length) {
+    const raw = node.childNodes[0].value
+    let out = raw
+    styleTransforms.forEach(transform => {
+      out = transform({ attrs, raw: out, tagName, context })
+    })
+    if (out.length) {
+      node.childNodes[0].value = out
+    }
+  }
   return node
 }
 

test/enhance.test.mjs

@@ -28,6 +28,7 @@ import MyStyleImportSecond from './fixtures/templates/my-style-import-second.mjs
 import MyCustomHeading from './fixtures/templates/my-custom-heading.mjs'
 import MyCustomHeadingWithNamedSlot from './fixtures/templates/my-custom-heading-with-named-slot.mjs'
 import MultipleSlots from './fixtures/templates/multiple-slots.mjs'
+import MyEmptyStyle from './fixtures/templates/my-empty-style.mjs'
 
 function Head() {
   return `
@@ -1102,3 +1103,24 @@ test('multiple slots with unnamed slot first', t => {
   )
   t.end()
 })
+
+test('should render empty style tag', t => {
+  const html = enhance({
+    bodyContent: true,
+    elements: {
+      'empty-style': MyEmptyStyle,
+    }
+  })
+  const actual = html`
+    <empty-style></empty-style>
+  `
+  const expected = `
+    <empty-style enhanced="✨"></empty-style>
+  `
+  t.equal(
+    strip(actual),
+    strip(expected),
+    'Does not throw an error when an empty style tag is rendered'
+  )
+  t.end()
+})

test/fixtures/templates/my-empty-style.mjs

@@ -0,0 +1,3 @@
+export default function EmptyStyle({ html }) {
+  return html`<style></style>`;
+}