feat(scoped-styles): add extract styles

.size-limit.json

@@ -1,7 +1,7 @@
 [
   {
     "path": "packages/scoped-styles/dist/index.js",
-    "limit": "505 B"
+    "limit": "555 B"
   },
   {
     "path": "packages/widget-element/dist/index.js",

packages/scoped-styles/index.test.ts

@@ -1,4 +1,4 @@
-import {registerRoot, registerStyles, unregisterRoot} from '.'
+import {registerRoot, registerStyles, unregisterRoot, extractStyles} from '.'
 import {sheetsRegistry} from './registry'
 
 test('append styles to document head', () => {
@@ -56,6 +56,14 @@ test('register multiple roots for same sheets', () => {
   unregisterRoot(customRoot)
 })
 
+test('extract styles', () => {
+  const sheet = ':root { background-color: white; }'
+
+  registerStyles(sheet)
+
+  expect(extractStyles()).toEqual([sheet])
+})
+
 afterEach(() => {
   sheetsRegistry.clear()
 })

packages/scoped-styles/index.ts

@@ -51,6 +51,23 @@ export function registerStyles(...sheets: string[]) {
   appendStyles(...rootsRegistry)
 }
 
+/**
+ * Extract scoped style sheets as string
+ *
+ * ```tsx
+ * const styleSheets = extractStyles()
+ *
+ * styleSheets.forEach((sheetText) => {
+ *   const style = document.createElement('style')
+ *   style.textContent = sheetText
+ *   document.head.append(style)
+ * })
+ * ```
+ */
+export function extractStyles() {
+  return Array.from(sheetsRegistry).map((sheet) => sheet.toString())
+}
+
 /**
  * Register scoped root and inject styles
  *

packages/scoped-styles/style-sheet.ts

@@ -27,4 +27,8 @@ export class StyleSheet {
       this.registry.delete(root)
     }
   }
+
+  toString() {
+    return this.content
+  }
 }