Variants break my build -- SCSS, postcss, rollup, JIT

[brennongs]

I can't find anything online about this at all, which means to me that I'm definitely missing something in my setup, and I'm hoping someone can point me in the right direction.

I'm working in a component library with React/storybook. I just built a component that animates in from offscreen, and I'd like to put that animation behind motion-safe to maintain accessibility.

I have the animation working with the keyframes and animation properties in tailwind.config, but when I add motion-safe:animation-toast-in-out, I get a compile error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "}".
   ╷
29 │   @-webkit-keyframes toast-in-out {
   │                                    ^
   ╵
  src/toast/base/index.module.scss 29:36  root stylesheet

The relevant parts of my current config (I've tried turning off jit and adding the variants under theme.extend, as well as removing them as apparently you don't need them in jit:

module.exports = {
  mode: 'jit',
  variants: {
    animation: ['motion-reduce', 'motion-safe']
  },
  theme: {
    extend: {
      ...lightTheme,
      keyframes: {
        "toast-in-out": {
          '0%': { transform: 'translate(300px, 0px)' },
          '12.5%, 87.5%': { transform: 'translate(0px, 0px)' },
          '100%': { transform: 'translate(300px, 0)' }
        }
      },
      animation: {
        'toast-in-out': 'toast-in-out 3800ms'
      }
    }
  },
};

I am using postCSS and rollup as well, but the config on them is really simple.

Thanks in advance for the help <3

[adamwathan]

Hey! Can you provide a repo that reproduces? Looks like you are using Sass here as well which is probably a big piece of the puzzle 🤔