@acusti/styling 0.3.1

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 (14) hide show
  1. package/README.md +17 -0
  2. package/dist/Style.d.ts +6 -0
  3. package/dist/Style.js +32 -0
  4. package/dist/Style.js.flow +12 -0
  5. package/dist/Style.js.map +1 -0
  6. package/dist/index.d.ts +2 -0
  7. package/dist/index.js +3 -0
  8. package/dist/index.js.flow +9 -0
  9. package/dist/index.js.map +1 -0
  10. package/dist/style-registry.d.ts +13 -0
  11. package/dist/style-registry.js +52 -0
  12. package/dist/style-registry.js.flow +20 -0
  13. package/dist/style-registry.js.map +1 -0
  14. package/package.json +30 -0
package/README.md ADDED
@@ -0,0 +1,17 @@
1
+ # @acusti/styling
2
+
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/david/acusti/uikit?path=packages%2Fstyling&style=for-the-badge)](https://david-dm.org/acusti/uikit?path=packages%2Fstyling)
5
+ [![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/styling?style=for-the-badge)](https://bundlephobia.com/package/@acusti/styling)
6
+ [![downloads per month](https://img.shields.io/npm/dm/@acusti/styling?style=for-the-badge)](https://www.npmjs.com/package/@acusti/styling)
7
+
8
+ Exports `Style`, which is a React component that renders a CSS style string
9
+ as a `<style>` element in the `<head>` of the document optionally specified
10
+ by `props.ownerDocument`. Keeps a per-document global registry of styles
11
+ being rendered so that the same string of CSS will only be rendered as a
12
+ single `<style>` element, no matter how many times the `<Style>` element
13
+ with that string appears in the React component tree.
14
+
15
+ Also exports useful CSS string literals, such as `SYSTEM_UI_FONT` which can
16
+ be used as `font-family: ${SYSTEM_UI_FONT};` to specify the appropriate UI
17
+ font for the current OS and browser.
package/dist/Style.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ declare type Props = {
3
+ children: string;
4
+ };
5
+ declare const Style: ({ children: styles }: Props) => JSX.Element | null;
6
+ export default Style;
package/dist/Style.js ADDED
@@ -0,0 +1,32 @@
1
+ import * as React from 'react';
2
+ import { unregisterStyles, updateStyles } from './style-registry.js';
3
+ const { useCallback, useEffect, useRef, useState } = React;
4
+ const Style = ({ children: styles }) => {
5
+ const [ownerDocument, setOwnerDocument] = useState(null);
6
+ const handleRef = useCallback((element) => {
7
+ if (!element)
8
+ return;
9
+ setOwnerDocument(element.ownerDocument);
10
+ }, []);
11
+ useEffect(() => () => {
12
+ if (!ownerDocument)
13
+ return;
14
+ unregisterStyles({ ownerDocument, styles });
15
+ }, [ownerDocument]);
16
+ const previousStylesRef = useRef('');
17
+ useEffect(() => {
18
+ if (!ownerDocument)
19
+ return;
20
+ updateStyles({
21
+ ownerDocument,
22
+ previousStyles: previousStylesRef.current,
23
+ styles,
24
+ });
25
+ previousStylesRef.current = styles;
26
+ }, [ownerDocument, styles]);
27
+ if (ownerDocument)
28
+ return null;
29
+ return React.createElement("style", { ref: handleRef }, styles);
30
+ };
31
+ export default Style;
32
+ //# sourceMappingURL=Style.js.map
package/dist/Style.js.flow ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Flowtype definitions for Style
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.13.0
5
+ * @flow
6
+ */
7
+
8
+ declare type Props = {
9
+ children: string,
10
+ };
11
+ declare var Style: (x: Props) => React$Node | null;
12
+ declare export default typeof Style;
package/dist/Style.js.map ADDED
@@ -0,0 +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;IAE/B,OAAO,+BAAO,GAAG,EAAE,SAAS,IAAG,MAAM,CAAS,CAAC;AACnD,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as Style } from './Style.js';
2
+ export declare const SYSTEM_UI_FONT = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif";
package/dist/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export { default as Style } from './Style.js';
2
+ export const SYSTEM_UI_FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
3
+ //# sourceMappingURL=index.js.map
package/dist/index.js.flow ADDED
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Flowtype definitions for index
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.13.0
5
+ * @flow
6
+ */
7
+
8
+ declare export { default as Style } from "./Style";
9
+ declare export var SYSTEM_UI_FONT: any; // "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif"
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,CAAC,MAAM,cAAc,GACvB,qHAAqH,CAAC"}
package/dist/style-registry.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ declare type Payload = {
2
+ ownerDocument: Document;
3
+ styles: string;
4
+ };
5
+ export declare const registerStyles: ({ ownerDocument, styles }: Payload) => void;
6
+ export declare const unregisterStyles: ({ ownerDocument, styles }: Payload) => void;
7
+ declare type UpdatePayload = {
8
+ ownerDocument: Document;
9
+ previousStyles: string;
10
+ styles: string;
11
+ };
12
+ export declare const updateStyles: ({ ownerDocument, previousStyles, styles, }: UpdatePayload) => void;
13
+ export {};
package/dist/style-registry.js ADDED
@@ -0,0 +1,52 @@
1
+ const styleRegistry = new Map();
2
+ export const registerStyles = ({ ownerDocument, styles }) => {
3
+ if (!styles)
4
+ return;
5
+ const stylesMap = styleRegistry.get(styles);
6
+ const existingStylesItem = stylesMap === null || stylesMap === void 0 ? void 0 : stylesMap.get(ownerDocument);
7
+ if (existingStylesItem) {
8
+ existingStylesItem.referenceCount++;
9
+ return;
10
+ }
11
+ const element = ownerDocument.createElement('style');
12
+ element.setAttribute('data-ukt-styling', '');
13
+ element.innerHTML = styles;
14
+ ownerDocument.head.appendChild(element);
15
+ const stylesItem = { element, referenceCount: 1 };
16
+ if (stylesMap) {
17
+ stylesMap.set(ownerDocument, stylesItem);
18
+ return;
19
+ }
20
+ styleRegistry.set(styles, new Map([[ownerDocument, stylesItem]]));
21
+ };
22
+ export const unregisterStyles = ({ ownerDocument, styles }) => {
23
+ if (!styles)
24
+ return;
25
+ const stylesMap = styleRegistry.get(styles);
26
+ const stylesItem = stylesMap === null || stylesMap === void 0 ? void 0 : stylesMap.get(ownerDocument);
27
+ if (!stylesMap || !stylesItem)
28
+ return;
29
+ stylesItem.referenceCount--;
30
+ if (stylesItem.referenceCount)
31
+ return;
32
+ // If no more references to these styles in this document, remove <style> element from the DOM
33
+ const { parentElement } = stylesItem.element;
34
+ if (parentElement) {
35
+ parentElement.removeChild(stylesItem.element);
36
+ }
37
+ // Then remove the document Map
38
+ stylesMap.delete(ownerDocument);
39
+ if (stylesMap.size)
40
+ return;
41
+ // If no more references to these styles in any document, remove it entirely
42
+ styleRegistry.delete(styles);
43
+ };
44
+ export const updateStyles = ({ ownerDocument, previousStyles, styles, }) => {
45
+ if (previousStyles === styles)
46
+ return;
47
+ if (previousStyles) {
48
+ unregisterStyles({ ownerDocument, styles: previousStyles });
49
+ }
50
+ registerStyles({ ownerDocument, styles });
51
+ };
52
+ //# sourceMappingURL=style-registry.js.map
package/dist/style-registry.js.flow ADDED
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Flowtype definitions for style-registry
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.13.0
5
+ * @flow
6
+ */
7
+
8
+ declare type Payload = {
9
+ ownerDocument: Document,
10
+ styles: string,
11
+ };
12
+ declare export var registerStyles: (x: Payload) => void;
13
+ declare export var unregisterStyles: (x: Payload) => void;
14
+ declare type UpdatePayload = {
15
+ ownerDocument: Document,
16
+ previousStyles: string,
17
+ styles: string,
18
+ };
19
+ declare export var updateStyles: (x: UpdatePayload) => void;
20
+ declare export {};
package/dist/style-registry.js.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "name": "@acusti/styling",
3
+ "version": "0.3.1",
4
+ "type": "module",
5
+ "sideEffects": false,
6
+ "exports": "./dist/index.js",
7
+ "main": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "git+https://github.com/acusti/uikit.git"
15
+ },
16
+ "author": "andrew patton <andrew@acusti.ca> (http://acusti.ca)",
17
+ "license": "Unlicense",
18
+ "bugs": {
19
+ "url": "https://github.com/acusti/uikit/issues"
20
+ },
21
+ "homepage": "https://github.com/acusti/uikit/tree/main/packages/styling#readme",
22
+ "devDependencies": {
23
+ "@types/react": "^17.0.3",
24
+ "typescript": "^4.2.3"
25
+ },
26
+ "peerDependencies": {
27
+ "react": "^16.8 || ^17",
28
+ "react-dom": "^16.8 || ^17"
29
+ }
30
+ }