-
Notifications
You must be signed in to change notification settings - Fork 265
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Doesn't compile <style jsx>
when rendering multiple components per file
#12
Comments
@jacobmischka Does 0.0.3 work? |
It does not seem to. Here's where I'm using it: https://gist.github.com/ebc481015aa80af18efc38465fcb8657 babelrc:
|
Actually sorry, here's my repo: https://github.com/jacobmischka/ics-merger/tree/styled-jsx Relevant file is |
Oh sorry, you'll need a |
I'll try to create a minimum reproducible repo at some point later today when I get a few minutes, thank you! |
Oh you're right, it's doing that for me too. I didn't even check, I just assumed it failed because of the errors. |
I can confirm this is happening for me, as well. If I run tshugart:skate-styled-jsx tshugart$ babel src/index.js --plugins styled-jsx/babel
/** @jsx h */
import 'skatejs-web-components';
import { Component, define, h } from 'skatejs';
const Test = define('x-test', class extends Component {
renderCallback() {
return <p><slot /></p>;
}
});
window.customElements.define('x-app', class extends Component {
renderCallback() {
return <div>
<p>this should be bold</p>
<Test>this should not be</Test>
<style jsx>{'p { font-weight: bold }'}</style>
</div>;
}
}); I'm assuming, that at the very least, the |
I have the this bug too, I added: "plugins": [
"styled-jsx/babel"
] To my <style jsx>{`
article {
color: blue;
}
`}</style> And React is adding the |
everyone should try styled-jsx@0.0.5 which should fix it |
@hzoo still seems to be an issue with 0.0.5. Is there something we're doing wrong? My {
"plugins": ["styled-jsx/babel"]
} I have tshugart:skate-styled-jsx tshugart$ babel src/index.js
/** @jsx h */
import 'skatejs-web-components';
import { Component, define, h } from 'skatejs';
const Test = define('x-test', class extends Component {
renderCallback() {
return <p><slot /></p>;
}
});
window.customElements.define('x-app', class extends Component {
renderCallback() {
return <div>
<p>this should be bold</p>
<Test>this should not be</Test>
<style jsx>{'p { font-weight: bold }'}</style>
</div>;
}
}); |
Now I have the error described in #16 |
I can confirm that 0.0.5 does not resolve the issue I am having. Let me know if I can give more information to troubleshoot this somehow! Edit: |
The tag is now compiling for me with 0.0.7, if someone else confirms that I'll close the issue. Thanks everyone! |
@jacobmischka @hzoo 0.0.7 fixed this issue for me as well. |
Okay, so it seems to work only under specific conditions. This doesn't transpile: /** @jsx h */
import 'skatejs-web-components';
import { Component, define, h } from 'skatejs';
const Test = define(class extends Component {
renderCallback () {
return <p><span /></p>;
}
});
window.customElements.define('x-app', class extends Component {
renderCallback () {
return (
<div>
<p>this should be bold</p>
<Test>this should not be</Test>
<style jsx>{`p { font-weight: bold }`}</style>
</div>
);
}
}); However, it seems if I comment out the following line in the return <p><span /></p>; Moving the component to a separate file seems to work with the line not commented out. |
Having the same issue. If a file contains two component definitions and the bottom one renders a |
That seems like a different problem than the one this issue was originally referring to, despite the title still fitting. I think it would be best if a new issue was created, but I will keep this one open until that happens. |
Ah never mind I can just change the title |
<style jsx>
tag<style jsx>
when rendering multiple components per file
Here are my test cases: DOES NOT get transformed (style tag only in last component) import React from 'react'
const ComponentLink = () =>
<li>
<span>Hello</span>
</li>
const App = () =>
<ul>
<ComponentLink />
<style jsx>{`span { color: blue; }`}</style>
</ul>
export default App DOES get transformed (style tag only in first component) import React from 'react'
const ComponentLink = () =>
<li>
<span>Hello</span>
<style jsx>{`span { color: blue; }`}</style>
</li>
const App = () =>
<ul>
<ComponentLink />
</ul>
export default App DOES get transformed (style tag in both components) import React from 'react'
const ComponentLink = () =>
<li>
<span>Hello</span>
<style jsx>{`span { color: blue; }`}</style>
</li>
const App = () =>
<ul>
<ComponentLink />
<style jsx>{`span { color: red; }`}</style>
</ul>
export default App |
The problem is that the babel plugin works only on the first JSX block it encounters. @rauchg I have a fix for this however it won't transpile "jsx partials" – in order to support them we'd need to rethink about the architecture of the plugin since there are a lot of possible scenarios. With the fix you'd get this: import _JSXStyle from "styled-jsx/style";
const foo = <span>hey</span>
const MyComponent = () => (
<div data-jsx={"2742264064"}>
{foo}
<_JSXStyle css={"span[data-jsx=\"2742264064\"] {color: red;}"} data-jsx={"2742264064"} />
</div>
) i.e. I argue that fixing it partially could be worse than the status-quo but I'd be happy to put a PR together anyway if you think that this is better than nothing. |
@giuseppeg not sure I'm too concerned about jsx partials for now. For jsx partials one can use a different |
@rauchg ok then shall I put together a PR to fix this issue? |
Yes please. This issue definitely needs immediate attention |
Released in |
Hm, I still seeing this issue. by using https://github.com/zeit/next.js/wiki/Redux-example render () {
return (
<Provider store={this.store}>
<div>
<Clock/>
<dl className="foo">
<style jsx>{`
.foo {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
color: red;
}
`}
</style>
bar
</dl>
</div>
</Provider>
)
} The weird part is if I make file dirty (hit space bar or something) and save to trigger rebuild. Maybe I doing things wrong? Do I need Thanks |
After pulling from master, working around #11, and linking, babel still doesn't seem to compile the tag. Babel is running without any complaints.
Workaround, because I very well may have broken it
styled-jsx
.babelrc in project
React complaining about
jsx
propThe text was updated successfully, but these errors were encountered: