@acusti/styling 1.0.0 → 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.
Files changed (16) hide show
  1. package/README.md +1 -1
  2. package/dist/Style.js +2 -2
  3. package/dist/Style.js.flow +4 -4
  4. package/dist/index.d.ts +2 -1
  5. package/dist/index.js +3 -2
  6. package/dist/index.js.flow +1 -1
  7. package/dist/minifyStyles.js +32 -15
  8. package/dist/minifyStyles.js.map +1 -1
  9. package/dist/minifyStyles.test.js +17 -9
  10. package/dist/style-registry.js.flow +7 -7
  11. package/dist/useStyles.d.ts +12 -6
  12. package/dist/useStyles.js +14 -9
  13. package/dist/useStyles.js.flow +11 -11
  14. package/dist/useStyles.test.js +106 -31
  15. package/package.json +6 -6
  16. package/src/minifyStyles.ts +4 -4
package/README.md CHANGED
@@ -2,8 +2,8 @@
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
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
- [![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/styling?style=for-the-badge)](https://bundlephobia.com/package/@acusti/styling)
6
5
  [![downloads per month](https://img.shields.io/npm/dm/@acusti/styling?style=for-the-badge)](https://www.npmjs.com/package/@acusti/styling)
6
+ [![bundle size](https://deno.bundlejs.com/badge?q=@acusti/styling)](https://bundlejs.com/?q=%40acusti%2Fstyling)
7
7
 
8
8
  This package exports `Style`, which is a React component that takes a CSS
9
9
  string as its children, minifies it, and renders it using the react v19+
package/dist/Style.js CHANGED
@@ -5,7 +5,7 @@ const Style = ({ children, href: _href, precedence = 'medium' }) => {
5
5
  const { href, styles } = useStyles(children, _href);
6
6
  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/canary.d.ts
7
7
  // https://react.dev/reference/react-dom/components/style#props
8
- return (React.createElement("style", { href: href, precedence: precedence }, styles));
8
+ return React.createElement('style', { href: href, precedence: precedence }, styles);
9
9
  };
10
10
  export default Style;
11
- //# 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 "react";
8
+ import React from 'react';
9
9
  declare type Props = {|
10
- children: string,
11
- href?: string,
12
- precedence?: string,
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/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
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";
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,3 +1,4 @@
1
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
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 "./Style.js";
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/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 startIndex = 0, endIndex = 0, token = '', placeholder = '';
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,10 +40,10 @@ export function minifyStyles(css) {
37
40
  comments.push(token);
38
41
  css =
39
42
  css.slice(0, startIndex + 2) +
40
- '___PRESERVE_CANDIDATE_COMMENT_' +
41
- (comments.length - 1) +
42
- '___' +
43
- css.slice(endIndex);
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
@@ -51,11 +54,16 @@ export function minifyStyles(css) {
51
54
  // one, maybe more? put'em back then
52
55
  if (match.indexOf('___PRESERVE_CANDIDATE_COMMENT_') >= 0) {
53
56
  for (let i = 0, max = comments.length; i < max; i++) {
54
- match = match.replace('___PRESERVE_CANDIDATE_COMMENT_' + i + '___', comments[i]);
57
+ match = match.replace(
58
+ '___PRESERVE_CANDIDATE_COMMENT_' + i + '___',
59
+ comments[i],
60
+ );
55
61
  }
56
62
  }
57
63
  preservedTokens.push(match);
58
- return (quote + '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___' + quote);
64
+ return (
65
+ quote + '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___' + quote
66
+ );
59
67
  });
60
68
  // strings are safe, now wrestle the comments
61
69
  for (let i = 0, max = comments.length; i < max; i = i + 1) {
@@ -65,7 +73,10 @@ export function minifyStyles(css) {
65
73
  // so push to the preserved tokens keeping the !
66
74
  if (token.charAt(0) === '!') {
67
75
  preservedTokens.push(token);
68
- css = css.replace(placeholder, '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___');
76
+ css = css.replace(
77
+ placeholder,
78
+ '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___',
79
+ );
69
80
  continue;
70
81
  }
71
82
  // otherwise, kill the comment
@@ -107,15 +118,21 @@ export function minifyStyles(css) {
107
118
  css = css.replace(/:0 0(;|\})/g, ':0$1');
108
119
  // Replace background-position:0; with background-position:0 0;
109
120
  // same for transform-origin
110
- css = css.replace(/(background-position|transform-origin):0(;|\})/gi, function (_all, prop, tail) {
111
- return prop.toLowerCase() + ':0 0' + tail;
112
- });
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
+ );
113
127
  // Replace 0.6 to .6, but only when preceded by : or a white-space
114
128
  css = css.replace(/(:|\s)0+\.(\d+)/g, '$1.$2');
115
129
  // border: none -> border:0
116
- css = css.replace(/(border|border-top|border-right|border-bottom|border-right|outline|background):none(;|\})/gi, function (_all, prop, tail) {
117
- return prop.toLowerCase() + ':0' + tail;
118
- });
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
+ );
119
136
  // Remove empty rules.
120
137
  css = css.replace(/[^};{/]+\{\}/g, '');
121
138
  // Replace multiple semi-colons in a row by a single one
@@ -128,4 +145,4 @@ export function minifyStyles(css) {
128
145
  return css.trim();
129
146
  }
130
147
  export default minifyStyles;
131
- //# 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":"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"}
1
+ {"version":3,"file":"minifyStyles.js","sourceRoot":"","sources":["../src/minifyStyles.ts"],"names":[],"mappings":"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"}
package/dist/minifyStyles.test.js CHANGED
@@ -3,30 +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(minifyStyles(`
6
+ expect(
7
+ minifyStyles(`
7
8
  .foo {
8
9
  padding: 10px;
9
10
  color: red;
10
- }`)).toBe('.foo{padding:10px;color:red}');
11
+ }`),
12
+ ).toBe('.foo{padding:10px;color:red}');
11
13
  });
12
14
  it('preserves whitespace where needed in selectors', () => {
13
- expect(minifyStyles(`
15
+ expect(
16
+ minifyStyles(`
14
17
  .foo > .bar :hover {
15
18
  background-color: cyan;
16
- }`)).toBe('.foo>.bar :hover{background-color:cyan}');
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(minifyStyles(`
23
+ expect(
24
+ minifyStyles(`
20
25
  .foo {
21
26
  opacity: 0.6;
22
- }`)).toBe('.foo{opacity:.6}');
27
+ }`),
28
+ ).toBe('.foo{opacity:.6}');
23
29
  });
24
30
  it('strips out comments', () => {
25
- expect(minifyStyles(`
31
+ expect(
32
+ minifyStyles(`
26
33
  .bar {
27
34
  font-weight: 900;/*.bar is so *strong**/
28
- }`)).toBe('.bar{font-weight:900}');
35
+ }`),
36
+ ).toBe('.bar{font-weight:900}');
29
37
  });
30
38
  });
31
39
  });
32
- //# sourceMappingURL=minifyStyles.test.js.map
40
+ //# sourceMappingURL=minifyStyles.test.js.map
package/dist/style-registry.js.flow CHANGED
@@ -6,19 +6,19 @@
6
6
  */
7
7
 
8
8
  declare type Payload = {|
9
- ownerDocument: Document | "global",
10
- styles: string,
9
+ ownerDocument: Document | 'global',
10
+ styles: string,
11
11
  |};
12
12
  declare export var getRegisteredStyles: (x: Payload) => {|
13
- element: HTMLStyleElement | null,
14
- referenceCount: number,
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
- ownerDocument: Document,
20
- previousStyles: string,
21
- styles: string,
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<string, {
2
- href: string;
3
- referenceCount: number;
4
- styles: string;
5
- }>;
6
- export declare function useStyles(styles: string, initialHref?: string): {
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(initialHref !== null && initialHref !== void 0 ? initialHref : minified),
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(initialHref !== null && initialHref !== void 0 ? initialHref : minified),
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
- string,
10
- {|
11
- href: string,
12
- referenceCount: number,
13
- styles: string,
14
- |}
9
+ string,
10
+ {|
11
+ href: string,
12
+ referenceCount: number,
13
+ styles: string,
14
+ |},
15
15
  >;
16
16
  declare export function useStyles(
17
- styles: string,
18
- initialHref?: string
17
+ styles: string,
18
+ initialHref?: string,
19
19
  ): {|
20
- href: string,
21
- referenceCount: number,
22
- styles: string,
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(React.createElement(React.Fragment, null,
18
- React.createElement(Style, null, mockStylesA),
19
- React.createElement(Style, null, mockStylesA)));
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(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(2);
22
- expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.styles).toBe('.test-a{color:cyan}');
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(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(1);
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(stylesItemB === null || stylesItemB === void 0 ? void 0 : stylesItemB.referenceCount).toBe(1);
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(React.createElement(React.Fragment, null,
35
- React.createElement(Style, null, mockStylesA),
36
- React.createElement(Style, null, mockStylesB)));
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(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(1);
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(stylesItemB === null || stylesItemB === void 0 ? void 0 : stylesItemB.referenceCount).toBe(1);
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("div", null));
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(React.createElement(React.Fragment, null,
49
- React.createElement(Style, null, mockStylesA)));
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(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(1);
52
- expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.styles).toBe('.test-a{color:cyan}');
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(React.createElement(React.Fragment, null,
55
- React.createElement(Style, null, mockStylesB),
56
- React.createElement(Style, null, mockStylesA)));
57
- expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(1);
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: "new-a" }, mockStylesA));
60
- expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(1);
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(React.createElement(React.Fragment, null,
63
- React.createElement(Style, null, mockStylesA),
64
- React.createElement(Style, { key: "new-a" }, mockStylesA)));
65
- expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(2);
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("div", null));
68
- expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(0);
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(React.createElement(Style, null, `div[data-foo-bar] { color: cyan; }`));
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.0",
3
+ "version": "1.0.1",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "exports": "./dist/index.js",
@@ -42,13 +42,13 @@
42
42
  "@testing-library/user-event": "^14.5.2",
43
43
  "@types/react": "^19.0.2",
44
44
  "happy-dom": "^15.11.7",
45
- "react": "^19.0.0",
46
- "react-dom": "^19.0.0",
47
- "typescript": "5.3.3",
45
+ "react": "^19",
46
+ "react-dom": "^19",
47
+ "typescript": "5.7.3",
48
48
  "vitest": "^2.1.8"
49
49
  },
50
50
  "peerDependencies": {
51
- "react": "^19.0.0",
52
- "react-dom": "^19.0.0"
51
+ "react": "^19",
52
+ "react-dom": "^19"
53
53
  }
54
54
  }
package/src/minifyStyles.ts CHANGED
@@ -29,10 +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 startIndex = 0,
33
- endIndex = 0,
34
- token = '',
35
- placeholder = '';
32
+ let endIndex = 0,
33
+ placeholder = '',
34
+ startIndex = 0,
35
+ token = '';
36
36
 
37
37
  // collect all comment blocks...
38
38
  while ((startIndex = css.indexOf('/*', startIndex)) >= 0) {