search

farm-fe / farm

Extremely fast Vite-compatible web build tool written in Rust
https://farmfe.org
MIT License
5.01k stars 165 forks source link

[Bug Report]: HMR with Tailwind does not work #1777

Closed DanielZ1337 closed 1 month ago

DanielZ1337 commented 2 months ago

Steps to reproduce

  1. setup farm project
  2. setup tailwindcss
  3. use the farm postcss plugin

(alternatively just use the example from their repo under /examples/tailwind)

  1. start dev server
  2. change a class in an html element (e.g bg-black -> bg-blue-500)

Reproduce link

No response

What is actually happening?

TailwindCSS only gives the CSS output that is actually used, so my thought is that farm doesn't register the change and doesn't recompile (therefore using stale cache in /node_modules/.farm/cache)

Expectation: when running dev server, the Tailwind class should be applied, when classes are changed Actual: running dev server, Tailwind classes are not applied when they are changed (if not used before)

The current way to get it to work under development is to continually remove the specific cache (or just .cache folder) for farm to revalidate the new Tailwind classes applied in the mark up.

System Info

System:                                                                                                                   OS: Windows 10 10.0.19045                                                                                               CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor                                                                       Memory: 17.19 GB / 31.92 GB                                                                                           Binaries:                                                                                                                 Node: 20.9.0 - C:\Program Files\nodejs\node.EXE                                                                         Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD                                                                        npm: 10.8.0 - C:\Program Files\nodejs\npm.CMD                                                                           pnpm: 7.29.1 - C:\Program Files\nodejs\pnpm.CMD                                                                         bun: 1.1.28 - ~\.bun\bin\bun.EXE                                                                                      Browsers:                                                                                                                 Edge: Chromium (127.0.2651.74)                                                                                          Internet Explorer: 11.0.19041.4355
DanielZ1337 commented 2 months ago

System: OS: Windows 10 10.0.19045 CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
Memory: 16.92 GB / 31.92 GB Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD npm: 10.8.0 - C:\Program Files\nodejs\npm.CMD pnpm: 7.29.1 - C:\Program Files\nodejs\pnpm.CMD bun: 1.1.28 - ~.bun\bin\bun.EXE Browsers: Edge: Chromium (127.0.2651.74) Internet Explorer: 11.0.19041.4355

the system info wasn't properly formatted when copy-pasted. Fixed here

fu050409 commented 2 months ago

Thanks for your report and we'll take a look :)

jdkcoder commented 1 month ago

facing same problem

shulandmimi commented 1 month ago

a temporary solution is to set compilation.persistentCache to false

wre232114 commented 1 month ago

fixed in @farmfe/js-plugin-postcss@1.8.1