michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(@astrojs/tailwind): manually load postcss config file (#5908)

Browse source
This commit is contained in:
Happydev 2023-01-23 15:46:19 +01:00 committed by GitHub
parent 77ae7a597a
commit 9e57268f13
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/ten-paws-obey.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/tailwind': patch
---
Fix vite not picking up Postcss config files because of the tailwind integration

6
packages/integrations/tailwind/package.json
View file

@ -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",

42
packages/integrations/tailwind/src/index.ts
View file

@ -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

26
pnpm-lock.yaml
View file

@ -3261,15 +3261,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:
@ -12802,6 +12806,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}
@ -15693,6 +15714,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'}