Update detectNesting.js

[MartinDoyleShopify]

Update detectNesting() to permit :global pseudo-class as valid parent, as long as it's at the root. See discussion #8412 for more information.

[thecrypticace]

Hey, following up here from discussion #8412. I haven't come up with a situation in which this appears to be necessary and this has been sitting open for a while. Am doing some cleanup so I'm going to close It for now. If you can produce a situation in which this is definitely necessary I'll be more than happy to take another look in the future. Thanks for the work on this and please feel free to let me know if you have any questions. ✨

[tomprats]

Hey @thecrypticace, I have outlined a use-case in the discussion here. What are your thoughts on allowing this or a similar PR?

[tomprats]

@thecrypticace This is still blocking me from being able to upgrade to Tailwind 3, any chance you'd reconsider?

Here is the use-case copied from the discussion:

The use-case I have is that I'm using CSS modules to locally scope all the css in my app by default. And then I manually exclude custom helpers (and Tailwind). I do this since I use tailwind classes for most things but want a component to be able to have some custom css and not worry about a conflict.

Below is an example config, where by specifying modules as an object, it enables css modules and transforms all class names to use the localIdentName. To avoid that occuring for Tailwind classes, I used to wrap their initial import/directive in :global as seen in the post above.

Is the above PR still a possibility or could I make a new one that would allow :global around @tailwind?

rules: [
  ...
  {
    test: /\.(scss|css)$/,
    use: [
      {
        loader: "css-loader",
        options: {
          modules: {
            localIdentName: "[local]-[hash:base64:5]"
          },
          sourceMap: true,
          importLoaders: 2
        }
      },
      {
        loader: "postcss-loader",
        options: {
          sourceMap: true
        }
      },
      {
        loader: "sass-loader",
        options: {
          sourceMap: true
        }
      }
    ]
  }
]