diff options
| -rw-r--r-- | .changeset/thick-walls-smell.md | 6 | ||||
| -rw-r--r-- | packages/astro/src/core/config/schema.ts | 28 | ||||
| -rw-r--r-- | packages/astro/src/core/create-vite.ts | 3 | ||||
| -rw-r--r-- | packages/integrations/tailwind/README.md | 2 | ||||
| -rw-r--r-- | packages/integrations/tailwind/src/index.ts | 28 |
5 files changed, 32 insertions, 35 deletions
diff --git a/.changeset/thick-walls-smell.md b/.changeset/thick-walls-smell.md new file mode 100644 index 000000000..d343fe7ef --- /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 e0fa3df3c..4d139d322 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/packages/astro/src/core/config/schema.ts @@ -30,7 +30,6 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = { port: 3000, streaming: true, }, - style: { postcss: { options: {}, plugins: [] } }, integrations: [], markdown: { drafts: false, @@ -127,18 +126,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), @@ -300,21 +287,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 0e1b48e2d..2889734fe 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -150,9 +150,6 @@ export async function createVite( ignored: mode === 'build' ? ['**'] : undefined, }, }, - css: { - postcss: settings.config.style.postcss || {}, - }, resolve: { alias: [ { diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index fa5532b85..3d333a95f 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 will work in older browsers. + https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4 ## Configuration diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts index 28def50c7..951868e9f 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 |