diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/integrations/tailwind/package.json | 6 | ||||
| -rw-r--r-- | packages/integrations/tailwind/src/index.ts | 42 |
2 files changed, 43 insertions, 5 deletions
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 |