-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
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.
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
Add Tailwind support to Astro Dev Server #222
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'astro': minor | ||
--- | ||
|
||
Add Tailwind JIT support for Astro |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,7 +8,6 @@ | |
"astro-dev": "nodemon --delay 0.5 -w ../../packages/astro/dist -x '../../packages/astro/astro.mjs dev'", | ||
"test": "jest /__test__/", | ||
"format": "prettier --write \"src/**/*.js\" && yarn format:css", | ||
"format:css": "stylelint 'src/**/*.scss' --fix", | ||
"lint": "prettier --check \"src/**/*.js\"" | ||
}, | ||
"dependencies": { | ||
|
@@ -31,11 +30,7 @@ | |
"luxon": "^1.25.0", | ||
"markdown-it": "^12.0.2", | ||
"markdown-it-anchor": "^6.0.0", | ||
"nodemon": "^2.0.7", | ||
"stylelint": "^13.8.0", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Very weird thing: |
||
"stylelint-config-prettier": "^8.0.2", | ||
"stylelint-config-rational-order": "^0.1.2", | ||
"stylelint-config-standard": "^20.0.0" | ||
"nodemon": "^2.0.7" | ||
}, | ||
"snowpack": { | ||
"workspaceRoot": "../.." | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export default { | ||
devOptions: { | ||
tailwindConfig: './tailwind.config.js', | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,3 @@ | ||
<style> | ||
@tailwind components; | ||
@tailwind utilities; | ||
</style> | ||
|
||
<button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"> | ||
<slot /> | ||
</button> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,6 @@ import type { TransformOptions, Transformer } from '../../@types/transformer'; | |
import type { TemplateNode } from 'astro-parser'; | ||
|
||
import crypto from 'crypto'; | ||
import fs from 'fs'; | ||
import { createRequire } from 'module'; | ||
import path from 'path'; | ||
import { fileURLToPath } from 'url'; | ||
|
@@ -55,7 +54,6 @@ export interface StyleTransformResult { | |
|
||
interface StylesMiniCache { | ||
nodeModules: Map<string, string>; // filename: node_modules location | ||
tailwindEnabled?: boolean; // cache once per-run | ||
} | ||
|
||
/** Simple cache that only exists in memory per-run. Prevents the same lookups from happening over and over again within the same build or dev server session. */ | ||
|
@@ -68,6 +66,7 @@ export interface TransformStyleOptions { | |
type?: string; | ||
filename: string; | ||
scopedClass: string; | ||
tailwindConfig?: string; | ||
} | ||
|
||
/** given a class="" string, does it contain a given class? */ | ||
|
@@ -80,7 +79,7 @@ function hasClass(classList: string, className: string): boolean { | |
} | ||
|
||
/** Convert styles to scoped CSS */ | ||
async function transformStyle(code: string, { logging, type, filename, scopedClass }: TransformStyleOptions): Promise<StyleTransformResult> { | ||
async function transformStyle(code: string, { logging, type, filename, scopedClass, tailwindConfig }: TransformStyleOptions): Promise<StyleTransformResult> { | ||
let styleType: StyleType = 'css'; // important: assume CSS as default | ||
if (type) { | ||
styleType = getStyleType.get(type) || styleType; | ||
|
@@ -122,7 +121,7 @@ async function transformStyle(code: string, { logging, type, filename, scopedCla | |
const postcssPlugins: Plugin[] = []; | ||
|
||
// 2a. Tailwind (only if project uses Tailwind) | ||
if (miniCache.tailwindEnabled) { | ||
if (tailwindConfig) { | ||
try { | ||
const require = createRequire(import.meta.url); | ||
const tw = require.resolve('tailwindcss', { paths: [import.meta.url, process.cwd()] }); | ||
|
@@ -192,21 +191,6 @@ export default function transformStyles({ compileOptions, filename, fileID }: Tr | |
const styleTransformPromises: Promise<StyleTransformResult>[] = []; // async style transform results to be finished in finalize(); | ||
const scopedClass = `astro-${hashFromFilename(fileID)}`; // this *should* generate same hash from fileID every time | ||
|
||
// find Tailwind config, if first run (cache for subsequent runs) | ||
if (miniCache.tailwindEnabled === undefined) { | ||
const tailwindNames = ['tailwind.config.js', 'tailwind.config.mjs']; | ||
for (const loc of tailwindNames) { | ||
const tailwindLoc = path.join(fileURLToPath(compileOptions.astroConfig.projectRoot), loc); | ||
if (fs.existsSync(tailwindLoc)) { | ||
miniCache.tailwindEnabled = true; // Success! We have a Tailwind config file. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As part of |
||
debug(compileOptions.logging, 'tailwind', 'Found config. Enabling.'); | ||
break; | ||
} | ||
} | ||
if (miniCache.tailwindEnabled !== true) miniCache.tailwindEnabled = false; // We couldn‘t find one; mark as false | ||
debug(compileOptions.logging, 'tailwind', 'No config found. Skipping.'); | ||
} | ||
|
||
return { | ||
visitors: { | ||
html: { | ||
|
@@ -231,6 +215,7 @@ export default function transformStyles({ compileOptions, filename, fileID }: Tr | |
type: (langAttr && langAttr.value[0] && langAttr.value[0].data) || undefined, | ||
filename, | ||
scopedClass, | ||
tailwindConfig: compileOptions.tailwindConfig, | ||
}) | ||
); | ||
return; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This adds a
devOptions.tailwindConfig
key to Astro, too (copying from Snowpack).While adding Tailwind-specific config isn‘t great, I think it’s far preferable than writing a bunch of code for Tailwind to try and be “smart” about Tailwind detection.