Browse Source

Only scan src in client directory for Tailwind to prevent unnecessary rebuilds

https://tailwindcss.com/docs/content-configuration#styles-rebuild-in-an-infinite-loop

This speeds up the FE production build from 60s to ~21s on my machine, and also speeds up hot rebuilds to just ~3s
Sage Abdullah 10 months ago
parent
commit
c8aeee941a
3 changed files with 8 additions and 1 deletions
  1. 1 0
      CHANGELOG.txt
  2. 1 0
      docs/releases/6.2.md
  3. 6 1
      tailwind.config.js

+ 1 - 0
CHANGELOG.txt

@@ -16,6 +16,7 @@ Changelog
  * Docs: Document Wagtail's bug bounty policy (Jake Howard)
  * Maintenance: Use `DjangoJSONEncoder` instead of custom `LazyStringEncoder` to serialize Draftail config (Sage Abdullah)
  * Maintenance: Refactor image chooser pagination to check `WAGTAILIMAGES_CHOOSER_PAGE_SIZE` at runtime (Matt Westcott)
+ * Maintenance: Exclude the `client/scss` directory in Tailwind content config to speed up CSS compilation (Sage Abdullah)
 
 
 6.1.1 (xx.xx.xxxx) - IN DEVELOPMENT

+ 1 - 0
docs/releases/6.2.md

@@ -37,6 +37,7 @@ depth: 1
 
  * Use `DjangoJSONEncoder` instead of custom `LazyStringEncoder` to serialize Draftail config (Sage Abdullah)
  * Refactor image chooser pagination to check `WAGTAILIMAGES_CHOOSER_PAGE_SIZE` at runtime (Matt Westcott)
+ * Exclude the `client/scss` directory in Tailwind content config to speed up CSS compilation (Sage Abdullah)
 
 
 ## Upgrade considerations - changes affecting all projects

+ 6 - 1
tailwind.config.js

@@ -8,7 +8,12 @@ module.exports = {
   content: [
     './wagtail/**/*.{py,html,ts,tsx}',
     './wagtail/**/static_src/**/*.js',
-    './client/**/*.{js,ts,tsx,mdx}',
+    // Make sure NOT to include the `client/scss` directory,
+    // even if we don't specify `*.scss` files here.
+    // The directory would still be scanned for files, which would cause
+    // the styles to rebuild in a loop.
+    // https://tailwindcss.com/docs/content-configuration#styles-rebuild-in-an-infinite-loop
+    './client/src/**/*.{js,ts,tsx,mdx}',
     './docs/**/*.{md,rst}',
   ],
   corePlugins: {