From 687c710fe98c5da8ece3523f98cecfa962d4ed95 Mon Sep 17 00:00:00 2001 From: Yanzhen Yu Date: Sun, 17 Feb 2019 16:34:28 +0800 Subject: [PATCH] iterate style element to get css rules string --- src/rebuild.ts | 7 ++++--- src/snapshot.ts | 22 +++++++++++++++++++--- test/__snapshots__/integration.ts.snap | 14 ++++++++++++++ test/html/dynamic-stylesheet.html | 20 ++++++++++++++++++++ 4 files changed, 57 insertions(+), 6 deletions(-) create mode 100644 test/html/dynamic-stylesheet.html diff --git a/src/rebuild.ts b/src/rebuild.ts index 6896b7b4..1d2c5357 100644 --- a/src/rebuild.ts +++ b/src/rebuild.ts @@ -95,11 +95,12 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null { let value = n.attributes[name]; value = typeof value === 'boolean' ? '' : value; const isTextarea = tagName === 'textarea' && name === 'value'; - const isRemoteCss = tagName === 'style' && name === '_cssText'; - if (isRemoteCss) { + const isRemoteOrDynamicCss = + tagName === 'style' && name === '_cssText'; + if (isRemoteOrDynamicCss) { value = addHoverClass(value); } - if (isTextarea || isRemoteCss) { + if (isTextarea || isRemoteOrDynamicCss) { const child = doc.createTextNode(value); node.appendChild(child); continue; diff --git a/src/snapshot.ts b/src/snapshot.ts index 52831dfe..9c27a5f4 100644 --- a/src/snapshot.ts +++ b/src/snapshot.ts @@ -122,9 +122,25 @@ function serializeNode(n: Node, doc: Document): serializedNode | false { }); const cssText = getCssRulesString(stylesheet as CSSStyleSheet); if (cssText) { - attributes = { - _cssText: absoluteToStylesheet(cssText, stylesheet!.href!), - }; + delete attributes.rel; + delete attributes.href; + attributes._cssText = absoluteToStylesheet( + cssText, + stylesheet!.href!, + ); + } + } + // dynamic stylesheet + if ( + tagName === 'style' && + (n as HTMLStyleElement).sheet && + // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element + !(n as HTMLElement).innerText.trim().length + ) { + const cssText = getCssRulesString((n as HTMLStyleElement) + .sheet as CSSStyleSheet); + if (cssText) { + attributes._cssText = absoluteToStylesheet(cssText, location.href); } } // form fields diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap index 7d0575fc..2c3d42b8 100644 --- a/test/__snapshots__/integration.ts.snap +++ b/test/__snapshots__/integration.ts.snap @@ -83,6 +83,20 @@ exports[`[html file]: cors-style-sheet.html 1`] = ` " `; +exports[`[html file]: dynamic-stylesheet.html 1`] = ` +" + + + + dynamic stylesheet + + + + +

p tag

+ " +`; + exports[`[html file]: form-fields.html 1`] = ` " diff --git a/test/html/dynamic-stylesheet.html b/test/html/dynamic-stylesheet.html new file mode 100644 index 00000000..83a57ccf --- /dev/null +++ b/test/html/dynamic-stylesheet.html @@ -0,0 +1,20 @@ + + + + + + + dynamic stylesheet + + + + +

p tag

+ +