Styled-jsx: Doesn't compile `<style jsx>` when rendering multiple components per file

[jacobmischka]

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

{
    "presets": [
        "react",
        ["es2015", { "modules": false }]
    ],
    "plugins": [
        "array-includes",
        "styled-jsx/dist/babel"
    ]
}

React complaining about jsx prop

[leo]

@jacobmischka Does 0.0.3 work?

[jacobmischka]

It does not seem to.

Here's where I'm using it: https://gist.github.com/ebc481015aa80af18efc38465fcb8657

babelrc:

{
    "presets": [
        "react",
        ["es2015", { "modules": false }]
    ],
    "plugins": [
        "array-includes",
        "styled-jsx/babel"
    ]
}

[jacobmischka]

Actually sorry, here's my repo: https://github.com/jacobmischka/ics-merger/tree/styled-jsx

Relevant file is src/components/FullCalendar.js.

[jacobmischka]

Oh sorry, you'll need a .env.json file to run it. Here's mine: https://gist.github.com/6eebe8873893ae6d7ac2f3ad64aa7737

[jacobmischka]

I'll try to create a minimum reproducible repo at some point later today when I get a few minutes, thank you!

[adamyonk]

I'm seeing something similar, and it seems like my <style jsx> are just getting dumped into the page unparsed, and therefore as global style rules:

[jacobmischka]

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.

[treshugart]

I can confirm this is happening for me, as well. If I run babel from the CLI with only this as the plugin, nothing is transformed:

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 <style jsx> part should be transpiled? I tried placing the transform-react-jsx plugin before and after with no luck.

[sergiodxa]

I have the this bug too, I added:

"plugins": [
  "styled-jsx/babel"
]

To my .babelrc and in a component:

<style jsx>{`
  article {
    color: blue;
  }
`}</style>

And React is adding the <style> tag and complaining about the jsx unknown prop.

[hzoo]

everyone should try [email protected] which should fix it

[treshugart]

@hzoo still seems to be an issue with 0.0.5. Is there something we're doing wrong? My .babelrc is just:

{
  "plugins": ["styled-jsx/babel"]
}

I have babel-cli installed locally at the latest version and am still getting:

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>;
  }
});

[jacobmischka]

Unfortunately it seems to still be happening to me

styled-jsx seems to be called, I added a log to styled-jsx/babel.js and it's showing up in the output. But I'm still getting the error.

yarn build:webpack v0.18.0
$ webpack -p 
running babel
Hash: afc2d2da1570a962ac31
Version: webpack 2.1.0-beta.27
Time: 12225ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   797 kB       0  [emitted]  main
bundle.js.map  6.14 MB       0  [emitted]  main
 [675] multi main 88 bytes {0} [built]
    + 675 hidden modules

Webpack Bundle Analyzer saved stats file to /home/mischka/projects/ics-merger/public/js/stats.json
Done in 13.13s.

Please let me know if there's anything I can do to help, thanks!

[sergiodxa]

Now I have the error described in #16

[adamyonk]

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 error I'm seeing did change, however:
Error: Cannot find module "styled-jsx/inject"

[jacobmischka]

The tag is now compiling for me with 0.0.7, if someone else confirms that I'll close the issue. Thanks everyone!

[adamyonk]

@jacobmischka @hzoo 0.0.7 fixed this issue for me as well.

[treshugart]

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 Test component, it works:

return <p><span /></p>;

Moving the component to a separate file seems to work with the line not commented out.

[aputinski]

Having the same issue. If a file contains two component definitions and the bottom one renders a <style jsx> component, no transformation happens. Removing the top component definition fixes the issue.

[jacobmischka]

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.

[jacobmischka]

Ah never mind I can just change the title

[aputinski]

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

[giuseppeg]

The problem is that the babel plugin works only on the first JSX block it encounters.
If it doesn't find any styles it skips the rest.

@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. foo won't get the data attribute.

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.

[rauchg]

@giuseppeg not sure I'm too concerned about jsx partials for now. For jsx partials one can use a different <style jsx> tag (think different sub-component), or find a way to fit it in the same block somehow.

[giuseppeg]

@rauchg ok then shall I put together a PR to fix this issue?

[rauchg]

Yes please. This issue definitely needs immediate attention

[rauchg]

Released in 0.1.3

[katopz]

Hm, I still seeing this issue. by using https://github.com/zeit/next.js/wiki/Redux-example
and replace render in pages/index.js with ...

  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>
    )
  }

I'll get

The weird part is if I make file dirty (hit space bar or something) and save to trigger rebuild.
It'll work perfectly after that but if I hit refresh button it will error again.

Maybe I doing things wrong? Do I need .babelrc?

Thanks

[giuseppeg]

@katopz yes you need a .babelrc file at the root of your project or similar. See the usage section. If the issue persists you may want to join zeit.chat