JSX transforms #3
Conversation
|
Awesome! Let's review and merge this as soon as #2 is merged. |
|
@danielberndt let's get this merged too 🚀 |
danielberndt
force-pushed
the
jsx
branch
2 times, most recently
from
a16d1db to
96dda76
Compare
|
I just added the withBabelPlugin option flag for you to review :) |
index.js
Outdated
| const stylesArguments = []; | ||
| let classNameAttr = null; | ||
| let originalCssValue; | ||
| const newAttrs = jsxAttrs.filter(attr => { |
There was a problem hiding this comment.
Can we name newAttrs a bit more descriptively?
index.js
Outdated
| @@ -101,30 +180,45 @@ module.exports = function(babel) { | |||
| } | |||
|
|
|||
| // use "styled" as new default import, only if there's no such variable in use yet | |||
There was a problem hiding this comment.
Ah, this comment is not up to date anymore. I'll fix it
There was a problem hiding this comment.
@danielberndt looking forward to it
|
new update is in :) |
index.js
Outdated
| @@ -47,7 +47,7 @@ module.exports = function(babel) { | |||
| const stylesArguments = []; | |||
| let classNameAttr = null; | |||
| let originalCssValue; | |||
| const newAttrs = jsxAttrs.filter(attr => { | |||
| const transformedJsxAttrs = jsxAttrs.filter(attr => { | |||
There was a problem hiding this comment.
Sorry to be a pain! But transformedJsxAttrs => transformed from what? A little
/**
* this does this
*/
would be helpful
There was a problem hiding this comment.
no worries :) Update is in.
README.md
Outdated
| @@ -19,6 +19,21 @@ You'll need to use [`babel-codemod`](https://github.com/square/babel-codemod) to | |||
|
|
|||
| This will put you fully in emotion-land. | |||
|
|
|||
| ### Options | |||
|
|
|||
| you may also pass a `--plugin-options` argument to the `babel-codemod` command. Here are the available options: | |||
README.md
Outdated
|
|
||
| - **`withBabelPlugin=true`** | ||
|
|
||
| assumes that your emotion setup includes the [emotion-babel-plugin](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion). Without this option, `<glamorous.Div marginTop={5}/>` gets translated to `<div className={css({marginTop: 5})}>`. |
README.md
Outdated
|
|
||
| - **`preact=true`** | ||
|
|
||
| Uses `import styled from preact-emotion` instead of `import styled from react-emotion` |
There was a problem hiding this comment.
-from preact-emotion
+from "preact-emotion"
|
@danielberndt you rock so hard it's unreal. ⛰ |
|
I think you should go over here and tell everyone what's available now. 😉 |
|
Haha, good point! Done 👍 |
This PR adds support for the
<glamorous.Div>transforms. It uses thereact-html-attributespackage for identifying all valid html attributes on an component and considers all other attributes as styling properties.react-html-attributesto distinguish html from css properties