diff --git a/examples/example.html b/examples/example.html
index 87b64dd..93a1e8b 100644
--- a/examples/example.html
+++ b/examples/example.html
@@ -5,7 +5,7 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="stylesheet" href="index.css" />
-        <script src="../index.js"></script>
+        <script src="../dist/dev.js"></script>
 
         <script src="lib/index.js"></script>
     </head>
diff --git a/examples/index.tsx b/examples/index.tsx
index 36fd1c4..b4c1bd3 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -1,11 +1,9 @@
 function Counter() {
     this.css = css`
-        self {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-        }
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
 
         button {
             border-radius: 5px;
diff --git a/rollup.config.mjs b/rollup.config.mjs
index cf0fdad..a6a56b7 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -98,7 +98,9 @@ export default (args) => {
     }
 
     const devOutput = {
-        format: 'cjs',
+        format: 'iife',
+        name: 'window',
+        extend: true,
         sourcemap: true,
         ...sharedOutput,
     }
@@ -108,7 +110,7 @@ export default (args) => {
     return [
         {
             input: 'src/main.js',
-            output, 
+            output,
             plugins: plugins,
         },
     ]
diff --git a/src/core.js b/src/core.js
index 636a04b..f91a92d 100644
--- a/src/core.js
+++ b/src/core.js
@@ -3,7 +3,7 @@ import { assert } from './asserts'
 // enables a small terser optimization
 let document = self.document
 
-let Fragment = Symbol()
+export const Fragment = Symbol()
 
 // We add some extra properties into various objects throughout, better to use symbols and not interfere. this is just a tiny optimization
 let [USE_MAPFN, TARGET, PROXY, STEPS, LISTENERS, IF] = [, , , , , ,]
diff --git a/src/css.js b/src/css.js
index 1a4c6cf..a8b6fb0 100644
--- a/src/css.js
+++ b/src/css.js
@@ -19,17 +19,19 @@ export function css(strings, ...values) {
     const styleElement = document.createElement('style')
     document.head.appendChild(styleElement)
 
-    // kind of a hack. when css nesting stablizes this can be removed
-    styleElement.textContent = str
     let newstr = ''
     let selfstr = ''
-    while (!styleElement.sheet.cssRules.length) {
-        let [first, ...rest] = str.split('\n');
-        if (!first) break;
+
+    // compat layer for older browsers. when css nesting stablizes this can be removed
+    for (; ;) {
+        let [first, ...rest] = str.split('\n')
+        if (first.trim().endsWith('{')) break;
+
         selfstr += first + '\n'
         str = rest.join('\n')
-        styleElement.textContent = str
     }
+    styleElement.textContent = str
+
 
     for (const rule of styleElement.sheet.cssRules) {
         rule.selectorText = `.${uid} ${rule.selectorText}`
@@ -37,6 +39,7 @@ export function css(strings, ...values) {
     }
 
     styleElement.textContent = `.${uid} {${selfstr}}` + '\n' + newstr
+    console.log(styleElement.textContent)
 
     cssmap[str] = uid
     return uid