@acusti/styling 1.0.0-rc.1 → 1.0.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.
- package/README.md +23 -10
- package/dist/Style.js +2 -6
- package/dist/Style.js.flow +4 -4
- package/dist/Style.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +3 -3
- package/dist/index.js.flow +1 -1
- package/dist/index.js.map +1 -1
- package/dist/minifyStyles.js +35 -19
- package/dist/minifyStyles.js.map +1 -1
- package/dist/minifyStyles.test.js +21 -7
- package/dist/minifyStyles.test.js.map +1 -1
- package/dist/style-registry.js.flow +7 -7
- package/dist/useStyles.d.ts +12 -6
- package/dist/useStyles.js +14 -9
- package/dist/useStyles.js.flow +11 -11
- package/dist/useStyles.test.js +106 -31
- package/package.json +10 -10
- package/src/Style.tsx +0 -3
- package/src/index.ts +0 -1
- package/src/minifyStyles.test.ts +9 -0
- package/src/minifyStyles.ts +7 -10
package/README.md
CHANGED
|
@@ -2,16 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@acusti/styling)
|
|
4
4
|
[](https://npms.io/search?q=%40acusti%2Fstyling)
|
|
5
|
-
[](https://bundlephobia.com/package/@acusti/styling)
|
|
6
5
|
[](https://www.npmjs.com/package/@acusti/styling)
|
|
6
|
+
[](https://bundlejs.com/?q=%40acusti%2Fstyling)
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
as
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
single `<style>` element, no matter how many times the `<Style>` element
|
|
13
|
-
with that string appears in the React component tree.
|
|
8
|
+
This package exports `Style`, which is a React component that takes a CSS
|
|
9
|
+
string as its children, minifies it, and renders it using the react v19+
|
|
10
|
+
`<style>` element’s
|
|
11
|
+
[special rendering behavior](https://react.dev/reference/react-dom/components/style#special-rendering-behavior):
|
|
14
12
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
> React will move `<style>` components to the document’s `<head>`,
|
|
14
|
+
> de-duplicate identical stylesheets, and suspend while the stylesheet is
|
|
15
|
+
> loading.
|
|
16
|
+
|
|
17
|
+
This behavior is SSR-friendly (no server hydration errors), and the
|
|
18
|
+
suspense behavior ensures any assets used by the CSS styles that must be
|
|
19
|
+
fetched and parsed (e.g. fonts or images) can do so with a loading behavior
|
|
20
|
+
as-good or better than the way regular CSS stylesheets or inline styles are
|
|
21
|
+
handled by the browser.
|
|
22
|
+
|
|
23
|
+
The CSS minification means that insignifant differences between styles
|
|
24
|
+
(e.g. varying whitespace or empty declarations) won’t result in sthyle
|
|
25
|
+
duplication. Also, the component maintains an internal global cache of the
|
|
26
|
+
minified styles to avoid unnecessary re-calculations.
|
|
27
|
+
|
|
28
|
+
Lastly, this package exports useful CSS string literals, such as
|
|
29
|
+
`SYSTEM_UI_FONT` which can be used as `font-family: ${SYSTEM_UI_FONT};` to
|
|
30
|
+
specify the appropriate UI font for the current OS and browser.
|
package/dist/Style.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
1
|
import React from 'react';
|
|
3
2
|
import { useStyles } from './useStyles.js';
|
|
4
3
|
const Style = ({ children, href: _href, precedence = 'medium' }) => {
|
|
@@ -6,10 +5,7 @@ const Style = ({ children, href: _href, precedence = 'medium' }) => {
|
|
|
6
5
|
const { href, styles } = useStyles(children, _href);
|
|
7
6
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/canary.d.ts
|
|
8
7
|
// https://react.dev/reference/react-dom/components/style#props
|
|
9
|
-
return (
|
|
10
|
-
// @ts-expect-error @types/react is missing new <style> props
|
|
11
|
-
// eslint-disable-next-line react/no-unknown-property
|
|
12
|
-
React.createElement("style", { href: href, precedence: precedence }, styles));
|
|
8
|
+
return React.createElement('style', { href: href, precedence: precedence }, styles);
|
|
13
9
|
};
|
|
14
10
|
export default Style;
|
|
15
|
-
//# sourceMappingURL=Style.js.map
|
|
11
|
+
//# sourceMappingURL=Style.js.map
|
package/dist/Style.js.flow
CHANGED
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import React from
|
|
8
|
+
import React from 'react';
|
|
9
9
|
declare type Props = {|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
children: string,
|
|
11
|
+
href?: string,
|
|
12
|
+
precedence?: string,
|
|
13
13
|
|};
|
|
14
14
|
declare var Style: (x: Props) => React.Node;
|
|
15
15
|
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,
|
|
1
|
+
{"version":3,"file":"Style.js","sourceRoot":"","sources":["../src/Style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAQ3C,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,GAAG,QAAQ,EAAS,EAAE,EAAE;IACtE,gFAAgF;IAChF,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACpD,yFAAyF;IACzF,+DAA+D;IAC/D,OAAO,CACH,+BAAO,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,IACpC,MAAM,CACH,CACX,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
export { default as Style } from './Style.js';
|
|
2
|
-
export declare const SYSTEM_UI_FONT =
|
|
2
|
+
export declare const SYSTEM_UI_FONT =
|
|
3
|
+
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/// <reference types="react/canary" />
|
|
2
1
|
export { default as Style } from './Style.js';
|
|
3
|
-
export const SYSTEM_UI_FONT =
|
|
4
|
-
|
|
2
|
+
export const SYSTEM_UI_FONT =
|
|
3
|
+
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
|
|
4
|
+
//# sourceMappingURL=index.js.map
|
package/dist/index.js.flow
CHANGED
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
declare export { default as Style } from
|
|
8
|
+
declare export { default as Style } from './Style.js';
|
|
9
9
|
declare export var SYSTEM_UI_FONT: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
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/minifyStyles.js
CHANGED
|
@@ -26,7 +26,10 @@ export function minifyStyles(css) {
|
|
|
26
26
|
const preservedTokens = [];
|
|
27
27
|
const comments = [];
|
|
28
28
|
const totalLength = css.length;
|
|
29
|
-
let
|
|
29
|
+
let endIndex = 0,
|
|
30
|
+
placeholder = '',
|
|
31
|
+
startIndex = 0,
|
|
32
|
+
token = '';
|
|
30
33
|
// collect all comment blocks...
|
|
31
34
|
while ((startIndex = css.indexOf('/*', startIndex)) >= 0) {
|
|
32
35
|
endIndex = css.indexOf('*/', startIndex + 2);
|
|
@@ -37,36 +40,43 @@ export function minifyStyles(css) {
|
|
|
37
40
|
comments.push(token);
|
|
38
41
|
css =
|
|
39
42
|
css.slice(0, startIndex + 2) +
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
'___PRESERVE_CANDIDATE_COMMENT_' +
|
|
44
|
+
(comments.length - 1) +
|
|
45
|
+
'___' +
|
|
46
|
+
css.slice(endIndex);
|
|
44
47
|
startIndex += 2;
|
|
45
48
|
}
|
|
46
49
|
// preserve strings so their content doesn't get accidentally minified
|
|
47
50
|
css = css.replace(/("([^\\"]|\\.|\\)*")|('([^\\']|\\.|\\)*')/g, function (match) {
|
|
48
51
|
const quote = match.substring(0, 1);
|
|
49
|
-
let i, max;
|
|
50
52
|
match = match.slice(1, -1);
|
|
51
53
|
// maybe the string contains a comment-like substring?
|
|
52
54
|
// one, maybe more? put'em back then
|
|
53
55
|
if (match.indexOf('___PRESERVE_CANDIDATE_COMMENT_') >= 0) {
|
|
54
|
-
for (i = 0, max = comments.length; i < max; i
|
|
55
|
-
match = match.replace(
|
|
56
|
+
for (let i = 0, max = comments.length; i < max; i++) {
|
|
57
|
+
match = match.replace(
|
|
58
|
+
'___PRESERVE_CANDIDATE_COMMENT_' + i + '___',
|
|
59
|
+
comments[i],
|
|
60
|
+
);
|
|
56
61
|
}
|
|
57
62
|
}
|
|
58
63
|
preservedTokens.push(match);
|
|
59
|
-
return (
|
|
64
|
+
return (
|
|
65
|
+
quote + '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___' + quote
|
|
66
|
+
);
|
|
60
67
|
});
|
|
61
68
|
// strings are safe, now wrestle the comments
|
|
62
|
-
for (i = 0, max = comments.length; i < max; i = i + 1) {
|
|
69
|
+
for (let i = 0, max = comments.length; i < max; i = i + 1) {
|
|
63
70
|
token = comments[i];
|
|
64
71
|
placeholder = '___PRESERVE_CANDIDATE_COMMENT_' + i + '___';
|
|
65
72
|
// ! in the first position of the comment means preserve
|
|
66
73
|
// so push to the preserved tokens keeping the !
|
|
67
74
|
if (token.charAt(0) === '!') {
|
|
68
75
|
preservedTokens.push(token);
|
|
69
|
-
css = css.replace(
|
|
76
|
+
css = css.replace(
|
|
77
|
+
placeholder,
|
|
78
|
+
'___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___',
|
|
79
|
+
);
|
|
70
80
|
continue;
|
|
71
81
|
}
|
|
72
82
|
// otherwise, kill the comment
|
|
@@ -108,25 +118,31 @@ export function minifyStyles(css) {
|
|
|
108
118
|
css = css.replace(/:0 0(;|\})/g, ':0$1');
|
|
109
119
|
// Replace background-position:0; with background-position:0 0;
|
|
110
120
|
// same for transform-origin
|
|
111
|
-
css = css.replace(
|
|
112
|
-
|
|
113
|
-
|
|
121
|
+
css = css.replace(
|
|
122
|
+
/(background-position|transform-origin):0(;|\})/gi,
|
|
123
|
+
function (_all, prop, tail) {
|
|
124
|
+
return prop.toLowerCase() + ':0 0' + tail;
|
|
125
|
+
},
|
|
126
|
+
);
|
|
114
127
|
// Replace 0.6 to .6, but only when preceded by : or a white-space
|
|
115
128
|
css = css.replace(/(:|\s)0+\.(\d+)/g, '$1.$2');
|
|
116
129
|
// border: none -> border:0
|
|
117
|
-
css = css.replace(
|
|
118
|
-
|
|
119
|
-
|
|
130
|
+
css = css.replace(
|
|
131
|
+
/(border|border-top|border-right|border-bottom|border-right|outline|background):none(;|\})/gi,
|
|
132
|
+
function (_all, prop, tail) {
|
|
133
|
+
return prop.toLowerCase() + ':0' + tail;
|
|
134
|
+
},
|
|
135
|
+
);
|
|
120
136
|
// Remove empty rules.
|
|
121
137
|
css = css.replace(/[^};{/]+\{\}/g, '');
|
|
122
138
|
// Replace multiple semi-colons in a row by a single one
|
|
123
139
|
// See SF bug #1980989
|
|
124
140
|
css = css.replace(/;;+/g, ';');
|
|
125
141
|
// restore preserved comments and strings
|
|
126
|
-
for (i = 0, max = preservedTokens.length; i < max; i = i + 1) {
|
|
142
|
+
for (let i = 0, max = preservedTokens.length; i < max; i = i + 1) {
|
|
127
143
|
css = css.replace('___PRESERVED_TOKEN_' + i + '___', preservedTokens[i]);
|
|
128
144
|
}
|
|
129
145
|
return css.trim();
|
|
130
146
|
}
|
|
131
147
|
export default minifyStyles;
|
|
132
|
-
//# sourceMappingURL=minifyStyles.js.map
|
|
148
|
+
//# sourceMappingURL=minifyStyles.js.map
|
package/dist/minifyStyles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"minifyStyles.js","sourceRoot":"","sources":["../src/minifyStyles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;GAOG;AAEH,MAAM,UAAU,YAAY,CAAC,GAAW;IACpC,MAAM,eAAe,GAAkB,EAAE,CAAC;IAC1C,MAAM,QAAQ,GAAkB,EAAE,CAAC;IACnC,MAAM,WAAW,GAAG,GAAG,CAAC,MAAM,CAAC;IAC/B,IAAI,
|
|
1
|
+
{"version":3,"file":"minifyStyles.js","sourceRoot":"","sources":["../src/minifyStyles.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,24 +3,38 @@ import { minifyStyles } from './minifyStyles.js';
|
|
|
3
3
|
describe('@acusti/styling', () => {
|
|
4
4
|
describe('minifyStyles.ts', () => {
|
|
5
5
|
it('minifies basic CSS declarations', () => {
|
|
6
|
-
expect(
|
|
6
|
+
expect(
|
|
7
|
+
minifyStyles(`
|
|
7
8
|
.foo {
|
|
8
9
|
padding: 10px;
|
|
9
10
|
color: red;
|
|
10
|
-
}`)
|
|
11
|
+
}`),
|
|
12
|
+
).toBe('.foo{padding:10px;color:red}');
|
|
11
13
|
});
|
|
12
14
|
it('preserves whitespace where needed in selectors', () => {
|
|
13
|
-
expect(
|
|
15
|
+
expect(
|
|
16
|
+
minifyStyles(`
|
|
14
17
|
.foo > .bar :hover {
|
|
15
18
|
background-color: cyan;
|
|
16
|
-
}`)
|
|
19
|
+
}`),
|
|
20
|
+
).toBe('.foo>.bar :hover{background-color:cyan}');
|
|
17
21
|
});
|
|
18
22
|
it('minifies 0.6 to .6, but only when preceded by : or a whitespace', () => {
|
|
19
|
-
expect(
|
|
23
|
+
expect(
|
|
24
|
+
minifyStyles(`
|
|
20
25
|
.foo {
|
|
21
26
|
opacity: 0.6;
|
|
22
|
-
}`)
|
|
27
|
+
}`),
|
|
28
|
+
).toBe('.foo{opacity:.6}');
|
|
29
|
+
});
|
|
30
|
+
it('strips out comments', () => {
|
|
31
|
+
expect(
|
|
32
|
+
minifyStyles(`
|
|
33
|
+
.bar {
|
|
34
|
+
font-weight: 900;/*.bar is so *strong**/
|
|
35
|
+
}`),
|
|
36
|
+
).toBe('.bar{font-weight:900}');
|
|
23
37
|
});
|
|
24
38
|
});
|
|
25
39
|
});
|
|
26
|
-
//# sourceMappingURL=minifyStyles.test.js.map
|
|
40
|
+
//# sourceMappingURL=minifyStyles.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"minifyStyles.test.js","sourceRoot":"","sources":["../src/minifyStyles.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC7B,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;QAC7B,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;YACvC,MAAM,CACF,YAAY,CAAC;;;;EAI3B,CAAC,CACU,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;YACtD,MAAM,CACF,YAAY,CAAC;;;EAG3B,CAAC,CACU,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,iEAAiE,EAAE,GAAG,EAAE;YACvE,MAAM,CACF,YAAY,CAAC;;;EAG3B,CAAC,CACU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"minifyStyles.test.js","sourceRoot":"","sources":["../src/minifyStyles.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC7B,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;QAC7B,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;YACvC,MAAM,CACF,YAAY,CAAC;;;;EAI3B,CAAC,CACU,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;YACtD,MAAM,CACF,YAAY,CAAC;;;EAG3B,CAAC,CACU,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,iEAAiE,EAAE,GAAG,EAAE;YACvE,MAAM,CACF,YAAY,CAAC;;;EAG3B,CAAC,CACU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,qBAAqB,EAAE,GAAG,EAAE;YAC3B,MAAM,CACF,YAAY,CAAC;;;EAG3B,CAAC,CACU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}
|
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
declare type Payload = {|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
ownerDocument: Document | 'global',
|
|
10
|
+
styles: string,
|
|
11
11
|
|};
|
|
12
12
|
declare export var getRegisteredStyles: (x: Payload) => {|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
element: HTMLStyleElement | null,
|
|
14
|
+
referenceCount: number,
|
|
15
15
|
|} | null;
|
|
16
16
|
declare export var registerStyles: (x: Payload) => void;
|
|
17
17
|
declare export var unregisterStyles: (x: Payload) => void;
|
|
18
18
|
declare type UpdatePayload = {|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
ownerDocument: Document,
|
|
20
|
+
previousStyles: string,
|
|
21
|
+
styles: string,
|
|
22
22
|
|};
|
|
23
23
|
declare export var updateStyles: (x: UpdatePayload) => void;
|
|
24
24
|
declare export var getStyleRegistryKeys: () => IterableIterator<string>;
|
package/dist/useStyles.d.ts
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
type StyleCache = Map<
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
type StyleCache = Map<
|
|
2
|
+
string,
|
|
3
|
+
{
|
|
4
|
+
href: string;
|
|
5
|
+
referenceCount: number;
|
|
6
|
+
styles: string;
|
|
7
|
+
}
|
|
8
|
+
>;
|
|
9
|
+
export declare function useStyles(
|
|
10
|
+
styles: string,
|
|
11
|
+
initialHref?: string,
|
|
12
|
+
): {
|
|
7
13
|
href: string;
|
|
8
14
|
referenceCount: number;
|
|
9
15
|
styles: string;
|
package/dist/useStyles.js
CHANGED
|
@@ -4,17 +4,19 @@ const styleCache = new Map();
|
|
|
4
4
|
const EMPTY_STYLES_ITEM = { href: '', referenceCount: 0, styles: '' };
|
|
5
5
|
export function useStyles(styles, initialHref) {
|
|
6
6
|
const [stylesItem, setStylesItem] = useState(() => {
|
|
7
|
-
if (!styles)
|
|
8
|
-
return EMPTY_STYLES_ITEM;
|
|
7
|
+
if (!styles) return EMPTY_STYLES_ITEM;
|
|
9
8
|
const key = initialHref !== null && initialHref !== void 0 ? initialHref : styles;
|
|
10
9
|
let item = styleCache.get(key);
|
|
11
10
|
if (item) {
|
|
12
11
|
item.referenceCount++;
|
|
13
|
-
}
|
|
14
|
-
else {
|
|
12
|
+
} else {
|
|
15
13
|
const minified = minifyStyles(styles);
|
|
16
14
|
item = {
|
|
17
|
-
href: sanitizeHref(
|
|
15
|
+
href: sanitizeHref(
|
|
16
|
+
initialHref !== null && initialHref !== void 0
|
|
17
|
+
? initialHref
|
|
18
|
+
: minified,
|
|
19
|
+
),
|
|
18
20
|
referenceCount: 1,
|
|
19
21
|
styles: minified,
|
|
20
22
|
};
|
|
@@ -23,13 +25,16 @@ export function useStyles(styles, initialHref) {
|
|
|
23
25
|
return item;
|
|
24
26
|
});
|
|
25
27
|
useEffect(() => {
|
|
26
|
-
if (!styles)
|
|
27
|
-
return;
|
|
28
|
+
if (!styles) return;
|
|
28
29
|
const key = initialHref !== null && initialHref !== void 0 ? initialHref : styles;
|
|
29
30
|
if (!styleCache.get(key)) {
|
|
30
31
|
const minified = minifyStyles(styles);
|
|
31
32
|
const item = {
|
|
32
|
-
href: sanitizeHref(
|
|
33
|
+
href: sanitizeHref(
|
|
34
|
+
initialHref !== null && initialHref !== void 0
|
|
35
|
+
? initialHref
|
|
36
|
+
: minified,
|
|
37
|
+
),
|
|
33
38
|
referenceCount: 1,
|
|
34
39
|
styles: minified,
|
|
35
40
|
};
|
|
@@ -60,4 +65,4 @@ function sanitizeHref(text) {
|
|
|
60
65
|
}
|
|
61
66
|
// The following export is for test usage only
|
|
62
67
|
export const getStyleCache = () => styleCache;
|
|
63
|
-
//# sourceMappingURL=useStyles.js.map
|
|
68
|
+
//# sourceMappingURL=useStyles.js.map
|
package/dist/useStyles.js.flow
CHANGED
|
@@ -6,20 +6,20 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
declare type StyleCache = Map<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
string,
|
|
10
|
+
{|
|
|
11
|
+
href: string,
|
|
12
|
+
referenceCount: number,
|
|
13
|
+
styles: string,
|
|
14
|
+
|},
|
|
15
15
|
>;
|
|
16
16
|
declare export function useStyles(
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
styles: string,
|
|
18
|
+
initialHref?: string,
|
|
19
19
|
): {|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
href: string,
|
|
21
|
+
referenceCount: number,
|
|
22
|
+
styles: string,
|
|
23
23
|
|};
|
|
24
24
|
declare export default typeof useStyles;
|
|
25
25
|
declare export var getStyleCache: () => StyleCache;
|
package/dist/useStyles.test.js
CHANGED
|
@@ -14,66 +14,141 @@ describe('@acusti/styling', () => {
|
|
|
14
14
|
});
|
|
15
15
|
it('should cache minified styles in the registry keyed by the style string', () => {
|
|
16
16
|
const styleCache = getStyleCache();
|
|
17
|
-
const { rerender } = render(
|
|
18
|
-
React.createElement(
|
|
19
|
-
|
|
17
|
+
const { rerender } = render(
|
|
18
|
+
React.createElement(
|
|
19
|
+
React.Fragment,
|
|
20
|
+
null,
|
|
21
|
+
React.createElement(Style, null, mockStylesA),
|
|
22
|
+
React.createElement(Style, null, mockStylesA),
|
|
23
|
+
),
|
|
24
|
+
);
|
|
20
25
|
let stylesItemA = styleCache.get(mockStylesA);
|
|
21
|
-
expect(
|
|
22
|
-
|
|
26
|
+
expect(
|
|
27
|
+
stylesItemA === null || stylesItemA === void 0
|
|
28
|
+
? void 0
|
|
29
|
+
: stylesItemA.referenceCount,
|
|
30
|
+
).toBe(2);
|
|
31
|
+
expect(
|
|
32
|
+
stylesItemA === null || stylesItemA === void 0
|
|
33
|
+
? void 0
|
|
34
|
+
: stylesItemA.styles,
|
|
35
|
+
).toBe('.test-a{color:cyan}');
|
|
23
36
|
expect(styleCache.size).toBe(1);
|
|
24
37
|
rerender(React.createElement(Style, null, mockStylesA));
|
|
25
|
-
expect(
|
|
38
|
+
expect(
|
|
39
|
+
stylesItemA === null || stylesItemA === void 0
|
|
40
|
+
? void 0
|
|
41
|
+
: stylesItemA.referenceCount,
|
|
42
|
+
).toBe(1);
|
|
26
43
|
expect(stylesItemA).toBe(styleCache.get(mockStylesA));
|
|
27
44
|
expect(styleCache.size).toBe(1);
|
|
28
45
|
rerender(React.createElement(Style, null, mockStylesB));
|
|
29
46
|
stylesItemA = styleCache.get(mockStylesA);
|
|
30
47
|
expect(stylesItemA).toBe(undefined);
|
|
31
48
|
let stylesItemB = styleCache.get(mockStylesB);
|
|
32
|
-
expect(
|
|
49
|
+
expect(
|
|
50
|
+
stylesItemB === null || stylesItemB === void 0
|
|
51
|
+
? void 0
|
|
52
|
+
: stylesItemB.referenceCount,
|
|
53
|
+
).toBe(1);
|
|
33
54
|
expect(styleCache.size).toBe(1);
|
|
34
|
-
rerender(
|
|
35
|
-
React.createElement(
|
|
36
|
-
|
|
55
|
+
rerender(
|
|
56
|
+
React.createElement(
|
|
57
|
+
React.Fragment,
|
|
58
|
+
null,
|
|
59
|
+
React.createElement(Style, null, mockStylesA),
|
|
60
|
+
React.createElement(Style, null, mockStylesB),
|
|
61
|
+
),
|
|
62
|
+
);
|
|
37
63
|
stylesItemA = styleCache.get(mockStylesA);
|
|
38
|
-
expect(
|
|
64
|
+
expect(
|
|
65
|
+
stylesItemA === null || stylesItemA === void 0
|
|
66
|
+
? void 0
|
|
67
|
+
: stylesItemA.referenceCount,
|
|
68
|
+
).toBe(1);
|
|
39
69
|
expect(stylesItemA).toBe(styleCache.get(mockStylesA));
|
|
40
70
|
stylesItemB = styleCache.get(mockStylesB);
|
|
41
|
-
expect(
|
|
71
|
+
expect(
|
|
72
|
+
stylesItemB === null || stylesItemB === void 0
|
|
73
|
+
? void 0
|
|
74
|
+
: stylesItemB.referenceCount,
|
|
75
|
+
).toBe(1);
|
|
42
76
|
expect(styleCache.size).toBe(2);
|
|
43
|
-
rerender(React.createElement(
|
|
77
|
+
rerender(React.createElement('div', null));
|
|
44
78
|
expect(styleCache.size).toBe(0);
|
|
45
79
|
});
|
|
46
80
|
it('should preserve style cache across component position changes and re-keying', () => {
|
|
47
81
|
const styleCache = getStyleCache();
|
|
48
|
-
const { rerender } = render(
|
|
49
|
-
React.createElement(
|
|
82
|
+
const { rerender } = render(
|
|
83
|
+
React.createElement(
|
|
84
|
+
React.Fragment,
|
|
85
|
+
null,
|
|
86
|
+
React.createElement(Style, null, mockStylesA),
|
|
87
|
+
),
|
|
88
|
+
);
|
|
50
89
|
const stylesItemA = styleCache.get(mockStylesA);
|
|
51
|
-
expect(
|
|
52
|
-
|
|
90
|
+
expect(
|
|
91
|
+
stylesItemA === null || stylesItemA === void 0
|
|
92
|
+
? void 0
|
|
93
|
+
: stylesItemA.referenceCount,
|
|
94
|
+
).toBe(1);
|
|
95
|
+
expect(
|
|
96
|
+
stylesItemA === null || stylesItemA === void 0
|
|
97
|
+
? void 0
|
|
98
|
+
: stylesItemA.styles,
|
|
99
|
+
).toBe('.test-a{color:cyan}');
|
|
53
100
|
expect(styleCache.size).toBe(1);
|
|
54
|
-
rerender(
|
|
55
|
-
React.createElement(
|
|
56
|
-
|
|
57
|
-
|
|
101
|
+
rerender(
|
|
102
|
+
React.createElement(
|
|
103
|
+
React.Fragment,
|
|
104
|
+
null,
|
|
105
|
+
React.createElement(Style, null, mockStylesB),
|
|
106
|
+
React.createElement(Style, null, mockStylesA),
|
|
107
|
+
),
|
|
108
|
+
);
|
|
109
|
+
expect(
|
|
110
|
+
stylesItemA === null || stylesItemA === void 0
|
|
111
|
+
? void 0
|
|
112
|
+
: stylesItemA.referenceCount,
|
|
113
|
+
).toBe(1);
|
|
58
114
|
expect(stylesItemA).toBe(styleCache.get(mockStylesA));
|
|
59
|
-
rerender(React.createElement(Style, { key:
|
|
60
|
-
expect(
|
|
115
|
+
rerender(React.createElement(Style, { key: 'new-a' }, mockStylesA));
|
|
116
|
+
expect(
|
|
117
|
+
stylesItemA === null || stylesItemA === void 0
|
|
118
|
+
? void 0
|
|
119
|
+
: stylesItemA.referenceCount,
|
|
120
|
+
).toBe(1);
|
|
61
121
|
expect(stylesItemA).toBe(styleCache.get(mockStylesA));
|
|
62
|
-
rerender(
|
|
63
|
-
React.createElement(
|
|
64
|
-
|
|
65
|
-
|
|
122
|
+
rerender(
|
|
123
|
+
React.createElement(
|
|
124
|
+
React.Fragment,
|
|
125
|
+
null,
|
|
126
|
+
React.createElement(Style, null, mockStylesA),
|
|
127
|
+
React.createElement(Style, { key: 'new-a' }, mockStylesA),
|
|
128
|
+
),
|
|
129
|
+
);
|
|
130
|
+
expect(
|
|
131
|
+
stylesItemA === null || stylesItemA === void 0
|
|
132
|
+
? void 0
|
|
133
|
+
: stylesItemA.referenceCount,
|
|
134
|
+
).toBe(2);
|
|
66
135
|
expect(stylesItemA).toBe(styleCache.get(mockStylesA));
|
|
67
|
-
rerender(React.createElement(
|
|
68
|
-
expect(
|
|
136
|
+
rerender(React.createElement('div', null));
|
|
137
|
+
expect(
|
|
138
|
+
stylesItemA === null || stylesItemA === void 0
|
|
139
|
+
? void 0
|
|
140
|
+
: stylesItemA.referenceCount,
|
|
141
|
+
).toBe(0);
|
|
69
142
|
expect(styleCache.size).toBe(0);
|
|
70
143
|
});
|
|
71
144
|
it('should sanitize styles used as href prop if no href prop provided', () => {
|
|
72
|
-
render(
|
|
145
|
+
render(
|
|
146
|
+
React.createElement(Style, null, `div[data-foo-bar] { color: cyan; }`),
|
|
147
|
+
);
|
|
73
148
|
// the two-dash attribute selector results in “Range out of order in character class”
|
|
74
149
|
// and render() fails with SyntaxError: Invalid regular expression if not sanitized
|
|
75
150
|
expect(true).toBeTruthy();
|
|
76
151
|
});
|
|
77
152
|
});
|
|
78
153
|
});
|
|
79
|
-
//# sourceMappingURL=useStyles.test.js.map
|
|
154
|
+
//# sourceMappingURL=useStyles.test.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/styling",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"exports": "./dist/index.js",
|
|
@@ -38,17 +38,17 @@
|
|
|
38
38
|
"homepage": "https://github.com/acusti/uikit/tree/main/packages/styling#readme",
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@testing-library/dom": "^10.4.0",
|
|
41
|
-
"@testing-library/react": "^16.0
|
|
41
|
+
"@testing-library/react": "^16.1.0",
|
|
42
42
|
"@testing-library/user-event": "^14.5.2",
|
|
43
|
-
"@types/react": "^
|
|
44
|
-
"happy-dom": "^15.7
|
|
45
|
-
"react": "^19
|
|
46
|
-
"react-dom": "^19
|
|
47
|
-
"typescript": "5.
|
|
48
|
-
"vitest": "^
|
|
43
|
+
"@types/react": "^19.0.2",
|
|
44
|
+
"happy-dom": "^15.11.7",
|
|
45
|
+
"react": "^19",
|
|
46
|
+
"react-dom": "^19",
|
|
47
|
+
"typescript": "5.7.3",
|
|
48
|
+
"vitest": "^2.1.8"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"react": "^19
|
|
52
|
-
"react-dom": "^19
|
|
51
|
+
"react": "^19",
|
|
52
|
+
"react-dom": "^19"
|
|
53
53
|
}
|
|
54
54
|
}
|
package/src/Style.tsx
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
1
|
import React from 'react';
|
|
3
2
|
|
|
4
3
|
import { useStyles } from './useStyles.js';
|
|
@@ -15,8 +14,6 @@ const Style = ({ children, href: _href, precedence = 'medium' }: Props) => {
|
|
|
15
14
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/canary.d.ts
|
|
16
15
|
// https://react.dev/reference/react-dom/components/style#props
|
|
17
16
|
return (
|
|
18
|
-
// @ts-expect-error @types/react is missing new <style> props
|
|
19
|
-
// eslint-disable-next-line react/no-unknown-property
|
|
20
17
|
<style href={href} precedence={precedence}>
|
|
21
18
|
{styles}
|
|
22
19
|
</style>
|
package/src/index.ts
CHANGED
package/src/minifyStyles.test.ts
CHANGED
|
@@ -31,5 +31,14 @@ describe('@acusti/styling', () => {
|
|
|
31
31
|
}`),
|
|
32
32
|
).toBe('.foo{opacity:.6}');
|
|
33
33
|
});
|
|
34
|
+
|
|
35
|
+
it('strips out comments', () => {
|
|
36
|
+
expect(
|
|
37
|
+
minifyStyles(`
|
|
38
|
+
.bar {
|
|
39
|
+
font-weight: 900;/*.bar is so *strong**/
|
|
40
|
+
}`),
|
|
41
|
+
).toBe('.bar{font-weight:900}');
|
|
42
|
+
});
|
|
34
43
|
});
|
|
35
44
|
});
|
package/src/minifyStyles.ts
CHANGED
|
@@ -29,12 +29,10 @@ export function minifyStyles(css: string) {
|
|
|
29
29
|
const preservedTokens: Array<string> = [];
|
|
30
30
|
const comments: Array<string> = [];
|
|
31
31
|
const totalLength = css.length;
|
|
32
|
-
let
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
token = '',
|
|
37
|
-
placeholder = '';
|
|
32
|
+
let endIndex = 0,
|
|
33
|
+
placeholder = '',
|
|
34
|
+
startIndex = 0,
|
|
35
|
+
token = '';
|
|
38
36
|
|
|
39
37
|
// collect all comment blocks...
|
|
40
38
|
while ((startIndex = css.indexOf('/*', startIndex)) >= 0) {
|
|
@@ -56,14 +54,13 @@ export function minifyStyles(css: string) {
|
|
|
56
54
|
// preserve strings so their content doesn't get accidentally minified
|
|
57
55
|
css = css.replace(/("([^\\"]|\\.|\\)*")|('([^\\']|\\.|\\)*')/g, function (match) {
|
|
58
56
|
const quote = match.substring(0, 1);
|
|
59
|
-
let i, max;
|
|
60
57
|
|
|
61
58
|
match = match.slice(1, -1);
|
|
62
59
|
|
|
63
60
|
// maybe the string contains a comment-like substring?
|
|
64
61
|
// one, maybe more? put'em back then
|
|
65
62
|
if (match.indexOf('___PRESERVE_CANDIDATE_COMMENT_') >= 0) {
|
|
66
|
-
for (i = 0, max = comments.length; i < max; i
|
|
63
|
+
for (let i = 0, max = comments.length; i < max; i++) {
|
|
67
64
|
match = match.replace(
|
|
68
65
|
'___PRESERVE_CANDIDATE_COMMENT_' + i + '___',
|
|
69
66
|
comments[i],
|
|
@@ -78,7 +75,7 @@ export function minifyStyles(css: string) {
|
|
|
78
75
|
});
|
|
79
76
|
|
|
80
77
|
// strings are safe, now wrestle the comments
|
|
81
|
-
for (i = 0, max = comments.length; i < max; i = i + 1) {
|
|
78
|
+
for (let i = 0, max = comments.length; i < max; i = i + 1) {
|
|
82
79
|
token = comments[i];
|
|
83
80
|
placeholder = '___PRESERVE_CANDIDATE_COMMENT_' + i + '___';
|
|
84
81
|
|
|
@@ -171,7 +168,7 @@ export function minifyStyles(css: string) {
|
|
|
171
168
|
css = css.replace(/;;+/g, ';');
|
|
172
169
|
|
|
173
170
|
// restore preserved comments and strings
|
|
174
|
-
for (i = 0, max = preservedTokens.length; i < max; i = i + 1) {
|
|
171
|
+
for (let i = 0, max = preservedTokens.length; i < max; i = i + 1) {
|
|
175
172
|
css = css.replace('___PRESERVED_TOKEN_' + i + '___', preservedTokens[i]);
|
|
176
173
|
}
|
|
177
174
|
|