change syntax for scoped css

src/consts.js

@@ -4,4 +4,4 @@ export const DLVERSION = '0.0.9'
 export const [USE_MAPFN, TARGET, PROXY, STEPS, LISTENERS, IF, STATEHOOK] =
     Array.from(Array(7), Symbol)
 
-export const cssBoundary = 'dl-boundary'
+export const cssBoundary = 'dlcomponent'

src/core.js

@@ -11,6 +11,10 @@ import {
     cssBoundary,
 } from './consts'
 
+/* FEATURE.CSS.START */
+import { cssmap, genCss, genuid } from './css'
+/* FEATURE.CSS.END */
+
 // saves a few characters, since document will never change
 let doc = document
 
@@ -309,14 +313,18 @@ export function h(type, props, ...children) {
         }
 
         let elm = type.apply(newthis)
-        assert(!elm instanceof Array, 'Functional component cannot return a Fragment');
-        assert(elm instanceof Node, 'Functional component must return a Node');
+        assert(
+            !(elm instanceof Array),
+            'Functional component cannot return a Fragment'
+        )
+        assert(elm instanceof Node, 'Functional component must return a Node')
         elm.$ = newthis
         newthis.root = elm
         /* FEATURE.CSS.START */
         let cl = elm.classList
-        if (newthis.css) {
-            cl.add(newthis.css)
+        let css = newthis.css
+        if (css) {
+            cl.add(genCss(`${type.name}-${genuid()}`, css, true))
         }
         cl.add(cssBoundary)
         /* FEATURE.CSS.END */

src/css.js

@@ -1,6 +1,6 @@
 import { cssBoundary } from './consts'
 
-const cssmap = {}
+export const cssmap = {}
 
 /* POLYFILL.SCOPE.START */
 let scopeSupported
@@ -34,7 +34,7 @@ function polyfill_scope(target) {
 /* POLYFILL.SCOPE.END */
 
 export function genuid() {
-    return `dl${Array(5)
+    return `${Array(4)
         .fill(0)
         .map(() => {
             return Math.floor(Math.random() * 36).toString(36)
@@ -49,7 +49,7 @@ const csstag = (scoped) =>
             str += f + (values.shift() || '')
         }
 
-        return genCss(str, scoped)
+        return genCss(genuid(), str, scoped)
     }
 
 export const css = csstag(false)
@@ -61,7 +61,7 @@ function parseCombinedCss(str) {
 
     // compat layer for older browsers. when css nesting stablizes this can be removed
     str += '\n'
-    for (;;) {
+    for (;  ;) {
         let [first, ...rest] = str.split('\n')
         if (first.trim().endsWith('{')) break
 
@@ -73,11 +73,10 @@ function parseCombinedCss(str) {
     return [newstr, selfstr, str]
 }
 
-function genCss(str, scoped) {
+export function genCss(uid, str, scoped) {
     let cached = cssmap[str]
     if (cached) return cached
 
-    const uid = genuid()
     cssmap[str] = uid
 
     const styleElement = document.createElement('style')
@@ -102,7 +101,7 @@ function genCss(str, scoped) {
         }
         /* POLYFILL.SCOPE.END */
 
-        styleElement.textContent = `@scope (.${uid}) to (:not(.${uid}).dl-boundary *) { :scope { ${str} } }`
+        styleElement.textContent = `@scope (.${uid}) to (:not(.${uid}).${cssBoundary} *) { :scope { ${str} } }`
     } else {
         ;[newstr, selfstr, str] = parseCombinedCss(str)