From 69492206f79db0519f63d7e8d37a91c30c133208 Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 2 Jan 2023 20:17:35 +0800 Subject: [PATCH 1/3] Refactor tailwind integration setup --- .changeset/thick-walls-smell.md | 6 +++++ packages/astro/src/core/config/schema.ts | 28 --------------------- packages/astro/src/core/create-vite.ts | 3 --- packages/integrations/svelte/src/index.ts | 14 +++-------- packages/integrations/tailwind/src/index.ts | 28 ++++++++++++++++++--- 5 files changed, 34 insertions(+), 45 deletions(-) create mode 100644 .changeset/thick-walls-smell.md diff --git a/.changeset/thick-walls-smell.md b/.changeset/thick-walls-smell.md new file mode 100644 index 000000000000..d343fe7efee3 --- /dev/null +++ b/.changeset/thick-walls-smell.md @@ -0,0 +1,6 @@ +--- +'astro': major +'@astrojs/tailwind': major +--- + +Remove `style.postcss` Astro config. Refactor tailwind integration to configure through `vite` instead. Also disables `autoprefixer` in dev. diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts index a138f97718b0..744a6cc95d40 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/packages/astro/src/core/config/schema.ts @@ -29,7 +29,6 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = { port: 3000, streaming: true, }, - style: { postcss: { options: {}, plugins: [] } }, integrations: [], markdown: { drafts: false, @@ -136,18 +135,6 @@ export const AstroConfigSchema = z.object({ .optional() .default({}) ), - style: z - .object({ - postcss: z - .object({ - options: z.any(), - plugins: z.array(z.any()), - }) - .optional() - .default(ASTRO_CONFIG_DEFAULTS.style.postcss), - }) - .optional() - .default({}), markdown: z .object({ drafts: z.boolean().default(false), @@ -311,21 +298,6 @@ export function createRelativeSchema(cmd: string, fileProtocolRoot: URL) { .optional() .default({}) ), - style: z - .object({ - postcss: z.preprocess( - (val) => resolvePostcssConfig(val, fileProtocolRoot), - z - .object({ - options: z.any(), - plugins: z.array(z.any()), - }) - .optional() - .default(ASTRO_CONFIG_DEFAULTS.style.postcss) - ), - }) - .optional() - .default({}), }).transform((config) => { // If the user changed outDir but not build.server, build.config, adjust so those // are relative to the outDir, as is the expected default. diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index 942566c88eab..11de62e5bf0b 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -151,9 +151,6 @@ export async function createVite( ignored: mode === 'build' ? ['**'] : undefined, }, }, - css: { - postcss: settings.config.style.postcss || {}, - }, resolve: { alias: [ { diff --git a/packages/integrations/svelte/src/index.ts b/packages/integrations/svelte/src/index.ts index f162437c02f8..7c697761d985 100644 --- a/packages/integrations/svelte/src/index.ts +++ b/packages/integrations/svelte/src/index.ts @@ -1,6 +1,6 @@ import type { Options } from '@sveltejs/vite-plugin-svelte'; import { svelte } from '@sveltejs/vite-plugin-svelte'; -import type { AstroConfig, AstroIntegration, AstroRenderer } from 'astro'; +import type { AstroIntegration, AstroRenderer } from 'astro'; import preprocess from 'svelte-preprocess'; import type { UserConfig } from 'vite'; @@ -15,21 +15,16 @@ function getRenderer(): AstroRenderer { type ViteConfigurationArgs = { isDev: boolean; options?: Options | OptionsCallback; - postcssConfig: AstroConfig['style']['postcss']; }; -function getViteConfiguration({ - options, - postcssConfig, - isDev, -}: ViteConfigurationArgs): UserConfig { +function getViteConfiguration({ options, isDev }: ViteConfigurationArgs): UserConfig { const defaultOptions: Partial = { emitCss: true, compilerOptions: { dev: isDev, hydratable: true }, preprocess: [ preprocess({ less: true, - postcss: postcssConfig, + postcss: true, sass: { renderSync: true }, scss: { renderSync: true }, stylus: true, @@ -78,13 +73,12 @@ export default function (options?: Options | OptionsCallback): AstroIntegration name: '@astrojs/svelte', hooks: { // Anything that gets returned here is merged into Astro Config - 'astro:config:setup': ({ command, updateConfig, addRenderer, config }) => { + 'astro:config:setup': ({ command, updateConfig, addRenderer }) => { addRenderer(getRenderer()); updateConfig({ vite: getViteConfiguration({ options, isDev: command === 'dev', - postcssConfig: config.style.postcss, }), }); }, diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts index 28def50c757f..951868e9f2f7 100644 --- a/packages/integrations/tailwind/src/index.ts +++ b/packages/integrations/tailwind/src/index.ts @@ -66,6 +66,20 @@ async function getUserConfig(root: URL, configPath?: string, isRestart = false) } } +function getViteConfiguration(isBuild: boolean, tailwindConfig: TailwindConfig) { + const postcssPlugins = [tailwindPlugin(tailwindConfig)]; + if (isBuild) { + postcssPlugins.push(autoprefixerPlugin()); + } + return { + css: { + postcss: { + plugins: postcssPlugins, + }, + }, + }; +} + type TailwindOptions = | { config?: { @@ -92,7 +106,14 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt return { name: '@astrojs/tailwind', hooks: { - 'astro:config:setup': async ({ config, injectScript, addWatchFile, isRestart }) => { + 'astro:config:setup': async ({ + command, + config, + updateConfig, + injectScript, + addWatchFile, + isRestart, + }) => { // Inject the Tailwind postcss plugin const userConfig = await getUserConfig(config.root, customConfigPath, isRestart); @@ -108,10 +129,9 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt addWatchFile(userConfig.filePath); } - const tailwindConfig: TailwindConfig = + const tailwindConfig = (userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir); - config.style.postcss.plugins.push(tailwindPlugin(tailwindConfig)); - config.style.postcss.plugins.push(autoprefixerPlugin); + updateConfig({ vite: getViteConfiguration(command === 'build', tailwindConfig) }); if (applyBaseStyles) { // Inject the Tailwind base import From 8d604da4378d27984027cf2e40fcfd1e8646e26f Mon Sep 17 00:00:00 2001 From: bluwy Date: Wed, 4 Jan 2023 23:34:44 +0800 Subject: [PATCH 2/3] Add note about autoprefixer --- packages/integrations/tailwind/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index fa5532b854b9..d4e84e9d0718 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -68,6 +68,8 @@ export default defineConfig({ When you install the integration, Tailwind's utility classes should be ready to go right away. Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn how to use Tailwind, and if you see a utility class you want to try, add it to any HTML element to your project! +[Autoprefixer](https://github.com/postcss/autoprefixer) is also setup automatically for production builds so Tailwind classes work in older browsers. + https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4 ## Configuration From 13387d4a188561a98b7457231bc18db8e32c506c Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Thu, 5 Jan 2023 00:13:23 +0800 Subject: [PATCH 3/3] Update packages/integrations/tailwind/README.md Co-authored-by: Sarah Rainsberger --- packages/integrations/tailwind/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index d4e84e9d0718..3d333a95f66a 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -68,7 +68,7 @@ export default defineConfig({ When you install the integration, Tailwind's utility classes should be ready to go right away. Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn how to use Tailwind, and if you see a utility class you want to try, add it to any HTML element to your project! -[Autoprefixer](https://github.com/postcss/autoprefixer) is also setup automatically for production builds so Tailwind classes work in older browsers. +[Autoprefixer](https://github.com/postcss/autoprefixer) is also setup automatically for production builds so Tailwind classes will work in older browsers. https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4