Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-27 22:19:04 -05:00
Code Issues Activity

Fixing bug that could lose Tailwind's default presets (#3099)

Browse source 
* fixing bug that could lose Tailwind's default presets

* updating integration README

* chore: adding changeset

* test: fixing the tailwind tests
This commit is contained in:
Tony Sullivan 2022-04-13 15:05:00 +00:00 • committed by GitHub
parent b23f6b1596
commit 254a8f3749
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 34 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.changeset/tame-lamps-roll.md Normal file
View file

@ -0,0 +1,7 @@
---
'@astrojs/tailwind': minor
---
Removes the `applyAstroPreset` integration option. Tailwind presets can be disabled directly from the Tailwind config file by including `presets: []`
See the [Tailwind preset docs](https://tailwindcss.com/docs/presets#disabling-the-default-configuration) for more details.

2
packages/astro/test/fixtures/tailwindcss/src/pages/index.astro vendored
View file

@ -11,7 +11,7 @@ import Complex from '../components/Complex.astro';
<title>Astro + TailwindCSS</title> <title>Astro + TailwindCSS</title>
</head> </head>
<body> <body class="bg-dawn text-midnight">
<Button>I’m a Tailwind Button!</Button> <Button>I’m a Tailwind Button!</Button>
<Complex /> <Complex />
</body> </body>

9
packages/astro/test/fixtures/tailwindcss/tailwind.config.js vendored
View file

@ -2,4 +2,13 @@ const path = require('path');
module.exports = { module.exports = {
content: [path.join(__dirname, 'src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}')], content: [path.join(__dirname, 'src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}')],
theme: {
extend: {
colors: {
dawn: '#f3e9fa',
dusk: '#514375',
midnight: '#31274a',
}
}
}
}; };

16
packages/astro/test/tailwindcss.test.js
View file

@ -41,6 +41,14 @@ describe('Tailwind', () => {
expect(bundledCSS, 'supports arbitrary value classes').to.match( expect(bundledCSS, 'supports arbitrary value classes').to.match(
/\.font-\\\[900\\\]{font-weight:900}/ /\.font-\\\[900\\\]{font-weight:900}/
); );
// custom theme colors were included
expect(bundledCSS, 'includes custom theme colors').to.match(
/\.text-midnight{/
);
expect(bundledCSS, 'includes custom theme colors').to.match(
/\.bg-dawn{/
);
}); });
it('maintains classes in HTML', async () => { it('maintains classes in HTML', async () => {
@ -98,6 +106,14 @@ describe('Tailwind', () => {
// tailwind escapes brackets, `font-[900]` compiles to `font-\[900\]` // tailwind escapes brackets, `font-[900]` compiles to `font-\[900\]`
expect(text, 'supports arbitrary value classes').to.match(/.font-\\[900\\]/); expect(text, 'supports arbitrary value classes').to.match(/.font-\\[900\\]/);
// custom theme colors were included
expect(text, 'includes custom theme colors').to.match(
/\.text-midnight/
);
expect(text, 'includes custom theme colors').to.match(
/\.bg-dawn/
);
}); });
it('maintains classes in HTML', async () => { it('maintains classes in HTML', async () => {

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

@ -76,23 +76,6 @@ export default {
} }
``` ```
### config.applyAstroPreset
By default, when a custom `tailwind.config.js` file is used this integration will still append some configuration as a `preset` in the final configuration. This default configuration provides the correct `content` property so that Tailwind knows what files to scan in Astro projects (`src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}`).
You can disable this by setting `config.applyAstroPreset` to false. enable Tailwind across all Astro files and [UI framework components](https://docs.astro.build/en/core-concepts/framework-components/). To remove this default, opt-out via the `config.applyAstroPreset` integration option:
```js
// astro.config.mjs
export default {
integrations: [tailwind({
// Example: Disable adding Astro configuration as a preset.
// Only useful if a custom tailwind.config.js file is used.
config: { applyAstroPreset: false },
})],
}
```
### config.applyBaseStyles ### config.applyBaseStyles
By default, the integration imports a basic `base.css` file on every page of your project. This basic CSS file includes the three main `@tailwind` directives: By default, the integration imports a basic `base.css` file on every page of your project. This basic CSS file includes the three main `@tailwind` directives:

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

@ -14,6 +14,7 @@ function getDefaultTailwindConfig(srcUrl: URL): TailwindConfig {
}, },
plugins: [], plugins: [],
content: [path.join(fileURLToPath(srcUrl), `**`, `*.{astro,html,js,jsx,svelte,ts,tsx,vue}`)], content: [path.join(fileURLToPath(srcUrl), `**`, `*.{astro,html,js,jsx,svelte,ts,tsx,vue}`)],
presets: undefined // enable Tailwind's default preset
}); });
} }
@ -37,12 +38,6 @@ type TailwindOptions =
* @default 'tailwind.config.js' * @default 'tailwind.config.js'
*/ */
path?: string; path?: string;
/**
* Apply Astro's default Tailwind config as a preset
* This is recommended to enable Tailwind across all components and Astro files
* @default true
*/
applyAstroPreset?: boolean;
/** /**
* Apply Tailwind's base styles * Apply Tailwind's base styles
* Disabling this is useful when further customization of Tailwind styles * Disabling this is useful when further customization of Tailwind styles
@ -56,7 +51,6 @@ type TailwindOptions =
| undefined; | undefined;
export default function tailwindIntegration(options: TailwindOptions): AstroIntegration { export default function tailwindIntegration(options: TailwindOptions): AstroIntegration {
const applyAstroConfigPreset = options?.config?.applyAstroPreset ?? true;
const applyBaseStyles = options?.config?.applyBaseStyles ?? true; const applyBaseStyles = options?.config?.applyBaseStyles ?? true;
const customConfigPath = options?.config?.path; const customConfigPath = options?.config?.path;
return { return {
@ -76,14 +70,6 @@ export default function tailwindIntegration(options: TailwindOptions): AstroInte
const tailwindConfig: TailwindConfig = const tailwindConfig: TailwindConfig =
(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir); (userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
if (applyAstroConfigPreset && userConfig?.value) {
// apply Astro config as a preset to user config
// this avoids merging or applying nested spread operators ourselves
tailwindConfig.presets = [
getDefaultTailwindConfig(config.srcDir),
...(tailwindConfig.presets || []),
];
}
config.style.postcss.plugins.push(tailwindPlugin(tailwindConfig)); config.style.postcss.plugins.push(tailwindPlugin(tailwindConfig));
config.style.postcss.plugins.push(autoprefixerPlugin); config.style.postcss.plugins.push(autoprefixerPlugin);