@acusti/styling 0.6.0-alpha3 → 0.6.0

package/README.md

@@ -1,7 +1,7 @@
 # @acusti/styling
 
 [![latest version](https://img.shields.io/npm/v/@acusti/styling?style=for-the-badge)](https://www.npmjs.com/package/@acusti/styling)
-[![dependencies status](https://img.shields.io/librariesio/release/npm/@acusti/styling?style=for-the-badge)](https://libraries.io/npm/@acusti%2Fstyling/sourcerank)
+[![maintenance status](https://img.shields.io/npms-io/maintenance-score/@acusti/styling?style=for-the-badge)](https://npms.io/search?q=%40acusti%2Fstyling)
 [![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/styling?style=for-the-badge)](https://bundlephobia.com/package/@acusti/styling)
 [![downloads per month](https://img.shields.io/npm/dm/@acusti/styling?style=for-the-badge)](https://www.npmjs.com/package/@acusti/styling)
 

package/dist/Style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-declare type Props = {
+type Props = {
     children: string;
 };
-declare const Style: ({ children: styles }: Props) => JSX.Element | null;
+declare const Style: ({ children }: Props) => JSX.Element | null;
 export default Style;

package/dist/Style.js

@@ -1,13 +1,10 @@
 import * as React from 'react';
 import { unregisterStyles, updateStyles } from './style-registry.js';
-const { useCallback, useEffect, useRef, useState } = React;
-const Style = ({ children: styles }) => {
+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 [ownerDocument, setOwnerDocument] = useState(null);
-    const handleRef = useCallback((element) => {
-        if (!element)
-            return;
-        setOwnerDocument(element.ownerDocument);
-    }, []);
     useEffect(() => () => {
         if (!ownerDocument)
             return;
@@ -24,20 +21,15 @@ const Style = ({ children: styles }) => {
         });
         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.replace(/"/g, '"') +
-                '/*\n' +
-                'styles:' +
-                styles +
-                '\n\n' +
-                'replaced styles: ' +
-                styles.replace(/"/g, '"') +
-                '\n*/',
+            __html: styles,
         }, ref: handleRef }));
 };
 export default Style;

package/dist/Style.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for Style
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.0
+ * Flowgen v1.20.1
  * @flow
  */
 

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,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"}
+{"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"}

package/dist/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.0
+ * Flowgen v1.20.1
  * @flow
  */
 

package/dist/style-registry.d.ts

@@ -1,10 +1,10 @@
-declare type Payload = {
+type Payload = {
     ownerDocument: Document;
     styles: string;
 };
 export declare const registerStyles: ({ ownerDocument, styles }: Payload) => void;
 export declare const unregisterStyles: ({ ownerDocument, styles }: Payload) => void;
-declare type UpdatePayload = {
+type UpdatePayload = {
     ownerDocument: Document;
     previousStyles: string;
     styles: string;

package/dist/style-registry.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for style-registry
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.0
+ * Flowgen v1.20.1
  * @flow
  */
 

package/package.json

@@ -1,6 +1,18 @@
 {
     "name": "@acusti/styling",
-    "version": "0.6.0-alpha3",
+    "version": "0.6.0",
+    "description": "React component that renders a CSS style string as a <style> element in the <head> of the document (with global style de-duplication)",
+    "keywords": [
+        "react",
+        "react-component",
+        "styles",
+        "css",
+        "css-in-js",
+        "ssr",
+        "typescript",
+        "ts",
+        "flow"
+    ],
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/index.js",
@@ -12,7 +24,8 @@
     ],
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/acusti/uikit.git"
+        "url": "https://github.com/acusti/uikit.git",
+        "directory": "packages/styling"
     },
     "author": "andrew patton <andrew@acusti.ca> (https://www.acusti.ca)",
     "license": "Unlicense",
@@ -21,8 +34,8 @@
     },
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/styling#readme",
     "devDependencies": {
-        "@types/react": "^18.0.15",
-        "typescript": "~4.6.4"
+        "@types/react": "^18.0.25",
+        "typescript": "^4.9.3"
     },
     "peerDependencies": {
         "react": "^16.8 || ^17 || ^18",

package/src/Style.tsx

@@ -2,20 +2,17 @@ import * as React from 'react';
 
 import { unregisterStyles, updateStyles } from './style-registry.js';
 
-const { useCallback, useEffect, useRef, useState } = React;
+const { useCallback, useEffect, useMemo, useRef, useState } = React;
 
 type Props = {
     children: string;
 };
 
-const Style = ({ children: styles }: Props) => {
+const Style = ({ children }: Props) => {
+    // Minify CSS styles by replacing consecutive whitespace (including \n) with ' '
+    const styles = useMemo(() => children.replace(/\s+/gm, ' '), [children]);
     const [ownerDocument, setOwnerDocument] = useState<Document | null>(null);
 
-    const handleRef = useCallback((element: HTMLElement | null) => {
-        if (!element) return;
-        setOwnerDocument(element.ownerDocument);
-    }, []);
-
     useEffect(
         () => () => {
             if (!ownerDocument) return;
@@ -38,22 +35,17 @@ const Style = ({ children: styles }: 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.replace(/&quot;/g, '"') +
-                    '/*\n' +
-                    'styles:' +
-                    styles +
-                    '\n\n' +
-                    'replaced styles: ' +
-                    styles.replace(/&quot;/g, '"') +
-                    '\n*/',
+                __html: styles,
             }}
             ref={handleRef}
         />