Keyframes with point in the animation stops not working because escaped

[minimit]

Describe the problem:

When using keyframes with a point value in the keyframe stops they gets escaped and they do not work.

Input:

module.exports = {
  purge: [],
  theme: {
    extend: {
      keyframes: theme => ({
        'anim-spinner': {
          '0%': {
            strokeDashoffset: '628',
            transform: 'rotateY(0deg) rotateZ(-90deg)',
            animationTimingFunction: theme('transitionTimingFunction.ease.out'),
          },
          '50%': {
            strokeDashoffset: '0',
            transform: 'rotateY(0deg) rotateZ(90deg)',
            animationTimingFunction: theme('transitionTimingFunction.ease.in'),
          },
          '50.0001%': {
            strokeDashoffset: '0',
            transform: 'rotateY(180deg) rotateZ(90deg)',
          },
          '100%': {
            strokeDashoffset: '628',
            transform: 'rotateY(180deg) rotateZ(-90deg)',
          },
        },
      }),
    },
  },
  variants: {},
  plugins: [],
}

Output:

@keyframes anim-spinner {
  0% {
    stroke-dashoffset: 628;
    transform: rotateY(0deg) rotateZ(-90deg);
  }

  50% {
    stroke-dashoffset: 0;
    transform: rotateY(0deg) rotateZ(90deg);
  }

  50.\30 001\% {
    stroke-dashoffset: 0;
    transform: rotateY(180deg) rotateZ(90deg);
  }

  100% {
    stroke-dashoffset: 628;
    transform: rotateY(180deg) rotateZ(-90deg);
  }
}

You can see that the keyframe 50.0001% becomes 50.\30 001\%

Link to a minimal reproduction:

https://github.com/minimit/twbug-keyframes-escape

[adamwathan]

Fixed for next version, thanks!