0
# Babel Macro
1

2
Babel macro functionality for using css.resolve without babel configuration, supporting the babel-plugin-macros ecosystem.
3

4
## Capabilities
5

6
### resolve Function (Named Export)
7

8
Babel macro version of css.resolve that works with babel-plugin-macros without requiring styled-jsx babel plugin configuration.
9

10
```typescript { .api }
11
/**
12
 * Babel macro for css.resolve functionality
13
 * @param chunks - Template literal string chunks
14
 * @param args - Template literal interpolated values
15
 * @returns Object with className and styles (after macro transformation)
16
 */
17
function resolve(
18
  chunks: TemplateStringsArray,
19
  ...args: any[]
20
): {
21
  className: string;
22
  styles: JSX.Element;
23
}
24
```
25

26
**Setup Requirements:**
27

28
```bash
29
npm install styled-jsx babel-plugin-macros
30
```
31

32
Babel configuration:
33

34
```json
35
{
36
  "plugins": ["babel-plugin-macros"]
37
}
38
```
39

40
**Usage Examples:**
41

42
```jsx
43
import { resolve } from 'styled-jsx/macro';
44

45
// Basic macro usage
46
function MacroStyledComponent() {
47
  const { className, styles } = resolve`
48
    .button {
49
      background: #007bff;
50
      color: white;
51
      border: none;
52
      padding: 12px 24px;
53
      border-radius: 4px;
54
      cursor: pointer;
55
      font-size: 16px;
56
    }
57
    .button:hover {
58
      background: #0056b3;
59
    }
60
  `;
61
  
62
  return (
63
    <div>
64
      <button className={className}>Click me</button>
65
      {styles}
66
    </div>
67
  );
68
}
69

70
// Dynamic styles with interpolation
71
function DynamicMacroComponent({ color, size }) {
72
  const { className, styles } = resolve`
73
    .dynamic {
74
      color: ${color};
75
      font-size: ${size};
76
      padding: 8px 16px;
77
      border: 2px solid ${color};
78
      border-radius: 4px;
79
      background: transparent;
80
      transition: all 0.2s;
81
    }
82
    .dynamic:hover {
83
      background: ${color};
84
      color: white;
85
    }
86
  `;
87
  
88
  return (
89
    <div>
90
      <div className={className}>Dynamic styled content</div>
91
      {styles}
92
    </div>
93
  );
94
}
95
```
96

97
### Default Export Macro
98

99
Default macro that provides css.resolve via member expression (css.resolve`...`).
100

101
```typescript { .api }
102
/**
103
 * Default macro function providing css.resolve via member expression
104
 * Usage: import css from 'styled-jsx/macro'; css.resolve`...`
105
 */
106
const macro: {
107
  resolve(
108
    chunks: TemplateStringsArray,
109
    ...args: any[]
110
  ): { className: string; styles: JSX.Element };
111
};
112
```
113

114
**Usage Examples:**
115

116
```jsx
117
import css from 'styled-jsx/macro';
118

119
// Using default export with member expression
120
function DefaultMacroComponent() {
121
  const { className, styles } = css.resolve`
122
    .card {
123
      background: white;
124
      border: 1px solid #e1e5e9;
125
      border-radius: 8px;
126
      padding: 20px;
127
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
128
    }
129
    .card:hover {
130
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
131
    }
132
  `;
133
  
134
  return (
135
    <div>
136
      <div className={className}>Card content</div>
137
      {styles}
138
    </div>
139
  );
140
}
141

142
// Complex component with multiple resolved styles
143
function ComplexMacroComponent({ theme, isActive }) {
144
  const headerStyle = css.resolve`
145
    .header {
146
      background: ${theme.headerBg};
147
      color: ${theme.headerText};
148
      padding: 16px 20px;
149
      border-bottom: 1px solid ${theme.border};
150
      font-weight: 600;
151
    }
152
  `;
153
  
154
  const contentStyle = css.resolve`
155
    .content {
156
      padding: 20px;
157
      background: ${theme.contentBg};
158
      color: ${theme.contentText};
159
      min-height: 200px;
160
    }
161
  `;
162
  
163
  const buttonStyle = css.resolve`
164
    .button {
165
      background: ${isActive ? theme.primary : theme.secondary};
166
      color: white;
167
      border: none;
168
      padding: 10px 20px;
169
      border-radius: 4px;
170
      cursor: pointer;
171
      margin-top: 16px;
172
      transition: opacity 0.2s;
173
    }
174
    .button:hover {
175
      opacity: 0.9;
176
    }
177
    .button:disabled {
178
      opacity: 0.5;
179
      cursor: not-allowed;
180
    }
181
  `;
182
  
183
  return (
184
    <div>
185
      <div className={headerStyle.className}>
186
        Component Header
187
      </div>
188
      <div className={contentStyle.className}>
189
        <p>Component content goes here</p>
190
        <button 
191
          className={buttonStyle.className}
192
          disabled={!isActive}
193
        >
194
          {isActive ? 'Active' : 'Inactive'}
195
        </button>
196
      </div>
197
      {headerStyle.styles}
198
      {contentStyle.styles}
199
      {buttonStyle.styles}
200
    </div>
201
  );
202
}
203
```
204

205
### Macro vs Regular styled-jsx/css
206

207
Comparison between macro and regular styled-jsx/css usage patterns.
208

209
**Regular styled-jsx/css (requires babel plugin):**
210

211
```jsx
212
// .babelrc
213
{
214
  "plugins": ["styled-jsx/babel"]
215
}
216

217
// Component
218
import css from 'styled-jsx/css';
219

220
const { className, styles } = css.resolve`
221
  .button { background: blue; }
222
`;
223
```
224

225
**Macro version (only requires babel-plugin-macros):**
226

227
```jsx
228
// .babelrc  
229
{
230
  "plugins": ["babel-plugin-macros"]
231
}
232

233
// Component
234
import { resolve } from 'styled-jsx/macro';
235
// OR
236
import css from 'styled-jsx/macro';
237

238
const { className, styles } = resolve`
239
  .button { background: blue; }
240
`;
241
// OR
242
const { className, styles } = css.resolve`
243
  .button { background: blue; }
244
`;
245
```
246

247
### Migration from css.resolve to Macro
248

249
Step-by-step migration guide from regular styled-jsx/css to macro version.
250

251
**Before (styled-jsx/css):**
252

253
```jsx
254
import css from 'styled-jsx/css';
255

256
function Component() {
257
  const { className, styles } = css.resolve`
258
    .element {
259
      color: red;
260
      padding: 10px;
261
    }
262
  `;
263
  
264
  return (
265
    <div>
266
      <span className={className}>Text</span>
267
      {styles}
268
    </div>
269
  );
270
}
271
```
272

273
**After (macro):**
274

275
```jsx
276
// Option 1: Named import
277
import { resolve } from 'styled-jsx/macro';
278

279
function Component() {
280
  const { className, styles } = resolve`
281
    .element {
282
      color: red;
283
      padding: 10px;
284
    }
285
  `;
286
  
287
  return (
288
    <div>
289
      <span className={className}>Text</span>
290
      {styles}
291
    </div>
292
  );
293
}
294

295
// Option 2: Default import with member expression
296
import css from 'styled-jsx/macro';
297

298
function Component() {
299
  const { className, styles } = css.resolve`
300
    .element {
301
      color: red;
302
      padding: 10px;
303
    }
304
  `;
305
  
306
  return (
307
    <div>
308
      <span className={className}>Text</span>
309
      {styles}
310
    </div>
311
  );
312
}
313
```
314

315
### Macro Configuration
316

317
Babel plugin macros configuration options and advanced usage.
318

319
**babel-plugin-macros configuration (optional):**
320

321
```javascript
322
// babel-plugin-macros.config.js
323
module.exports = {
324
  'styled-jsx': {
325
    // Macro-specific options can be configured here
326
    optimizeForSpeed: process.env.NODE_ENV === 'production',
327
    sourceMaps: process.env.NODE_ENV !== 'production'
328
  }
329
};
330
```
331

332
**Usage with Create React App:**
333

334
```jsx
335
// No additional babel configuration needed
336
// Create React App includes babel-plugin-macros by default
337

338
import { resolve } from 'styled-jsx/macro';
339

340
function CRAComponent() {
341
  const { className, styles } = resolve`
342
    .cra-component {
343
      background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
344
      color: white;
345
      padding: 20px;
346
      border-radius: 8px;
347
      text-align: center;
348
    }
349
  `;
350
  
351
  return (
352
    <div>
353
      <div className={className}>
354
        This works in Create React App without ejecting!
355
      </div>
356
      {styles}
357
    </div>
358
  );
359
}
360
```
361

362
**Integration with TypeScript:**
363

364
```tsx
365
// Works with TypeScript out of the box
366
import { resolve } from 'styled-jsx/macro';
367

368
interface ThemeProps {
369
  primary: string;
370
  secondary: string;
371
}
372

373
function TypeScriptMacroComponent({ theme }: { theme: ThemeProps }) {
374
  const { className, styles } = resolve`
375
    .themed {
376
      background: ${theme.primary};
377
      color: ${theme.secondary};
378
      padding: 16px;
379
      border-radius: 4px;
380
    }
381
  `;
382
  
383
  return (
384
    <div>
385
      <div className={className}>
386
        TypeScript + Macro = ❤️
387
      </div>
388
      {styles}
389
    </div>
390
  );
391
}
392
```