Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor tailwind integration setup #5717

Merged
merged 4 commits into from
Jan 5, 2023
Merged

Refactor tailwind integration setup #5717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6949220
Refactor tailwind integration setup
bluwy Jan 2, 2023
d3af05a
Merge branch 'main' into tailwind-refactor
bluwy Jan 4, 2023
8d604da
Add note about autoprefixer
bluwy Jan 4, 2023
13387d4
Update packages/integrations/tailwind/README.md
bluwy Jan 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/thick-walls-smell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
28 changes: 0 additions & 28 deletions packages/astro/src/core/config/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
port: 3000,
streaming: true,
},
style: { postcss: { options: {}, plugins: [] } },
integrations: [],
markdown: {
drafts: false,
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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.
Expand Down
3 changes: 0 additions & 3 deletions packages/astro/src/core/create-vite.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,9 +150,6 @@ export async function createVite(
ignored: mode === 'build' ? ['**'] : undefined,
},
},
css: {
postcss: settings.config.style.postcss || {},
},
resolve: {
alias: [
{
Expand Down
2 changes: 2 additions & 0 deletions packages/integrations/tailwind/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
28 changes: 24 additions & 4 deletions packages/integrations/tailwind/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bluwy Setting an inline PostCSS config in Vite, has the effect that Vite no longer looks for postcss.config.cjs.

See:

Note if an inline config is provided, Vite will not search for other PostCSS config sources.
https://vitejs.dev/config/shared-options.html#css-postcss

That results in by adding the Tailwind Integration 3.0.0-beta.x, postcss.config.cjs no longer work as described in the Astro Docs.
https://docs.astro.build/en/guides/styling/#postcss

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm that's true, but I think that happens before this PR too as Astro was assigning to the property internally:

https://github.com/withastro/astro/pull/5717/files#diff-025f8338e5be413b0f65c74bc50d6484c6bc9bb4f78847da0ba896b8e9569390L153-L155

I guess for the tailwind integration we need to read postcss.config.js too to resolve this.

Copy link

@LexSwed LexSwed Jan 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirming, trying latest @beta packages makes Tailwind to ignore postcss.config.js (f.e. to enable nesting)

Seem to be addressed in: #5908

Copy link
Member

@MoustaphaDev MoustaphaDev Jan 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seem to be addressed in: #5908

Came up with a possible fix for the issue, but I'm hitting another issue. Applying changes to the postcss.config.js file only has effect after restarting the dev server.

I just wanted to know if it was an issue before, so that it will get addressed in another PR and doesn't block the current one.

Any ideas?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it was looking at the old code. I'd be fine merging it first, then handle the restart later.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it was looking at the old code. I'd be fine merging it first, then handle the restart later.

Sounds good, thanks!

},
},
};
}

type TailwindOptions =
| {
config?: {
Expand All @@ -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);

Expand All @@ -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
Expand Down