[jss-template] Nesting, etc?

[trusktr]

Is your feature request related to a problem? Please describe.

Can we nest rules when using jss-template? If so, how?

Describe the solution you'd like

If not, this would be nice.

Are you willing to implement it?

No time to at the moment.

[HenriBeck]

Currently, we don't support nesting rules inside template strings.

[kof]

It might be interesting to enable a way for nesting because currently, you can't do the style block in a template string entirely if needs nesting:

const styles = {
  btn: {
    float: 'left',
    '& span': `
      color: red;
    `
  }
}

I see 2 potential ways to enable nesting at low cost

1. Using a template property (easiest, less nice)

const styles = {
  btn: {
    template: `
      float: left;
   `,
    '& span': `
      color: red;
    `
  }
}

2. Actual nesting support

const styles = {
  btn: `
    float:  left;
    & span: {
      color: red;
    }
  `
}

Now the problem here is that we can't know when the inner block starts/ends without a full parser, because {} can be inside of content prop and background url(). What we could do though, we could enforce a specific constraint on that, which would allow us to detect it.

• For the opening curly brace, the constraint would be - "it needs to be on the same line with &", if & is found and no { - throw an Error.
• For the closing brace it would be - "it needs to be on a separate new line", so if opening brace was found before and not closed, we are in a nested block, if no closing brace on a new line was found - throw an error.

Performance should be almost not impacted in this case.