diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9089110..4aa9840 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,6 +2,6 @@ css-render use `rush` as monorepo manager. -`npm i -g @mircosoft/rush` +`npm i -g @microsoft/rush` Before you start to make some change, run `rush update` then `rush install`. diff --git a/packages/css-render/__tests__/mount/index.spec.ts b/packages/css-render/__tests__/mount/index.spec.ts index 39f229f..54de2a4 100644 --- a/packages/css-render/__tests__/mount/index.spec.ts +++ b/packages/css-render/__tests__/mount/index.spec.ts @@ -178,6 +178,16 @@ describe('head', () => { 'gogogo' ) }) + it('mount before link element with nested', () => { + document.head.insertAdjacentHTML( + 'afterbegin', + '<xxx><link></xxx>' + ) + style.mount({ id: 'gogogo with nested', head: true }) + expect(document.head.firstElementChild?.firstElementChild?.getAttribute('cssr-id')).to.equal( + 'gogogo with nested' + ) + }) }) describe('force', () => { diff --git a/packages/css-render/src/mount.ts b/packages/css-render/src/mount.ts index 39df725..798cb3d 100644 --- a/packages/css-render/src/mount.ts +++ b/packages/css-render/src/mount.ts @@ -112,10 +112,13 @@ function mount ( } if (head) { - document.head.insertBefore( - target, - document.head.querySelector('style, link') - ) + const firstStyleOrLinkEl = document.head.querySelector('style, link') + // ensure Target and firstStyleOrLinkEl are under the same parent node + if (firstStyleOrLinkEl?.parentNode) { + firstStyleOrLinkEl.parentNode.insertBefore(target, firstStyleOrLinkEl) + } else { + document.head.appendChild(target) + } } else { document.head.appendChild(target) }