Updating from v3.0.23 to v3.1.1 & 3.1.2 getting variant.replace not a function error

[mcqua007]

Hi All. I am trying to update our project from tailwinds v3.0.23 to the latest. Going to v3.0.24 I have no issues but updating to v3.1.1 or 3.1.2 I am getting this error when I try to run my project. It also comes up as an intellisense error as shown below. Not sure if it something I am doing wrong that worked in the older versions. I am using laravel mix v6.0.11 which runs on top of webpack 4.4.31

Here is the output:

Then here is what installed. I am running node v16.13.2:

Here is my tailwind config:

const plugin = require('tailwindcss/plugin')
const defaultTheme = require('tailwindcss/defaultTheme')
const { extend } = require('tailwindcss/defaultTheme')

const customColors = {
  charcoal: '#2F1F21',
  'charcoal-50': '#5B5757',
  burgandy: '#85300D',
  ocre: '#AB6B05',
  ocean: '#125759',
  cream: '#DEDBD9',
  'cream-30': '#F5F4F4',
  'cream-50': '#EEECEB',
  sand: '#BAAB99',
  'blaze-red': '#FF5717',
  'warm-yellow': '#FF5717',
  turquoise: '#2BBDA6',
}

module.exports = {
  content: [
    'shopify/snippets/*.liquid',
    'shopify/templates/*.liquid',
    'shopify/templates/customers/*.liquid',
    'shopify/layout/*.liquid',
    'src/sections/*.liquid',
    'src/scripts/*.{js,ts}',
  ],
  theme: {
    screens: {
      xs: '475px',
      ...defaultTheme.screens,
    },
    extend: {
      fontFamily: {
        sans: ['DM Sans', 'Helvetica', 'Artial', 'sans-serif'],
        serif: ['GT Super', 'Times', 'serif'],
      },
      colors: customColors,
      animation: {
        'spin-10s': 'spin 10s linear infinite',
      },
      letterSpacing: {
        tight: '-0.035em',
      },
    },
  },
  safelist: [
    {
      pattern: /font-*/,
    },
  ],
  plugins: [
    require('tailwind-scrollbar-hide'),
    plugin(function ({ addVariant }) {
      addVariant('current', ['&[aria-current="true"]', '&.active'])
    }),
    plugin(function ({ addVariant }) {
      addVariant('accessible', ['body.accessible &'])
    }),
    plugin(function ({ addVariant, e }) {
      //add more true or false aria attributes or custom boolean attributes
      const ariaAttributes = ['aria-expanded', 'aria-hidden', 'aria-current', 'aria-busy', 'data-check-validity']
      ariaAttributes.forEach((adj) => {
        const selector = adj
        addVariant(selector, [`&[${selector}="true"]`])

        const groupSelector = `group-${adj}`
        addVariant(groupSelector, ({ modifySelectors, separator }) =>
          modifySelectors(({ className }) => `.group[${adj}="true"] .${e(`${groupSelector}${separator}${className}`)}`)
        )

        const peerSelector = `peer-${adj}`
        addVariant(peerSelector, ({ modifySelectors, separator }) =>
          modifySelectors(({ className }) => `.peer[${adj}="true"] ~ .${e(`${peerSelector}${separator}${className}`)}`)
        )
      })
    }),
    //extra custom colors into root variables, can extra all by passing in theme,
    //then pass theme('colors') into the extra function
    plugin(function ({ addBase }) {
      function extractColorVars(colorObj, colorGroup = '') {
        return Object.keys(colorObj).reduce((vars, colorKey) => {
          const value = colorObj[colorKey]

          const newVars =
            typeof value === 'string'
              ? { [`--color${colorGroup}-${colorKey}`]: value }
              : extractColorVars(value, `-${colorKey}`)

          return { ...vars, ...newVars }
        }, {})
      }

      addBase({
        ':root': extractColorVars(customColors),
      })
    }),
  ],
}

[DeoThemes]

Getting the same error, in my case, it's related to tailwindcss-named-groups plugin.

[rohmann]

A shot in the dark here, but it might be related to this change: bb4f5da

You can clear the error by making your addVariant calls return undefined instead of returning the result of modifySelectors. So try adding some brackets here for example:

addVariant(peerSelector, ({ modifySelectors, separator }) => {
  modifySelectors(({ className }) => `.peer[${adj}="true"] ~ .${e(`${peerSelector}${separator}${className}`)}`)
})

I don't know if that will actually make what you're intending to happen start working again, but hopefully this helps.

[thecrypticace]

Hey, thanks for the report! I've fixed this and the fix should be available in the insiders build (npm install tailwindcss@insiders) if you want to try it out before we tag our next release.

[mcqua007]

Hey, thanks for the report! I've fixed this and the fix should be available in the insiders build (npm install tailwindcss@insiders) if you want to try it out before we tag our next release.

Awesome, I will go ahead and try it and post back here to verify that fixed it!

 "tailwindcss": "^0.0.0-insiders.037396b",

Edit: Yep, no more errors! Thank you so much for the quick response. I'll be looking for it in the next tagged release.