summaryrefslogtreecommitdiff
path: root/packages/integrations/tailwind/src/index.ts
diff options
context:
space:
mode:
authorGravatar Juan Martín Seery <me@juanm04.com> 2022-10-12 12:36:33 -0300
committerGravatar GitHub <noreply@github.com> 2022-10-12 11:36:33 -0400
commita5e3ecc8039c1e115ce5597362e18cd35d04e40b (patch)
tree6015063e23eb8923d3b6dd25944c31c92267a7ae /packages/integrations/tailwind/src/index.ts
parent5412c0c1146d8583828ede647e4f653a68cfeb01 (diff)
downloadastro-a5e3ecc8039c1e115ce5597362e18cd35d04e40b.tar.gz
astro-a5e3ecc8039c1e115ce5597362e18cd35d04e40b.tar.zst
astro-a5e3ecc8039c1e115ce5597362e18cd35d04e40b.zip
feat: restart dev server when tsconfig and tailwind config changes (#4947)
* First run * Works with tailwind! * Added TSConfig to watchlist * Changeset * Fix eslint * Renamed `isConfigReload` --> `isRestart` and `injectWatchTarget` --> `addWatchFile` * Refactored watchTargets to watchFiles * Refactor createSettings * addWatchFile now accepts URL * Fix getViteConfig * Expanded description of the change Co-authored-by: Matthew Phillips <matthew@skypack.dev>
Diffstat (limited to '')
-rw-r--r--packages/integrations/tailwind/src/index.ts50
1 files changed, 45 insertions, 5 deletions
diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts
index 1e5008f6c..2f1b68e28 100644
--- a/packages/integrations/tailwind/src/index.ts
+++ b/packages/integrations/tailwind/src/index.ts
@@ -1,6 +1,7 @@
-import load from '@proload/core';
+import load, { resolve } from '@proload/core';
import type { AstroIntegration } from 'astro';
import autoprefixerPlugin from 'autoprefixer';
+import fs from 'fs/promises';
import path from 'path';
import tailwindPlugin, { Config as TailwindConfig } from 'tailwindcss';
import resolveConfig from 'tailwindcss/resolveConfig.js';
@@ -17,7 +18,7 @@ function getDefaultTailwindConfig(srcUrl: URL): TailwindConfig {
}) as TailwindConfig;
}
-async function getUserConfig(root: URL, configPath?: string) {
+async function getUserConfig(root: URL, configPath?: string, isRestart = false) {
const resolvedRoot = fileURLToPath(root);
let userConfigPath: string | undefined;
@@ -26,7 +27,42 @@ async function getUserConfig(root: URL, configPath?: string) {
userConfigPath = fileURLToPath(new URL(configPathWithLeadingSlash, root));
}
- return await load('tailwind', { mustExist: false, cwd: resolvedRoot, filePath: userConfigPath });
+ if (isRestart) {
+ // Hack: Write config to temporary file at project root
+ // This invalidates and reloads file contents when using ESM imports or "resolve"
+ const resolvedConfigPath = (await resolve('tailwind', {
+ mustExist: false,
+ cwd: resolvedRoot,
+ filePath: userConfigPath,
+ })) as string;
+
+ const { dir, base } = path.parse(resolvedConfigPath);
+ const tempConfigPath = path.join(dir, `.temp.${Date.now()}.${base}`);
+ await fs.copyFile(resolvedConfigPath, tempConfigPath);
+
+ const result = await load('tailwind', {
+ mustExist: false,
+ cwd: resolvedRoot,
+ filePath: tempConfigPath,
+ });
+
+ try {
+ await fs.unlink(tempConfigPath);
+ } catch {
+ /** file already removed */
+ }
+
+ return {
+ ...result,
+ filePath: resolvedConfigPath,
+ };
+ } else {
+ return await load('tailwind', {
+ mustExist: false,
+ cwd: resolvedRoot,
+ filePath: userConfigPath,
+ });
+ }
}
type TailwindOptions =
@@ -55,9 +91,9 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
return {
name: '@astrojs/tailwind',
hooks: {
- 'astro:config:setup': async ({ config, injectScript }) => {
+ 'astro:config:setup': async ({ config, injectScript, addWatchFile, isRestart }) => {
// Inject the Tailwind postcss plugin
- const userConfig = await getUserConfig(config.root, customConfigPath);
+ const userConfig = await getUserConfig(config.root, customConfigPath, isRestart);
if (customConfigPath && !userConfig?.value) {
throw new Error(
@@ -67,6 +103,10 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
);
}
+ if (userConfig?.filePath) {
+ addWatchFile(userConfig.filePath);
+ }
+
const tailwindConfig: TailwindConfig =
(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
config.style.postcss.plugins.push(tailwindPlugin(tailwindConfig));