feat(styles): add debug properties

Ni55aN · Jul 2, 2022 · 3a4fe2e · 3a4fe2e
1 parent f1d781e
commit 3a4fe2e
Showing 1 changed file with 24 additions and 5 deletions.
diff --git a/packages/styles/src/index.ts b/packages/styles/src/index.ts
@@ -1,4 +1,4 @@
-import { Child, createAnchor, onLife } from 'easyhard'
+import { Child, createAnchor, onLife, debug } from 'easyhard'
 import { getUID } from 'easyhard-common'
 import { Observable, combineLatest } from 'rxjs'
 import { CssMedia, CssMediaItem, CssMediaValue, Keys as MediaKeys, stringifyMedia } from './media'
@@ -15,7 +15,12 @@ function prepareCssValue(val: CssSimpleValue): string {
   return typeof val === 'number' ? unit('px')(val) : val
 }
 
-function injectCssProperties(selector: string, media: CssMediaItem<StyleDeclaration>[], style: HTMLStyleElement, props: StyleDeclaration, head: HTMLHeadElement, parent: ChildNode | null): void {
+function debugStyleAttr(style: HTMLStyleElement, path: string[], ob: Observable<CssMediaValue | number>) {
+  const attrName = path.join(' ')
+  debug.debugElementAttr(style, attrName, ob)
+}
+
+function injectCssProperties(selector: string, media: CssMediaItem<StyleDeclaration>[], style: HTMLStyleElement, props: StyleDeclaration, head: HTMLHeadElement, parent: ChildNode | null, debugPath: string[] = []): void {
   const sheet = style.sheet as CSSStyleSheet
   const len = sheet.cssRules.length
   sheet.insertRule(media.length > 0 ? `@media {${selector} {}}`: `${selector} {}`, len)
@@ -29,6 +34,10 @@ function injectCssProperties(selector: string, media: CssMediaItem<StyleDeclarat
 
     rule.media.mediaText = stringifyMedia<StyleDeclaration>(mediaStatic)
 
+    mediaObservable
+      .filter(([_, ob]) => ob instanceof Observable)
+      .forEach(([key, ob]) => debugStyleAttr(style, [...debugPath, 'query', key], ob as Observable<CssMediaValue>))
+
     combineLatest<CssMediaValue[]>(...mediaObservable.map(([_, value]) => value as Observable<CssMediaValue>))
       .pipe(untilExistStyle(style, parent))
       .subscribe((args: CssMediaValue[]) => {
@@ -45,14 +54,15 @@ function injectCssProperties(selector: string, media: CssMediaItem<StyleDeclarat
       const  { query, ...localProps } = nestedProps
       const localMedia = [...Object.entries(query), ...media] as CssMediaItem<StyleDeclaration>[]
 
-      injectCssProperties(selector, localMedia, style, localProps as StyleDeclaration, head, parent)
+      injectCssProperties(selector, localMedia, style, localProps as StyleDeclaration, head, parent, [...debugPath, '@media'])
     } else if (key === '@import') {
       sheet.insertRule(`@import ${val as string}`)
     } else if (key.startsWith(':')) {
       const localProps = props[key] as unknown as StyleDeclaration
 
-      injectCssProperties(`${selector}${key}`, media, style, localProps, head, parent)
+      injectCssProperties(`${selector}${key}`, media, style, localProps, head, parent, [...debugPath, key])
     } else if (val instanceof Observable) {
+      debugStyleAttr(style, [...debugPath, key], val)
       val.pipe(untilExistStyle(style, parent)).subscribe(value => ruleStyles.setProperty(toHyphenCase(key), prepareCssValue(value)))
     } else if (val !== undefined) {
       ruleStyles.setProperty(toHyphenCase(key), prepareCssValue(val))
@@ -68,6 +78,8 @@ export function css(object: RootStyleDeclaration, parent: ChildNode | null = nul
   style.type = 'text/css'
   head.appendChild(style)
 
+  debug.debugElement(style)
+
   injectCssProperties(`.${className}`, [], style, object, head, parent)
 
   return { className, style }
@@ -76,14 +88,21 @@ export function css(object: RootStyleDeclaration, parent: ChildNode | null = nul
 export function injectStyles(...styles: (RootStyleDeclaration | Style)[]): Child {
   const anchor = createAnchor()
 
+  debug.debugFragment(anchor, '$style')
+
   onLife(anchor, () => {
     const element =  anchor.parentNode as HTMLElement
     const styleElements: HTMLStyleElement[] = []
     const classNames = styles.map((obj): string => {
-      if ('className' in obj) return obj.className
+      if ('className' in obj) {
+        debug.debugFragmentAddParent(anchor, obj.style)
+        return obj.className
+      }
 
       const { className, style } = css(obj, anchor)
       styleElements.push(style)
+
+      debug.debugFragmentAddParent(anchor, style)
       return className
     })