feat(@angular-devkit/build-angular): detect and use tailwindcss in projects

clydin · alan-agius4 · commit 73b409881f71 · 2021-02-03T09:57:06.000+01:00
This feature adds detection of the `tailwindcss` package (https://tailwindcss.com) and provides a mechanism to automatically include support. To enable tailwindcss for a project, two actions must be taken: 1) Install `tailwindcss` into the Angular workspace (`npm install -D tailwindcss`/`yarn add -D tailwindcss`) 2) Create a tailwindcss configuration file (`tailwind.config.js`) in either the workspace root or the project root. A configuration file in the project root takes precedence over one in the workspace root. When both conditions are met, the Angular CLI will initialize and integrate tailwindcss into the stylesheet build pipeline.
diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json
@@ -87,6 +87,7 @@
     "karma": "^5.2.0 || ^6.0.0",
     "ng-packagr": "^11.0.0 || ^11.1.0-next",
     "protractor": "^7.0.0",
+    "tailwindcss": "^2.0.0",
     "tslint": "^6.1.0",
     "typescript": "~4.0.0 || ~4.1.0"
   },
@@ -106,6 +107,9 @@
     "protractor": {
       "optional": true
     },
+    "tailwindcss": {
+      "optional": true
+    },
     "tslint": {
       "optional": true
     }
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
@@ -156,6 +156,38 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
   const assetNameTemplate = assetNameTemplateFactory(hashFormat);
 
+  const extraPostcssPlugins: import('postcss').Plugin[] = [];
+
+  // Attempt to setup Tailwind CSS
+  // A configuration file can exist in the project or workspace root
+  const tailwindConfigFile = 'tailwind.config.js';
+  let tailwindConfigPath;
+  for (const basePath of [wco.projectRoot, wco.root]) {
+    const fullPath = path.join(basePath, tailwindConfigFile);
+    if (fs.existsSync(fullPath)) {
+      tailwindConfigPath = fullPath;
+    }
+  }
+  // Only load Tailwind CSS plugin if configuration file was found.
+  // This acts as a guard to ensure the project actually wants to use Tailwind CSS.
+  // The package may be unknowningly present due to a third-party transitive package dependency.
+  if (tailwindConfigPath) {
+    let tailwindPackagePath;
+    try {
+      tailwindPackagePath = require.resolve('tailwindcss', { paths: [wco.root] });
+    } catch {
+      const relativeTailwindConfigPath = path.relative(wco.root, tailwindConfigPath);
+      wco.logger.warn(
+        `Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
+          ` but the 'tailwindcss' package is not installed.` +
+          ` To enable Tailwind CSS, please install the 'tailwindcss' package.`,
+      );
+    }
+    if (tailwindPackagePath) {
+      extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));
+    }
+  }
+
   const postcssOptionsCreator = (sourceMap: boolean, extracted: boolean | undefined) => {
     return (loader: webpack.loader.LoaderContext) => ({
       map: sourceMap && {
@@ -189,6 +221,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
           emitFile: buildOptions.platform !== 'server',
           extracted,
         }),
+        ...extraPostcssPlugins,
         autoprefixer(),
       ],
     });
diff --git a/tests/legacy-cli/e2e/tests/build/styles/tailwind.ts b/tests/legacy-cli/e2e/tests/build/styles/tailwind.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');
+
+  // 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');
+
+  // 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');
+  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');
+  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;');
+}
