refactor(@schematics/angular): add dynamic stylesheet injection to tailwind schematic

The tailwind schematic's stylesheet injection logic has been updated to support a wider range of project configurations. Previously, it assumed a `styles.css` file was always present, which could cause issues in projects using CSS preprocessors like Sass/SCSS.

This change introduces the following logic:
- Detects if a global CSS file already exists to add the Tailwind import.
- Creates a new `tailwind.css` file if no global CSS file is found.
- Updates the build configuration in `angular.json` to include the new `tailwind.css` file.
- Updates the `styles` array in all build configurations (`production`, `development`, etc.) to ensure Tailwind is included in all builds.
- Ensures the schematic is idempotent by checking for existing Tailwind imports before adding a new one.

These changes make the schematic more robust and provide a better user experience for a wider variety of project setups.

Author: clydin

packages/schematics/angular/tailwind/index.ts

@@ -17,42 +17,75 @@ import {
   strings,
   url,
 } from '@angular-devkit/schematics';
-import { DependencyType, ExistingBehavior, addDependency } from '../utility';
+import assert from 'node:assert';
+import { join } from 'node:path/posix';
+import {
+  DependencyType,
+  ExistingBehavior,
+  ProjectDefinition,
+  addDependency,
+  updateWorkspace,
+} from '../utility';
 import { latestVersions } from '../utility/latest-versions';
 import { createProjectSchematic } from '../utility/project';
 
 const TAILWIND_DEPENDENCIES = ['tailwindcss', '@tailwindcss/postcss', 'postcss'];
 
-function addTailwindImport(stylesheetPath: string): Rule {
-  return (tree) => {
-    let stylesheetText = '';
+function addTailwindStyles(options: { project: string }, project: ProjectDefinition): Rule {
+  return async (tree) => {
+    const buildTarget = project.targets.get('build');
 
-    if (tree.exists(stylesheetPath)) {
-      stylesheetText = tree.readText(stylesheetPath);
-      stylesheetText += '\n';
+    if (!buildTarget) {
+      throw new SchematicsException(`Project "${options.project}" does not have a build target.`);
     }
 
-    stylesheetText += '@import "tailwindcss";\n';
+    const styles = buildTarget.options?.['styles'] as (string | { input: string })[] | undefined;
 
-    tree.overwrite(stylesheetPath, stylesheetText);
-  };
-}
-
-export default createProjectSchematic((options, { project }) => {
-  const buildTarget = project.targets.get('build');
+    let stylesheetPath: string | undefined;
+    if (styles) {
+      stylesheetPath = styles
+        .map((s) => (typeof s === 'string' ? s : s.input))
+        .find((p) => p.endsWith('.css'));
+    }
 
-  if (!buildTarget) {
-    throw new SchematicsException(`Project "${options.project}" does not have a build target.`);
-  }
+    if (!stylesheetPath) {
+      const newStylesheetPath = join(project.sourceRoot ?? 'src', 'tailwind.css');
+      tree.create(newStylesheetPath, '@import "tailwindcss";\n');
 
-  const styles = buildTarget.options?.['styles'] as string[] | undefined;
+      return updateWorkspace((workspace) => {
+        const project = workspace.projects.get(options.project);
+        if (project) {
+          const buildTarget = project.targets.get('build');
+          assert(buildTarget, 'Build target should still be present');
 
-  if (!styles || styles.length === 0) {
-    throw new SchematicsException(`Project "${options.project}" does not have any global styles.`);
-  }
+          // Update main styles
+          const buildOptions = buildTarget.options;
+          assert(buildOptions, 'Build options should still be present');
+          const existingStyles = (buildOptions['styles'] as (string | { input: string })[]) ?? [];
+          buildOptions['styles'] = [newStylesheetPath, ...existingStyles];
 
-  const stylesheetPath = styles[0];
+          // Update configuration styles
+          if (buildTarget.configurations) {
+            for (const config of Object.values(buildTarget.configurations)) {
+              if (config && 'styles' in config) {
+                const existingStyles = (config['styles'] as (string | { input: string })[]) ?? [];
+                config['styles'] = [newStylesheetPath, ...existingStyles];
+              }
+            }
+          }
+        }
+      });
+    } else {
+      let stylesheetContent = tree.readText(stylesheetPath);
+      if (!stylesheetContent.includes('@import "tailwindcss";')) {
+        stylesheetContent += '\n@import "tailwindcss";\n';
+        tree.overwrite(stylesheetPath, stylesheetContent);
+      }
+    }
+  };
+}
 
+export default createProjectSchematic((options, { project }) => {
   const templateSource = apply(url('./files'), [
     applyTemplates({
       ...strings,
@@ -62,7 +95,7 @@ export default createProjectSchematic((options, { project }) => {
   ]);
 
   return chain([
-    addTailwindImport(stylesheetPath),
+    addTailwindStyles(options, project),
     mergeWith(templateSource),
     ...TAILWIND_DEPENDENCIES.map((name) =>
       addDependency(name, latestVersions[name], {

packages/schematics/angular/tailwind/index_spec.ts

@@ -63,4 +63,91 @@ describe('Tailwind Schematic', () => {
     const stylesContent = tree.readContent('/projects/bar/src/styles.css');
     expect(stylesContent).toContain('@import "tailwindcss";');
   });
+
+  it('should not add duplicate tailwind imports to styles.css', async () => {
+    let tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
+    const stylesContent = tree.readContent('/projects/bar/src/styles.css');
+    expect(stylesContent.match(/@import "tailwindcss";/g)?.length).toBe(1);
+
+    tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, tree);
+    const stylesContentAfter = tree.readContent('/projects/bar/src/styles.css');
+    expect(stylesContentAfter.match(/@import "tailwindcss";/g)?.length).toBe(1);
+  });
+
+  describe('with scss styles', () => {
+    beforeEach(async () => {
+      appTree = await schematicRunner.runSchematic('workspace', workspaceOptions);
+      appTree = await schematicRunner.runSchematic(
+        'application',
+        { ...appOptions, style: Style.Scss },
+        appTree,
+      );
+    });
+
+    it('should create a tailwind.css file', async () => {
+      const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
+      expect(tree.exists('/projects/bar/src/tailwind.css')).toBe(true);
+      const stylesContent = tree.readContent('/projects/bar/src/tailwind.css');
+      expect(stylesContent).toContain('@import "tailwindcss";');
+    });
+
+    it('should add tailwind.css to angular.json', async () => {
+      const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
+      const angularJson = JSON.parse(tree.readContent('/angular.json'));
+      const styles = angularJson.projects.bar.architect.build.options.styles;
+      expect(styles).toEqual(['projects/bar/src/tailwind.css', 'projects/bar/src/styles.scss']);
+    });
+
+    it('should not add tailwind imports to styles.scss', async () => {
+      const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
+      const stylesContent = tree.readContent('/projects/bar/src/styles.scss');
+      expect(stylesContent).not.toContain('@import "tailwindcss";');
+    });
+  });
+
+  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));
+    });
+
+    it('should add tailwind.css to all configurations with styles', async () => {
+      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']);
+    });
+
+    it('should not modify configurations without a styles property', async () => {
+      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();
+    });
+  });
 });