new env handling seems to break tailwindcss

[benjaminlewandowski]

Describe the bug

while @tailwind base is in my app.css i get this error:

Error: Cannot import $env/dynamic/private.js into client-side code:
- src/routes/__layout.svelte 
  - src/routes/app.css 
    - $env/dynamic/private.js 

basicly the same error as #5720

Reproduction

https://github.com/benjaminlewandowski/sveltekit-tailwindcss-bugreport

Logs

No response

System Info

System:
    OS: Linux 5.18 Fedora Linux 36 (Workstation Edition)
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 12.38 GB / 31.04 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.6.0 - /run/user/1000/fnm_multishells/288221_1659039694408/bin/node
    Yarn: 1.22.19 - ~/.npm-global/bin/yarn
    npm: 8.13.2 - /run/user/1000/fnm_multishells/288221_1659039694408/bin/npm
  Browsers:
    Brave Browser: 103.1.41.100
    Chrome: 103.0.5060.134
    Firefox: 102.0
  npmPackages:
    @sveltejs/adapter-auto: 1.0.0-next.64 => 1.0.0-next.64 
    @sveltejs/kit: 1.0.0-next.396 => 1.0.0-next.396 
    svelte: 3.49.0 => 3.49.0 
    vite: 3.0.3 => 3.0.3

Severity

blocking an upgrade

Additional Information

demo repo is a minimal setup with that error

[benmccann]

build seems to work, but dev fails

[benjaminlewandowski]

Correctly - forgot to add that information.

[elliott-with-the-longest-name-on-github]

@benmccann I'll fix this tonight. Any chance we can merge the other env var PR prior?

[benmccann]

@tcc-sejohnson it looks fine to me. I was going to leave it to Rich though since he was much more involved in the env stuff

[elliott-with-the-longest-name-on-github]

Okay, this one is just straight up beyond me. I logged the module tree as we're traversing it. The format below is moduleId: imports. The dots in front of each line denote the level in the module graph. As you can see, Vite thinks app.css is importing, like... everything??

When I inspected the transformed code, it just looked like normal CSS. There are no imports.

src/routes/__layout.svelte: node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs, src/app.css
.. node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs: 
.. src/app.css: src/app.html, src/routes/__layout.svelte, src/routes/index.svelte, .svelte-kit/ambient.d.ts, .svelte-kit/generated/client-manifest.js, .svelte-kit/generated/client-matchers.js, .svelte-kit/generated/root.svelte, .svelte-kit/runtime/env-private.js, .svelte-kit/runtime/env-public.js, .svelte-kit/runtime/env.js, .svelte-kit/runtime/paths.js, .svelte-kit/runtime/app/env.js, .svelte-kit/runtime/app/navigation.js, .svelte-kit/runtime/app/paths.js, .svelte-kit/runtime/app/stores.js, .svelte-kit/runtime/client/singletons.js, .svelte-kit/runtime/client/start.js, .svelte-kit/runtime/components/error.svelte, .svelte-kit/runtime/components/layout.svelte, .svelte-kit/runtime/server/index.js, .svelte-kit/runtime/env/dynamic/private.js, .svelte-kit/runtime/env/dynamic/public.js, .svelte-kit/runtime/env/static/private.js, .svelte-kit/runtime/env/static/public.js, .svelte-kit/types/src/routes/__types/__layout.d.ts, .svelte-kit/types/src/routes/__types/index.d.ts, tailwind.config.cjs
.... src/app.html: 
.... src/routes/__layout.svelte: node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs, src/app.css
.... src/routes/index.svelte: node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs
...... node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs: 
.... .svelte-kit/ambient.d.ts: 
.... .svelte-kit/generated/client-manifest.js: 
.... .svelte-kit/generated/client-matchers.js: 
.... .svelte-kit/generated/root.svelte: node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs, node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/ssr.mjs
...... node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs: 
...... node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/ssr.mjs: node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs
........ node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs: 
.... .svelte-kit/runtime/env-private.js: 
.... .svelte-kit/runtime/env-public.js: 
.... .svelte-kit/runtime/env.js: 
.... .svelte-kit/runtime/paths.js: 
.... .svelte-kit/runtime/app/env.js: 
.... .svelte-kit/runtime/app/navigation.js: 
.... .svelte-kit/runtime/app/paths.js: 
.... .svelte-kit/runtime/app/stores.js: 
.... .svelte-kit/runtime/client/singletons.js: 
.... .svelte-kit/runtime/client/start.js: 
.... .svelte-kit/runtime/components/error.svelte: 
.... .svelte-kit/runtime/components/layout.svelte: 
.... .svelte-kit/runtime/server/index.js: 
.... .svelte-kit/runtime/env/dynamic/private.js: 

[pago]

As a workaround note until this is fixed properly:

For me the issue came from Tailwind being configured to scan ts and js files, i.e. within tailwind.config.js:

module.exports = {
	mode: 'jit',
	content: ['./src/**/*.{html,svelte,js,ts}'],
};

by removing js and ts from the list, I was able to avoid the problem.

module.exports = {
	mode: 'jit',
	content: ['./src/**/*.{html,svelte}'],
};

This is obviously not an ideal solution, but in my case it was good enough. Perhaps a different glob or an excludes config would've helped as well.

[benjaminlewandowski]

@pago this really fixed the problem on my end, thanks!

[benmccann]

It appears that Tailwind needs to scan for any usages of a CSS class. E.g. it will try to find code like this:

menuButton.addEventListener('click', function () {
  let classList = document.getElementById('nav').classList
  classList.toggle('hidden')
  classList.toggle('block')
})

I believe it does this so that it can include only CSS that is actually used. So just be aware that if you remove .js from the content option you will probably end up with missing styles in the case that you have a plain JS file doing some type DOM manipulation