@compiled/react 0.9.0 → 0.10.2

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 (234) hide show
  1. package/dist/browser/class-names/index.d.ts +22 -16
  2. package/dist/browser/class-names/index.js +1 -27
  3. package/dist/browser/class-names/index.js.flow +2 -2
  4. package/dist/browser/class-names/index.js.map +1 -1
  5. package/dist/browser/css/index.d.ts +22 -19
  6. package/dist/browser/css/index.js +4 -3
  7. package/dist/browser/css/index.js.flow +1 -1
  8. package/dist/browser/css/index.js.map +1 -1
  9. package/dist/browser/index.d.ts +12 -22
  10. package/dist/browser/index.js +4 -0
  11. package/dist/browser/index.js.flow +5 -30
  12. package/dist/browser/index.js.map +1 -1
  13. package/dist/browser/jsx/jsx-dev-runtime.d.ts +2 -0
  14. package/dist/browser/jsx/jsx-dev-runtime.js +4 -0
  15. package/dist/browser/jsx/jsx-dev-runtime.js.map +1 -0
  16. package/dist/browser/jsx/jsx-local-namespace.d.ts +66 -0
  17. package/dist/browser/jsx/jsx-local-namespace.js +2 -0
  18. package/dist/browser/jsx/jsx-local-namespace.js.map +1 -0
  19. package/dist/browser/jsx/jsx-runtime.d.ts +2 -0
  20. package/dist/browser/jsx/jsx-runtime.js +4 -0
  21. package/dist/browser/jsx/jsx-runtime.js.map +1 -0
  22. package/dist/browser/keyframes/__fixtures__/index.js +1 -0
  23. package/dist/browser/keyframes/__fixtures__/index.js.map +1 -1
  24. package/dist/browser/keyframes/index.d.ts +20 -24
  25. package/dist/browser/keyframes/index.js.flow +1 -1
  26. package/dist/browser/keyframes/index.js.map +1 -1
  27. package/dist/browser/runtime/ax.js.flow +1 -1
  28. package/dist/browser/runtime/cache.d.ts +12 -0
  29. package/dist/browser/runtime/cache.js +15 -0
  30. package/dist/browser/runtime/cache.js.flow +18 -0
  31. package/dist/browser/runtime/cache.js.map +1 -0
  32. package/dist/browser/runtime/css-custom-property.d.ts +1 -1
  33. package/dist/browser/runtime/css-custom-property.js.flow +2 -2
  34. package/dist/browser/runtime/css-custom-property.js.map +1 -1
  35. package/dist/browser/runtime/dev-warnings.js +10 -6
  36. package/dist/browser/runtime/dev-warnings.js.flow +1 -1
  37. package/dist/browser/runtime/dev-warnings.js.map +1 -1
  38. package/dist/browser/runtime/index.js.flow +1 -1
  39. package/dist/browser/runtime/is-node.js +1 -3
  40. package/dist/browser/runtime/is-node.js.flow +1 -1
  41. package/dist/browser/runtime/is-node.js.map +1 -1
  42. package/dist/browser/runtime/sheet.d.ts +1 -1
  43. package/dist/browser/runtime/sheet.js +5 -1
  44. package/dist/browser/runtime/sheet.js.flow +2 -2
  45. package/dist/browser/runtime/sheet.js.map +1 -1
  46. package/dist/browser/runtime/style-cache.js +4 -0
  47. package/dist/browser/runtime/style-cache.js.flow +1 -1
  48. package/dist/browser/runtime/style-cache.js.map +1 -1
  49. package/dist/browser/runtime/style.js +2 -2
  50. package/dist/browser/runtime/style.js.flow +1 -1
  51. package/dist/browser/runtime/style.js.map +1 -1
  52. package/dist/browser/runtime/types.js.flow +1 -1
  53. package/dist/browser/runtime.js.flow +1 -1
  54. package/dist/browser/styled/index.d.ts +35 -7
  55. package/dist/browser/styled/index.js +35 -7
  56. package/dist/browser/styled/index.js.flow +2 -2
  57. package/dist/browser/styled/index.js.map +1 -1
  58. package/dist/browser/types.js.flow +1 -1
  59. package/dist/browser/utils/error.js.flow +1 -1
  60. package/dist/cjs/class-names/index.d.ts +22 -16
  61. package/dist/cjs/class-names/index.js +2 -28
  62. package/dist/cjs/class-names/index.js.flow +2 -2
  63. package/dist/cjs/class-names/index.js.map +1 -1
  64. package/dist/cjs/css/index.d.ts +22 -19
  65. package/dist/cjs/css/index.js +5 -4
  66. package/dist/cjs/css/index.js.flow +1 -1
  67. package/dist/cjs/css/index.js.map +1 -1
  68. package/dist/cjs/index.d.ts +12 -22
  69. package/dist/cjs/index.js +5 -1
  70. package/dist/cjs/index.js.flow +5 -30
  71. package/dist/cjs/index.js.map +1 -1
  72. package/dist/cjs/jsx/jsx-dev-runtime.d.ts +2 -0
  73. package/dist/cjs/jsx/jsx-dev-runtime.js +16 -0
  74. package/dist/cjs/jsx/jsx-dev-runtime.js.map +1 -0
  75. package/dist/cjs/jsx/jsx-local-namespace.d.ts +66 -0
  76. package/dist/cjs/jsx/jsx-local-namespace.js +3 -0
  77. package/dist/cjs/jsx/jsx-local-namespace.js.map +1 -0
  78. package/dist/cjs/jsx/jsx-runtime.d.ts +2 -0
  79. package/dist/cjs/jsx/jsx-runtime.js +16 -0
  80. package/dist/cjs/jsx/jsx-runtime.js.map +1 -0
  81. package/dist/cjs/keyframes/__fixtures__/index.js +2 -1
  82. package/dist/cjs/keyframes/__fixtures__/index.js.map +1 -1
  83. package/dist/cjs/keyframes/index.d.ts +20 -24
  84. package/dist/cjs/keyframes/index.js +1 -1
  85. package/dist/cjs/keyframes/index.js.flow +1 -1
  86. package/dist/cjs/keyframes/index.js.map +1 -1
  87. package/dist/cjs/runtime/ax.js.flow +1 -1
  88. package/dist/cjs/runtime/cache.d.ts +12 -0
  89. package/dist/cjs/runtime/cache.js +19 -0
  90. package/dist/cjs/runtime/cache.js.flow +18 -0
  91. package/dist/cjs/runtime/cache.js.map +1 -0
  92. package/dist/cjs/runtime/css-custom-property.d.ts +1 -1
  93. package/dist/cjs/runtime/css-custom-property.js.flow +2 -2
  94. package/dist/cjs/runtime/css-custom-property.js.map +1 -1
  95. package/dist/cjs/runtime/dev-warnings.js +10 -6
  96. package/dist/cjs/runtime/dev-warnings.js.flow +1 -1
  97. package/dist/cjs/runtime/dev-warnings.js.map +1 -1
  98. package/dist/cjs/runtime/index.js.flow +1 -1
  99. package/dist/cjs/runtime/is-node.js +1 -3
  100. package/dist/cjs/runtime/is-node.js.flow +1 -1
  101. package/dist/cjs/runtime/is-node.js.map +1 -1
  102. package/dist/cjs/runtime/sheet.d.ts +1 -1
  103. package/dist/cjs/runtime/sheet.js +6 -2
  104. package/dist/cjs/runtime/sheet.js.flow +2 -2
  105. package/dist/cjs/runtime/sheet.js.map +1 -1
  106. package/dist/cjs/runtime/style-cache.js +10 -6
  107. package/dist/cjs/runtime/style-cache.js.flow +1 -1
  108. package/dist/cjs/runtime/style-cache.js.map +1 -1
  109. package/dist/cjs/runtime/style.js +6 -6
  110. package/dist/cjs/runtime/style.js.flow +1 -1
  111. package/dist/cjs/runtime/style.js.map +1 -1
  112. package/dist/cjs/runtime/types.js.flow +1 -1
  113. package/dist/cjs/runtime.js.flow +1 -1
  114. package/dist/cjs/styled/index.d.ts +35 -7
  115. package/dist/cjs/styled/index.js +36 -8
  116. package/dist/cjs/styled/index.js.flow +2 -2
  117. package/dist/cjs/styled/index.js.map +1 -1
  118. package/dist/cjs/types.js.flow +1 -1
  119. package/dist/cjs/utils/error.js.flow +1 -1
  120. package/dist/esm/class-names/index.d.ts +22 -16
  121. package/dist/esm/class-names/index.js +1 -27
  122. package/dist/esm/class-names/index.js.flow +2 -2
  123. package/dist/esm/class-names/index.js.map +1 -1
  124. package/dist/esm/css/index.d.ts +22 -19
  125. package/dist/esm/css/index.js +4 -3
  126. package/dist/esm/css/index.js.flow +1 -1
  127. package/dist/esm/css/index.js.map +1 -1
  128. package/dist/esm/index.d.ts +12 -22
  129. package/dist/esm/index.js +4 -0
  130. package/dist/esm/index.js.flow +5 -30
  131. package/dist/esm/index.js.map +1 -1
  132. package/dist/esm/jsx/jsx-dev-runtime.d.ts +2 -0
  133. package/dist/esm/jsx/jsx-dev-runtime.js +4 -0
  134. package/dist/esm/jsx/jsx-dev-runtime.js.map +1 -0
  135. package/dist/esm/jsx/jsx-local-namespace.d.ts +66 -0
  136. package/dist/esm/jsx/jsx-local-namespace.js +2 -0
  137. package/dist/esm/jsx/jsx-local-namespace.js.map +1 -0
  138. package/dist/esm/jsx/jsx-runtime.d.ts +2 -0
  139. package/dist/esm/jsx/jsx-runtime.js +4 -0
  140. package/dist/esm/jsx/jsx-runtime.js.map +1 -0
  141. package/dist/esm/keyframes/__fixtures__/index.js +1 -0
  142. package/dist/esm/keyframes/__fixtures__/index.js.map +1 -1
  143. package/dist/esm/keyframes/index.d.ts +20 -24
  144. package/dist/esm/keyframes/index.js.flow +1 -1
  145. package/dist/esm/keyframes/index.js.map +1 -1
  146. package/dist/esm/runtime/ax.js.flow +1 -1
  147. package/dist/esm/runtime/cache.d.ts +12 -0
  148. package/dist/esm/runtime/cache.js +15 -0
  149. package/dist/esm/runtime/cache.js.flow +18 -0
  150. package/dist/esm/runtime/cache.js.map +1 -0
  151. package/dist/esm/runtime/css-custom-property.d.ts +1 -1
  152. package/dist/esm/runtime/css-custom-property.js.flow +2 -2
  153. package/dist/esm/runtime/css-custom-property.js.map +1 -1
  154. package/dist/esm/runtime/dev-warnings.js +10 -6
  155. package/dist/esm/runtime/dev-warnings.js.flow +1 -1
  156. package/dist/esm/runtime/dev-warnings.js.map +1 -1
  157. package/dist/esm/runtime/index.js.flow +1 -1
  158. package/dist/esm/runtime/is-node.js +1 -3
  159. package/dist/esm/runtime/is-node.js.flow +1 -1
  160. package/dist/esm/runtime/is-node.js.map +1 -1
  161. package/dist/esm/runtime/sheet.d.ts +1 -1
  162. package/dist/esm/runtime/sheet.js +5 -1
  163. package/dist/esm/runtime/sheet.js.flow +2 -2
  164. package/dist/esm/runtime/sheet.js.map +1 -1
  165. package/dist/esm/runtime/style-cache.js +4 -0
  166. package/dist/esm/runtime/style-cache.js.flow +1 -1
  167. package/dist/esm/runtime/style-cache.js.map +1 -1
  168. package/dist/esm/runtime/style.js +2 -2
  169. package/dist/esm/runtime/style.js.flow +1 -1
  170. package/dist/esm/runtime/style.js.map +1 -1
  171. package/dist/esm/runtime/types.js.flow +1 -1
  172. package/dist/esm/runtime.js.flow +1 -1
  173. package/dist/esm/styled/index.d.ts +35 -7
  174. package/dist/esm/styled/index.js +35 -7
  175. package/dist/esm/styled/index.js.flow +2 -2
  176. package/dist/esm/styled/index.js.map +1 -1
  177. package/dist/esm/types.js.flow +1 -1
  178. package/dist/esm/utils/error.js.flow +1 -1
  179. package/jsx-dev-runtime/package.json +6 -0
  180. package/jsx-runtime/package.json +6 -0
  181. package/package.json +43 -14
  182. package/src/__tests__/browser.test.tsx +3 -8
  183. package/src/__tests__/display-names.test.tsx +1 -0
  184. package/src/__tests__/jest-matcher.test.tsx +199 -0
  185. package/src/__tests__/server-side-hydrate.test.tsx +1 -0
  186. package/src/__tests__/ssr.test.tsx +5 -3
  187. package/src/class-names/__tests__/index.test.tsx +2 -1
  188. package/src/class-names/index.js.flow +2 -2
  189. package/src/class-names/index.tsx +25 -14
  190. package/src/css/__tests__/index.test.tsx +10 -3
  191. package/src/css/index.js.flow +1 -1
  192. package/src/css/index.tsx +34 -24
  193. package/src/index.js.flow +5 -30
  194. package/src/index.tsx +18 -26
  195. package/src/jsx/__tests__/index.test.tsx +1 -2
  196. package/src/jsx/__tests__/jsx-import-source-pragma.test.tsx +37 -0
  197. package/src/jsx/__tests__/jsx-pragma.test.tsx +40 -0
  198. package/src/jsx/jsx-dev-runtime.tsx +5 -0
  199. package/src/jsx/jsx-local-namespace.tsx +75 -0
  200. package/src/jsx/jsx-runtime.tsx +5 -0
  201. package/src/keyframes/__fixtures__/index.tsx +1 -0
  202. package/src/keyframes/__tests__/index.test.tsx +20 -6
  203. package/src/keyframes/index.js.flow +1 -1
  204. package/src/keyframes/index.tsx +24 -28
  205. package/src/runtime/__perf__/ax.test.ts +42 -0
  206. package/src/runtime/__perf__/cs.test.tsx +111 -0
  207. package/src/runtime/__perf__/sheet.test.ts +61 -0
  208. package/src/runtime/__perf__/utils/cs.tsx +60 -0
  209. package/src/runtime/__perf__/utils/sheet.tsx +151 -0
  210. package/src/runtime/__tests__/style-ssr.test.tsx +5 -0
  211. package/src/runtime/__tests__/style.test.tsx +1 -5
  212. package/src/runtime/ax.js.flow +1 -1
  213. package/src/runtime/cache.js.flow +18 -0
  214. package/src/runtime/cache.tsx +14 -0
  215. package/src/runtime/css-custom-property.js.flow +2 -2
  216. package/src/runtime/css-custom-property.tsx +1 -1
  217. package/src/runtime/dev-warnings.js.flow +1 -1
  218. package/src/runtime/index.js.flow +1 -1
  219. package/src/runtime/is-node.js.flow +1 -1
  220. package/src/runtime/is-node.tsx +1 -2
  221. package/src/runtime/sheet.js.flow +2 -2
  222. package/src/runtime/sheet.tsx +8 -2
  223. package/src/runtime/style-cache.js.flow +1 -1
  224. package/src/runtime/style-cache.tsx +6 -0
  225. package/src/runtime/style.js.flow +1 -1
  226. package/src/runtime/style.tsx +4 -3
  227. package/src/runtime/types.js.flow +1 -1
  228. package/src/runtime.js.flow +1 -1
  229. package/src/styled/__tests__/index.test.tsx +4 -3
  230. package/src/styled/index.js.flow +2 -2
  231. package/src/styled/index.tsx +37 -8
  232. package/src/types.js.flow +1 -1
  233. package/src/utils/error.js.flow +1 -1
  234. package/CHANGELOG.md +0 -74
package/src/runtime/__perf__/utils/sheet.tsx ADDED
@@ -0,0 +1,151 @@
1
+ /**
2
+ * Ordered style buckets using their short psuedo name.
3
+ * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
4
+ */
5
+ export const styleBucketOrdering: string[] = [
6
+ // catch-all
7
+ '',
8
+ // link
9
+ 'l',
10
+ // visited
11
+ 'v',
12
+ // focus-within
13
+ 'w',
14
+ // focus
15
+ 'f',
16
+ // focus-visible
17
+ 'i',
18
+ // hover
19
+ 'h',
20
+ // active
21
+ 'a',
22
+ // at-rules
23
+ 'm',
24
+ ];
25
+
26
+ /**
27
+ * Holds all style buckets in memory that have been added to the head.
28
+ */
29
+ const styleBucketsInHead: Record<string, HTMLStyleElement> = {};
30
+
31
+ /**
32
+ * Maps the long pseudo name to the short pseudo name.
33
+ * Pseudos that match here will be ordered,
34
+ * everythin else will make their way to the catch all style bucket.
35
+ * We reduce the pseduo name to save bundlesize.
36
+ * Thankfully there aren't any overlaps, see: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes.
37
+ */
38
+ const pseudosMap: Record<string, string> = {
39
+ // link
40
+ k: 'l',
41
+ // visited
42
+ ited: 'v',
43
+ // focus-within
44
+ 'us-within': 'w',
45
+ // focus
46
+ us: 'f',
47
+ // focus-visible
48
+ 'us-visible': 'i',
49
+ // hover
50
+ er: 'h',
51
+ // active
52
+ ive: 'a',
53
+ };
54
+
55
+ type StyleBucketOptions = {
56
+ nonce?: string;
57
+ };
58
+
59
+ /**
60
+ * Lazily adds a `<style>` bucket to the `<head>`.
61
+ * This will ensure that the style buckets are ordered.
62
+ *
63
+ * @param bucketName Bucket to insert in the head.
64
+ * @param opts
65
+ */
66
+ function lazyAddStyleBucketToHead(
67
+ bucketName: string,
68
+ { nonce }: StyleBucketOptions
69
+ ): HTMLStyleElement {
70
+ if (!styleBucketsInHead[bucketName]) {
71
+ let currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
72
+ let nextBucketFromCache = null;
73
+
74
+ for (; currentBucketIndex < styleBucketOrdering.length; currentBucketIndex++) {
75
+ // Find the next bucket which we will add our new style bucket before.
76
+ const nextBucket = styleBucketsInHead[styleBucketOrdering[currentBucketIndex]];
77
+ if (nextBucket) {
78
+ nextBucketFromCache = nextBucket;
79
+ break;
80
+ }
81
+ }
82
+
83
+ const tag = document.createElement('style');
84
+ nonce && tag.setAttribute('nonce', nonce);
85
+ tag.appendChild(document.createTextNode(''));
86
+ styleBucketsInHead[bucketName] = tag;
87
+ document.head.insertBefore(tag, nextBucketFromCache);
88
+ }
89
+
90
+ return styleBucketsInHead[bucketName]!;
91
+ }
92
+
93
+ /**
94
+ * Gets the bucket depending on the sheet.
95
+ * This function makes assumptions as to the form of the input class name.
96
+ *
97
+ * Input:
98
+ *
99
+ * ```
100
+ * "._a1234567:hover{ color: red; }"
101
+ * ```
102
+ *
103
+ * Output:
104
+ *
105
+ * ```
106
+ * "h"
107
+ * ```
108
+ *
109
+ * @param sheet styles for which we are getting the bucket
110
+ */
111
+ const getStyleBucketName = (sheet: string): string => {
112
+ // We are grouping all the at-rules like @media, @supports etc under `m` bucket.
113
+ if (sheet.charCodeAt(0) === 64 /* "@" */) {
114
+ return 'm';
115
+ }
116
+
117
+ /**
118
+ * We assume that classname will always be 9 character long,
119
+ * using this the 10th character could be a pseudo declaration.
120
+ */
121
+ if (sheet.charCodeAt(10) === 58 /* ":" */) {
122
+ // We send through a subset of the string instead of the full pseudo name.
123
+ // For example `"focus-visible"` name would instead of `"us-visible"`.
124
+ // Return a mapped pseudo else the default catch all bucket.
125
+ return pseudosMap[sheet.slice(14, sheet.indexOf('{'))] || '';
126
+ }
127
+
128
+ // Return default catch all bucket
129
+ return '';
130
+ };
131
+
132
+ export type CreateStyleSheetOptions = StyleBucketOptions;
133
+
134
+ /**
135
+ * Returns a style sheet object that is used to move styles to the head of the application during runtime.
136
+ *
137
+ * @param opts StyleSheetOpts
138
+ */
139
+ export function createStyleSheet(opts: CreateStyleSheetOptions) {
140
+ return (css: string): void => {
141
+ const bucketName = getStyleBucketName(css);
142
+ const style = lazyAddStyleBucketToHead(bucketName, opts);
143
+
144
+ if (process.env.NODE_ENV === 'production') {
145
+ const sheet = style.sheet as CSSStyleSheet;
146
+ sheet.insertRule(css, sheet.cssRules.length);
147
+ } else {
148
+ style.appendChild(document.createTextNode(css));
149
+ }
150
+ };
151
+ }
package/src/runtime/__tests__/style-ssr.test.tsx CHANGED
@@ -1,5 +1,10 @@
1
+ /**
2
+ * @jest-environment node
3
+ */
4
+
1
5
  import React from 'react';
2
6
  import { renderToStaticMarkup, renderToString } from 'react-dom/server';
7
+
3
8
  import Style from '../style';
4
9
 
5
10
  describe('<Style />', () => {
package/src/runtime/__tests__/style.test.tsx CHANGED
@@ -1,10 +1,6 @@
1
+ import { render } from '@testing-library/react';
1
2
  import React from 'react';
2
3
  import type { ComponentType } from 'react';
3
- import { render } from '@testing-library/react';
4
-
5
- jest.mock('../is-node', () => ({
6
- isNodeEnvironment: () => false,
7
- }));
8
4
 
9
5
  describe('<Style />', () => {
10
6
  let consoleErrorSpy: jest.SpyInstance;
package/src/runtime/ax.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for ax
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  /**
package/src/runtime/cache.js.flow ADDED
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Flowtype definitions for cache
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ /**
8
+ * Returns `true` when caching should be disabled, else `false`.
9
+ *
10
+ * Any code within this check will be removed in the output bundles:
11
+ *
12
+ * ```js
13
+ * if (isCacheDisabled()) {
14
+ * // This code will be removed from the output bundles
15
+ * }
16
+ * ```
17
+ */
18
+ declare export var isCacheDisabled: () => boolean;
package/src/runtime/cache.tsx ADDED
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Returns `true` when caching should be disabled, else `false`.
3
+ *
4
+ * Any code within this check will be removed in the output bundles:
5
+ *
6
+ * ```js
7
+ * if (isCacheDisabled()) {
8
+ * // This code will be removed from the output bundles
9
+ * }
10
+ * ```
11
+ */
12
+ export const isCacheDisabled = (): boolean => {
13
+ return process.env.NODE_ENV === 'test' && process.env.CACHE === 'false';
14
+ };
package/src/runtime/css-custom-property.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for css-custom-property
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  /**
@@ -13,7 +13,7 @@
13
13
  * @param prefix
14
14
  */
15
15
  declare export default function cssCustomPropertyValue(
16
- value: string | number | number | null,
16
+ value: string | number | null | void,
17
17
  suffix?: string | void | null,
18
18
  prefix?: string | void | null
19
19
  ): string | number;
package/src/runtime/css-custom-property.tsx CHANGED
@@ -8,7 +8,7 @@
8
8
  * @param prefix
9
9
  */
10
10
  export default function cssCustomPropertyValue(
11
- value: string | number | number | null,
11
+ value: string | number | null | undefined,
12
12
  suffix?: string | undefined | null,
13
13
  prefix?: string | undefined | null
14
14
  ): string | number {
package/src/runtime/dev-warnings.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for dev-warnings
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  declare export var analyzeCssInDev: (sheet: string) => void;
package/src/runtime/index.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for index
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  declare export { default as CS } from './style';
package/src/runtime/is-node.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for is-node
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  /**
package/src/runtime/is-node.tsx CHANGED
@@ -11,6 +11,5 @@
11
11
  * ```
12
12
  */
13
13
  export const isNodeEnvironment = (): boolean => {
14
- // https://nodejs.org/api/process.html#process_process_release
15
- return typeof process !== 'undefined' && process?.release?.name === 'node';
14
+ return typeof window === 'undefined';
16
15
  };
package/src/runtime/sheet.js.flow CHANGED
@@ -1,10 +1,10 @@
1
1
  /**
2
2
  * Flowtype definitions for sheet
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
- import type { StyleSheetOpts, Bucket } from './types';
7
+ import type { Bucket, StyleSheetOpts } from './types';
8
8
  /**
9
9
  * Ordered style buckets using their short psuedo name.
10
10
  * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
package/src/runtime/sheet.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import type { StyleSheetOpts, Bucket } from './types';
1
+ import { isCacheDisabled } from './cache';
2
+ import type { Bucket, StyleSheetOpts } from './types';
2
3
 
3
4
  /**
4
5
  * Ordered style buckets using their short psuedo name.
@@ -77,8 +78,13 @@ function lazyAddStyleBucketToHead(bucketName: Bucket, opts: StyleSheetOpts): HTM
77
78
  const tag = document.createElement('style');
78
79
  opts.nonce && tag.setAttribute('nonce', opts.nonce);
79
80
  tag.appendChild(document.createTextNode(''));
80
- styleBucketsInHead[bucketName] = tag;
81
81
  document.head.insertBefore(tag, nextBucketFromCache);
82
+
83
+ if (isCacheDisabled()) {
84
+ return tag;
85
+ }
86
+
87
+ styleBucketsInHead[bucketName] = tag;
82
88
  }
83
89
 
84
90
  return styleBucketsInHead[bucketName]!;
package/src/runtime/style-cache.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for style-cache
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  import type { ProviderComponent, UseCacheHook } from './types';
package/src/runtime/style-cache.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { createContext, useContext } from 'react';
3
+
4
+ import { isCacheDisabled } from './cache';
3
5
  import { isNodeEnvironment } from './is-node';
4
6
  import type { ProviderComponent, UseCacheHook } from './types';
5
7
 
@@ -26,6 +28,10 @@ if (!isNodeEnvironment()) {
26
28
  * Hook using the cache created on the server or client.
27
29
  */
28
30
  export const useCache: UseCacheHook = () => {
31
+ if (isCacheDisabled()) {
32
+ return {};
33
+ }
34
+
29
35
  if (isNodeEnvironment()) {
30
36
  // On the server we use React Context to we don't leak the cache between SSR calls.
31
37
  // During runtime this hook isn't conditionally called - it is at build time that the flow gets decided.
package/src/runtime/style.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for style
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  import type { StyleSheetOpts } from './types';
package/src/runtime/style.tsx CHANGED
@@ -1,9 +1,10 @@
1
1
  import React from 'react';
2
- import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
2
+
3
3
  import { analyzeCssInDev } from './dev-warnings';
4
- import type { StyleSheetOpts, Bucket } from './types';
5
- import { useCache } from './style-cache';
6
4
  import { isNodeEnvironment } from './is-node';
5
+ import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
6
+ import { useCache } from './style-cache';
7
+ import type { Bucket, StyleSheetOpts } from './types';
7
8
 
8
9
  interface StyleProps extends StyleSheetOpts {
9
10
  /**
package/src/runtime/types.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for types
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  export interface StyleSheetOpts {
package/src/runtime.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for runtime
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  declare export { CC, CS, ax, ix } from './runtime/index';
package/src/styled/__tests__/index.test.tsx CHANGED
@@ -1,6 +1,7 @@
1
- import React from 'react';
2
- import { render } from '@testing-library/react';
1
+ /** @jsxImportSource @compiled/react */
2
+ // eslint-disable-next-line import/no-extraneous-dependencies
3
3
  import { styled } from '@compiled/react';
4
+ import { render } from '@testing-library/react';
4
5
 
5
6
  const em = (str: string | number) => str;
6
7
 
@@ -139,7 +140,7 @@ describe('styled component', () => {
139
140
  expect(StyledDiv.displayName).toEqual(undefined);
140
141
  });
141
142
 
142
- xit('should have a display name', () => {
143
+ it('should have a display name', () => {
143
144
  process.env.NODE_ENV = 'development';
144
145
 
145
146
  const StyledDiv = styled.div`
package/src/styled/index.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for index
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  import type { ComponentType } from 'react';
@@ -33,7 +33,7 @@ export interface StyledFunctionFromTag<TTag: $Keys<$JSXIntrinsics>> {
33
33
  ...interpolations: Interpolations<TProps>
34
34
  ): React$ComponentType<{
35
35
  ...TProps,
36
- ...$ElementType<$JSXIntrinsics, TTag>,
36
+ ...$Exact<$ElementType<$JSXIntrinsics, TTag>>,
37
37
  ...StyledProps,
38
38
  }>;
39
39
  }
package/src/styled/index.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { ComponentType } from 'react';
2
- import { createSetupError } from '../utils/error';
2
+
3
3
  import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
4
+ import { createSetupError } from '../utils/error';
4
5
 
5
6
  /**
6
7
  * Typing for the CSS object.
@@ -57,17 +58,45 @@ export interface StyledComponentInstantiator extends StyledComponentMap {
57
58
  }
58
59
 
59
60
  /**
60
- * Create a component that ties styles to an element which comes with built-in behavior such as `ref` and `as` prop support.
61
+ * ## Styled component
62
+ *
63
+ * Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support.
64
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled).
65
+ *
66
+ * ### Style with objects
67
+ *
68
+ * @example
69
+ * ```
70
+ * styled.div({
71
+ * fontSize: 12,
72
+ * });
73
+ * ```
74
+ *
75
+ * ### Style with template literals
61
76
  *
77
+ * @example
62
78
  * ```
63
- * styled.div`font-size: 12px`; // Template literal CSS
64
- * styled.div({ fontSize: 12 }); // Object CSS
65
- * styled.div([{ fontSize: 12 }, `font-size: 12px;`]) // Array CSS
66
- * styled.div({ fontSize: 12 }, `font-size: 12px`) Multi arguments CSS
79
+ * styled.div`
80
+ * font-size: 12px
81
+ * `;
67
82
  * ```
68
83
  *
69
- * For more help, read the docs:
70
- * https://compiledcssinjs.com/docs/api-styled
84
+ * ### Compose styles with arrays
85
+ *
86
+ * @example
87
+ * ```
88
+ * import { css } from '@compiled/react';
89
+ *
90
+ * styled.div([
91
+ * { fontSize: 12 },
92
+ * css`font-size: 12px;`
93
+ * ]);
94
+ *
95
+ * styled.div(
96
+ * { fontSize: 12 },
97
+ * css`font-size: 12px`
98
+ * );
99
+ * ```
71
100
  */
72
101
  export const styled: StyledComponentInstantiator = new Proxy(
73
102
  {},
package/src/types.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for types
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  import * as CSS from 'csstype';
package/src/utils/error.js.flow CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for error
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.14.1
4
+ * Flowgen v1.15.0
5
5
  * @flow
6
6
  */
7
7
  declare export var createSetupError: () => Error;
package/CHANGELOG.md DELETED
@@ -1,74 +0,0 @@
1
- # @compiled/react
2
-
3
- ## 0.9.0
4
-
5
- ### Minor Changes
6
-
7
- - 2092839: Allow inline strings and inline css mixins in conditional expressions. Fix ordering of styles in template literals.
8
-
9
- ## 0.8.0
10
-
11
- ### Minor Changes
12
-
13
- - 4210ff6: Add flow types support
14
- - 53935b3: Add `ObjectExpression` support to `css`
15
-
16
- ## 0.7.0
17
-
18
- ### Minor Changes
19
-
20
- - bcb2a68: Add support for `keyframes`
21
- - a7ab8e1: Add support for conditional rules for `Styled`
22
-
23
- ## 0.6.13
24
-
25
- ### Patch Changes
26
-
27
- - 13c3a60: add support of additional parameters to css function
28
-
29
- ## 0.6.12
30
-
31
- ### Patch Changes
32
-
33
- - b5b4e8a: Catch unhandled exception on inserting rules with prefixed selectors.
34
-
35
- ## 0.6.11
36
-
37
- ### Patch Changes
38
-
39
- - ee3363e: Fix HTML characters escapes in style tags on SSR.
40
-
41
- ## 0.6.10
42
-
43
- ### Patch Changes
44
-
45
- - 40bc0d9: Package descriptions have been updated.
46
- - 1b1c964: The `css` mixin API is now available,
47
- functioning similarly to the [emotion equivalent](https://emotion.sh/docs/composition).
48
-
49
- ```jsx
50
- import { css } from '@compiled/react';
51
-
52
- <div
53
- css={css`
54
- display: flex;
55
- font-size: 50px;
56
- color: blue;
57
- `}>
58
- blue text
59
- </div>;
60
- ```
61
-
62
- For more help, read the docs: https://compiledcssinjs.com/docs/css.
63
-
64
- ## 0.6.9
65
-
66
- ### Patch Changes
67
-
68
- - 4032cd4: Memo has been removed from the style component which was breaking re-renders at times.
69
-
70
- ## 0.6.8
71
-
72
- ### Patch Changes
73
-
74
- - aea3504: Packages now released with [changesets](https://github.com/atlassian/changesets).