diff --git a/.changeset/ten-paws-obey.md b/.changeset/ten-paws-obey.md new file mode 100644 index 000000000..7a867b112 --- /dev/null +++ b/.changeset/ten-paws-obey.md @@ -0,0 +1,5 @@ +--- +'@astrojs/tailwind': patch +--- + +Fix vite not picking up Postcss config files because of the tailwind integration \ No newline at end of file diff --git a/packages/integrations/tailwind/package.json b/packages/integrations/tailwind/package.json index a3bc9bbbf..ec34e19a7 100644 --- a/packages/integrations/tailwind/package.json +++ b/packages/integrations/tailwind/package.json @@ -30,12 +30,14 @@ "dependencies": { "@proload/core": "^0.3.2", "autoprefixer": "^10.4.7", - "postcss": "^8.4.14" + "postcss": "^8.4.14", + "postcss-load-config": "^4.0.1" }, "devDependencies": { "astro": "workspace:*", "astro-scripts": "workspace:*", - "tailwindcss": "^3.0.24" + "tailwindcss": "^3.0.24", + "vite": "^4.0.3" }, "peerDependencies": { "tailwindcss": "^3.0.24", diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts index 951868e9f..8783d8606 100644 --- a/packages/integrations/tailwind/src/index.ts +++ b/packages/integrations/tailwind/src/index.ts @@ -1,5 +1,6 @@ import load, { resolve } from '@proload/core'; import type { AstroIntegration } from 'astro'; +import type { CSSOptions, UserConfig } from 'vite'; import autoprefixerPlugin from 'autoprefixer'; import fs from 'fs/promises'; import path from 'path'; @@ -66,14 +67,46 @@ async function getUserConfig(root: URL, configPath?: string, isRestart = false) } } -function getViteConfiguration(isBuild: boolean, tailwindConfig: TailwindConfig) { - const postcssPlugins = [tailwindPlugin(tailwindConfig)]; +async function getPostCssConfig( + root: UserConfig['root'], + postcssInlineOptions: CSSOptions['postcss'] +) { + let postcssConfigResult; + // Check if postcss config is not inlined + if (!(typeof postcssInlineOptions === 'object' && postcssInlineOptions !== null)) { + let { default: postcssrc } = await import('postcss-load-config'); + const searchPath = typeof postcssInlineOptions === 'string' ? postcssInlineOptions : root!; + try { + postcssConfigResult = await postcssrc({}, searchPath); + } catch (e) { + postcssConfigResult = null; + } + } + return postcssConfigResult; +} + +async function getViteConfiguration( + isBuild: boolean, + tailwindConfig: TailwindConfig, + viteConfig: UserConfig +) { + // We need to manually load postcss config files because when inlining the tailwind and autoprefixer plugins, + // that causes vite to ignore postcss config files + const postcssConfigResult = await getPostCssConfig(viteConfig.root, viteConfig.css?.postcss); + + const postcssOptions = (postcssConfigResult && postcssConfigResult.options) || {}; + + const postcssPlugins = + postcssConfigResult && postcssConfigResult.plugins ? postcssConfigResult.plugins.slice() : []; + postcssPlugins.push(tailwindPlugin(tailwindConfig)); + if (isBuild) { postcssPlugins.push(autoprefixerPlugin()); } return { css: { postcss: { + options: postcssOptions, plugins: postcssPlugins, }, }, @@ -131,7 +164,10 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt const tailwindConfig = (userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir); - updateConfig({ vite: getViteConfiguration(command === 'build', tailwindConfig) }); + + updateConfig({ + vite: await getViteConfiguration(command === 'build', tailwindConfig, config.vite), + }); if (applyBaseStyles) { // Inject the Tailwind base import diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5cf0c989a..0802dfd48 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3269,15 +3269,19 @@ importers: astro-scripts: workspace:* autoprefixer: ^10.4.7 postcss: ^8.4.14 + postcss-load-config: ^4.0.1 tailwindcss: ^3.0.24 + vite: ^4.0.3 dependencies: '@proload/core': 0.3.3 autoprefixer: 10.4.13_postcss@8.4.21 postcss: 8.4.21 + postcss-load-config: 4.0.1_postcss@8.4.21 devDependencies: astro: link:../../astro astro-scripts: link:../../../scripts tailwindcss: 3.2.4_postcss@8.4.21 + vite: 4.0.4 packages/integrations/turbolinks: specifiers: @@ -12810,6 +12814,23 @@ packages: postcss: 8.4.21 yaml: 1.10.2 + /postcss-load-config/4.0.1_postcss@8.4.21: + resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} + engines: {node: '>= 14'} + peerDependencies: + postcss: '>=8.0.9' + ts-node: '>=9.0.0' + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + dependencies: + lilconfig: 2.0.6 + postcss: 8.4.21 + yaml: 2.2.1 + dev: false + /postcss-logical/5.0.4_postcss@8.4.21: resolution: {integrity: sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==} engines: {node: ^12 || ^14 || >=16} @@ -15701,6 +15722,11 @@ packages: resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} engines: {node: '>= 6'} + /yaml/2.2.1: + resolution: {integrity: sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==} + engines: {node: '>= 14'} + dev: false + /yargs-parser/18.1.3: resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==} engines: {node: '>=6'}