Skip to content
This repository has been archived by the owner on Jan 27, 2023. It is now read-only.

Commit

Permalink
Reverted a change in withastro#5717 (Refactor tailwind integration se…
Browse files Browse the repository at this point in the history
…tup) that removed autoprefixer in non build modes
  • Loading branch information
royeden committed Jan 27, 2023
1 parent 5e3d538 commit 28d2303
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 8 deletions.
2 changes: 1 addition & 1 deletion examples/with-tailwindcss/src/components/Button.astro
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
---

<button
class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
class="appearance-none py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
>
<slot />
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ let { type = 'button' } = Astro.props;
---

<button
class="py-2 px-4 lg:py-3 lg:px-5 bg-purple-600 text-white font-[900] rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
class="appearance-none py-2 px-4 lg:py-3 lg:px-5 bg-purple-600 text-white font-[900] rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
{type}
>
<slot />
Expand Down
11 changes: 11 additions & 0 deletions packages/astro/e2e/tailwindcss.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,17 @@ test.describe('Tailwind CSS', () => {

const button = page.locator('button');

await expect(button, 'should have appearance none').toHaveClass(/appearance-none/);
await expect(button, 'should have appearance: none').toHaveCSS('appearance', 'none');
// await expect(button, 'should have appearance none with moz prefix').toHaveCSS(
// '-moz-appearance',
// 'none'
// );
await expect(button, 'should have appearance-none with webkit prefix').toHaveCSS(
'-webkit-appearance',
'none'
);

await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
await expect(button, 'should have background color').toHaveCSS(
'background-color',
Expand Down
8 changes: 2 additions & 6 deletions packages/integrations/tailwind/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ async function getPostCssConfig(
}

async function getViteConfiguration(
isBuild: boolean,
tailwindConfig: TailwindConfig,
viteConfig: UserConfig
) {
Expand All @@ -100,9 +99,7 @@ async function getViteConfiguration(
postcssConfigResult && postcssConfigResult.plugins ? postcssConfigResult.plugins.slice() : [];
postcssPlugins.push(tailwindPlugin(tailwindConfig));

if (isBuild) {
postcssPlugins.push(autoprefixerPlugin());
}
postcssPlugins.push(autoprefixerPlugin());
return {
css: {
postcss: {
Expand Down Expand Up @@ -140,7 +137,6 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
name: '@astrojs/tailwind',
hooks: {
'astro:config:setup': async ({
command,
config,
updateConfig,
injectScript,
Expand All @@ -166,7 +162,7 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);

updateConfig({
vite: await getViteConfiguration(command === 'build', tailwindConfig, config.vite),
vite: await getViteConfiguration(tailwindConfig, config.vite),
});

if (applyBaseStyles) {
Expand Down

0 comments on commit 28d2303

Please sign in to comment.