tailwindcss/nesting used with postcss-nesting breaks some postcss plugins

[lubomirblazekcz]

What version of Tailwind CSS are you using?

v3.0.17

What build tool (or framework if it abstracts the build tool) are you using?

vite@2.7.13

What version of Node.js are you using?

For example: v17.1.0

What operating system are you using?

MacOS

Describe your issue

tailwindcss/nesting used with postcss-nesting breaks some postcss plugins. In this example vite config cssHasPseudo is not working. Also another plugin that is not working is postcss-mixins

import tailwindcss from 'tailwindcss'
import tailwindcssNesting from 'tailwindcss/nesting'
import autoprefixer from 'autoprefixer'
import postcssImport from 'postcss-import'
import postcssNesting from 'postcss-nesting'
import cssHasPseudo from 'css-has-pseudo'
import postcssCustomMedia from 'postcss-custom-media'

export default {
    css: {
        postcss: {
            plugins: [postcssImport, tailwindcssNesting(postcssNesting), postcssCustomMedia, cssHasPseudo, tailwindcss, autoprefixer]
        }
    }
}

[thecrypticace]

Could you provide a reproduction? It would help to see the versions of the plugins you have installed along with the whole of the setup.

[lubomirblazekcz]

Here is a repro, hope it helps (text should turn red). All plugins are latest versions

with tailwind (doesn't work) - https://stackblitz.com/edit/vitejs-vite-fv2tnq?file=style.pcss&terminal=dev
without tailwind (works) - https://stackblitz.com/edit/vitejs-vite-vbidlr?file=style.pcss&terminal=dev

[thecrypticace]

Just to follow up here — I tracked down the issue last week and we are working with PostCSS on a fix. Thanks!

[j1mbl3s]

postcss-inline-svg is also affected by this.
Mentioning in case someone else is looking to find the cause of their issue.

[JackieCheung]

"postcss-mixins": "^9.0.2"
"tailwindcss": "^3.0.23"

The problem still exists.

[JackieCheung]

A solution refers to https://giters.com/tailwindlabs/tailwindcss/issues/3931

plugins: [
  {
    postcssPlugin: 'postcss-mixins',
    Once(root, { result }) {
      return require('postcss')([require('postcss-mixins')]).process(
        root,
        result.opts
      )
    }
  },
  require('tailwindcss/nesting'),
  require('tailwindcss'),
  require('autoprefixer')
]

It must to wrap postcss-mixins by Once, I think it is not elegant enough.

[j1mbl3s]

@JackieCheung The PR for this issue was merged on Feb 21. Tailwind v3.0.23 was released Feb 16.
It should be fixed in the next release.

[JackieCheung]

A solution refers to https://giters.com/tailwindlabs/tailwindcss/issues/3931

plugins: [
  {
    postcssPlugin: 'postcss-mixins',
    Once(root, { result }) {
      return require('postcss')([require('postcss-mixins')]).process(
        root,
        result.opts
      )
    }
  },
  require('tailwindcss/nesting'),
  require('tailwindcss'),
  require('autoprefixer')
]

It must to wrap postcss-mixins by Once, I think it is not elegant enough.

The problem still exists in v3.0.24

[thecrypticace]

Could you open this as a separate issue please?