Generated keyframe id

[kof]

Currently keyframe id's we use in jss are global. The questions are:

1. Do we want to generate a keyframe id to avoid conflicts?
2. Do we want to allow user to define the keyframe id optionally and generate it by default?
3. How would user access generated keyframe id?

Currently user can generate keyframe id like this, but I assume it is not very user friendly:

const identifier = Math.random()
export default {
  [`@keyframes ${identifier}`]: {
    from: {opacity: 0},
    to {opacity: 1}
  }
}

Todo

const sheet = jss.createStyleSheet({
  '@keyframes fadeIn': {
     from: {opacity: 0},
     to {opacity: 1}
  },
  button: {
    animationName: '$fadeIn',
  }
})

sheet.keyframes.fadeIn // @keyframes fadeIn-12378676134

• generate id
• register it in keyframes hash
• docs
• changelog
• allow unscoped keyframes via global plugin
• allow animation property?
• if we could run ref replacer after jss-expand, we could also support animation: {name} syntax and we wouldn't have to support animationName if we could run it after camel case plugin
• document inside of @global rule and global prefix
• rename generateClassName

[giuseppeg]

Do we want to generate a keyframe id to avoid conflicts?

I think so, users can make them global if they want #324

Do we want to allow user to define the keyframe id optionally and generate it by default?

This would be a neat feature because often times animations are used only once. In fact I twitted this same idea once and made a prototype

[kof]

Good catch regarding #324, haven't thought about this particular case yet. Needs to be considiered!

[kof]

The question is though how would you access the generated keyframe id (if it is automated) in other style sheets if you want to reuse the keyframes in different parts of the application. For e.g. in react-jss we normally don't have an access to the sheet instance from different components. One would need to create a sheet outside of react-jss with jss directly and access it from all the other places like this:

const sheet = jss.createStyleSheet({
  '@keyframes fadeIn': {
    from: {opacity: 0},
    to {opacity: 1}
  }
})

sheet.getRule('@keyframes fadeIn').id // @keyframes fadeIn-12378676134
// or
sheet.keyframes.fadeIn // @keyframes fadeIn-12378676134

[kof]

Also another question how to access it locally in the same sheet:

const sheet = jss.createStyleSheet({
  '@keyframes fadeIn': {
    from: {opacity: 0},
    to {opacity: 1}
  },
  button: {
    animationName: '$fadeIn',
    // or
    animation: '$fadeIn steps(4, end) 1s infinite'
  }
})

[iamstarkov]

nice

[iamstarkov]

thanks

[kof]

Btw. if @keyframes is defined within a rule and has no animation name specified, we can simply generate one and define animationName property with this name automatically.

const sheet = jss.createStyleSheet({
  button: {
    '@keyframes': {
      from: {opacity: 0},
      to {opacity: 1}
    }
    // Automatically added.
    animationName: 'keyframes-123456'
  }
})

Thought again -> not worth it. Better consistently ask for a keyframe name.

[kof]

Another thing: if we automatically add a suffix to a keyframe name, we should create a keyframes hash same like for classes sheet.keyframes.name