Jss: Dynamically generated classes ignored

[ilyador]

I am trying to have a dynamic list of items and give each a sequentially calculated class, a spinner where I can just say the number of parts and they will be spaced automatically.
This is partial code without the whole animation CSS:

const styles = theme => ({
  letters: {
    position: 'absolute'
  },
  letter: getLetterClasses(5),
  'letter-0': { left: 50 }
})

const getLetterClasses = (number) => {
  let list = {}

  for (let i = 0; i < number; i++) {
    list[`&-${i}`] = { left: 20 * i }
  }

  return list
}

//=============

const spinner = spinner_array.map((letter, i) => {
  const cls = classnames(classes.letters, classes[`letter-${i}`])
  return <div className={cls} key={i}>{letter}</div>
})

This only works when I create each class explicitly, like letter-0, but ignores the dynamic part. I have no idea why since the object generation seems to work correctly.
https://codesandbox.io/s/30w6l0v786

• jss: 8.6.1
• Chrome 69
• macOS Mojave

[HenriBeck]

Your object generation doesn't work.

Add this to your Loader component: console.log(styles({}));

[HenriBeck]

https://codesandbox.io/s/r70674owo4

[ilyador]

Thanx for the demo.
This still seems like a weird behavior because if the destructuring pattern works, why shouldn't the & concatenation work? (the console.log doesn't change anything, it works without it)

[HenriBeck]

Please explain why the & should work??? We don't support this kind of syntax and JS neither.

[ilyador]

You don't support the & selector syntax?

Here is the official REPL:

input

const getLetterClasses = (number) => {
  let list = {}
  for (let i = 0; i < number; i++) {
    list[`&-${ i }`] = { left: 20 * i }
  }
  return list
}

export default {
  item: getLetterClasses(4),

output

.item-0-1-15-0 {
  left: 0;
}
.item-0-1-15-1 {
  left: 20px;
}
.item-0-1-15-2 {
  left: 40px;
}
.item-0-1-15-3 {
  left: 60px;
}

Since the REPL doesn't support ... I can't show that the result will be exactly the same, but in codesandbox you can see it is.

[kof]

Your problem is not with JSS, but with how you use the classes. I fixed your class name concatentation https://codesandbox.io/s/k3nj04j9po

[kof]

try again