Global styles don't get updated for subcomponents (PostCSS+Tailwind)

[hylomorph]

Describe the bug Using syntax like this

<style global lang="postcss">
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
</style>

or this

<style global src="./app.css"></style>

will cause the following issue: When tailwind classes are updated in imported components, they will not end up in the build.

Using syntax like

<script>
    import "./app.css"
</script>

or

<style>
     @import "./app.css";
</style>

works fine.

(I hope this is the correct place to file this bug, but since there's no problem when using regular css imports I assume it's not a problem with tailwind.)

To Reproduce https://github.com/hylomorph/svelte-preprocess-postcss-global-subcomponent-issue

git clone git@github.com:hylomorph/svelte-preprocess-postcss-global-subcomponent-issue.git
cd svelte-preprocess-postcss-global-subcomponent-issue
npm i
npm run dev

Observe that the first paragraph is blue and the second one is green.

Change the class in src/B.svelte to bg-green-600. The background will turn white, because bg-green-600 doesn't end up in the build.

Change anything in src/App.svelte, and save. This will cause a "good" rebuild and now the background of the second paragraph is green again.

Expected behavior I would expect adding new tailwind classes anywhere in the component hierarchy to correctly update. I believe this worked fine in the past.

Information about your project:

  System:
    OS: Linux 5.18 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 10.27 GB / 15.52 GB
    Container: Yes
    Shell: 3.4.1 - /usr/bin/fish
  Binaries:
    Node: 16.16.0 - /sbin/node
    Yarn: 1.22.19 - /sbin/yarn
    npm: 8.15.0 - /sbin/npm
  Browsers:
    Chromium: 103.0.5060.134
  npmPackages:
    svelte: ^3.49.0 => 3.49.0 
    svelte-preprocess: ^4.10.7 => 4.10.7 
    vite: ^3.0.0 => 3.0.3 

[bluwy]

FWIW the alternative syntax using a script tag is the recommended usage in Vite. It's usually not a good idea to put global tailwind css in <style global> too if you're using any other bundler.

[hylomorph]

Thanks @bluwy, that sent me in the right direction! In my case I had other issues importing css files related to ShadowRoot, but am now able to work around that (see sveltejs/svelte#7737).

Personally, I consider this resolved since there are enough alternatives.