@acusti/styling 0.6.0-beta → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +1 -1
  2. package/dist/Style.d.ts +2 -2
  3. package/dist/Style.js +8 -15
  4. package/dist/Style.js.flow +1 -1
  5. package/dist/Style.js.map +1 -1
  6. package/dist/index.js.flow +1 -1
  7. package/dist/style-registry.d.ts +3 -7
  8. package/dist/style-registry.js +8 -22
  9. package/dist/style-registry.js.flow +2 -6
  10. package/dist/style-registry.js.map +1 -1
  11. package/package.json +17 -4
  12. package/src/Style.tsx +13 -21
  13. package/src/style-registry.ts +11 -28
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # @acusti/styling
2
2
 
3
3
  [![latest version](https://img.shields.io/npm/v/@acusti/styling?style=for-the-badge)](https://www.npmjs.com/package/@acusti/styling)
4
- [![dependencies status](https://img.shields.io/librariesio/release/npm/@acusti/styling?style=for-the-badge)](https://libraries.io/npm/@acusti%2Fstyling/sourcerank)
4
+ [![maintenance status](https://img.shields.io/npms-io/maintenance-score/@acusti/styling?style=for-the-badge)](https://npms.io/search?q=%40acusti%2Fstyling)
5
5
  [![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/styling?style=for-the-badge)](https://bundlephobia.com/package/@acusti/styling)
6
6
  [![downloads per month](https://img.shields.io/npm/dm/@acusti/styling?style=for-the-badge)](https://www.npmjs.com/package/@acusti/styling)
7
7
 
package/dist/Style.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- declare type Props = {
2
+ type Props = {
3
3
  children: string;
4
4
  };
5
- declare const Style: ({ children: styles }: Props) => JSX.Element | null;
5
+ declare const Style: ({ children }: Props) => JSX.Element | null;
6
6
  export default Style;
package/dist/Style.js CHANGED
@@ -1,13 +1,10 @@
1
1
  import * as React from 'react';
2
- import { getRegisteredStyles, registerStyles, unregisterStyles, updateStyles, } from './style-registry.js';
3
- const { useCallback, useEffect, useRef, useState } = React;
4
- const Style = ({ children: styles }) => {
2
+ import { unregisterStyles, updateStyles } from './style-registry.js';
3
+ const { useCallback, useEffect, useMemo, useRef, useState } = React;
4
+ const Style = ({ children }) => {
5
+ // Minify CSS styles by replacing consecutive whitespace (including \n) with ' '
6
+ const styles = useMemo(() => children.replace(/\s+/gm, ' '), [children]);
5
7
  const [ownerDocument, setOwnerDocument] = useState(null);
6
- const isMountedRef = useRef(false);
7
- useEffect(() => {
8
- isMountedRef.current = true;
9
- unregisterStyles({ ownerDocument: 'global', styles });
10
- }, []); // eslint-disable-line react-hooks/exhaustive-deps
11
8
  useEffect(() => () => {
12
9
  if (!ownerDocument)
13
10
  return;
@@ -31,13 +28,9 @@ const Style = ({ children: styles }) => {
31
28
  }, []);
32
29
  if (ownerDocument)
33
30
  return null;
34
- // Avoid duplicate style rendering during SSR via style registry
35
- if (!isMountedRef.current) {
36
- if (getRegisteredStyles({ ownerDocument: 'global', styles }))
37
- return null;
38
- registerStyles({ ownerDocument: 'global', styles });
39
- }
40
- return React.createElement("style", { dangerouslySetInnerHTML: { __html: styles }, ref: handleRef });
31
+ return (React.createElement("style", { dangerouslySetInnerHTML: {
32
+ __html: styles,
33
+ }, ref: handleRef }));
41
34
  };
42
35
  export default Style;
43
36
  //# sourceMappingURL=Style.js.map
package/dist/Style.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for Style
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.20.0
4
+ * Flowgen v1.20.1
5
5
  * @flow
6
6
  */
7
7
 
package/dist/Style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Style.js","sourceRoot":"","sources":["../src/Style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACH,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,YAAY,GACf,MAAM,qBAAqB,CAAC;AAE7B,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;IAC1E,MAAM,YAAY,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,gBAAgB,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;IAE1D,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,gEAAgE;IAChE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;QACvB,IAAI,mBAAmB,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;YAAE,OAAO,IAAI,CAAC;QAC1E,cAAc,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;KACvD;IAED,OAAO,+BAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,GAAI,CAAC;AAClF,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
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"}
package/dist/index.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for index
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.20.0
4
+ * Flowgen v1.20.1
5
5
  * @flow
6
6
  */
7
7
 
package/dist/style-registry.d.ts CHANGED
@@ -1,14 +1,10 @@
1
- declare type Payload = {
2
- ownerDocument: Document | 'global';
1
+ type Payload = {
2
+ ownerDocument: Document;
3
3
  styles: string;
4
4
  };
5
- export declare const getRegisteredStyles: ({ ownerDocument, styles }: Payload) => {
6
- element: HTMLStyleElement | null;
7
- referenceCount: number;
8
- } | null;
9
5
  export declare const registerStyles: ({ ownerDocument, styles }: Payload) => void;
10
6
  export declare const unregisterStyles: ({ ownerDocument, styles }: Payload) => void;
11
- declare type UpdatePayload = {
7
+ type UpdatePayload = {
12
8
  ownerDocument: Document;
13
9
  previousStyles: string;
14
10
  styles: string;
package/dist/style-registry.js CHANGED
@@ -1,30 +1,18 @@
1
1
  const styleRegistry = new Map();
2
- export const getRegisteredStyles = ({ ownerDocument, styles }) => {
3
- if (!styles)
4
- return null;
5
- const stylesMap = styleRegistry.get(styles);
6
- if (!stylesMap)
7
- return null;
8
- return stylesMap.get(ownerDocument) || null;
9
- };
10
2
  export const registerStyles = ({ ownerDocument, styles }) => {
11
3
  if (!styles)
12
4
  return;
13
- const existingStylesItem = getRegisteredStyles({ ownerDocument, styles });
5
+ const stylesMap = styleRegistry.get(styles);
6
+ const existingStylesItem = stylesMap === null || stylesMap === void 0 ? void 0 : stylesMap.get(ownerDocument);
14
7
  if (existingStylesItem) {
15
8
  existingStylesItem.referenceCount++;
16
9
  return;
17
10
  }
18
- if (ownerDocument === 'global') {
19
- styleRegistry.set(styles, new Map([[ownerDocument, { element: null, referenceCount: 1 }]]));
20
- return;
21
- }
22
11
  const element = ownerDocument.createElement('style');
23
12
  element.setAttribute('data-ukt-styling', '');
24
13
  element.innerHTML = styles;
25
14
  ownerDocument.head.appendChild(element);
26
15
  const stylesItem = { element, referenceCount: 1 };
27
- const stylesMap = styleRegistry.get(styles);
28
16
  if (stylesMap) {
29
17
  stylesMap.set(ownerDocument, stylesItem);
30
18
  return;
@@ -34,21 +22,19 @@ export const registerStyles = ({ ownerDocument, styles }) => {
34
22
  export const unregisterStyles = ({ ownerDocument, styles }) => {
35
23
  if (!styles)
36
24
  return;
37
- const stylesItem = getRegisteredStyles({ ownerDocument, styles });
38
- if (!stylesItem)
25
+ const stylesMap = styleRegistry.get(styles);
26
+ const stylesItem = stylesMap === null || stylesMap === void 0 ? void 0 : stylesMap.get(ownerDocument);
27
+ if (!stylesMap || !stylesItem)
39
28
  return;
40
29
  stylesItem.referenceCount--;
41
30
  if (stylesItem.referenceCount)
42
31
  return;
43
32
  // If no more references to these styles in this document, remove <style> element from the DOM
44
- if (stylesItem.element) {
45
- const { parentElement } = stylesItem.element;
46
- if (parentElement) {
47
- parentElement.removeChild(stylesItem.element);
48
- }
33
+ const { parentElement } = stylesItem.element;
34
+ if (parentElement) {
35
+ parentElement.removeChild(stylesItem.element);
49
36
  }
50
37
  // Then remove the document Map
51
- const stylesMap = styleRegistry.get(styles);
52
38
  stylesMap.delete(ownerDocument);
53
39
  if (stylesMap.size)
54
40
  return;
package/dist/style-registry.js.flow CHANGED
@@ -1,18 +1,14 @@
1
1
  /**
2
2
  * Flowtype definitions for style-registry
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.20.0
4
+ * Flowgen v1.20.1
5
5
  * @flow
6
6
  */
7
7
 
8
8
  declare type Payload = {|
9
- ownerDocument: Document | "global",
9
+ ownerDocument: Document,
10
10
  styles: string,
11
11
  |};
12
- declare export var getRegisteredStyles: (x: Payload) => {|
13
- element: HTMLStyleElement | null,
14
- referenceCount: number,
15
- |} | null;
16
12
  declare export var registerStyles: (x: Payload) => void;
17
13
  declare export var unregisterStyles: (x: Payload) => void;
18
14
  declare type UpdatePayload = {|
package/dist/style-registry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style-registry.js","sourceRoot":"","sources":["../src/style-registry.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"style-registry.js","sourceRoot":"","sources":["../src/style-registry.ts"],"names":[],"mappings":"AAKA,MAAM,aAAa,GAAkB,IAAI,GAAG,EAAE,CAAC;AAI/C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAW,EAAE,EAAE;IACjE,IAAI,CAAC,MAAM;QAAE,OAAO;IAEpB,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5C,MAAM,kBAAkB,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IAEzD,IAAI,kBAAkB,EAAE;QACpB,kBAAkB,CAAC,cAAc,EAAE,CAAC;QACpC,OAAO;KACV;IAED,MAAM,OAAO,GAAG,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC;IAC3B,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,EAAE,CAAC;IAElD,IAAI,SAAS,EAAE;QACX,SAAS,CAAC,GAAG,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QACzC,OAAO;KACV;IAED,aAAa,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AACtE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAW,EAAE,EAAE;IACnE,IAAI,CAAC,MAAM;QAAE,OAAO;IAEpB,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IACjD,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU;QAAE,OAAO;IAEtC,UAAU,CAAC,cAAc,EAAE,CAAC;IAC5B,IAAI,UAAU,CAAC,cAAc;QAAE,OAAO;IAEtC,8FAA8F;IAC9F,MAAM,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;IAC7C,IAAI,aAAa,EAAE;QACf,aAAa,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;KACjD;IACD,+BAA+B;IAC/B,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAEhC,IAAI,SAAS,CAAC,IAAI;QAAE,OAAO;IAC3B,4EAA4E;IAC5E,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACjC,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,aAAa,EACb,cAAc,EACd,MAAM,GACM,EAAE,EAAE;IAChB,IAAI,cAAc,KAAK,MAAM;QAAE,OAAO;IAEtC,IAAI,cAAc,EAAE;QAChB,gBAAgB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC,CAAC;KAC/D;IAED,cAAc,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;AAC9C,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,18 @@
1
1
  {
2
2
  "name": "@acusti/styling",
3
- "version": "0.6.0-beta",
3
+ "version": "0.6.0",
4
+ "description": "React component that renders a CSS style string as a <style> element in the <head> of the document (with global style de-duplication)",
5
+ "keywords": [
6
+ "react",
7
+ "react-component",
8
+ "styles",
9
+ "css",
10
+ "css-in-js",
11
+ "ssr",
12
+ "typescript",
13
+ "ts",
14
+ "flow"
15
+ ],
4
16
  "type": "module",
5
17
  "sideEffects": false,
6
18
  "exports": "./dist/index.js",
@@ -12,7 +24,8 @@
12
24
  ],
13
25
  "repository": {
14
26
  "type": "git",
15
- "url": "git+https://github.com/acusti/uikit.git"
27
+ "url": "https://github.com/acusti/uikit.git",
28
+ "directory": "packages/styling"
16
29
  },
17
30
  "author": "andrew patton <andrew@acusti.ca> (https://www.acusti.ca)",
18
31
  "license": "Unlicense",
@@ -21,8 +34,8 @@
21
34
  },
22
35
  "homepage": "https://github.com/acusti/uikit/tree/main/packages/styling#readme",
23
36
  "devDependencies": {
24
- "@types/react": "^18.0.15",
25
- "typescript": "~4.6.4"
37
+ "@types/react": "^18.0.25",
38
+ "typescript": "^4.9.3"
26
39
  },
27
40
  "peerDependencies": {
28
41
  "react": "^16.8 || ^17 || ^18",
package/src/Style.tsx CHANGED
@@ -1,26 +1,17 @@
1
1
  import * as React from 'react';
2
2
 
3
- import {
4
- getRegisteredStyles,
5
- registerStyles,
6
- unregisterStyles,
7
- updateStyles,
8
- } from './style-registry.js';
3
+ import { unregisterStyles, updateStyles } from './style-registry.js';
9
4
 
10
- const { useCallback, useEffect, useRef, useState } = React;
5
+ const { useCallback, useEffect, useMemo, useRef, useState } = React;
11
6
 
12
7
  type Props = {
13
8
  children: string;
14
9
  };
15
10
 
16
- const Style = ({ children: styles }: Props) => {
11
+ const Style = ({ children }: Props) => {
12
+ // Minify CSS styles by replacing consecutive whitespace (including \n) with ' '
13
+ const styles = useMemo(() => children.replace(/\s+/gm, ' '), [children]);
17
14
  const [ownerDocument, setOwnerDocument] = useState<Document | null>(null);
18
- const isMountedRef = useRef<boolean>(false);
19
-
20
- useEffect(() => {
21
- isMountedRef.current = true;
22
- unregisterStyles({ ownerDocument: 'global', styles });
23
- }, []); // eslint-disable-line react-hooks/exhaustive-deps
24
15
 
25
16
  useEffect(
26
17
  () => () => {
@@ -51,13 +42,14 @@ const Style = ({ children: styles }: Props) => {
51
42
 
52
43
  if (ownerDocument) return null;
53
44
 
54
- // Avoid duplicate style rendering during SSR via style registry
55
- if (!isMountedRef.current) {
56
- if (getRegisteredStyles({ ownerDocument: 'global', styles })) return null;
57
- registerStyles({ ownerDocument: 'global', styles });
58
- }
59
-
60
- return <style dangerouslySetInnerHTML={{ __html: styles }} ref={handleRef} />;
45
+ return (
46
+ <style
47
+ dangerouslySetInnerHTML={{
48
+ __html: styles,
49
+ }}
50
+ ref={handleRef}
51
+ />
52
+ );
61
53
  };
62
54
 
63
55
  export default Style;
package/src/style-registry.ts CHANGED
@@ -1,43 +1,29 @@
1
1
  type StyleRegistry = Map<
2
2
  string,
3
- Map<Document | 'global', { element: HTMLStyleElement | null; referenceCount: number }>
3
+ Map<Document, { element: HTMLStyleElement; referenceCount: number }>
4
4
  >;
5
5
 
6
6
  const styleRegistry: StyleRegistry = new Map();
7
7
 
8
- type Payload = { ownerDocument: Document | 'global'; styles: string };
9
-
10
- export const getRegisteredStyles = ({ ownerDocument, styles }: Payload) => {
11
- if (!styles) return null;
12
- const stylesMap = styleRegistry.get(styles);
13
- if (!stylesMap) return null;
14
- return stylesMap.get(ownerDocument) || null;
15
- };
8
+ type Payload = { ownerDocument: Document; styles: string };
16
9
 
17
10
  export const registerStyles = ({ ownerDocument, styles }: Payload) => {
18
11
  if (!styles) return;
19
12
 
20
- const existingStylesItem = getRegisteredStyles({ ownerDocument, styles });
13
+ const stylesMap = styleRegistry.get(styles);
14
+ const existingStylesItem = stylesMap?.get(ownerDocument);
15
+
21
16
  if (existingStylesItem) {
22
17
  existingStylesItem.referenceCount++;
23
18
  return;
24
19
  }
25
20
 
26
- if (ownerDocument === 'global') {
27
- styleRegistry.set(
28
- styles,
29
- new Map([[ownerDocument, { element: null, referenceCount: 1 }]]),
30
- );
31
- return;
32
- }
33
-
34
21
  const element = ownerDocument.createElement('style');
35
22
  element.setAttribute('data-ukt-styling', '');
36
23
  element.innerHTML = styles;
37
24
  ownerDocument.head.appendChild(element);
38
25
  const stylesItem = { element, referenceCount: 1 };
39
26
 
40
- const stylesMap = styleRegistry.get(styles);
41
27
  if (stylesMap) {
42
28
  stylesMap.set(ownerDocument, stylesItem);
43
29
  return;
@@ -49,22 +35,19 @@ export const registerStyles = ({ ownerDocument, styles }: Payload) => {
49
35
  export const unregisterStyles = ({ ownerDocument, styles }: Payload) => {
50
36
  if (!styles) return;
51
37
 
52
- const stylesItem = getRegisteredStyles({ ownerDocument, styles });
53
- if (!stylesItem) return;
38
+ const stylesMap = styleRegistry.get(styles);
39
+ const stylesItem = stylesMap?.get(ownerDocument);
40
+ if (!stylesMap || !stylesItem) return;
54
41
 
55
42
  stylesItem.referenceCount--;
56
43
  if (stylesItem.referenceCount) return;
57
44
 
58
45
  // If no more references to these styles in this document, remove <style> element from the DOM
59
- if (stylesItem.element) {
60
- const { parentElement } = stylesItem.element;
61
- if (parentElement) {
62
- parentElement.removeChild(stylesItem.element);
63
- }
46
+ const { parentElement } = stylesItem.element;
47
+ if (parentElement) {
48
+ parentElement.removeChild(stylesItem.element);
64
49
  }
65
-
66
50
  // Then remove the document Map
67
- const stylesMap = styleRegistry.get(styles)!;
68
51
  stylesMap.delete(ownerDocument);
69
52
 
70
53
  if (stylesMap.size) return;