Display errors in styled-jsx

[ron-liu]

If there is an css error, styled-jsx just silently swollen it, which cause very difficult to fix the issue. Anyway to make it explicit? See examples below

import css from './css.js'
export default () => <div className="pp">
    <style jsx>{css}</style>
</div>)

css.js

export default `
    .pp {
               error error /*intended introduced an error here*/
        background-color: red;
        width: 100px;
        height: 100px;
    }

[ron-liu]

I had conversation with @giuseppeg in slack, he recon two possible ways:

• annotate the css

export default `
  /* @styled-jsx */

 div { color }
`

• always inform when a string didn't pass css validation with a message like

[styled-jsx] possible invalid css: filename:line

This would be logged for any invalid css string i.e. if you are exporting a message or any other string that is not css you'd get this warning. Eg.

export default `I ❤️ pizza`

see conversation

g [10 minutes ago]
@ron do you mean if it is invalid css?

g [10 minutes ago]
or rather valid css but with some errors?

ron [9 minutes ago]
I just edited the question 🙂

ron [9 minutes ago]
invalid css, I mean

g [8 minutes ago]
mm that's kinda hard because the exported literal can be anything .. so when it doesn't pass css validation we just ignore it

ron [7 minutes ago]
I see, thanks. 🙂

g [7 minutes ago]
we could ask developers that care about that to annotate the css

g [6 minutes ago]
in that case we could display errors

g [6 minutes ago]
eg.

export default `
  /* @styled-jsx */

 div { color }
`

ron [5 minutes ago]
sounds good.

g [5 minutes ago]
another option would be to always inform when a string didn't pass css validation with a message like:

possible invalid css: filename:line 

[pablocubico]

Just had the same problem! Damn typos.

AFAIK errors are not detected by the transformer, rules are just passed "as is" and included in the build for the browser to handle.

I think the best option would be to try and use stylelint as described here:

#106

Or wait until a linter plugin is available on stylis:

thysultan/stylis#8

[giuseppeg]

in v2 i am going to remove autodetection and force people to tag styles so that there is no magic and it won't fail silently

[giuseppeg]

Fixed by #288