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

@@ -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
 

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

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 }
+)

nesting/plugin.js → 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
       }

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`