Repository: tailwindlabs/tailwindcss
Pull request #7080 (2022-01-15 15:02:14)

Ensure to transpile the PostCSS Nesting plugin (tailwindcss/nesting)
This PR will make sure that we are transpiling the nesting plugin that we expose. We didn't do that before and it was totally fine. But we also added an additional check recently that used optional chaining and this broke when people used Node versions lower than 13 (even though we require Node 12).

This PR fixes that by making sure that we transpile this code just like we do with all other code. 
We also re-added the optional chaining that broke things to be sure that we don't crash when we retrieve "broken" objects somehow.

This also undoes the temporary change I introduced in #7077 last night. (Who says temporary changes are permanent 😅)


<!--

👋 Hey, thanks for your interest in contributing to Tailwind!

**Please ask first before starting work on any significant new features.**

It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create an issue to first discuss any significant new features. This includes things like adding new utilities, creating new at-rules, or adding new component examples to the documentation.

https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md

-->



Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e8aca2f..be516015 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 273814a7..defd7930 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 00000000..9fbcddf3
--- /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 b286ad1d..3b1434d8 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
       }


Test patch:
diff --git a/tests/postcss-plugins/nesting/index.test.js b/tests/postcss-plugins/nesting/index.test.js
index 2fcfb731..482622ed 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`