refactor(@schematics/angular): add PostCSS configuration detection to tailwind schematic

The Tailwind schematic now intelligently handles existing PostCSS configurations.

Instead of unconditionally creating a new `.postcssrc.json` file, the schematic now searches for `postcss.config.json` or `.postcssrc.json` in both the workspace and project roots. If an existing configuration file is found, it is updated with the required `@tailwindcss/postcss` plugin. A new configuration file is only created if one does not already exist.

This prevents conflicts and makes the schematic safer to use in projects that already have a customized PostCSS setup.

Author: clydin

packages/schematics/angular/tailwind/index.ts

@@ -26,10 +26,12 @@ import {
   addDependency,
   updateWorkspace,
 } from '../utility';
+import { JSONFile } from '../utility/json-file';
 import { latestVersions } from '../utility/latest-versions';
 import { createProjectSchematic } from '../utility/project';
 
 const TAILWIND_DEPENDENCIES = ['tailwindcss', '@tailwindcss/postcss', 'postcss'];
+const POSTCSS_CONFIG_FILES = ['.postcssrc.json', 'postcss.config.json'];
 
 function addTailwindStyles(options: { project: string }, project: ProjectDefinition): Rule {
   return async (tree) => {
@@ -85,18 +87,43 @@ function addTailwindStyles(options: { project: string }, project: ProjectDefinit
   };
 }
 
-export default createProjectSchematic((options, { project }) => {
-  const templateSource = apply(url('./files'), [
-    applyTemplates({
-      ...strings,
-      ...options,
-    }),
-    move(project.root),
-  ]);
+function managePostCssConfiguration(project: ProjectDefinition): Rule {
+  return async (tree) => {
+    const searchPaths = ['/', project.root]; // Workspace root and project root
+
+    for (const path of searchPaths) {
+      for (const configFile of POSTCSS_CONFIG_FILES) {
+        const fullPath = join(path, configFile);
+        if (tree.exists(fullPath)) {
+          const postcssConfig = new JSONFile(tree, fullPath);
+          const tailwindPluginPath = ['plugins', '@tailwindcss/postcss'];
+
+          if (postcssConfig.get(tailwindPluginPath) === undefined) {
+            postcssConfig.modify(tailwindPluginPath, {});
+          }
+
+          // Config found and handled
+          return;
+        }
+      }
+    }
+
+    // No existing config found, so create one from the template
+    const templateSource = apply(url('./files'), [
+      applyTemplates({
+        ...strings,
+      }),
+      move(project.root),
+    ]);
 
+    return mergeWith(templateSource);
+  };
+}
+
+export default createProjectSchematic((options, { project }) => {
   return chain([
     addTailwindStyles(options, project),
-    mergeWith(templateSource),
+    managePostCssConfiguration(project),
     ...TAILWIND_DEPENDENCIES.map((name) =>
       addDependency(name, latestVersions[name], {
         type: DependencyType.Dev,

packages/schematics/angular/tailwind/index_spec.ts

@@ -105,49 +105,30 @@ describe('Tailwind Schematic', () => {
     });
   });
 
-  describe('with complex build configurations', () => {
-    beforeEach(async () => {
-      appTree = await schematicRunner.runSchematic('workspace', workspaceOptions);
-      appTree = await schematicRunner.runSchematic(
-        'application',
-        { ...appOptions, style: Style.Scss },
-        appTree,
-      );
-
-      const angularJson = JSON.parse(appTree.readContent('/angular.json'));
-      angularJson.projects.bar.architect.build.configurations = {
-        ...angularJson.projects.bar.architect.build.configurations,
-        staging: {
-          styles: [],
-        },
-        production: {
-          styles: ['projects/bar/src/styles.prod.scss'],
-        },
-        development: {
-          // No styles property
-        },
-      };
-      appTree.overwrite('/angular.json', JSON.stringify(angularJson, null, 2));
+  describe('with postcss configuration', () => {
+    it('should create a .postcssrc.json if one does not exist', async () => {
+      const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
+      expect(tree.exists('/projects/bar/.postcssrc.json')).toBe(true);
     });
 
-    it('should add tailwind.css to all configurations with styles', async () => {
+    it('should update an existing .postcssrc.json in the project root', async () => {
+      appTree.create(
+        '/projects/bar/.postcssrc.json',
+        JSON.stringify({ plugins: { autoprefixer: {} } }),
+      );
       const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
-      const angularJson = JSON.parse(tree.readContent('/angular.json'));
-      const { configurations } = angularJson.projects.bar.architect.build;
-
-      expect(configurations.production.styles).toEqual([
-        'projects/bar/src/tailwind.css',
-        'projects/bar/src/styles.prod.scss',
-      ]);
-      expect(configurations.staging.styles).toEqual(['projects/bar/src/tailwind.css']);
+      const postCssConfig = JSON.parse(tree.readContent('/projects/bar/.postcssrc.json'));
+      expect(postCssConfig.plugins['@tailwindcss/postcss']).toBeDefined();
+      expect(postCssConfig.plugins['autoprefixer']).toBeDefined();
     });
 
-    it('should not modify configurations without a styles property', async () => {
+    it('should update an existing postcss.config.json in the workspace root', async () => {
+      appTree.create('/postcss.config.json', JSON.stringify({ plugins: { autoprefixer: {} } }));
       const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
-      const angularJson = JSON.parse(tree.readContent('/angular.json'));
-      const { configurations } = angularJson.projects.bar.architect.build;
-
-      expect(configurations.development.styles).toBeUndefined();
+      const postCssConfig = JSON.parse(tree.readContent('/postcss.config.json'));
+      expect(postCssConfig.plugins['@tailwindcss/postcss']).toBeDefined();
+      expect(postCssConfig.plugins['autoprefixer']).toBeDefined();
+      expect(tree.exists('/projects/bar/.postcssrc.json')).toBe(false);
     });
   });
 });