fix css parser

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>

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;

rollup.config.mjs

@@ -98,7 +98,9 @@ export default (args) => {
     }
 
     const devOutput = {
-        format: 'cjs',
+        format: 'iife',
+        name: 'window',
+        extend: true,
         sourcemap: true,
         ...sharedOutput,
     }

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] = [, , , , , ,]

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