From 167668e9cf275076808c05451e7f193ab47b95dd Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sat, 15 Jan 2022 16:07:20 +0100
Subject: [PATCH] Ensure to transpile the PostCSS Nesting plugin
 (tailwindcss/nesting) (#7080)

* ensure that we compile the postcss nesting plugin

* re-add optional chaining

This will allow us to be 100% sure that we can safely call
hasOwnProperty in case we get some very strange objects.

This will now also be compiled/transpiled by esbuild.

* import the internal postcss nesting plugin

This allows us to work on it without re-compiling while running tests.
Just like we do with all other code.

* update changelog
---
 CHANGELOG.md                                       |  4 +++-
 nesting/index.js                                   | 14 ++------------
 {nesting => src/postcss-plugins/nesting}/README.md |  0
 src/postcss-plugins/nesting/index.js               | 13 +++++++++++++
 {nesting => src/postcss-plugins/nesting}/plugin.js |  8 ++++----
 tests/postcss-plugins/nesting/index.test.js        |  6 +++---
 6 files changed, 25 insertions(+), 20 deletions(-)
 rename {nesting => src/postcss-plugins/nesting}/README.md (100%)
 create mode 100644 src/postcss-plugins/nesting/index.js
 rename {nesting => src/postcss-plugins/nesting}/plugin.js (81%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e8aca2f9b28..be516015c6a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure to transpile the PostCSS Nesting plugin (tailwindcss/nesting) ([#7080](https://github.com/tailwindlabs/tailwindcss/pull/7080))
 
 ## [3.0.15] - 2022-01-15
 
diff --git a/nesting/index.js b/nesting/index.js
index 273814a75b2d..defd79306bc1 100644
--- a/nesting/index.js
+++ b/nesting/index.js
@@ -1,12 +1,2 @@
-let nesting = require('./plugin')
-
-module.exports = (opts) => {
-  return {
-    postcssPlugin: 'tailwindcss/nesting',
-    Once(root, { result }) {
-      return nesting(opts)(root, result)
-    },
-  }
-}
-
-module.exports.postcss = true
+let nesting = require('../lib/postcss-plugins/nesting')
+module.exports = (nesting.__esModule ? nesting : { default: nesting }).default
diff --git a/nesting/README.md b/src/postcss-plugins/nesting/README.md
similarity index 100%
rename from nesting/README.md
rename to src/postcss-plugins/nesting/README.md
diff --git a/src/postcss-plugins/nesting/index.js b/src/postcss-plugins/nesting/index.js
new file mode 100644
index 000000000000..9fbcddf35f1c
--- /dev/null
+++ b/src/postcss-plugins/nesting/index.js
@@ -0,0 +1,13 @@
+import { nesting } from './plugin'
+
+export default Object.assign(
+  function (opts) {
+    return {
+      postcssPlugin: 'tailwindcss/nesting',
+      Once(root, { result }) {
+        return nesting(opts)(root, result)
+      },
+    }
+  },
+  { postcss: true }
+)
diff --git a/nesting/plugin.js b/src/postcss-plugins/nesting/plugin.js
similarity index 81%
rename from nesting/plugin.js
rename to src/postcss-plugins/nesting/plugin.js
index b286ad1d6864..3b1434d82ed1 100644
--- a/nesting/plugin.js
+++ b/src/postcss-plugins/nesting/plugin.js
@@ -1,7 +1,7 @@
-let postcss = require('postcss')
-let postcssNested = require('postcss-nested')
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
 
-module.exports = function nesting(opts = postcssNested) {
+export function nesting(opts = postcssNested) {
   return (root, result) => {
     root.walkAtRules('screen', (rule) => {
       rule.name = 'media'
@@ -16,7 +16,7 @@ module.exports = function nesting(opts = postcssNested) {
     let plugin = (() => {
       if (
         typeof opts === 'function' ||
-        (typeof opts === 'object' && opts.hasOwnProperty('postcssPlugin'))
+        (typeof opts === 'object' && opts?.hasOwnProperty?.('postcssPlugin'))
       ) {
         return opts
       }
diff --git a/tests/postcss-plugins/nesting/index.test.js b/tests/postcss-plugins/nesting/index.test.js
index 2fcfb731d71a..482622ed3343 100644
--- a/tests/postcss-plugins/nesting/index.test.js
+++ b/tests/postcss-plugins/nesting/index.test.js
@@ -1,6 +1,6 @@
-let postcss = require('postcss')
-let postcssNested = require('postcss-nested')
-let plugin = require('../../../nesting')
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
+import plugin from '../../../src/postcss-plugins/nesting'
 
 it('should be possible to load a custom nesting plugin', async () => {
   let input = css`