michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: autoprefixer on dev mode for tailwind plugin (#6002)

Browse source 
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Roy Eden 2023-01-27 12:14:19 -03:00 committed by GitHub
parent 12c68343c0
commit 254eb21c83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/mean-tips-search.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/tailwind': patch
---
Re-enable autoprefixer in dev

2
examples/with-tailwindcss/src/components/Button.astro
View file

@ -4,7 +4,7 @@
--- ---
<button <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 /> <slot />
</button> </button>

2
packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro
View file

@ -3,7 +3,7 @@ let { type = 'button' } = Astro.props;
--- ---
<button <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} {type}
> >
<slot /> <slot />

7
packages/astro/e2e/tailwindcss.test.js
View file

@ -33,6 +33,13 @@ test.describe('Tailwind CSS', () => {
const button = page.locator('button'); 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 webkit prefix').toHaveCSS(
'-webkit-appearance',
'none'
);
await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/); await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
await expect(button, 'should have background color').toHaveCSS( await expect(button, 'should have background color').toHaveCSS(
'background-color', 'background-color',

2
packages/integrations/tailwind/README.md
View file

@ -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! 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. [Autoprefixer](https://github.com/postcss/autoprefixer) is also set up automatically when working in dev mode, and for production builds, so Tailwind classes will work in older browsers.
https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4 https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4

8
packages/integrations/tailwind/src/index.ts
View file

@ -86,7 +86,6 @@ async function getPostCssConfig(
} }
async function getViteConfiguration( async function getViteConfiguration(
isBuild: boolean,
tailwindConfig: TailwindConfig, tailwindConfig: TailwindConfig,
viteConfig: UserConfig viteConfig: UserConfig
) { ) {
@ -100,9 +99,7 @@ async function getViteConfiguration(
postcssConfigResult && postcssConfigResult.plugins ? postcssConfigResult.plugins.slice() : []; postcssConfigResult && postcssConfigResult.plugins ? postcssConfigResult.plugins.slice() : [];
postcssPlugins.push(tailwindPlugin(tailwindConfig)); postcssPlugins.push(tailwindPlugin(tailwindConfig));
if (isBuild) { postcssPlugins.push(autoprefixerPlugin());
postcssPlugins.push(autoprefixerPlugin());
}
return { return {
css: { css: {
postcss: { postcss: {
@ -140,7 +137,6 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
name: '@astrojs/tailwind', name: '@astrojs/tailwind',
hooks: { hooks: {
'astro:config:setup': async ({ 'astro:config:setup': async ({
command,
config, config,
updateConfig, updateConfig,
injectScript, injectScript,
@ -166,7 +162,7 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir); (userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
updateConfig({ updateConfig({
vite: await getViteConfiguration(command === 'build', tailwindConfig, config.vite), vite: await getViteConfiguration(tailwindConfig, config.vite),
}); });
if (applyBaseStyles) { if (applyBaseStyles) {