From 1ddbd75ae200c14b5f33556bd6d5ae6b7722d14e Mon Sep 17 00:00:00 2001
From: Alan Agius <alan.agius4@gmail.com>
Date: Fri, 10 Dec 2021 13:04:10 +0100
Subject: [PATCH] fix(@angular-devkit/build-angular): add `tailwindcss` support
 for version 3

(cherry picked from commit 0323a35b47a4a2fd3870b09d46e3655714e50abd)
---
 .../angular_devkit/build_angular/package.json |  2 +-
 .../styles/{tailwind.ts => tailwind-v2.ts}    |  7 +--
 .../e2e/tests/build/styles/tailwind-v3.ts     | 55 +++++++++++++++++++
 3 files changed, 57 insertions(+), 7 deletions(-)
 rename tests/legacy-cli/e2e/tests/build/styles/{tailwind.ts => tailwind-v2.ts} (94%)
 create mode 100644 tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts

diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json
index f64f11060f38..95f4e65940c0 100644
--- a/packages/angular_devkit/build_angular/package.json
+++ b/packages/angular_devkit/build_angular/package.json
@@ -81,7 +81,7 @@
     "karma": "^6.3.0",
     "ng-packagr": "^13.0.0 || ^13.1.0-next",
     "protractor": "^7.0.0",
-    "tailwindcss": "^2.0.0",
+    "tailwindcss": "^2.0.0 || ^3.0.0",
     "typescript": ">=4.4.3 <4.6"
   },
   "peerDependenciesMeta": {
diff --git a/tests/legacy-cli/e2e/tests/build/styles/tailwind.ts b/tests/legacy-cli/e2e/tests/build/styles/tailwind-v2.ts
similarity index 94%
rename from tests/legacy-cli/e2e/tests/build/styles/tailwind.ts
rename to tests/legacy-cli/e2e/tests/build/styles/tailwind-v2.ts
index 51f317533384..663ccc1b900c 100644
--- a/tests/legacy-cli/e2e/tests/build/styles/tailwind.ts
+++ b/tests/legacy-cli/e2e/tests/build/styles/tailwind-v2.ts
@@ -4,13 +4,8 @@ import { ng, silentExec } from '../../../utils/process';
 import { expectToFail } from '../../../utils/utils';
 
 export default async function () {
-  // Tailwind is not supported in Node.js 10
-  if (process.version.startsWith('v10')) {
-    return;
-  }
-
   // Install Tailwind
-  await installPackage('tailwindcss');
+  await installPackage('tailwindcss@2');
 
   // Create configuration file
   await silentExec('npx', 'tailwindcss', 'init');
diff --git a/tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts b/tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts
new file mode 100644
index 000000000000..032c45ceee05
--- /dev/null
+++ b/tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts
@@ -0,0 +1,55 @@
+import { deleteFile, expectFileToMatch, writeFile } from '../../../utils/fs';
+import { installPackage, uninstallPackage } from '../../../utils/packages';
+import { ng, silentExec } from '../../../utils/process';
+import { expectToFail } from '../../../utils/utils';
+
+export default async function () {
+  // Install Tailwind
+  await installPackage('tailwindcss@3');
+
+  // Create configuration file
+  await silentExec('npx', 'tailwindcss', 'init');
+
+  // Add Tailwind directives to a component style
+  await writeFile('src/app/app.component.css', '@tailwind base; @tailwind components;');
+
+  // Add Tailwind directives to a global style
+  await writeFile('src/styles.css', '@tailwind base; @tailwind components;');
+
+  // Build should succeed and process Tailwind directives
+  await ng('build', '--configuration=development');
+
+  // Check for Tailwind output
+  await expectFileToMatch('dist/test-project/styles.css', /::placeholder/);
+  await expectFileToMatch('dist/test-project/main.js', /::placeholder/);
+  await expectToFail(() =>
+    expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;'),
+  );
+  await expectToFail(() =>
+    expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;'),
+  );
+
+  // Remove configuration file
+  await deleteFile('tailwind.config.js');
+
+  // Ensure Tailwind is disabled when no configuration file is present
+  await ng('build', '--configuration=development');
+  await expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;');
+  await expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;');
+
+  // Recreate configuration file
+  await silentExec('npx', 'tailwindcss', 'init');
+
+  // Uninstall Tailwind
+  await uninstallPackage('tailwindcss');
+
+  // Ensure installation warning is present
+  const { stderr } = await ng('build', '--configuration=development');
+  if (!stderr.includes("To enable Tailwind CSS, please install the 'tailwindcss' package.")) {
+    throw new Error('Expected tailwind installation warning');
+  }
+
+  // Tailwind directives should be unprocessed with missing package
+  await expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;');
+  await expectFileToMatch('dist/test-project/main.js', '@tailwind base; @tailwind components;');
+}