allow for cssom and dom to accept a selector string to find the s…

…erver rendered stylesheet
tw-in-js · Nov 3, 2022 · e2c17a2 · e2c17a2
1 parent d481948
commit e2c17a2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/.changeset/hungry-ways-divide.md b/.changeset/hungry-ways-divide.md
@@ -0,0 +1,5 @@
+---
+'twind': patch
+---
+
+allow for `cssom` and `dom` to accept a selector string to find the server rendered stylesheet
diff --git a/packages/twind/src/sheets.ts b/packages/twind/src/sheets.ts
@@ -2,8 +2,8 @@ import { warn } from './internal/warn'
 import type { Sheet, SheetRule } from './types'
 import { asArray, noop } from './utils'
 
-function getStyleElement(element?: Element | null | false): HTMLStyleElement {
-  let style = element || document.querySelector('style[data-twind]')
+function getStyleElement(selector: string | null | undefined | false): HTMLStyleElement {
+  let style = document.querySelector(selector || 'style[data-twind]')
 
   if (!style || style.tagName != 'STYLE') {
     style = document.createElement('style')
@@ -14,10 +14,15 @@ function getStyleElement(element?: Element | null | false): HTMLStyleElement {
   return style as HTMLStyleElement
 }
 
-export function cssom(element?: CSSStyleSheet | Element | null | false): Sheet<CSSStyleSheet> {
+export function cssom(
+  element?: CSSStyleSheet | HTMLStyleElement | string | null | false,
+): Sheet<CSSStyleSheet> {
   const target = (element as CSSStyleSheet)?.cssRules
     ? (element as CSSStyleSheet)
-    : (getStyleElement(element as Element | null | false).sheet as CSSStyleSheet)
+    : ((element && typeof element != 'string'
+        ? (element as HTMLStyleElement)
+        : getStyleElement(element)
+      ).sheet as CSSStyleSheet)
 
   return {
     target,
@@ -69,8 +74,8 @@ export function cssom(element?: CSSStyleSheet | Element | null | false): Sheet<C
   }
 }
 
-export function dom(element?: Element | null | false): Sheet<HTMLStyleElement> {
-  const target = getStyleElement(element)
+export function dom(element?: HTMLStyleElement | string | null | false): Sheet<HTMLStyleElement> {
+  const target = element && typeof element != 'string' ? element : getStyleElement(element)
 
   return {
     target,