@compiled/react 0.7.0 → 0.10.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.
Files changed (265) hide show
  1. package/CHANGELOG.md +68 -1
  2. package/dist/browser/class-names/index.d.ts +2 -2
  3. package/dist/browser/class-names/index.js.flow +45 -0
  4. package/dist/browser/class-names/index.js.map +1 -1
  5. package/dist/browser/css/index.d.ts +16 -3
  6. package/dist/browser/css/index.js +1 -13
  7. package/dist/browser/css/index.js.flow +35 -0
  8. package/dist/browser/css/index.js.map +1 -1
  9. package/dist/browser/index.d.ts +15 -23
  10. package/dist/browser/index.js +4 -0
  11. package/dist/browser/index.js.flow +15 -0
  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 +40 -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/index.js.flow +54 -0
  23. package/dist/browser/runtime/ax.js.flow +27 -0
  24. package/dist/browser/runtime/css-custom-property.d.ts +1 -1
  25. package/dist/browser/runtime/css-custom-property.js.flow +19 -0
  26. package/dist/browser/runtime/css-custom-property.js.map +1 -1
  27. package/dist/browser/runtime/dev-warnings.d.ts +0 -1
  28. package/dist/browser/runtime/dev-warnings.js +1 -1
  29. package/dist/browser/runtime/dev-warnings.js.flow +7 -0
  30. package/dist/browser/runtime/dev-warnings.js.map +1 -1
  31. package/dist/browser/runtime/index.js.flow +10 -0
  32. package/dist/browser/runtime/is-node.js.flow +19 -0
  33. package/dist/browser/runtime/sheet.d.ts +1 -1
  34. package/dist/browser/runtime/sheet.js.flow +36 -0
  35. package/dist/browser/runtime/style-cache.d.ts +1 -1
  36. package/dist/browser/runtime/style-cache.js.flow +19 -0
  37. package/dist/browser/runtime/style-cache.js.map +1 -1
  38. package/dist/browser/runtime/style.d.ts +1 -1
  39. package/dist/browser/runtime/style.js +2 -2
  40. package/dist/browser/runtime/style.js.flow +17 -0
  41. package/dist/browser/runtime/style.js.map +1 -1
  42. package/dist/browser/runtime/types.js.flow +23 -0
  43. package/dist/browser/runtime.js.flow +7 -0
  44. package/dist/browser/styled/index.d.ts +6 -9
  45. package/dist/browser/styled/index.js.flow +69 -0
  46. package/dist/browser/styled/index.js.map +1 -1
  47. package/dist/browser/types.d.ts +6 -3
  48. package/dist/browser/types.js.flow +29 -0
  49. package/dist/browser/utils/error.js.flow +7 -0
  50. package/dist/cjs/class-names/index.d.ts +2 -2
  51. package/dist/cjs/class-names/index.js.flow +45 -0
  52. package/dist/cjs/class-names/index.js.map +1 -1
  53. package/dist/cjs/css/index.d.ts +16 -3
  54. package/dist/cjs/css/index.js +1 -13
  55. package/dist/cjs/css/index.js.flow +35 -0
  56. package/dist/cjs/css/index.js.map +1 -1
  57. package/dist/cjs/index.d.ts +15 -23
  58. package/dist/cjs/index.js +5 -1
  59. package/dist/cjs/index.js.flow +15 -0
  60. package/dist/cjs/index.js.map +1 -1
  61. package/dist/cjs/jsx/jsx-dev-runtime.d.ts +2 -0
  62. package/dist/cjs/jsx/jsx-dev-runtime.js +16 -0
  63. package/dist/cjs/jsx/jsx-dev-runtime.js.map +1 -0
  64. package/dist/cjs/jsx/jsx-local-namespace.d.ts +40 -0
  65. package/dist/cjs/jsx/jsx-local-namespace.js +3 -0
  66. package/dist/cjs/jsx/jsx-local-namespace.js.map +1 -0
  67. package/dist/cjs/jsx/jsx-runtime.d.ts +2 -0
  68. package/dist/cjs/jsx/jsx-runtime.js +16 -0
  69. package/dist/cjs/jsx/jsx-runtime.js.map +1 -0
  70. package/dist/cjs/keyframes/index.js.flow +54 -0
  71. package/dist/cjs/runtime/ax.js.flow +27 -0
  72. package/dist/cjs/runtime/css-custom-property.d.ts +1 -1
  73. package/dist/cjs/runtime/css-custom-property.js.flow +19 -0
  74. package/dist/cjs/runtime/css-custom-property.js.map +1 -1
  75. package/dist/cjs/runtime/dev-warnings.d.ts +0 -1
  76. package/dist/cjs/runtime/dev-warnings.js +2 -3
  77. package/dist/cjs/runtime/dev-warnings.js.flow +7 -0
  78. package/dist/cjs/runtime/dev-warnings.js.map +1 -1
  79. package/dist/cjs/runtime/index.js.flow +10 -0
  80. package/dist/cjs/runtime/is-node.js.flow +19 -0
  81. package/dist/cjs/runtime/sheet.d.ts +1 -1
  82. package/dist/cjs/runtime/sheet.js.flow +36 -0
  83. package/dist/cjs/runtime/style-cache.d.ts +1 -1
  84. package/dist/cjs/runtime/style-cache.js.flow +19 -0
  85. package/dist/cjs/runtime/style-cache.js.map +1 -1
  86. package/dist/cjs/runtime/style.d.ts +1 -1
  87. package/dist/cjs/runtime/style.js +2 -2
  88. package/dist/cjs/runtime/style.js.flow +17 -0
  89. package/dist/cjs/runtime/style.js.map +1 -1
  90. package/dist/cjs/runtime/types.js.flow +23 -0
  91. package/dist/cjs/runtime.js.flow +7 -0
  92. package/dist/cjs/styled/index.d.ts +6 -9
  93. package/dist/cjs/styled/index.js.flow +69 -0
  94. package/dist/cjs/styled/index.js.map +1 -1
  95. package/dist/cjs/types.d.ts +6 -3
  96. package/dist/cjs/types.js.flow +29 -0
  97. package/dist/cjs/utils/error.js.flow +7 -0
  98. package/dist/esm/class-names/index.d.ts +2 -2
  99. package/dist/esm/class-names/index.js.flow +45 -0
  100. package/dist/esm/class-names/index.js.map +1 -1
  101. package/dist/esm/css/index.d.ts +16 -3
  102. package/dist/esm/css/index.js +1 -13
  103. package/dist/esm/css/index.js.flow +35 -0
  104. package/dist/esm/css/index.js.map +1 -1
  105. package/dist/esm/index.d.ts +15 -23
  106. package/dist/esm/index.js +4 -0
  107. package/dist/esm/index.js.flow +15 -0
  108. package/dist/esm/index.js.map +1 -1
  109. package/dist/esm/jsx/jsx-dev-runtime.d.ts +2 -0
  110. package/dist/esm/jsx/jsx-dev-runtime.js +4 -0
  111. package/dist/esm/jsx/jsx-dev-runtime.js.map +1 -0
  112. package/dist/esm/jsx/jsx-local-namespace.d.ts +40 -0
  113. package/dist/esm/jsx/jsx-local-namespace.js +2 -0
  114. package/dist/esm/jsx/jsx-local-namespace.js.map +1 -0
  115. package/dist/esm/jsx/jsx-runtime.d.ts +2 -0
  116. package/dist/esm/jsx/jsx-runtime.js +4 -0
  117. package/dist/esm/jsx/jsx-runtime.js.map +1 -0
  118. package/dist/esm/keyframes/index.js.flow +54 -0
  119. package/dist/esm/runtime/ax.js.flow +27 -0
  120. package/dist/esm/runtime/css-custom-property.d.ts +1 -1
  121. package/dist/esm/runtime/css-custom-property.js.flow +19 -0
  122. package/dist/esm/runtime/css-custom-property.js.map +1 -1
  123. package/dist/esm/runtime/dev-warnings.d.ts +0 -1
  124. package/dist/esm/runtime/dev-warnings.js +1 -1
  125. package/dist/esm/runtime/dev-warnings.js.flow +7 -0
  126. package/dist/esm/runtime/dev-warnings.js.map +1 -1
  127. package/dist/esm/runtime/index.js.flow +10 -0
  128. package/dist/esm/runtime/is-node.js.flow +19 -0
  129. package/dist/esm/runtime/sheet.d.ts +1 -1
  130. package/dist/esm/runtime/sheet.js.flow +36 -0
  131. package/dist/esm/runtime/style-cache.d.ts +1 -1
  132. package/dist/esm/runtime/style-cache.js.flow +19 -0
  133. package/dist/esm/runtime/style-cache.js.map +1 -1
  134. package/dist/esm/runtime/style.d.ts +1 -1
  135. package/dist/esm/runtime/style.js +2 -2
  136. package/dist/esm/runtime/style.js.flow +17 -0
  137. package/dist/esm/runtime/style.js.map +1 -1
  138. package/dist/esm/runtime/types.js.flow +23 -0
  139. package/dist/esm/runtime.js.flow +7 -0
  140. package/dist/esm/styled/index.d.ts +6 -9
  141. package/dist/esm/styled/index.js.flow +69 -0
  142. package/dist/esm/styled/index.js.map +1 -1
  143. package/dist/esm/types.d.ts +6 -3
  144. package/dist/esm/types.js.flow +29 -0
  145. package/dist/esm/utils/error.js.flow +7 -0
  146. package/jsx-dev-runtime/package.json +6 -0
  147. package/jsx-runtime/package.json +6 -0
  148. package/package.json +41 -15
  149. package/src/__tests__/browser.test.tsx +5 -5
  150. package/src/__tests__/jest-matcher.test.tsx +197 -0
  151. package/src/__tests__/server-side-hydrate.test.tsx +1 -0
  152. package/src/__tests__/ssr.test.tsx +2 -2
  153. package/src/class-names/__tests__/index.test.tsx +1 -1
  154. package/src/class-names/__tests__/types.test.js.flow +28 -0
  155. package/src/class-names/index.js.flow +45 -0
  156. package/src/class-names/index.tsx +3 -2
  157. package/src/css/__tests__/index.test.tsx +40 -0
  158. package/src/css/__tests__/types.test.js.flow +17 -0
  159. package/src/css/index.js.flow +35 -0
  160. package/src/css/index.tsx +27 -3
  161. package/src/index.js.flow +15 -0
  162. package/src/index.tsx +20 -26
  163. package/src/jsx/__tests__/index.test.tsx +1 -2
  164. package/src/jsx/__tests__/jsx-import-source-pragma.test.tsx +37 -0
  165. package/src/jsx/__tests__/jsx-pragma.test.tsx +39 -0
  166. package/src/jsx/jsx-dev-runtime.tsx +5 -0
  167. package/src/jsx/jsx-local-namespace.tsx +49 -0
  168. package/src/jsx/jsx-runtime.tsx +5 -0
  169. package/src/keyframes/__tests__/index.test.tsx +2 -1
  170. package/src/keyframes/__tests__/types.test.js.flow +31 -0
  171. package/src/keyframes/index.js.flow +54 -0
  172. package/src/runtime/__perf__/ax.test.ts +42 -0
  173. package/src/runtime/__perf__/cs.test.tsx +111 -0
  174. package/src/runtime/__perf__/sheet.test.ts +61 -0
  175. package/src/runtime/__perf__/utils/cs.tsx +60 -0
  176. package/src/runtime/__perf__/utils/sheet.tsx +151 -0
  177. package/src/runtime/__tests__/style-ssr.test.tsx +1 -0
  178. package/src/runtime/__tests__/style.test.tsx +92 -58
  179. package/src/runtime/ax.js.flow +27 -0
  180. package/src/runtime/css-custom-property.js.flow +19 -0
  181. package/src/runtime/css-custom-property.tsx +1 -1
  182. package/src/runtime/dev-warnings.js.flow +7 -0
  183. package/src/runtime/dev-warnings.tsx +1 -1
  184. package/src/runtime/index.js.flow +10 -0
  185. package/src/runtime/is-node.js.flow +19 -0
  186. package/src/runtime/sheet.js.flow +36 -0
  187. package/src/runtime/sheet.tsx +1 -1
  188. package/src/runtime/style-cache.js.flow +19 -0
  189. package/src/runtime/style-cache.tsx +2 -1
  190. package/src/runtime/style.js.flow +17 -0
  191. package/src/runtime/style.tsx +4 -3
  192. package/src/runtime/types.js.flow +23 -0
  193. package/src/runtime.js.flow +7 -0
  194. package/src/styled/__tests__/index.test.tsx +3 -3
  195. package/src/styled/__tests__/types.test.js.flow +30 -0
  196. package/src/styled/index.js.flow +69 -0
  197. package/src/styled/index.tsx +7 -10
  198. package/src/types.js.flow +29 -0
  199. package/src/types.tsx +7 -3
  200. package/src/utils/error.js.flow +7 -0
  201. package/dist/browser/codemods/codemods-helpers.d.ts +0 -60
  202. package/dist/browser/codemods/codemods-helpers.js +0 -201
  203. package/dist/browser/codemods/codemods-helpers.js.map +0 -1
  204. package/dist/browser/codemods/constants.d.ts +0 -3
  205. package/dist/browser/codemods/constants.js +0 -4
  206. package/dist/browser/codemods/constants.js.map +0 -1
  207. package/dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.d.ts +0 -3
  208. package/dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.js +0 -178
  209. package/dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.js.map +0 -1
  210. package/dist/browser/codemods/emotion-to-compiled/index.d.ts +0 -1
  211. package/dist/browser/codemods/emotion-to-compiled/index.js +0 -2
  212. package/dist/browser/codemods/emotion-to-compiled/index.js.map +0 -1
  213. package/dist/browser/codemods/styled-components-to-compiled/index.d.ts +0 -1
  214. package/dist/browser/codemods/styled-components-to-compiled/index.js +0 -2
  215. package/dist/browser/codemods/styled-components-to-compiled/index.js.map +0 -1
  216. package/dist/browser/codemods/styled-components-to-compiled/styled-components-to-compiled.d.ts +0 -3
  217. package/dist/browser/codemods/styled-components-to-compiled/styled-components-to-compiled.js +0 -33
  218. package/dist/browser/codemods/styled-components-to-compiled/styled-components-to-compiled.js.map +0 -1
  219. package/dist/cjs/codemods/codemods-helpers.d.ts +0 -60
  220. package/dist/cjs/codemods/codemods-helpers.js +0 -217
  221. package/dist/cjs/codemods/codemods-helpers.js.map +0 -1
  222. package/dist/cjs/codemods/constants.d.ts +0 -3
  223. package/dist/cjs/codemods/constants.js +0 -7
  224. package/dist/cjs/codemods/constants.js.map +0 -1
  225. package/dist/cjs/codemods/emotion-to-compiled/emotion-to-compiled.d.ts +0 -3
  226. package/dist/cjs/codemods/emotion-to-compiled/emotion-to-compiled.js +0 -180
  227. package/dist/cjs/codemods/emotion-to-compiled/emotion-to-compiled.js.map +0 -1
  228. package/dist/cjs/codemods/emotion-to-compiled/index.d.ts +0 -1
  229. package/dist/cjs/codemods/emotion-to-compiled/index.js +0 -9
  230. package/dist/cjs/codemods/emotion-to-compiled/index.js.map +0 -1
  231. package/dist/cjs/codemods/styled-components-to-compiled/index.d.ts +0 -1
  232. package/dist/cjs/codemods/styled-components-to-compiled/index.js +0 -9
  233. package/dist/cjs/codemods/styled-components-to-compiled/index.js.map +0 -1
  234. package/dist/cjs/codemods/styled-components-to-compiled/styled-components-to-compiled.d.ts +0 -3
  235. package/dist/cjs/codemods/styled-components-to-compiled/styled-components-to-compiled.js +0 -35
  236. package/dist/cjs/codemods/styled-components-to-compiled/styled-components-to-compiled.js.map +0 -1
  237. package/dist/esm/codemods/codemods-helpers.d.ts +0 -60
  238. package/dist/esm/codemods/codemods-helpers.js +0 -201
  239. package/dist/esm/codemods/codemods-helpers.js.map +0 -1
  240. package/dist/esm/codemods/constants.d.ts +0 -3
  241. package/dist/esm/codemods/constants.js +0 -4
  242. package/dist/esm/codemods/constants.js.map +0 -1
  243. package/dist/esm/codemods/emotion-to-compiled/emotion-to-compiled.d.ts +0 -3
  244. package/dist/esm/codemods/emotion-to-compiled/emotion-to-compiled.js +0 -178
  245. package/dist/esm/codemods/emotion-to-compiled/emotion-to-compiled.js.map +0 -1
  246. package/dist/esm/codemods/emotion-to-compiled/index.d.ts +0 -1
  247. package/dist/esm/codemods/emotion-to-compiled/index.js +0 -2
  248. package/dist/esm/codemods/emotion-to-compiled/index.js.map +0 -1
  249. package/dist/esm/codemods/styled-components-to-compiled/index.d.ts +0 -1
  250. package/dist/esm/codemods/styled-components-to-compiled/index.js +0 -2
  251. package/dist/esm/codemods/styled-components-to-compiled/index.js.map +0 -1
  252. package/dist/esm/codemods/styled-components-to-compiled/styled-components-to-compiled.d.ts +0 -3
  253. package/dist/esm/codemods/styled-components-to-compiled/styled-components-to-compiled.js +0 -33
  254. package/dist/esm/codemods/styled-components-to-compiled/styled-components-to-compiled.js.map +0 -1
  255. package/src/codemods/README.md +0 -8
  256. package/src/codemods/codemods-helpers.tsx +0 -369
  257. package/src/codemods/constants.tsx +0 -3
  258. package/src/codemods/emotion-to-compiled/README.md +0 -71
  259. package/src/codemods/emotion-to-compiled/__tests__/emotion-to-compiled.test.tsx +0 -526
  260. package/src/codemods/emotion-to-compiled/emotion-to-compiled.tsx +0 -249
  261. package/src/codemods/emotion-to-compiled/index.tsx +0 -1
  262. package/src/codemods/styled-components-to-compiled/README.md +0 -37
  263. package/src/codemods/styled-components-to-compiled/__tests__/styled-components-to-compiled.test.tsx +0 -109
  264. package/src/codemods/styled-components-to-compiled/index.tsx +0 -1
  265. package/src/codemods/styled-components-to-compiled/styled-components-to-compiled.tsx +0 -45
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,6 @@
1
1
  import React from 'react';
2
2
  import { renderToStaticMarkup, renderToString } from 'react-dom/server';
3
+
3
4
  import Style from '../style';
4
5
 
5
6
  describe('<Style />', () => {
package/src/runtime/__tests__/style.test.tsx CHANGED
@@ -1,103 +1,137 @@
1
- import React from 'react';
2
1
  import { render } from '@testing-library/react';
3
- import Style from '../style';
2
+ import React from 'react';
3
+ import type { ComponentType } from 'react';
4
4
 
5
5
  jest.mock('../is-node', () => ({
6
6
  isNodeEnvironment: () => false,
7
7
  }));
8
8
 
9
9
  describe('<Style />', () => {
10
+ let consoleErrorSpy: jest.SpyInstance;
11
+
10
12
  beforeEach(() => {
11
- // Reset style tags in head before each test so that it will remove styles
12
- // injected by test
13
- document.head.querySelectorAll('style').forEach((styleElement) => {
14
- styleElement.textContent = '';
15
- });
13
+ consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
16
14
  });
17
15
 
16
+ afterEach(() => {
17
+ consoleErrorSpy.mockRestore();
18
+ document.head.innerHTML = '';
19
+ });
20
+
21
+ // We want to isolate the test to correctly mimic the environment being loaded in once
22
+ const createIsolatedTest = (callback: (Style: ComponentType) => void) => {
23
+ jest.isolateModules(() => {
24
+ // eslint-disable-next-line @typescript-eslint/no-var-requires
25
+ const Style = require('../style');
26
+
27
+ callback(Style.default);
28
+ });
29
+ };
30
+
18
31
  it('should render nothing on the client', () => {
19
- const { baseElement } = render(<Style>{[`.a { display: block; }`]}</Style>);
32
+ createIsolatedTest((Style) => {
33
+ const { baseElement } = render(<Style>{[`.a { display: block; }`]}</Style>);
20
34
 
21
- expect(baseElement.getElementsByTagName('style')).toHaveLength(0);
35
+ expect(baseElement.getElementsByTagName('style')).toHaveLength(0);
36
+ expect(console.error).not.toHaveBeenCalled();
37
+ });
22
38
  });
23
39
 
24
40
  it('should add style to the head on the client', () => {
25
- render(<Style>{[`.b { display: block; }`]}</Style>);
41
+ createIsolatedTest((Style) => {
42
+ render(<Style>{[`.b { display: block; }`]}</Style>);
26
43
 
27
- expect(document.head.innerHTML).toInclude('<style>.b { display: block; }</style>');
44
+ expect(document.head.innerHTML).toInclude('<style>.b { display: block; }</style>');
45
+ expect(console.error).not.toHaveBeenCalled();
46
+ });
28
47
  });
29
48
 
30
49
  it('should only add one style if it was already added', () => {
31
- render(<Style>{[`.c { display: block; }`]}</Style>);
32
- render(<Style>{[`.c { display: block; }`]}</Style>);
50
+ createIsolatedTest((Style) => {
51
+ render(<Style>{[`.c { display: block; }`]}</Style>);
52
+ render(<Style>{[`.c { display: block; }`]}</Style>);
33
53
 
34
- expect(document.head.innerHTML).toIncludeRepeated('<style>.c { display: block; }</style>', 1);
54
+ expect(document.head.innerHTML).toIncludeRepeated('<style>.c { display: block; }</style>', 1);
55
+ expect(console.error).not.toHaveBeenCalled();
56
+ });
35
57
  });
36
58
 
37
59
  it('should noop in prod', () => {
38
- jest.spyOn(console, 'error');
39
- process.env.NODE_ENV = 'production';
60
+ createIsolatedTest((Style) => {
61
+ process.env.NODE_ENV = 'production';
40
62
 
41
- render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
63
+ render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
42
64
 
43
- expect(console.error).not.toHaveBeenCalled();
65
+ expect(console.error).not.toHaveBeenCalled();
66
+ });
44
67
  });
45
68
 
46
69
  it('should warn in dev when using a dangerous pseduo selector', () => {
47
- jest.spyOn(console, 'error');
48
- process.env.NODE_ENV = 'development';
70
+ createIsolatedTest((Style) => {
71
+ process.env.NODE_ENV = 'development';
49
72
 
50
- render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
73
+ render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
51
74
 
52
- expect(console.error).toHaveBeenCalled();
75
+ expect(console.error).toHaveBeenCalledTimes(1);
76
+ });
53
77
  });
54
78
 
55
79
  it('should warn in dev only once', () => {
56
- jest.spyOn(console, 'error');
57
- process.env.NODE_ENV = 'development';
80
+ createIsolatedTest((Style) => {
81
+ process.env.NODE_ENV = 'development';
58
82
 
59
- render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
60
- render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
83
+ render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
84
+ render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
61
85
 
62
- expect(console.error).toHaveBeenCalledTimes(1);
86
+ expect(console.error).toHaveBeenCalledTimes(1);
87
+ expect(console.error).toHaveBeenCalledWith(
88
+ expect.stringMatching('Selectors ":first-child, :nth-child" are dangerous to use')
89
+ );
90
+ });
63
91
  });
64
92
 
65
93
  it('should render style tags in buckets', () => {
66
- render(
67
- <Style>
68
- {[
69
- `._a1234567:hover{ color: red; }`,
70
- `._b1234567:active{ color: blue; }`,
71
- `._c1234567:link{ color: green; }`,
72
- `._d1234567{ display: block; }`,
73
- `@media (max-width: 800px){ ._e1234567{ color: yellow; } }`,
74
- `._f1234567:focus{ color: pink; }`,
75
- `._g1234567:visited{ color: grey; }`,
76
- `._h1234567:focus-visible{ color: white; }`,
77
- `._i1234567:focus-within{ color: black; }`,
78
- ]}
79
- </Style>
80
- );
81
-
82
- expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
83
- "<style>._d1234567{ display: block; }</style>
84
- <style>._c1234567:link{ color: green; }</style>
85
- <style>._g1234567:visited{ color: grey; }</style>
86
- <style>._i1234567:focus-within{ color: black; }</style>
87
- <style>._f1234567:focus{ color: pink; }</style>
88
- <style>._h1234567:focus-visible{ color: white; }</style>
89
- <style>._a1234567:hover{ color: red; }</style>
90
- <style>._b1234567:active{ color: blue; }</style>
91
- <style>@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
92
- "
93
- `);
94
+ createIsolatedTest((Style) => {
95
+ render(
96
+ <Style>
97
+ {[
98
+ `._a1234567:hover{ color: red; }`,
99
+ `._b1234567:active{ color: blue; }`,
100
+ `._c1234567:link{ color: green; }`,
101
+ `._d1234567{ display: block; }`,
102
+ `@media (max-width: 800px){ ._e1234567{ color: yellow; } }`,
103
+ `._f1234567:focus{ color: pink; }`,
104
+ `._g1234567:visited{ color: grey; }`,
105
+ `._h1234567:focus-visible{ color: white; }`,
106
+ `._i1234567:focus-within{ color: black; }`,
107
+ ]}
108
+ </Style>
109
+ );
110
+
111
+ expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
112
+ "<style>._d1234567{ display: block; }</style>
113
+ <style>._c1234567:link{ color: green; }</style>
114
+ <style>._g1234567:visited{ color: grey; }</style>
115
+ <style>._i1234567:focus-within{ color: black; }</style>
116
+ <style>._f1234567:focus{ color: pink; }</style>
117
+ <style>._h1234567:focus-visible{ color: white; }</style>
118
+ <style>._a1234567:hover{ color: red; }</style>
119
+ <style>._b1234567:active{ color: blue; }</style>
120
+ <style>@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
121
+ "
122
+ `);
123
+ expect(console.error).not.toHaveBeenCalled();
124
+ });
94
125
  });
95
126
 
96
127
  it('should update styles', () => {
97
- const { rerender } = render(<Style>{[`.first-render { display: block; }`]}</Style>);
128
+ createIsolatedTest((Style) => {
129
+ const { rerender } = render(<Style>{[`.first-render { display: block; }`]}</Style>);
98
130
 
99
- rerender(<Style>{[`.second-render { display: block; }`]}</Style>);
131
+ rerender(<Style>{[`.second-render { display: block; }`]}</Style>);
100
132
 
101
- expect(document.head.innerHTML).toInclude('.second-render { display: block; }');
133
+ expect(document.head.innerHTML).toInclude('.second-render { display: block; }');
134
+ expect(console.error).not.toHaveBeenCalled();
135
+ });
102
136
  });
103
137
  });
package/src/runtime/ax.js.flow ADDED
@@ -0,0 +1,27 @@
1
+ /**
2
+ * Flowtype definitions for ax
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ /**
8
+ * Joins classes together and ensures atomic declarations of a single group exist.
9
+ * Atomic declarations take the form of `_{group}{value}` (always prefixed with an underscore),
10
+ * where both `group` and `value` are hashes **four characters long**.
11
+ * Class names can be of any length,
12
+ * this function can take both atomic declarations and class names.
13
+ *
14
+ * Input:
15
+ *
16
+ * ```
17
+ * ax(['_aaaabbbb', '_aaaacccc'])
18
+ * ```
19
+ *
20
+ * Output:
21
+ *
22
+ * ```
23
+ * '_aaaacccc'
24
+ * ```
25
+ * @param classes
26
+ */
27
+ declare export default function ax(classNames: (string | void | false)[]): string | void;
package/src/runtime/css-custom-property.js.flow ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Flowtype definitions for css-custom-property
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ /**
8
+ * Returns a CSS custom property value with an optional suffix & prefix.
9
+ * Prefix will only be added if there is a suffix.
10
+ * If the value is undefined a fallback value will be returned to prevent children inheriting parent values.
11
+ * @param value
12
+ * @param suffix
13
+ * @param prefix
14
+ */
15
+ declare export default function cssCustomPropertyValue(
16
+ value: string | number | null | void,
17
+ suffix?: string | void | null,
18
+ prefix?: string | void | null
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 ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Flowtype definitions for dev-warnings
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ declare export var analyzeCssInDev: (sheet: string) => void;
package/src/runtime/dev-warnings.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  const selectorsToWarn = [':first-child', ':nth-child'];
2
2
  const hasWarned: Record<string, true> = {};
3
3
 
4
- export const warn = (str: string, ...args: any[]): void =>
4
+ const warn = (str: string, ...args: any[]): void =>
5
5
  console.error(
6
6
  `
7
7
  ██████╗ ██████╗ ███╗ ███╗██████╗ ██╗██╗ ███████╗██████╗
package/src/runtime/index.js.flow ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Flowtype definitions for index
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ declare export { default as CS } from './style';
8
+ declare export { default as CC } from './style-cache';
9
+ declare export { default as ax } from './ax';
10
+ declare export { default as ix } from './css-custom-property';
package/src/runtime/is-node.js.flow ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Flowtype definitions for is-node
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ /**
8
+ * Returns `true` when inside a node environment,
9
+ * else `false`.
10
+ *
11
+ * When using this it will remove any node code from the browser bundle - for example:
12
+ *
13
+ * ```js
14
+ * if (isNodeEnvironment()) {
15
+ * // This code will be removed from the browser bundle
16
+ * }
17
+ * ```
18
+ */
19
+ declare export var isNodeEnvironment: () => boolean;
package/src/runtime/sheet.js.flow ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * Flowtype definitions for sheet
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import type { Bucket, StyleSheetOpts } from './types';
8
+ /**
9
+ * Ordered style buckets using their short psuedo name.
10
+ * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
11
+ */
12
+ declare export var styleBucketOrdering: Bucket[];
13
+ /**
14
+ * Gets the bucket depending on the sheet.
15
+ * This function makes assumptions as to the form of the input class name.
16
+ *
17
+ * Input:
18
+ *
19
+ * ```
20
+ * "._a1234567:hover{ color: red; }"
21
+ * ```
22
+ *
23
+ * Output:
24
+ *
25
+ * ```
26
+ * "h"
27
+ * ```
28
+ * @param sheet styles for which we are getting the bucket
29
+ */
30
+ declare export var getStyleBucketName: (sheet: string) => Bucket;
31
+ /**
32
+ * Used to move styles to the head of the application during runtime.
33
+ * @param css string
34
+ * @param opts StyleSheetOpts
35
+ */
36
+ declare export default function insertRule(css: string, opts: StyleSheetOpts): void;
package/src/runtime/sheet.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { StyleSheetOpts, Bucket } from './types';
1
+ import type { Bucket, StyleSheetOpts } from './types';
2
2
 
3
3
  /**
4
4
  * Ordered style buckets using their short psuedo name.
package/src/runtime/style-cache.js.flow ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Flowtype definitions for style-cache
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import type { ProviderComponent, UseCacheHook } from './types';
8
+ /**
9
+ * Hook using the cache created on the server or client.
10
+ */
11
+ declare export var useCache: UseCacheHook;
12
+ /**
13
+ * On the server this ensures the minimal amount of styles will be rendered
14
+ * safely using React Context.
15
+ *
16
+ * On the browser this turns into a fragment with no React Context.
17
+ */
18
+ declare var StyleCacheProvider: ProviderComponent;
19
+ declare export default typeof StyleCacheProvider;
package/src/runtime/style-cache.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { createContext, useContext } from 'react';
3
+
3
4
  import { isNodeEnvironment } from './is-node';
4
- import { ProviderComponent, UseCacheHook } from './types';
5
+ import type { ProviderComponent, UseCacheHook } from './types';
5
6
 
6
7
  /**
7
8
  * Cache to hold already used styles.
package/src/runtime/style.js.flow ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Flowtype definitions for style
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import type { StyleSheetOpts } from './types';
8
+ declare type StyleProps = {
9
+ /**
10
+ * CSS Rules.
11
+ * Ensure each rule is a separate element in the array.
12
+ */
13
+ children: string[],
14
+ ...
15
+ } & StyleSheetOpts;
16
+ declare export default function Style(props: StyleProps): React$Node | null;
17
+ declare export {};
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 { 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 ADDED
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Flowtype definitions for types
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ export interface StyleSheetOpts {
8
+ /**
9
+ * Used to set a nonce on the style element.
10
+ * This is needed when using a strict CSP and should be a random hash generated every server load.
11
+ * Check out https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src for more information.
12
+ */
13
+ nonce?: string;
14
+ }
15
+ /**
16
+ * Buckets under which we will group our stylesheets
17
+ */
18
+ export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
19
+ export type UseCacheHook = () => { [key: string]: true, ... };
20
+ export type ProviderComponent = (props: {
21
+ children: React$Node[] | React$Node,
22
+ ...
23
+ }) => React$Node;
package/src/runtime.js.flow ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Flowtype definitions for runtime
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ declare export { CC, CS, ax, ix } from './runtime/index';
package/src/styled/__tests__/index.test.tsx CHANGED
@@ -1,6 +1,6 @@
1
- import React from 'react';
2
- import { render } from '@testing-library/react';
1
+ /** @jsxImportSource @compiled/react */
3
2
  import { styled } from '@compiled/react';
3
+ import { render } from '@testing-library/react';
4
4
 
5
5
  const em = (str: string | number) => str;
6
6
 
@@ -139,7 +139,7 @@ describe('styled component', () => {
139
139
  expect(StyledDiv.displayName).toEqual(undefined);
140
140
  });
141
141
 
142
- xit('should have a display name', () => {
142
+ it('should have a display name', () => {
143
143
  process.env.NODE_ENV = 'development';
144
144
 
145
145
  const StyledDiv = styled.div`
package/src/styled/__tests__/types.test.js.flow ADDED
@@ -0,0 +1,30 @@
1
+ // @flow strict-local
2
+ import React, { type Node } from 'react';
3
+ import { styled, type CssObject, type CSSProps } from '@compiled/react';
4
+
5
+ // Tagged template expression
6
+ () => {
7
+ const StyledTaggedTemplateExpression = styled.div`
8
+ font-size: 12px;
9
+ `;
10
+ return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
11
+ };
12
+
13
+ // Object call expression
14
+ () => {
15
+ const StyledTaggedTemplateExpression = styled.div({ fontSize: 12 });
16
+ return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
17
+ };
18
+
19
+ // Array
20
+ () => {
21
+ const styles: CSSProps[] = [{ fontSize: '12px' }];
22
+ const StyledTaggedTemplateExpression = styled.div(styles);
23
+ return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
24
+ };
25
+
26
+ // Multiple arguments
27
+ () => {
28
+ const StyledTaggedTemplateExpression = styled.div({ fontSize: 12 }, `font-size: 12px`);
29
+ return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
30
+ };