Tailwindcss conflicts with new env handling

[fehnomenal]

Describe the bug

I'm using tailwind and have the following app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Oswald';
    src: url(/fonts/oswald/Oswald-VariableFont_wght.woff2) format('woff2'),
      url(/fonts/oswald/Oswald-VariableFont_wght.ttf) format('truetype');
    font-display: swap;
  }
}

Now all layouts that import the css file throw this error:

Error: Cannot import $env/static/private.js into client-side code:
- src/routes/__layout@public.svelte 
  - src/app.css 
    - src/init/index.ts 
      - src/lib/import/afterbuy-import-jobs.ts 
        - src/lib/import/afterbuy-catalogs/pipeline.ts 
          - src/lib/import/afterbuy-catalogs/stream-from-afterbuy.ts 
            - src/lib/afterbuy.ts 
              - $env/static/private.js

When I remove the tailwind directives or the whole import everything works but the styles are broken of course.

Reproduction

Just add the default tailwind css directives.

Logs

No response

System Info

  System:
    OS: Linux 5.15 NixOS 22.11 (Raccoon) 22.11 (Raccoon)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700T CPU @ 2.90GHz
    Memory: 16.14 GB / 31.28 GB
    Container: Yes
    Shell: 5.1.16 - /run/current-system/sw/bin/bash
  Binaries:
    Node: 14.20.0 - /nix/store/fg072dha8d8nfhzcsxxr1nybx64pxgp1-nodejs-14.20.0/bin/node
    npm: 6.14.17 - /nix/store/fg072dha8d8nfhzcsxxr1nybx64pxgp1-nodejs-14.20.0/bin/npm
  Browsers:
    Chromium: 103.0.5060.114
    Firefox: 102.0.1
  npmPackages:
    @sveltejs/adapter-node: 1.0.0-next.85 => 1.0.0-next.85 
    @sveltejs/kit: 1.0.0-next.395 => 1.0.0-next.395 
    svelte: ~3.49.0 => 3.49.0 
    vite: ~3.0.0 => 3.0.0

Severity

blocking an upgrade

Additional Information

No response

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

From the bug template:

A link to a repository, or a fork of https://node.new/sveltekit, that reproduces the issue. Reproductions must be short, self-contained and correct and must not contain files or code that aren't relevant to the issue — please do NOT just paste a link to your project. Explaining how to reproduce is generally not enough. It pushes the burden of creating a reproduction project onto a small set of volunteer maintainers and isn't scalable. If no reproduction is provided, the issue will be closed.

I tried:

Just add the default tailwind css directives.

Everything worked just fine. You're going to have to create a GitHub repository with a skeleton project that reproduces the issue:

npm init svelte@next 5720-env-handling-repro
# Select skeleton project
npm i
git init && git add --all && git commit -m "Initial commit"
# Reproduce the issue
git add --all && git commit -m "feat: Issue reproduced"
git remote add origin <github_url>
git push -u origin master

[benmccann]

I just upgraded my Tailwind project to the latest version and confirmed there were no issues. We'll close this if there isn't a reproduction soon

[fehnomenal]

Damn I cannot reproduce this either in a clean repo...

But why on earth does app.css depend on anything at all?

[benmccann]

Can you share the whole repo with us? Perhaps privately? I believe there's an issue here, but it seems harder to cause it

[fehnomenal]

I will try to when I get around to it. The project is part of a larger rush.js monorepo so there is much going on. I will try to slim it down as much as possible.

btw: I planned migrating from tailwind to windi and used this opportunity to finally bite the bullet and the problem did not surface again.

[benjaminlewandowski]

i have exactly the same issue on a sveltekit/tailwind project since the new env handling. it builds again as soon the

@tailwind base; @tailwind components; @tailwind utilities; @tailwind variants;

lines are removed from my css file.

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

@benjaminlewandowski

We have not been able to reproduce this issue. Can you file a new bug with the bug template and a reproduction? I'm sure there's a bug here -- we just can't make it happen.