feat(create-analog): update app generators and templates to use TypeS…

…cript for Tailwind config (#1387)

libs/card/vite.config.ts

@@ -14,9 +14,7 @@ export default defineConfig(({ mode }) => {
       environment: 'jsdom',
       setupFiles: ['src/test-setup.ts'],
       include: ['**/*.spec.ts'],
-      cache: {
-        dir: `../../node_modules/.vitest`,
-      },
+      cacheDir: '../../node_modules/.vitest',
     },
     define: {
       'import.meta.vitest': mode !== 'production',

libs/top-bar/vite.config.ts

@@ -14,9 +14,7 @@ export default defineConfig(({ mode }) => {
       environment: 'jsdom',
       setupFiles: ['src/test-setup.ts'],
       include: ['**/*.spec.ts'],
-      cache: {
-        dir: `../../node_modules/.vitest`,
-      },
+      cacheDir: '../../node_modules/.vitest',
     },
     define: {
       'import.meta.vitest': mode !== 'production',

package.json

@@ -167,7 +167,7 @@
     "sharp": "^0.33.5",
     "shiki": "^1.6.1",
     "start-server-and-test": "^1.15.4",
-    "tailwindcss": "^3.0.2",
+    "tailwindcss": "^3.1.0",
     "ts-jest": "29.1.0",
     "ts-morph": "^21.0.1",
     "ts-node": "10.9.1",

packages/create-analog/__tests__/cli.spec.ts

@@ -36,7 +36,7 @@ templateFiles = templateFiles
 // starter with tailwind
 const templateFilesTailwind = [
   ...templateFiles,
-  'tailwind.config.js',
+  'tailwind.config.ts',
   'postcss.config.js',
 ].sort();
 beforeAll(() => remove(genPath));

packages/create-analog/files/tailwind.config.cjs → packages/create-analog/files/tailwind.config.ts

@@ -1,8 +1,9 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+import type { Config } from 'tailwindcss';
+
+export default {
   content: ['./index.html', './src/**/*.{html,ts,md,analog,ag}'],
   theme: {
     extend: {},
   },
   plugins: [],
-};
+} satisfies Config;

packages/create-analog/index.js

@@ -379,8 +379,8 @@ function addPostCssConfig(write, filesDir) {
 
 function addTailwindConfig(write, filesDir) {
   write(
-    'tailwind.config.cjs',
-    fs.readFileSync(path.join(filesDir, `tailwind.config.cjs`), 'utf-8')
+    'tailwind.config.ts',
+    fs.readFileSync(path.join(filesDir, `tailwind.config.ts`), 'utf-8')
   );
 }
 

packages/nx-plugin/src/generators/app/files/tailwind/latest/postcss.config.cjs__template__

@@ -0,0 +1,10 @@
+const { join } = require('node:path');
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.ts')
+    },
+    autoprefixer: {}
+  }
+};

packages/nx-plugin/src/generators/app/files/tailwind/latest/tailwind.config.ts__template__

@@ -0,0 +1,13 @@
+import type { Config } from 'tailwindcss';
+import { createGlobPatternsForDependencies } from '@nx/angular/tailwind';
+
+export default {
+  content: [
+    join(__dirname, '<%= relativeSourceRoot %>/**/!(*.stories|*.spec).{ts,html,md,analog,ag}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;

packages/nx-plugin/src/generators/app/generator.spec.ts

@@ -208,7 +208,7 @@ describe('nx-plugin generator', () => {
   ) => {
     expect(devDependencies['tailwindcss']).toBeDefined();
     const hasTailwindConfigFile = tree.exists(
-      'apps/tailwind-app/tailwind.config.cjs'
+      'apps/tailwind-app/tailwind.config.ts'
     );
     const hasPostCSSConfigFile = tree.exists(
       'apps/tailwind-app/postcss.config.cjs'

packages/nx-plugin/src/generators/app/lib/add-tailwind-helpers.ts

@@ -165,10 +165,19 @@ export function addTailwindConfigPathToProject(
     );
   }
 
-  buildTarget.options = {
-    ...buildTarget.options,
-    tailwindConfig: joinPathFragments(project.root, 'tailwind.config.js'),
-  };
+  const tailwindInstalledVersion = detectTailwindInstalledVersion(tree);
+
+  if (tailwindInstalledVersion === '2') {
+    buildTarget.options = {
+      ...buildTarget.options,
+      tailwindConfig: joinPathFragments(project.root, 'tailwind.config.js'),
+    };
+  } else {
+    buildTarget.options = {
+      ...buildTarget.options,
+      tailwindConfig: joinPathFragments(project.root, 'tailwind.config.ts'),
+    };
+  }
 
   updateProjectConfiguration(tree, options.project, project);
 }
@@ -180,14 +189,29 @@ export function addTailwindConfigFile(
 ): void {
   if (tree.exists(joinPathFragments(project.root, 'tailwind.config.js'))) {
     throw new Error(
-      stripIndents`The "tailwind.config.js" file already exists in the project "${options.project}". Are you sure this is the right project to set up Tailwind?
+      stripIndents`The "tailwind.config" file already exists in the project "${options.project}". Are you sure this is the right project to set up Tailwind?
       If you are sure, you can remove the existing file and re-run the generator.`
     );
   }
 
+  const tailwindInstalledVersion = detectTailwindInstalledVersion(tree);
+
+  if (tailwindInstalledVersion === '2') {
+    generateFiles(
+      tree,
+      joinPathFragments(__dirname, '..', 'files', 'tailwind/v2'),
+      project.root,
+      {
+        relativeSourceRoot: relative(project.root, project.sourceRoot),
+        template: '',
+      }
+    );
+    return;
+  }
+
   generateFiles(
     tree,
-    joinPathFragments(__dirname, '..', 'files', 'tailwind'),
+    joinPathFragments(__dirname, '..', 'files', 'tailwind/latest'),
     project.root,
     {
       relativeSourceRoot: relative(project.root, project.sourceRoot),

packages/nx-plugin/vite.config.ts

@@ -11,9 +11,7 @@ export default defineConfig(({ mode }) => {
       globals: true,
       include: ['**/*.spec.ts'],
       exclude: ['**/files/**/*.spec.ts'],
-      cache: {
-        dir: `../../node_modules/.vitest`,
-      },
+      cacheDir: '../../node_modules/.vitest',
     },
     define: {
       'import.meta.vitest': mode !== 'production',