@acusti/styling 0.6.0-beta → 0.7.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.
- package/README.md +1 -1
- package/dist/Style.d.ts +3 -3
- package/dist/Style.js +4 -2
- package/dist/Style.js.flow +3 -2
- package/dist/Style.js.map +1 -1
- package/dist/index.js.flow +1 -1
- package/dist/style-registry.d.ts +2 -2
- package/dist/style-registry.js +15 -1
- package/dist/style-registry.js.flow +1 -1
- package/dist/style-registry.js.map +1 -1
- package/package.json +18 -4
- package/src/Style.tsx +4 -2
- package/src/style-registry.ts +15 -1
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# @acusti/styling
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@acusti/styling)
|
|
4
|
-
[](https://npms.io/search?q=%40acusti%2Fstyling)
|
|
5
5
|
[](https://bundlephobia.com/package/@acusti/styling)
|
|
6
6
|
[](https://www.npmjs.com/package/@acusti/styling)
|
|
7
7
|
|
package/dist/Style.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
type Props = {
|
|
3
3
|
children: string;
|
|
4
4
|
};
|
|
5
|
-
declare const Style: ({ children
|
|
5
|
+
declare const Style: ({ children }: Props) => React.JSX.Element | null;
|
|
6
6
|
export default Style;
|
package/dist/Style.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getRegisteredStyles, registerStyles, unregisterStyles, updateStyles, } from './style-registry.js';
|
|
3
|
-
const { useCallback, useEffect, useRef, useState } = React;
|
|
4
|
-
const Style = ({ children
|
|
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
8
|
const isMountedRef = useRef(false);
|
|
7
9
|
useEffect(() => {
|
package/dist/Style.js.flow
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Flowtype definitions for Style
|
|
3
3
|
* Generated by Flowgen from a Typescript Definition
|
|
4
|
-
* Flowgen v1.20.
|
|
4
|
+
* Flowgen v1.20.1
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
import * as React from "react";
|
|
8
9
|
declare type Props = {|
|
|
9
10
|
children: string,
|
|
10
11
|
|};
|
|
11
|
-
declare var Style: (x: Props) => React
|
|
12
|
+
declare var Style: (x: Props) => React.JSX.Element | null;
|
|
12
13
|
declare export default typeof Style;
|
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;
|
|
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,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;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,CAAC;QACxB,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;IACxD,CAAC;IAED,OAAO,+BAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,GAAI,CAAC;AAClF,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/dist/index.js.flow
CHANGED
package/dist/style-registry.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
type Payload = {
|
|
2
2
|
ownerDocument: Document | 'global';
|
|
3
3
|
styles: string;
|
|
4
4
|
};
|
|
@@ -8,7 +8,7 @@ export declare const getRegisteredStyles: ({ ownerDocument, styles }: Payload) =
|
|
|
8
8
|
} | null;
|
|
9
9
|
export declare const registerStyles: ({ ownerDocument, styles }: Payload) => void;
|
|
10
10
|
export declare const unregisterStyles: ({ ownerDocument, styles }: Payload) => void;
|
|
11
|
-
|
|
11
|
+
type UpdatePayload = {
|
|
12
12
|
ownerDocument: Document;
|
|
13
13
|
previousStyles: string;
|
|
14
14
|
styles: string;
|
package/dist/style-registry.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
const styleRegistry = new Map();
|
|
2
2
|
export const getRegisteredStyles = ({ ownerDocument, styles }) => {
|
|
3
|
+
var _a;
|
|
3
4
|
if (!styles)
|
|
4
5
|
return null;
|
|
5
6
|
const stylesMap = styleRegistry.get(styles);
|
|
6
7
|
if (!stylesMap)
|
|
7
8
|
return null;
|
|
8
|
-
return stylesMap.get(ownerDocument)
|
|
9
|
+
return (_a = stylesMap.get(ownerDocument)) !== null && _a !== void 0 ? _a : null;
|
|
9
10
|
};
|
|
10
11
|
export const registerStyles = ({ ownerDocument, styles }) => {
|
|
11
12
|
if (!styles)
|
|
@@ -58,6 +59,19 @@ export const unregisterStyles = ({ ownerDocument, styles }) => {
|
|
|
58
59
|
export const updateStyles = ({ ownerDocument, previousStyles, styles, }) => {
|
|
59
60
|
if (previousStyles === styles)
|
|
60
61
|
return;
|
|
62
|
+
const stylesMap = styleRegistry.get(previousStyles);
|
|
63
|
+
const stylesItem = stylesMap === null || stylesMap === void 0 ? void 0 : stylesMap.get(ownerDocument);
|
|
64
|
+
if (stylesMap && (stylesItem === null || stylesItem === void 0 ? void 0 : stylesItem.element) && (stylesItem === null || stylesItem === void 0 ? void 0 : stylesItem.referenceCount) === 1) {
|
|
65
|
+
// Mutate existing <style> element with updated styles
|
|
66
|
+
stylesItem.element.innerHTML = styles;
|
|
67
|
+
styleRegistry.set(styles, new Map([[ownerDocument, stylesItem]]));
|
|
68
|
+
// Cleanup previous stylesMap
|
|
69
|
+
stylesMap.delete(ownerDocument);
|
|
70
|
+
if (!stylesMap.size) {
|
|
71
|
+
styleRegistry.delete(previousStyles);
|
|
72
|
+
}
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
61
75
|
if (previousStyles) {
|
|
62
76
|
unregisterStyles({ ownerDocument, styles: previousStyles });
|
|
63
77
|
}
|
|
@@ -1 +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,mBAAmB,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAW,EAAE,EAAE
|
|
1
|
+
{"version":3,"file":"style-registry.js","sourceRoot":"","sources":["../src/style-registry.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/styling",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.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": "
|
|
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,9 @@
|
|
|
21
34
|
},
|
|
22
35
|
"homepage": "https://github.com/acusti/uikit/tree/main/packages/styling#readme",
|
|
23
36
|
"devDependencies": {
|
|
24
|
-
"@types/react": "^18.
|
|
25
|
-
"typescript": "
|
|
37
|
+
"@types/react": "^18.2.45",
|
|
38
|
+
"typescript": "^5.3.3",
|
|
39
|
+
"vitest": "^1.1.0"
|
|
26
40
|
},
|
|
27
41
|
"peerDependencies": {
|
|
28
42
|
"react": "^16.8 || ^17 || ^18",
|
package/src/Style.tsx
CHANGED
|
@@ -7,13 +7,15 @@ import {
|
|
|
7
7
|
updateStyles,
|
|
8
8
|
} from './style-registry.js';
|
|
9
9
|
|
|
10
|
-
const { useCallback, useEffect, useRef, useState } = React;
|
|
10
|
+
const { useCallback, useEffect, useMemo, useRef, useState } = React;
|
|
11
11
|
|
|
12
12
|
type Props = {
|
|
13
13
|
children: string;
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
-
const Style = ({ children
|
|
16
|
+
const Style = ({ children }: Props) => {
|
|
17
|
+
// Minify CSS styles by replacing consecutive whitespace (including \n) with ' '
|
|
18
|
+
const styles = useMemo(() => children.replace(/\s+/gm, ' '), [children]);
|
|
17
19
|
const [ownerDocument, setOwnerDocument] = useState<Document | null>(null);
|
|
18
20
|
const isMountedRef = useRef<boolean>(false);
|
|
19
21
|
|
package/src/style-registry.ts
CHANGED
|
@@ -11,7 +11,7 @@ export const getRegisteredStyles = ({ ownerDocument, styles }: Payload) => {
|
|
|
11
11
|
if (!styles) return null;
|
|
12
12
|
const stylesMap = styleRegistry.get(styles);
|
|
13
13
|
if (!stylesMap) return null;
|
|
14
|
-
return stylesMap.get(ownerDocument)
|
|
14
|
+
return stylesMap.get(ownerDocument) ?? null;
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
export const registerStyles = ({ ownerDocument, styles }: Payload) => {
|
|
@@ -81,6 +81,20 @@ export const updateStyles = ({
|
|
|
81
81
|
}: UpdatePayload) => {
|
|
82
82
|
if (previousStyles === styles) return;
|
|
83
83
|
|
|
84
|
+
const stylesMap = styleRegistry.get(previousStyles);
|
|
85
|
+
const stylesItem = stylesMap?.get(ownerDocument);
|
|
86
|
+
if (stylesMap && stylesItem?.element && stylesItem?.referenceCount === 1) {
|
|
87
|
+
// Mutate existing <style> element with updated styles
|
|
88
|
+
stylesItem.element.innerHTML = styles;
|
|
89
|
+
styleRegistry.set(styles, new Map([[ownerDocument, stylesItem]]));
|
|
90
|
+
// Cleanup previous stylesMap
|
|
91
|
+
stylesMap.delete(ownerDocument);
|
|
92
|
+
if (!stylesMap.size) {
|
|
93
|
+
styleRegistry.delete(previousStyles);
|
|
94
|
+
}
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
|
|
84
98
|
if (previousStyles) {
|
|
85
99
|
unregisterStyles({ ownerDocument, styles: previousStyles });
|
|
86
100
|
}
|