1 | import {
|
2 | flush,
|
3 | hydrate,
|
4 | cx,
|
5 | merge,
|
6 | getRegisteredStyles,
|
7 | css,
|
8 | injectGlobal,
|
9 | keyframes,
|
10 | sheet,
|
11 | cache
|
12 | } from 'emotion'
|
13 |
|
14 | flush()
|
15 |
|
16 | hydrate(['css-123', 'css-456'])
|
17 |
|
18 | const cssObject = {
|
19 | height: 100,
|
20 | width: '100%',
|
21 | display: 'block',
|
22 | position: undefined,
|
23 | ':hover': {
|
24 | display: 'block'
|
25 | }
|
26 | }
|
27 |
|
28 | const className: string = css`
|
29 | ${(true as boolean) && ''}
|
30 | ${'bar'}
|
31 | ${css``}
|
32 | ${1}
|
33 | ${cssObject}
|
34 | `
|
35 |
|
36 | const className2: string = css(cssObject)
|
37 |
|
38 | css([{ display: 'none' }, [{ position: 'relative' }, { width: 100 }]])
|
39 |
|
40 | css({ display: 'none' }, [{ position: 'relative' }, { width: 100 }])
|
41 |
|
42 | css(null)
|
43 |
|
44 | injectGlobal`
|
45 | #foo {
|
46 | font-face: 'Foo';
|
47 | }
|
48 | `
|
49 |
|
50 | injectGlobal({
|
51 | html: {
|
52 | width: '100vw',
|
53 | height: '100vh'
|
54 | },
|
55 | '#root': {
|
56 | fontWeight: 'bold'
|
57 | }
|
58 | })
|
59 |
|
60 | keyframes({
|
61 | '0%': {
|
62 | transform: 'scaleY(0.5)'
|
63 | },
|
64 | to: {
|
65 | transform: 'scaleY(1)'
|
66 | }
|
67 | })
|
68 |
|
69 | keyframes`
|
70 | 0% {
|
71 | transform: translateX(100%);
|
72 | }
|
73 | 40% {
|
74 | transform: translateX(50%);
|
75 | }
|
76 | 60% {
|
77 | transform: translateX(30%);
|
78 | }
|
79 | 100% {
|
80 | transform: translateX(100%);
|
81 | }
|
82 | `
|
83 |
|
84 | const cxResult: string = cx([
|
85 | [className, false && className2, 'modal'],
|
86 | [[className, { [className2]: true }, 'profile']]
|
87 | ])
|
88 |
|
89 | merge(`class1 class2 ${className}`)
|
90 |
|
91 | getRegisteredStyles([], className)
|