The aspect-ratio plugin does not work with shim (NuxtJs)

[sondh0127]

I try the shim setup with Nuxtjs. But there's a problem with the aspect-ratio plugin.
https://github.com/sondh0127/nuxt21-twind-plugin/blob/f1f99e7a953320129b635f58219fb2f7043db648/pages/index.vue#L26
It works on the first load, but when I change something (e.g. adding another class), the app stops working. I have to close the tab and open another. => It looks like we've got an infinite loop here.

If ‘aspect-ratio’ is included in plugins, the error will occur.

Link to produce repo:
https://github.com/sondh0127/nuxt21-twind-plugin

Here is my config

/* eslint-disable import/no-duplicates */
import 'twind/shim'
import { setup, disconnect } from 'twind/shim'
import * as colors from 'twind/colors'
import { aspectRatio } from '@twind/aspect-ratio'
import { lineClamp } from '@twind/line-clamp'

setup({
  theme: {
    extend: {
      spacing: {
        192: '48rem',
        256: '64rem',
      },
      colors: {
        brand: colors.blue,
        cta: colors.red,
        info: colors.lightBlue,
        warning: colors.yellow,
        success: colors.green,
        danger: colors.rose,
      },
      screens: {
        landscape: { raw: '(orientation: landscape)' },
        portrait: { raw: '(orientation: portrait)' },
      },
      fontFamily: {
        sans: [
          'Inter',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          'Roboto',
          '"Helvetica Neue"',
          'Arial',
          '"Noto Sans"',
          'sans-serif',
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
        serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
        mono: [
          'Inconsolata',
          'ui-monospace',
          'SFMono-Regular',
          'Menlo',
          'Monaco',
          'Consolas',
          '"Liberation Mono"',
          '"Courier New"',
          'monospace',
        ],
      },
    },
  },
  plugins: {
    'aspect': aspectRatio, // remove it => the app will work
    'line-clamp': lineClamp,
  },
})

[tylerforesthauser]

Do you have a repo/codesandbox you can share where we can see your whole setup?

[sondh0127]

Please clone the repo here: https://github.com/sondh0127/nuxt21-twind-plugin

[sastan]

Confirmed. Working on a fix.

[sastan]

I found the issue and have published bugfix release:

• [email protected]
• @twind/[email protected]

See the update sandbox: https://codesandbox.io/s/cold-sound-cojst?file=/package.json:221-365

@sondh0127 Thanks for the report. That was a big issue and great you found it. 🙏🏾

[sondh0127]

Thanks for your work, @sastan. It's awesome!