@acusti/styling 0.5.3 → 0.6.0-alpha3

package/dist/Style.d.ts

@@ -2,5 +2,5 @@
 declare type Props = {
     children: string;
 };
-declare const Style: ({ children }: Props) => JSX.Element | null;
+declare const Style: ({ children: styles }: Props) => JSX.Element | null;
 export default Style;

package/dist/Style.js

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { unregisterStyles, updateStyles } from './style-registry.js';
-const { useCallback, useEffect, useMemo, useRef, useState } = React;
-const Style = ({ children }) => {
-    // Minify CSS styles by replacing consecutive whitespace (including \n) with ' '
-    const styles = useMemo(() => children.replace(/\s+/gm, ' '), [children]);
+const { useCallback, useEffect, useRef, useState } = React;
+const Style = ({ children: styles }) => {
     const [ownerDocument, setOwnerDocument] = useState(null);
+    const handleRef = useCallback((element) => {
+        if (!element)
+            return;
+        setOwnerDocument(element.ownerDocument);
+    }, []);
     useEffect(() => () => {
         if (!ownerDocument)
             return;
@@ -21,15 +24,20 @@ const Style = ({ children }) => {
         });
         previousStylesRef.current = styles;
     }, [ownerDocument, styles]);
-    const handleRef = useCallback((element) => {
-        if (!element)
-            return;
-        setOwnerDocument(element.ownerDocument);
-    }, []);
     if (ownerDocument)
         return null;
+    console.log('styles', styles);
+    console.log('replaced styles', styles.replace(/"/g, '"'));
+    // TODO why does styles get HTML entities for double quote marks?
     return (React.createElement("style", { dangerouslySetInnerHTML: {
-            __html: styles,
+            __html: styles.replace(/"/g, '"') +
+                '/*\n' +
+                'styles:' +
+                styles +
+                '\n\n' +
+                'replaced styles: ' +
+                styles.replace(/"/g, '"') +
+                '\n*/',
         }, ref: handleRef }));
 };
 export default Style;

package/dist/Style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Style.js","sourceRoot":"","sources":["../src/Style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AAMpE,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAClC,gFAAgF;IAChF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACzE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAC;IAE1E,SAAS,CACL,GAAG,EAAE,CAAC,GAAG,EAAE;QACP,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,gBAAgB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAChD,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,iBAAiB,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,YAAY,CAAC;YACT,aAAa;YACb,cAAc,EAAE,iBAAiB,CAAC,OAAO;YACzC,MAAM;SACT,CAAC,CAAC;QAEH,iBAAiB,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,EAAE;QAC1D,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,aAAa;QAAE,OAAO,IAAI,CAAC;IAE/B,OAAO,CACH,+BACI,uBAAuB,EAAE;YACrB,MAAM,EAAE,MAAM;SACjB,EACD,GAAG,EAAE,SAAS,GAChB,CACL,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Style.js","sourceRoot":"","sources":["../src/Style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AAM3D,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAS,EAAE,EAAE;IAC1C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAC;IAE1E,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,EAAE;QAC1D,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CACL,GAAG,EAAE,CAAC,GAAG,EAAE;QACP,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,gBAAgB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAChD,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,iBAAiB,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,YAAY,CAAC;YACT,aAAa;YACb,cAAc,EAAE,iBAAiB,CAAC,OAAO;YACzC,MAAM;SACT,CAAC,CAAC;QAEH,iBAAiB,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,IAAI,aAAa;QAAE,OAAO,IAAI,CAAC;IAC/B,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC/D,iEAAiE;IACjE,OAAO,CACH,+BACI,uBAAuB,EAAE;YACrB,MAAM,EACF,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;gBAC9B,MAAM;gBACN,SAAS;gBACT,MAAM;gBACN,MAAM;gBACN,mBAAmB;gBACnB,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;gBAC9B,MAAM;SACb,EACD,GAAG,EAAE,SAAS,GAChB,CACL,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/styling",
-    "version": "0.5.3",
+    "version": "0.6.0-alpha3",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/index.js",

package/src/Style.tsx

@@ -2,17 +2,20 @@ import * as React from 'react';
 
 import { unregisterStyles, updateStyles } from './style-registry.js';
 
-const { useCallback, useEffect, useMemo, useRef, useState } = React;
+const { useCallback, useEffect, useRef, useState } = React;
 
 type Props = {
     children: string;
 };
 
-const Style = ({ children }: Props) => {
-    // Minify CSS styles by replacing consecutive whitespace (including \n) with ' '
-    const styles = useMemo(() => children.replace(/\s+/gm, ' '), [children]);
+const Style = ({ children: styles }: Props) => {
     const [ownerDocument, setOwnerDocument] = useState<Document | null>(null);
 
+    const handleRef = useCallback((element: HTMLElement | null) => {
+        if (!element) return;
+        setOwnerDocument(element.ownerDocument);
+    }, []);
+
     useEffect(
         () => () => {
             if (!ownerDocument) return;
@@ -35,17 +38,22 @@ const Style = ({ children }: Props) => {
         previousStylesRef.current = styles;
     }, [ownerDocument, styles]);
 
-    const handleRef = useCallback((element: HTMLElement | null) => {
-        if (!element) return;
-        setOwnerDocument(element.ownerDocument);
-    }, []);
-
     if (ownerDocument) return null;
-
+    console.log('styles', styles);
+    console.log('replaced styles', styles.replace(/&quot;/g, '"'));
+    // TODO why does styles get HTML entities for double quote marks?
     return (
         <style
             dangerouslySetInnerHTML={{
-                __html: styles,
+                __html:
+                    styles.replace(/&quot;/g, '"') +
+                    '/*\n' +
+                    'styles:' +
+                    styles +
+                    '\n\n' +
+                    'replaced styles: ' +
+                    styles.replace(/&quot;/g, '"') +
+                    '\n*/',
             }}
             ref={handleRef}
         />