How can we change the expression delimiters for some of our components? about jsx

[syranide]

Unless it has been changed (don't think so), then you should use dangerouslySetInnerHTML with style for React, not provide a string child.

But to the point, with ES6 the solution to this is simple, use template strings:

<style>{`
  foo bar ${foobar} { .. }
`}</style>

var html = {_html: `
  foo bar ${foobar} { .. }
`};
<style dangerouslySetInnerHTML={html} />

[giuseppeg]

Ideally it would be great if style's content could be parsed as TemplateLiteral when it is just text and doesn't start with {:

<style>
  div { color: red; }
  span { background: ${ color } }
</style>

// parsed like

<style>{`
  div { color: red; }
  span { background: ${ color } }
`}</style>

For styled-jsx this would be amazing.

[Buslowicz]

Sorry for digging this up, but are there any plans to implement something to solve this? Custom delimiters would be great, or at least a way to specify which tags content should not be parsed.

[sebmarkbage]

The template literal solution indeed solve this. If we go down the route of #35 then the template literal solution might seem more natural to go for.

Although I might also suggest that we should support an object as the child of style in React which has all the selectors as properties. That is already how the style attribute works in React. It simply uses the existing syntax for data structures that already exist in JS.

<style>{{
  '*': {
    'background-color': 'red'
  }
}}</style>

This allows you to specify structured data that could even be type specific using CSSOM instead of having to parse a string.