@acusti/styling 1.0.0-rc.1 → 1.0.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 +22 -9
- package/dist/Style.js +1 -5
- package/dist/Style.js.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/dist/minifyStyles.js +4 -5
- package/dist/minifyStyles.js.map +1 -1
- package/dist/minifyStyles.test.js +6 -0
- package/dist/minifyStyles.test.js.map +1 -1
- package/package.json +9 -9
- package/src/Style.tsx +0 -3
- package/src/index.ts +0 -1
- package/src/minifyStyles.test.ts +9 -0
- package/src/minifyStyles.ts +3 -6
package/README.md
CHANGED
|
@@ -5,13 +5,26 @@
|
|
|
5
5
|
[](https://bundlephobia.com/package/@acusti/styling)
|
|
6
6
|
[](https://www.npmjs.com/package/@acusti/styling)
|
|
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
11
|
//# sourceMappingURL=Style.js.map
|
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.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react/canary" />
|
|
2
1
|
export { default as Style } from './Style.js';
|
|
3
2
|
export const SYSTEM_UI_FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
|
|
4
3
|
//# sourceMappingURL=index.js.map
|
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,7 @@ export function minifyStyles(css) {
|
|
|
26
26
|
const preservedTokens = [];
|
|
27
27
|
const comments = [];
|
|
28
28
|
const totalLength = css.length;
|
|
29
|
-
let startIndex = 0, endIndex = 0,
|
|
29
|
+
let startIndex = 0, endIndex = 0, token = '', placeholder = '';
|
|
30
30
|
// collect all comment blocks...
|
|
31
31
|
while ((startIndex = css.indexOf('/*', startIndex)) >= 0) {
|
|
32
32
|
endIndex = css.indexOf('*/', startIndex + 2);
|
|
@@ -46,12 +46,11 @@ export function minifyStyles(css) {
|
|
|
46
46
|
// preserve strings so their content doesn't get accidentally minified
|
|
47
47
|
css = css.replace(/("([^\\"]|\\.|\\)*")|('([^\\']|\\.|\\)*')/g, function (match) {
|
|
48
48
|
const quote = match.substring(0, 1);
|
|
49
|
-
let i, max;
|
|
50
49
|
match = match.slice(1, -1);
|
|
51
50
|
// maybe the string contains a comment-like substring?
|
|
52
51
|
// one, maybe more? put'em back then
|
|
53
52
|
if (match.indexOf('___PRESERVE_CANDIDATE_COMMENT_') >= 0) {
|
|
54
|
-
for (i = 0, max = comments.length; i < max; i
|
|
53
|
+
for (let i = 0, max = comments.length; i < max; i++) {
|
|
55
54
|
match = match.replace('___PRESERVE_CANDIDATE_COMMENT_' + i + '___', comments[i]);
|
|
56
55
|
}
|
|
57
56
|
}
|
|
@@ -59,7 +58,7 @@ export function minifyStyles(css) {
|
|
|
59
58
|
return (quote + '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___' + quote);
|
|
60
59
|
});
|
|
61
60
|
// strings are safe, now wrestle the comments
|
|
62
|
-
for (i = 0, max = comments.length; i < max; i = i + 1) {
|
|
61
|
+
for (let i = 0, max = comments.length; i < max; i = i + 1) {
|
|
63
62
|
token = comments[i];
|
|
64
63
|
placeholder = '___PRESERVE_CANDIDATE_COMMENT_' + i + '___';
|
|
65
64
|
// ! in the first position of the comment means preserve
|
|
@@ -123,7 +122,7 @@ export function minifyStyles(css) {
|
|
|
123
122
|
// See SF bug #1980989
|
|
124
123
|
css = css.replace(/;;+/g, ';');
|
|
125
124
|
// restore preserved comments and strings
|
|
126
|
-
for (i = 0, max = preservedTokens.length; i < max; i = i + 1) {
|
|
125
|
+
for (let i = 0, max = preservedTokens.length; i < max; i = i + 1) {
|
|
127
126
|
css = css.replace('___PRESERVED_TOKEN_' + i + '___', preservedTokens[i]);
|
|
128
127
|
}
|
|
129
128
|
return css.trim();
|
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,UAAU,GAAG,CAAC,EACd,QAAQ,GAAG,CAAC,EACZ,
|
|
1
|
+
{"version":3,"file":"minifyStyles.js","sourceRoot":"","sources":["../src/minifyStyles.ts"],"names":[],"mappings":"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"}
|
|
@@ -21,6 +21,12 @@ describe('@acusti/styling', () => {
|
|
|
21
21
|
opacity: 0.6;
|
|
22
22
|
}`)).toBe('.foo{opacity:.6}');
|
|
23
23
|
});
|
|
24
|
+
it('strips out comments', () => {
|
|
25
|
+
expect(minifyStyles(`
|
|
26
|
+
.bar {
|
|
27
|
+
font-weight: 900;/*.bar is so *strong**/
|
|
28
|
+
}`)).toBe('.bar{font-weight:900}');
|
|
29
|
+
});
|
|
24
30
|
});
|
|
25
31
|
});
|
|
26
32
|
//# 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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/styling",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
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.0.0
|
|
46
|
-
"react-dom": "^19.0.0
|
|
43
|
+
"@types/react": "^19.0.2",
|
|
44
|
+
"happy-dom": "^15.11.7",
|
|
45
|
+
"react": "^19.0.0",
|
|
46
|
+
"react-dom": "^19.0.0",
|
|
47
47
|
"typescript": "5.3.3",
|
|
48
|
-
"vitest": "^
|
|
48
|
+
"vitest": "^2.1.8"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"react": "^19.0.0
|
|
52
|
-
"react-dom": "^19.0.0
|
|
51
|
+
"react": "^19.0.0",
|
|
52
|
+
"react-dom": "^19.0.0"
|
|
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
|
@@ -31,8 +31,6 @@ export function minifyStyles(css: string) {
|
|
|
31
31
|
const totalLength = css.length;
|
|
32
32
|
let startIndex = 0,
|
|
33
33
|
endIndex = 0,
|
|
34
|
-
i = 0,
|
|
35
|
-
max = 0,
|
|
36
34
|
token = '',
|
|
37
35
|
placeholder = '';
|
|
38
36
|
|
|
@@ -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
|
|