@@ -67,4 +67,103 @@ describe('javascript tests', () => {
67
67
} ) ;
68
68
} ) ;
69
69
} ) ;
70
+
71
+ it ( 'works with vue-emotion' , ( ) => {
72
+ // Related issues:
73
+ // - https://github.com/stylelint/stylelint/issues/4247
74
+ // - https://github.com/gucong3000/postcss-jsx/issues/63
75
+ // - https://github.com/stylelint/postcss-css-in-js/issues/22
76
+ const parsed = syntax . parse ( `
77
+ import styled from 'vue-emotion';
78
+
79
+ const Wrapper = styled('div')\`
80
+ left: 0;
81
+ top: 0;
82
+ width: 100%;
83
+ height: 100%;
84
+ \`;
85
+ ` ) ;
86
+
87
+ expect ( parsed . nodes ) . toHaveLength ( 1 ) ;
88
+ } ) ;
89
+
90
+ it ( 'works with @emotion/styled' , ( ) => {
91
+ const parsed = syntax . parse ( `
92
+ import styled from '@emotion/styled';
93
+
94
+ const Wrapper = styled.div\`
95
+ left: 0;
96
+ \`;
97
+ ` ) ;
98
+
99
+ expect ( parsed . nodes ) . toHaveLength ( 1 ) ;
100
+ } ) ;
101
+
102
+ it ( 'works with css objects' , ( ) => {
103
+ // It should parse:
104
+ // - Inline objects (inside of the JSX)
105
+ // - Variables that are referenced inside of the JSX
106
+ // - Variables that are referenced as spread
107
+ const parsed = syntax . parse ( `
108
+ import React from 'react';
109
+
110
+ const spreaded = {
111
+ width: 100,
112
+ padding: 40,
113
+ };
114
+
115
+ const notInline = {
116
+ ...spreaded,
117
+ margin: 60,
118
+ };
119
+
120
+ const Component = () => (
121
+ <div css={{
122
+ ...spreaded,
123
+ margin: 60,
124
+ }}>
125
+ some other text
126
+ <span css={notInline}>Hello</span>
127
+ </div>
128
+ );
129
+ ` ) ;
130
+
131
+ expect ( parsed . nodes ) . toHaveLength ( 3 ) ;
132
+ } ) ;
133
+
134
+ it ( 'works with css object functions' , ( ) => {
135
+ // Just like the previous test, both inline and variable styles should be parsed. It should
136
+ // also parse objects if they are defined in a arrow function, which is for example what is
137
+ // used by emotion-theming.
138
+ // See also:
139
+ // - https://github.com/gucong3000/postcss-jsx/issues/69
140
+ // - https://github.com/stylelint/postcss-css-in-js/issues/22
141
+ const parsed = syntax . parse ( `
142
+ import React from 'react';
143
+
144
+ const spreaded = {
145
+ width: 100,
146
+ padding: 40,
147
+ }
148
+
149
+ const notInline = theme => ({
150
+ ...spreaded,
151
+ margin: 60,
152
+ color: theme.color.primary,
153
+ });
154
+
155
+ const Component = () => (
156
+ <div css={theme => ({
157
+ ...spreaded,
158
+ margin: 60,
159
+ color: theme.color.primary,
160
+ })}>
161
+ some other text
162
+ <span css={notInline}>Hello</span>
163
+ </div>
164
+ );
165
+ ` ) ;
166
+
167
+ expect ( parsed . nodes ) . toHaveLength ( 3 ) ;
168
+ } ) ;
70
169
} ) ;
0 commit comments