1 | # @emotion/babel-preset-css-prop
|
2 |
|
3 | > A babel preset to automatically enable emotion's css prop
|
4 |
|
5 | - [Install](#install)
|
6 | - [Usage](#usage)
|
7 | - [Features](#features)
|
8 | - [Options](#options)
|
9 |
|
10 | ## Install
|
11 |
|
12 | ```bash
|
13 | yarn add @emotion/babel-preset-css-prop
|
14 | ```
|
15 |
|
16 | ## Usage
|
17 |
|
18 | **.babelrc**
|
19 |
|
20 | ```json
|
21 | {
|
22 | "presets": ["@emotion/babel-preset-css-prop"]
|
23 | }
|
24 | ```
|
25 |
|
26 | ### Via CLI
|
27 |
|
28 | ```bash
|
29 | babel --presets @emotion/babel-preset-css-prop script.js
|
30 | ```
|
31 |
|
32 | ### Via Node API
|
33 |
|
34 | ```javascript
|
35 | require('@babel/core').transform(code, {
|
36 | presets: ['@emotion/babel-preset-css-prop']
|
37 | })
|
38 | ```
|
39 |
|
40 | ## Features
|
41 |
|
42 | This preset enables the `css` prop for an entire project via a single entry to the babel configuration. After adding the preset, compiled jsx code will use emotion's `jsx` function instead of `React.createElement`.
|
43 |
|
44 | | | Input | Output |
|
45 | | ------ | -------------------------- | --------------------------------------------------- |
|
46 | | Before | `<img src="avatar.png" />` | `React.createElement('img', { src: 'avatar.png' })` |
|
47 | | After | `<img src="avatar.png" />` | `jsx('img', { src: 'avatar.png' })` |
|
48 |
|
49 | `import { jsx } from '@emotion/core'` is automatically added to the top of files where required.
|
50 |
|
51 | ## Example
|
52 |
|
53 | **In**
|
54 |
|
55 | ```javascript
|
56 | const Link = props => (
|
57 | <a
|
58 | css={{
|
59 | color: 'hotpink',
|
60 | '&:hover': {
|
61 | color: 'darkorchid'
|
62 | }
|
63 | }}
|
64 | {...props}
|
65 | />
|
66 | )
|
67 | ```
|
68 |
|
69 | **Out**
|
70 |
|
71 | ```javascript
|
72 | import { jsx as ___EmotionJSX } from '@emotion/core'
|
73 |
|
74 | function _extends() {
|
75 | /* babel Object.assign polyfill */
|
76 | }
|
77 |
|
78 | var _ref =
|
79 | process.env.NODE_ENV === 'production'
|
80 | ? {
|
81 | name: '1fpk7dx-Link',
|
82 | styles: 'color:hotpink;&:hover{color:darkorchid;}label:Link;'
|
83 | }
|
84 | : {
|
85 | name: '1fpk7dx-Link',
|
86 | styles: 'color:hotpink;&:hover{color:darkorchid;}label:Link;',
|
87 | map:
|
88 | '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF1dG9tYXRpYy1pbXBvcnQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUkiLCJmaWxlIjoiYXV0b21hdGljLWltcG9ydC5qcyIsInNvdXJjZXNDb250ZW50IjpbImNvbnN0IExpbmsgPSBwcm9wcyA9PiAoXG4gIDxhXG4gICAgY3NzPXt7XG4gICAgICBjb2xvcjogJ2hvdHBpbmsnLFxuICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgIGNvbG9yOiAnZGFya29yY2hpZCdcbiAgICAgIH1cbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbilcbiJdfQ== */'
|
89 | }
|
90 |
|
91 | const Link = props =>
|
92 | ___EmotionJSX(
|
93 | 'a',
|
94 | _extends(
|
95 | {
|
96 | css: _ref
|
97 | },
|
98 | props
|
99 | )
|
100 | )
|
101 | ```
|
102 |
|
103 | _In addition to the custom pragma, this example includes `babel-plugin-emotion` transforms that are enabled by default._
|
104 |
|
105 | ## Options
|
106 |
|
107 | Options for both `babel-plugin-emotion` and `@babel/plugin-transform-react-jsx` are supported and will be forwarded to their respective plugin.
|
108 |
|
109 | > Refer to the plugin's documentation for full option documentation.
|
110 | >
|
111 | > - [`babel-plugin-emotion`](https://emotion.sh/docs/babel)
|
112 | >
|
113 | > - [`@babel/plugin-transform-react-jsx`](https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx)
|
114 |
|
115 | ### Examples
|
116 |
|
117 | ```json
|
118 | {
|
119 | "presets": [
|
120 | "@emotion/babel-preset-css-prop",
|
121 | {
|
122 | "autoLabel": true,
|
123 | "labelFormat": "[local]",
|
124 | "useBuiltIns": false,
|
125 | "throwIfNamespace": true
|
126 | }
|
127 | ]
|
128 | }
|
129 | ```
|
130 |
|
131 | _Options set to default values for demonstration purposes._
|
132 |
|
133 | It is possible to set the options for `babel-plugin-emotion` on the plugin directly. `@babel/plugin-transform-react-jsx` options must be defined in the `@emotion/babel-preset-css-prop` preset.
|
134 |
|
135 | ```json
|
136 | {
|
137 | "presets": [
|
138 | "@emotion/babel-preset-css-prop",
|
139 | {
|
140 | "useBuiltIns": false,
|
141 | "throwIfNamespace": true
|
142 | }
|
143 | ],
|
144 | "plugins": [
|
145 | [
|
146 | "emotion",
|
147 | {
|
148 | "autoLabel": true,
|
149 | "labelFormat": "[local]"
|
150 | }
|
151 | ]
|
152 | ]
|
153 | }
|
154 | ```
|
155 |
|
156 | _Options set to default values for demonstration purposes._
|