diff options
author | 2022-10-12 12:36:33 -0300 | |
---|---|---|
committer | 2022-10-12 11:36:33 -0400 | |
commit | a5e3ecc8039c1e115ce5597362e18cd35d04e40b (patch) | |
tree | 6015063e23eb8923d3b6dd25944c31c92267a7ae /packages/integrations/tailwind/src/index.ts | |
parent | 5412c0c1146d8583828ede647e4f653a68cfeb01 (diff) | |
download | astro-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.ts | 50 |
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)); |