next-yak 0.0.3 → 0.0.5
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 +20 -33
- package/dist/styled.d.ts +191 -178
- package/dist/styled.d.ts.map +1 -1
- package/dist/styled.js +16 -2
- package/dist/styled.js.map +1 -1
- package/loaders/cssloader.cjs +4 -4
- package/loaders/tsloader.cjs +4 -4
- package/loaders/withYak.cjs +5 -0
- package/package.json +1 -1
- package/runtime/styled.tsx +36 -4
- package/loaders/lib/loadConfigOnce.cjs +0 -17
package/README.md
CHANGED
|
@@ -6,6 +6,8 @@ a CSS-in-JS with the power of "dynamic at the speed and reliability of static"
|
|
|
6
6
|
|
|
7
7
|
the initial version of next-yak will only work for next.js
|
|
8
8
|
|
|
9
|
+
|
|
10
|
+
|
|
9
11
|
## Motivation
|
|
10
12
|
|
|
11
13
|
Most of the existing CSS-in-JS libraries are either slow or have a complex api. This project tries to find a middle ground between speed and api complexity.
|
|
@@ -29,40 +31,10 @@ The goal of this project is to create a proof of concept for a CSS-in-JS library
|
|
|
29
31
|
|
|
30
32
|
Optimizations are done by postcss. This allows to use the full power of postcss and its plugins. It also allows to use the same optimizations for css files and css-in-js.
|
|
31
33
|
|
|
32
|
-
# Installation
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
npm install next-yak
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
```js
|
|
39
|
-
// next.config.js
|
|
40
|
-
const { withYak } = require("next-yak");
|
|
41
|
-
|
|
42
|
-
const nextConfig = {
|
|
43
|
-
// your next.js config
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
module.exports = withYak(nextConfig);
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## Nesting
|
|
50
|
-
|
|
51
|
-
`next-yak` supports nesting out of the box.
|
|
52
|
-
Next.js 13 supports nesting only with the `postcss-nested` plugin.
|
|
53
|
-
Therefore you have to create a `postcss.config.js` file in your project root:
|
|
54
|
-
|
|
55
|
-
```js
|
|
56
|
-
// postcss.config.js
|
|
57
|
-
module.exports = {
|
|
58
|
-
plugins: {
|
|
59
|
-
'postcss-nested': {},
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
```
|
|
63
|
-
|
|
64
34
|
## Example
|
|
65
35
|
|
|
36
|
+
Try it on [stackblitz](https://stackblitz.com/edit/stackblitz-starters-dfykqy?file=app%2Fpage.tsx)
|
|
37
|
+
|
|
66
38
|
```tsx
|
|
67
39
|
import { styled, css } from "next-yak";
|
|
68
40
|
|
|
@@ -115,7 +87,22 @@ const App = () => (
|
|
|
115
87
|
This is a proof of concept. There are a lot of things that need to be done before this can be used in production:
|
|
116
88
|
|
|
117
89
|
- [ ] improve js parsing - right now it not reusing babel..
|
|
118
|
-
- [ ]
|
|
90
|
+
- [ ] add theme provider
|
|
91
|
+
- [ ] add support for forwardRef
|
|
92
|
+
- [ ] add support for attrs
|
|
93
|
+
- [ ] improve runtime code size and typings
|
|
94
|
+
- [ ] maybe remove proxy by compiling `styled.button -> styled("button")`
|
|
95
|
+
- [x] config hot module reloading
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
<details>
|
|
99
|
+
<summary>prs</summary>
|
|
100
|
+
|
|
101
|
+
- https://github.com/vercel/next.js/pull/51115
|
|
102
|
+
- https://github.com/vercel/next.js/pull/53796
|
|
103
|
+
- https://github.com/css-modules/postcss-modules-local-by-default/pull/64
|
|
104
|
+
|
|
105
|
+
</details>
|
|
119
106
|
|
|
120
107
|
## Prior art
|
|
121
108
|
|
package/dist/styled.d.ts
CHANGED
|
@@ -1,183 +1,196 @@
|
|
|
1
1
|
import { FunctionComponent } from "react";
|
|
2
2
|
import { CSSInterpolation } from "./cssLiteral";
|
|
3
3
|
import React from "react";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
4
|
+
/**
|
|
5
|
+
* The `styled` method works perfectly on all of your own or any third-party component,
|
|
6
|
+
* as long as they attach the passed className prop to a DOM element.
|
|
7
|
+
*
|
|
8
|
+
* @usage
|
|
9
|
+
*
|
|
10
|
+
* ```tsx
|
|
11
|
+
* const StyledLink = styled(Link)`
|
|
12
|
+
* color: #BF4F74;
|
|
13
|
+
* font-weight: bold;
|
|
14
|
+
* `;
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export declare const styled: (<TBaseProps extends {}>(Component: FunctionComponent<TBaseProps>) => <TProps extends {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => FunctionComponent<TBaseProps & TProps>) & {
|
|
18
|
+
symbol: <TProps_1 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_1>[]) => FunctionComponent<React.SVGProps<SVGSymbolElement> & TProps_1>;
|
|
19
|
+
object: <TProps_2 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_2>[]) => FunctionComponent<React.ClassAttributes<HTMLObjectElement> & React.ObjectHTMLAttributes<HTMLObjectElement> & TProps_2>;
|
|
20
|
+
style: <TProps_3 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_3>[]) => FunctionComponent<React.ClassAttributes<HTMLStyleElement> & React.StyleHTMLAttributes<HTMLStyleElement> & TProps_3>;
|
|
21
|
+
a: <TProps_4 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_4>[]) => FunctionComponent<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & TProps_4>;
|
|
22
|
+
abbr: <TProps_5 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_5>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_5>;
|
|
23
|
+
address: <TProps_6 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_6>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_6>;
|
|
24
|
+
area: <TProps_7 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_7>[]) => FunctionComponent<React.ClassAttributes<HTMLAreaElement> & React.AreaHTMLAttributes<HTMLAreaElement> & TProps_7>;
|
|
25
|
+
article: <TProps_8 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_8>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_8>;
|
|
26
|
+
aside: <TProps_9 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_9>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_9>;
|
|
27
|
+
audio: <TProps_10 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_10>[]) => FunctionComponent<React.ClassAttributes<HTMLAudioElement> & React.AudioHTMLAttributes<HTMLAudioElement> & TProps_10>;
|
|
28
|
+
b: <TProps_11 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_11>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_11>;
|
|
29
|
+
base: <TProps_12 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_12>[]) => FunctionComponent<React.ClassAttributes<HTMLBaseElement> & React.BaseHTMLAttributes<HTMLBaseElement> & TProps_12>;
|
|
30
|
+
bdi: <TProps_13 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_13>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_13>;
|
|
31
|
+
bdo: <TProps_14 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_14>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_14>;
|
|
32
|
+
big: <TProps_15 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_15>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_15>;
|
|
33
|
+
blockquote: <TProps_16 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_16>[]) => FunctionComponent<React.ClassAttributes<HTMLQuoteElement> & React.BlockquoteHTMLAttributes<HTMLQuoteElement> & TProps_16>;
|
|
34
|
+
body: <TProps_17 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_17>[]) => FunctionComponent<React.ClassAttributes<HTMLBodyElement> & React.HTMLAttributes<HTMLBodyElement> & TProps_17>;
|
|
35
|
+
br: <TProps_18 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_18>[]) => FunctionComponent<React.ClassAttributes<HTMLBRElement> & React.HTMLAttributes<HTMLBRElement> & TProps_18>;
|
|
36
|
+
button: <TProps_19 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_19>[]) => FunctionComponent<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & TProps_19>;
|
|
37
|
+
canvas: <TProps_20 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_20>[]) => FunctionComponent<React.ClassAttributes<HTMLCanvasElement> & React.CanvasHTMLAttributes<HTMLCanvasElement> & TProps_20>;
|
|
38
|
+
caption: <TProps_21 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_21>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_21>;
|
|
39
|
+
center: <TProps_22 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_22>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_22>;
|
|
40
|
+
cite: <TProps_23 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_23>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_23>;
|
|
41
|
+
code: <TProps_24 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_24>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_24>;
|
|
42
|
+
col: <TProps_25 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_25>[]) => FunctionComponent<React.ClassAttributes<HTMLTableColElement> & React.ColHTMLAttributes<HTMLTableColElement> & TProps_25>;
|
|
43
|
+
colgroup: <TProps_26 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_26>[]) => FunctionComponent<React.ClassAttributes<HTMLTableColElement> & React.ColgroupHTMLAttributes<HTMLTableColElement> & TProps_26>;
|
|
44
|
+
data: <TProps_27 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_27>[]) => FunctionComponent<React.ClassAttributes<HTMLDataElement> & React.DataHTMLAttributes<HTMLDataElement> & TProps_27>;
|
|
45
|
+
datalist: <TProps_28 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_28>[]) => FunctionComponent<React.ClassAttributes<HTMLDataListElement> & React.HTMLAttributes<HTMLDataListElement> & TProps_28>;
|
|
46
|
+
dd: <TProps_29 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_29>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_29>;
|
|
47
|
+
del: <TProps_30 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_30>[]) => FunctionComponent<React.ClassAttributes<HTMLModElement> & React.DelHTMLAttributes<HTMLModElement> & TProps_30>;
|
|
48
|
+
details: <TProps_31 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_31>[]) => FunctionComponent<React.ClassAttributes<HTMLDetailsElement> & React.DetailsHTMLAttributes<HTMLDetailsElement> & TProps_31>;
|
|
49
|
+
dfn: <TProps_32 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_32>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_32>;
|
|
50
|
+
dialog: <TProps_33 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_33>[]) => FunctionComponent<React.ClassAttributes<HTMLDialogElement> & React.DialogHTMLAttributes<HTMLDialogElement> & TProps_33>;
|
|
51
|
+
div: <TProps_34 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_34>[]) => FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & TProps_34>;
|
|
52
|
+
dl: <TProps_35 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_35>[]) => FunctionComponent<React.ClassAttributes<HTMLDListElement> & React.HTMLAttributes<HTMLDListElement> & TProps_35>;
|
|
53
|
+
dt: <TProps_36 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_36>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_36>;
|
|
54
|
+
em: <TProps_37 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_37>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_37>;
|
|
55
|
+
embed: <TProps_38 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_38>[]) => FunctionComponent<React.ClassAttributes<HTMLEmbedElement> & React.EmbedHTMLAttributes<HTMLEmbedElement> & TProps_38>;
|
|
56
|
+
fieldset: <TProps_39 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_39>[]) => FunctionComponent<React.ClassAttributes<HTMLFieldSetElement> & React.FieldsetHTMLAttributes<HTMLFieldSetElement> & TProps_39>;
|
|
57
|
+
figcaption: <TProps_40 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_40>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_40>;
|
|
58
|
+
figure: <TProps_41 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_41>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_41>;
|
|
59
|
+
footer: <TProps_42 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_42>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_42>;
|
|
60
|
+
form: <TProps_43 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_43>[]) => FunctionComponent<React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement> & TProps_43>;
|
|
61
|
+
h1: <TProps_44 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_44>[]) => FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & TProps_44>;
|
|
62
|
+
h2: <TProps_45 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_45>[]) => FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & TProps_45>;
|
|
63
|
+
h3: <TProps_46 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_46>[]) => FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & TProps_46>;
|
|
64
|
+
h4: <TProps_47 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_47>[]) => FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & TProps_47>;
|
|
65
|
+
h5: <TProps_48 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_48>[]) => FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & TProps_48>;
|
|
66
|
+
h6: <TProps_49 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_49>[]) => FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & TProps_49>;
|
|
67
|
+
head: <TProps_50 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_50>[]) => FunctionComponent<React.ClassAttributes<HTMLHeadElement> & React.HTMLAttributes<HTMLHeadElement> & TProps_50>;
|
|
68
|
+
header: <TProps_51 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_51>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_51>;
|
|
69
|
+
hgroup: <TProps_52 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_52>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_52>;
|
|
70
|
+
hr: <TProps_53 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_53>[]) => FunctionComponent<React.ClassAttributes<HTMLHRElement> & React.HTMLAttributes<HTMLHRElement> & TProps_53>;
|
|
71
|
+
html: <TProps_54 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_54>[]) => FunctionComponent<React.ClassAttributes<HTMLHtmlElement> & React.HtmlHTMLAttributes<HTMLHtmlElement> & TProps_54>;
|
|
72
|
+
i: <TProps_55 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_55>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_55>;
|
|
73
|
+
iframe: <TProps_56 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_56>[]) => FunctionComponent<React.ClassAttributes<HTMLIFrameElement> & React.IframeHTMLAttributes<HTMLIFrameElement> & TProps_56>;
|
|
74
|
+
img: <TProps_57 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_57>[]) => FunctionComponent<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & TProps_57>;
|
|
75
|
+
input: <TProps_58 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_58>[]) => FunctionComponent<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & TProps_58>;
|
|
76
|
+
ins: <TProps_59 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_59>[]) => FunctionComponent<React.ClassAttributes<HTMLModElement> & React.InsHTMLAttributes<HTMLModElement> & TProps_59>;
|
|
77
|
+
kbd: <TProps_60 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_60>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_60>;
|
|
78
|
+
keygen: <TProps_61 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_61>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.KeygenHTMLAttributes<HTMLElement> & TProps_61>;
|
|
79
|
+
label: <TProps_62 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_62>[]) => FunctionComponent<React.ClassAttributes<HTMLLabelElement> & React.LabelHTMLAttributes<HTMLLabelElement> & TProps_62>;
|
|
80
|
+
legend: <TProps_63 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_63>[]) => FunctionComponent<React.ClassAttributes<HTMLLegendElement> & React.HTMLAttributes<HTMLLegendElement> & TProps_63>;
|
|
81
|
+
li: <TProps_64 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_64>[]) => FunctionComponent<React.ClassAttributes<HTMLLIElement> & React.LiHTMLAttributes<HTMLLIElement> & TProps_64>;
|
|
82
|
+
link: <TProps_65 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_65>[]) => FunctionComponent<React.ClassAttributes<HTMLLinkElement> & React.LinkHTMLAttributes<HTMLLinkElement> & TProps_65>;
|
|
83
|
+
main: <TProps_66 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_66>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_66>;
|
|
84
|
+
map: <TProps_67 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_67>[]) => FunctionComponent<React.ClassAttributes<HTMLMapElement> & React.MapHTMLAttributes<HTMLMapElement> & TProps_67>;
|
|
85
|
+
mark: <TProps_68 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_68>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_68>;
|
|
86
|
+
menu: <TProps_69 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_69>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.MenuHTMLAttributes<HTMLElement> & TProps_69>;
|
|
87
|
+
menuitem: <TProps_70 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_70>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_70>;
|
|
88
|
+
meta: <TProps_71 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_71>[]) => FunctionComponent<React.ClassAttributes<HTMLMetaElement> & React.MetaHTMLAttributes<HTMLMetaElement> & TProps_71>;
|
|
89
|
+
meter: <TProps_72 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_72>[]) => FunctionComponent<React.ClassAttributes<HTMLMeterElement> & React.MeterHTMLAttributes<HTMLMeterElement> & TProps_72>;
|
|
90
|
+
nav: <TProps_73 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_73>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_73>;
|
|
91
|
+
noindex: <TProps_74 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_74>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_74>;
|
|
92
|
+
noscript: <TProps_75 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_75>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_75>;
|
|
93
|
+
ol: <TProps_76 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_76>[]) => FunctionComponent<React.ClassAttributes<HTMLOListElement> & React.OlHTMLAttributes<HTMLOListElement> & TProps_76>;
|
|
94
|
+
optgroup: <TProps_77 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_77>[]) => FunctionComponent<React.ClassAttributes<HTMLOptGroupElement> & React.OptgroupHTMLAttributes<HTMLOptGroupElement> & TProps_77>;
|
|
95
|
+
option: <TProps_78 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_78>[]) => FunctionComponent<React.ClassAttributes<HTMLOptionElement> & React.OptionHTMLAttributes<HTMLOptionElement> & TProps_78>;
|
|
96
|
+
output: <TProps_79 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_79>[]) => FunctionComponent<React.ClassAttributes<HTMLOutputElement> & React.OutputHTMLAttributes<HTMLOutputElement> & TProps_79>;
|
|
97
|
+
p: <TProps_80 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_80>[]) => FunctionComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & TProps_80>;
|
|
98
|
+
param: <TProps_81 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_81>[]) => FunctionComponent<React.ClassAttributes<HTMLParamElement> & React.ParamHTMLAttributes<HTMLParamElement> & TProps_81>;
|
|
99
|
+
picture: <TProps_82 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_82>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_82>;
|
|
100
|
+
pre: <TProps_83 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_83>[]) => FunctionComponent<React.ClassAttributes<HTMLPreElement> & React.HTMLAttributes<HTMLPreElement> & TProps_83>;
|
|
101
|
+
progress: <TProps_84 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_84>[]) => FunctionComponent<React.ClassAttributes<HTMLProgressElement> & React.ProgressHTMLAttributes<HTMLProgressElement> & TProps_84>;
|
|
102
|
+
q: <TProps_85 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_85>[]) => FunctionComponent<React.ClassAttributes<HTMLQuoteElement> & React.QuoteHTMLAttributes<HTMLQuoteElement> & TProps_85>;
|
|
103
|
+
rp: <TProps_86 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_86>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_86>;
|
|
104
|
+
rt: <TProps_87 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_87>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_87>;
|
|
105
|
+
ruby: <TProps_88 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_88>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_88>;
|
|
106
|
+
s: <TProps_89 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_89>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_89>;
|
|
107
|
+
samp: <TProps_90 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_90>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_90>;
|
|
108
|
+
search: <TProps_91 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_91>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_91>;
|
|
109
|
+
slot: <TProps_92 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_92>[]) => FunctionComponent<React.ClassAttributes<HTMLSlotElement> & React.SlotHTMLAttributes<HTMLSlotElement> & TProps_92>;
|
|
110
|
+
script: <TProps_93 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_93>[]) => FunctionComponent<React.ClassAttributes<HTMLScriptElement> & React.ScriptHTMLAttributes<HTMLScriptElement> & TProps_93>;
|
|
111
|
+
section: <TProps_94 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_94>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_94>;
|
|
112
|
+
select: <TProps_95 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_95>[]) => FunctionComponent<React.ClassAttributes<HTMLSelectElement> & React.SelectHTMLAttributes<HTMLSelectElement> & TProps_95>;
|
|
113
|
+
small: <TProps_96 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_96>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_96>;
|
|
114
|
+
source: <TProps_97 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_97>[]) => FunctionComponent<React.ClassAttributes<HTMLSourceElement> & React.SourceHTMLAttributes<HTMLSourceElement> & TProps_97>;
|
|
115
|
+
span: <TProps_98 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_98>[]) => FunctionComponent<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & TProps_98>;
|
|
116
|
+
strong: <TProps_99 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_99>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_99>;
|
|
117
|
+
sub: <TProps_100 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_100>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_100>;
|
|
118
|
+
summary: <TProps_101 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_101>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_101>;
|
|
119
|
+
sup: <TProps_102 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_102>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_102>;
|
|
120
|
+
table: <TProps_103 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_103>[]) => FunctionComponent<React.ClassAttributes<HTMLTableElement> & React.TableHTMLAttributes<HTMLTableElement> & TProps_103>;
|
|
121
|
+
template: <TProps_104 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_104>[]) => FunctionComponent<React.ClassAttributes<HTMLTemplateElement> & React.HTMLAttributes<HTMLTemplateElement> & TProps_104>;
|
|
122
|
+
tbody: <TProps_105 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_105>[]) => FunctionComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & TProps_105>;
|
|
123
|
+
td: <TProps_106 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_106>[]) => FunctionComponent<React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & TProps_106>;
|
|
124
|
+
textarea: <TProps_107 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_107>[]) => FunctionComponent<React.ClassAttributes<HTMLTextAreaElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement> & TProps_107>;
|
|
125
|
+
tfoot: <TProps_108 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_108>[]) => FunctionComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & TProps_108>;
|
|
126
|
+
th: <TProps_109 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_109>[]) => FunctionComponent<React.ClassAttributes<HTMLTableHeaderCellElement> & React.ThHTMLAttributes<HTMLTableHeaderCellElement> & TProps_109>;
|
|
127
|
+
thead: <TProps_110 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_110>[]) => FunctionComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & TProps_110>;
|
|
128
|
+
time: <TProps_111 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_111>[]) => FunctionComponent<React.ClassAttributes<HTMLTimeElement> & React.TimeHTMLAttributes<HTMLTimeElement> & TProps_111>;
|
|
129
|
+
title: <TProps_112 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_112>[]) => FunctionComponent<React.ClassAttributes<HTMLTitleElement> & React.HTMLAttributes<HTMLTitleElement> & TProps_112>;
|
|
130
|
+
tr: <TProps_113 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_113>[]) => FunctionComponent<React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement> & TProps_113>;
|
|
131
|
+
track: <TProps_114 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_114>[]) => FunctionComponent<React.ClassAttributes<HTMLTrackElement> & React.TrackHTMLAttributes<HTMLTrackElement> & TProps_114>;
|
|
132
|
+
u: <TProps_115 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_115>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_115>;
|
|
133
|
+
ul: <TProps_116 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_116>[]) => FunctionComponent<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & TProps_116>;
|
|
134
|
+
var: <TProps_117 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_117>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_117>;
|
|
135
|
+
video: <TProps_118 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_118>[]) => FunctionComponent<React.ClassAttributes<HTMLVideoElement> & React.VideoHTMLAttributes<HTMLVideoElement> & TProps_118>;
|
|
136
|
+
wbr: <TProps_119 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_119>[]) => FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & TProps_119>;
|
|
137
|
+
webview: <TProps_120 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_120>[]) => FunctionComponent<React.ClassAttributes<HTMLWebViewElement> & React.WebViewHTMLAttributes<HTMLWebViewElement> & TProps_120>;
|
|
138
|
+
svg: <TProps_121 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_121>[]) => FunctionComponent<React.SVGProps<SVGSVGElement> & TProps_121>;
|
|
139
|
+
animate: <TProps_122 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_122>[]) => FunctionComponent<React.SVGProps<SVGElement> & TProps_122>;
|
|
140
|
+
animateMotion: <TProps_123 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_123>[]) => FunctionComponent<React.SVGProps<SVGElement> & TProps_123>;
|
|
141
|
+
animateTransform: <TProps_124 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_124>[]) => FunctionComponent<React.SVGProps<SVGElement> & TProps_124>;
|
|
142
|
+
circle: <TProps_125 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_125>[]) => FunctionComponent<React.SVGProps<SVGCircleElement> & TProps_125>;
|
|
143
|
+
clipPath: <TProps_126 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_126>[]) => FunctionComponent<React.SVGProps<SVGClipPathElement> & TProps_126>;
|
|
144
|
+
defs: <TProps_127 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_127>[]) => FunctionComponent<React.SVGProps<SVGDefsElement> & TProps_127>;
|
|
145
|
+
desc: <TProps_128 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_128>[]) => FunctionComponent<React.SVGProps<SVGDescElement> & TProps_128>;
|
|
146
|
+
ellipse: <TProps_129 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_129>[]) => FunctionComponent<React.SVGProps<SVGEllipseElement> & TProps_129>;
|
|
147
|
+
feBlend: <TProps_130 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_130>[]) => FunctionComponent<React.SVGProps<SVGFEBlendElement> & TProps_130>;
|
|
148
|
+
feColorMatrix: <TProps_131 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_131>[]) => FunctionComponent<React.SVGProps<SVGFEColorMatrixElement> & TProps_131>;
|
|
149
|
+
feComponentTransfer: <TProps_132 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_132>[]) => FunctionComponent<React.SVGProps<SVGFEComponentTransferElement> & TProps_132>;
|
|
150
|
+
feComposite: <TProps_133 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_133>[]) => FunctionComponent<React.SVGProps<SVGFECompositeElement> & TProps_133>;
|
|
151
|
+
feConvolveMatrix: <TProps_134 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_134>[]) => FunctionComponent<React.SVGProps<SVGFEConvolveMatrixElement> & TProps_134>;
|
|
152
|
+
feDiffuseLighting: <TProps_135 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_135>[]) => FunctionComponent<React.SVGProps<SVGFEDiffuseLightingElement> & TProps_135>;
|
|
153
|
+
feDisplacementMap: <TProps_136 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_136>[]) => FunctionComponent<React.SVGProps<SVGFEDisplacementMapElement> & TProps_136>;
|
|
154
|
+
feDistantLight: <TProps_137 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_137>[]) => FunctionComponent<React.SVGProps<SVGFEDistantLightElement> & TProps_137>;
|
|
155
|
+
feDropShadow: <TProps_138 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_138>[]) => FunctionComponent<React.SVGProps<SVGFEDropShadowElement> & TProps_138>;
|
|
156
|
+
feFlood: <TProps_139 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_139>[]) => FunctionComponent<React.SVGProps<SVGFEFloodElement> & TProps_139>;
|
|
157
|
+
feFuncA: <TProps_140 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_140>[]) => FunctionComponent<React.SVGProps<SVGFEFuncAElement> & TProps_140>;
|
|
158
|
+
feFuncB: <TProps_141 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_141>[]) => FunctionComponent<React.SVGProps<SVGFEFuncBElement> & TProps_141>;
|
|
159
|
+
feFuncG: <TProps_142 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_142>[]) => FunctionComponent<React.SVGProps<SVGFEFuncGElement> & TProps_142>;
|
|
160
|
+
feFuncR: <TProps_143 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_143>[]) => FunctionComponent<React.SVGProps<SVGFEFuncRElement> & TProps_143>;
|
|
161
|
+
feGaussianBlur: <TProps_144 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_144>[]) => FunctionComponent<React.SVGProps<SVGFEGaussianBlurElement> & TProps_144>;
|
|
162
|
+
feImage: <TProps_145 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_145>[]) => FunctionComponent<React.SVGProps<SVGFEImageElement> & TProps_145>;
|
|
163
|
+
feMerge: <TProps_146 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_146>[]) => FunctionComponent<React.SVGProps<SVGFEMergeElement> & TProps_146>;
|
|
164
|
+
feMergeNode: <TProps_147 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_147>[]) => FunctionComponent<React.SVGProps<SVGFEMergeNodeElement> & TProps_147>;
|
|
165
|
+
feMorphology: <TProps_148 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_148>[]) => FunctionComponent<React.SVGProps<SVGFEMorphologyElement> & TProps_148>;
|
|
166
|
+
feOffset: <TProps_149 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_149>[]) => FunctionComponent<React.SVGProps<SVGFEOffsetElement> & TProps_149>;
|
|
167
|
+
fePointLight: <TProps_150 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_150>[]) => FunctionComponent<React.SVGProps<SVGFEPointLightElement> & TProps_150>;
|
|
168
|
+
feSpecularLighting: <TProps_151 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_151>[]) => FunctionComponent<React.SVGProps<SVGFESpecularLightingElement> & TProps_151>;
|
|
169
|
+
feSpotLight: <TProps_152 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_152>[]) => FunctionComponent<React.SVGProps<SVGFESpotLightElement> & TProps_152>;
|
|
170
|
+
feTile: <TProps_153 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_153>[]) => FunctionComponent<React.SVGProps<SVGFETileElement> & TProps_153>;
|
|
171
|
+
feTurbulence: <TProps_154 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_154>[]) => FunctionComponent<React.SVGProps<SVGFETurbulenceElement> & TProps_154>;
|
|
172
|
+
filter: <TProps_155 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_155>[]) => FunctionComponent<React.SVGProps<SVGFilterElement> & TProps_155>;
|
|
173
|
+
foreignObject: <TProps_156 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_156>[]) => FunctionComponent<React.SVGProps<SVGForeignObjectElement> & TProps_156>;
|
|
174
|
+
g: <TProps_157 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_157>[]) => FunctionComponent<React.SVGProps<SVGGElement> & TProps_157>;
|
|
175
|
+
image: <TProps_158 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_158>[]) => FunctionComponent<React.SVGProps<SVGImageElement> & TProps_158>;
|
|
176
|
+
line: <TProps_159 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_159>[]) => FunctionComponent<React.SVGLineElementAttributes<SVGLineElement> & TProps_159>;
|
|
177
|
+
linearGradient: <TProps_160 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_160>[]) => FunctionComponent<React.SVGProps<SVGLinearGradientElement> & TProps_160>;
|
|
178
|
+
marker: <TProps_161 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_161>[]) => FunctionComponent<React.SVGProps<SVGMarkerElement> & TProps_161>;
|
|
179
|
+
mask: <TProps_162 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_162>[]) => FunctionComponent<React.SVGProps<SVGMaskElement> & TProps_162>;
|
|
180
|
+
metadata: <TProps_163 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_163>[]) => FunctionComponent<React.SVGProps<SVGMetadataElement> & TProps_163>;
|
|
181
|
+
mpath: <TProps_164 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_164>[]) => FunctionComponent<React.SVGProps<SVGElement> & TProps_164>;
|
|
182
|
+
path: <TProps_165 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_165>[]) => FunctionComponent<React.SVGProps<SVGPathElement> & TProps_165>;
|
|
183
|
+
pattern: <TProps_166 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_166>[]) => FunctionComponent<React.SVGProps<SVGPatternElement> & TProps_166>;
|
|
184
|
+
polygon: <TProps_167 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_167>[]) => FunctionComponent<React.SVGProps<SVGPolygonElement> & TProps_167>;
|
|
185
|
+
polyline: <TProps_168 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_168>[]) => FunctionComponent<React.SVGProps<SVGPolylineElement> & TProps_168>;
|
|
186
|
+
radialGradient: <TProps_169 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_169>[]) => FunctionComponent<React.SVGProps<SVGRadialGradientElement> & TProps_169>;
|
|
187
|
+
rect: <TProps_170 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_170>[]) => FunctionComponent<React.SVGProps<SVGRectElement> & TProps_170>;
|
|
188
|
+
stop: <TProps_171 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_171>[]) => FunctionComponent<React.SVGProps<SVGStopElement> & TProps_171>;
|
|
189
|
+
switch: <TProps_172 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_172>[]) => FunctionComponent<React.SVGProps<SVGSwitchElement> & TProps_172>;
|
|
190
|
+
text: <TProps_173 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_173>[]) => FunctionComponent<React.SVGTextElementAttributes<SVGTextElement> & TProps_173>;
|
|
191
|
+
textPath: <TProps_174 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_174>[]) => FunctionComponent<React.SVGProps<SVGTextPathElement> & TProps_174>;
|
|
192
|
+
tspan: <TProps_175 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_175>[]) => FunctionComponent<React.SVGProps<SVGTSpanElement> & TProps_175>;
|
|
193
|
+
use: <TProps_176 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_176>[]) => FunctionComponent<React.SVGProps<SVGUseElement> & TProps_176>;
|
|
194
|
+
view: <TProps_177 extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps_177>[]) => FunctionComponent<React.SVGProps<SVGViewElement> & TProps_177>;
|
|
182
195
|
};
|
|
183
196
|
//# sourceMappingURL=styled.d.ts.map
|
package/dist/styled.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../runtime/styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAO,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../runtime/styled.tsx"],"names":[],"mappings":"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"}
|
package/dist/styled.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "./cssLiteral";
|
|
2
2
|
import React from "react";
|
|
3
|
-
|
|
3
|
+
function StyledFactory(Component) {
|
|
4
4
|
return (styles, ...values) => {
|
|
5
5
|
return (props) => {
|
|
6
6
|
const runtimeStyles = css(styles, ...values)(props);
|
|
@@ -9,7 +9,21 @@ const StyledFactory = function (Component) {
|
|
|
9
9
|
runtimeStyles.className }));
|
|
10
10
|
};
|
|
11
11
|
};
|
|
12
|
-
}
|
|
12
|
+
}
|
|
13
|
+
;
|
|
14
|
+
/**
|
|
15
|
+
* The `styled` method works perfectly on all of your own or any third-party component,
|
|
16
|
+
* as long as they attach the passed className prop to a DOM element.
|
|
17
|
+
*
|
|
18
|
+
* @usage
|
|
19
|
+
*
|
|
20
|
+
* ```tsx
|
|
21
|
+
* const StyledLink = styled(Link)`
|
|
22
|
+
* color: #BF4F74;
|
|
23
|
+
* font-weight: bold;
|
|
24
|
+
* `;
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
13
27
|
export const styled = new Proxy(StyledFactory, {
|
|
14
28
|
get(target, TagName) {
|
|
15
29
|
if (typeof TagName !== "string") {
|
package/dist/styled.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sourceRoot":"","sources":["../runtime/styled.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,GAAG,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"styled.js","sourceRoot":"","sources":["../runtime/styled.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,GAAG,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,SAAS,aAAa,CAAE,SAA0C;IAChE,OAAO,CACL,MAA4B,EAC5B,GAAG,MAAkC,EACrC,EAAE;QACF,OAAO,CAAC,KAAa,EAAE,EAAE;YACvB,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,KAAY,CAAC,CAAC;YAC3D,MAAM,aAAa,GACjB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC1E,OAAO,CACL,oBAAC,SAAS,OACJ,aAAa,EACjB,KAAK,EAAE,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,GAAG,aAAa,CAAC,KAAK,EAAE,EACzD,SAAS,EACP,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC9C,aAAa,CAAC,SAAS,GAEzB,CACH,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAAA,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,aAAa,EAAE;IAC7C,GAAG,CAAC,MAAM,EAAE,OAAO;QACjB,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;SACnD;QACD,OAAO,MAAM,CAAC,OAAsC,CAAC,CAAC;IACxD,CAAC;CACF,CAOA,CAAC;AAEF,8CAA8C;AAC9C,SAAS,wBAAwB,CAAoC,GAAM;IACzE,MAAM,MAAM,GAAG,EAAO,CAAC;IACvB,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACrB,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACxB,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;SACxB;KACF;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}
|
package/loaders/cssloader.cjs
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
const babel = require("@babel/core");
|
|
3
3
|
const quasiClassifier = require("./lib/quasiClassifier.cjs");
|
|
4
4
|
const replaceQuasiExpressionTokens = require("./lib/replaceQuasiExpressionTokens.cjs");
|
|
5
|
-
const loadConfigOnce = require("./lib/loadConfigOnce.cjs");
|
|
6
5
|
const murmurhash2_32_gc = require("./lib/hash.cjs");
|
|
7
6
|
const { relative, resolve } = require("path");
|
|
8
7
|
|
|
@@ -15,14 +14,15 @@ module.exports = async function cssLoader(source) {
|
|
|
15
14
|
// Config for replacing tokens in css template literals
|
|
16
15
|
// can be based on a typescript file
|
|
17
16
|
const options = this.getOptions();
|
|
18
|
-
const config = options.configPath ? await
|
|
19
|
-
|
|
20
|
-
) : {};
|
|
17
|
+
const config = options.configPath ? await this.importModule(resolve(this.rootContext, options.configPath), {
|
|
18
|
+
layer: "yak-importModule",
|
|
19
|
+
}) : {};
|
|
21
20
|
const replaces = config.replaces || {};
|
|
22
21
|
|
|
23
22
|
// parse source with babel
|
|
24
23
|
const ast = babel.parseSync(source, {
|
|
25
24
|
filename: this.resourcePath,
|
|
25
|
+
configFile: false,
|
|
26
26
|
plugins: [
|
|
27
27
|
[
|
|
28
28
|
"@babel/plugin-syntax-typescript",
|
package/loaders/tsloader.cjs
CHANGED
|
@@ -3,7 +3,6 @@ const path = require("path");
|
|
|
3
3
|
const babel = require("@babel/core");
|
|
4
4
|
const quasiClassifier = require("./lib/quasiClassifier.cjs");
|
|
5
5
|
const replaceQuasiExpressionTokens = require("./lib/replaceQuasiExpressionTokens.cjs");
|
|
6
|
-
const loadConfigOnce = require("./lib/loadConfigOnce.cjs");
|
|
7
6
|
const murmurhash2_32_gc = require("./lib/hash.cjs");
|
|
8
7
|
const { relative, resolve } = require("path");
|
|
9
8
|
|
|
@@ -22,9 +21,9 @@ module.exports = async function tsloader(source) {
|
|
|
22
21
|
// Config for replacing tokens in css template literals
|
|
23
22
|
// can be based on a typescript file
|
|
24
23
|
const options = this.getOptions();
|
|
25
|
-
const config = options.configPath ? await
|
|
26
|
-
|
|
27
|
-
) : {};
|
|
24
|
+
const config = options.configPath ? await this.importModule(resolve(this.rootContext, options.configPath), {
|
|
25
|
+
layer: "yak-importModule",
|
|
26
|
+
}) : {};
|
|
28
27
|
const replaces = config.replaces || {};
|
|
29
28
|
|
|
30
29
|
/** @type {string | null} */
|
|
@@ -36,6 +35,7 @@ module.exports = async function tsloader(source) {
|
|
|
36
35
|
// parse source with babel
|
|
37
36
|
const result = babel.transformSync(source, {
|
|
38
37
|
filename: this.resourcePath,
|
|
38
|
+
configFile: false,
|
|
39
39
|
// Only for parsing - will be removed once moved to a swc or babel plugin
|
|
40
40
|
plugins: [
|
|
41
41
|
[
|
package/loaders/withYak.cjs
CHANGED
|
@@ -17,6 +17,11 @@ const addYak = (yakOptions, nextConfig) => {
|
|
|
17
17
|
test: /\.tsx?$/,
|
|
18
18
|
loader: require.resolve("./tsloader.cjs"),
|
|
19
19
|
options: yakOptions,
|
|
20
|
+
issuerLayer: {
|
|
21
|
+
// prevent recursions when calling this.importModule
|
|
22
|
+
// in the tsloader
|
|
23
|
+
not: ["yak-importModule"],
|
|
24
|
+
},
|
|
20
25
|
});
|
|
21
26
|
webpackConfig.module.rules.push({
|
|
22
27
|
test: /\.yak\.module\.css$/,
|
package/package.json
CHANGED
package/runtime/styled.tsx
CHANGED
|
@@ -2,7 +2,21 @@ import { FunctionComponent } from "react";
|
|
|
2
2
|
import { CSSInterpolation, css } from "./cssLiteral";
|
|
3
3
|
import React from "react";
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
//
|
|
6
|
+
// The `styled()` and `styled.` API
|
|
7
|
+
//
|
|
8
|
+
// The API design is inspired by styled-components:
|
|
9
|
+
// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx
|
|
10
|
+
// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts
|
|
11
|
+
//
|
|
12
|
+
|
|
13
|
+
type HtmlTags = keyof JSX.IntrinsicElements;
|
|
14
|
+
|
|
15
|
+
function StyledFactory <THtmlTag extends HtmlTags>(Component: THtmlTag): <TProps extends Record<string, unknown>>(
|
|
16
|
+
styles: TemplateStringsArray,
|
|
17
|
+
...values: CSSInterpolation<TProps>[]
|
|
18
|
+
) => FunctionComponent<JSX.IntrinsicElements[THtmlTag] & TProps>;
|
|
19
|
+
function StyledFactory (Component: string | FunctionComponent<any>) {
|
|
6
20
|
return <TProps extends Record<string, unknown>>(
|
|
7
21
|
styles: TemplateStringsArray,
|
|
8
22
|
...values: CSSInterpolation<TProps>[]
|
|
@@ -25,15 +39,33 @@ const StyledFactory = function (Component: string | FunctionComponent<any>) {
|
|
|
25
39
|
};
|
|
26
40
|
};
|
|
27
41
|
|
|
42
|
+
/**
|
|
43
|
+
* The `styled` method works perfectly on all of your own or any third-party component,
|
|
44
|
+
* as long as they attach the passed className prop to a DOM element.
|
|
45
|
+
*
|
|
46
|
+
* @usage
|
|
47
|
+
*
|
|
48
|
+
* ```tsx
|
|
49
|
+
* const StyledLink = styled(Link)`
|
|
50
|
+
* color: #BF4F74;
|
|
51
|
+
* font-weight: bold;
|
|
52
|
+
* `;
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
28
55
|
export const styled = new Proxy(StyledFactory, {
|
|
29
56
|
get(target, TagName) {
|
|
30
57
|
if (typeof TagName !== "string") {
|
|
31
58
|
throw new Error("Only string tags are supported");
|
|
32
59
|
}
|
|
33
|
-
return target(TagName);
|
|
60
|
+
return target(TagName as keyof JSX.IntrinsicElements);
|
|
34
61
|
},
|
|
35
|
-
}) as
|
|
36
|
-
|
|
62
|
+
}) as (
|
|
63
|
+
<TBaseProps extends {}>(Component: FunctionComponent<TBaseProps>) => <TProps extends {}>(
|
|
64
|
+
styles: TemplateStringsArray,
|
|
65
|
+
...values: CSSInterpolation<TProps>[]
|
|
66
|
+
) => FunctionComponent<TBaseProps & TProps>
|
|
67
|
+
) & {
|
|
68
|
+
[TagName in HtmlTags]: ReturnType<typeof StyledFactory<TagName>>;
|
|
37
69
|
};
|
|
38
70
|
|
|
39
71
|
// Remove all entries that start with a $ sign
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/// @ts-check
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @type {Promise<{ replaces?: Record<string, Record<string, string>> }>}
|
|
5
|
-
*/
|
|
6
|
-
let cache;
|
|
7
|
-
module.exports = function loadConfigOnce(loader) {
|
|
8
|
-
const config = cache || loader().catch((e) => {
|
|
9
|
-
console.error("Failed to load yak config:", e);
|
|
10
|
-
return {};
|
|
11
|
-
})
|
|
12
|
-
|
|
13
|
-
if (!cache) {
|
|
14
|
-
cache = config;
|
|
15
|
-
}
|
|
16
|
-
return config;
|
|
17
|
-
};
|