[v4] Tailwind bails out on candidates inside multiline JS array (Vite+Svelte setup)

[vnphanquang]

Version

tailwind@4.0.0-beta.2 and @tailwindcss/vite@4.0.0-beta.2

Environment

Output of npx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite,tailwindcss,@tailwindcss}":

  System:
    OS: Linux 6.6 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
    Memory: 6.32 GB / 15.57 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 22.11.0 - ~/.volta/tools/image/node/22.11.0/bin/node
    Yarn: 4.5.1 - ~/.volta/tools/image/yarn/4.5.1/bin/yarn
    npm: 10.9.0 - ~/.volta/tools/image/node/22.11.0/bin/npm
    pnpm: 9.12.3 - ~/.volta/bin/pnpm
  Browsers:
    Chromium: 131.0.6778.69
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.1
    svelte: ^5.1.3 => 5.2.7
    tailwindcss: 4.0.0-beta.2 => 4.0.0-beta.2
    vite: ^5.4.10 => 5.4.11

Reproduction

https://github.com/vnphanquang/tailwind-4-svelte-candidates-in-array. Please see README for steps.

Description

Given the following Svelte source code (in Vite context as in reproduction repo above):

<script>
  const classes = [
    'test-red',
    'test-green',
    'test-blue',
    'test-tomato', 
  ];
</script>

{#each classes as cls}
    <div class="{cls}"></div>
{/each}

Assuming test-* has been defined using @utility directive in CSS. The build output does not include any of the test-* above.

Removing one of the test-* class generates the expected output. It seems here that tailwind is missing out candidates inside a JS array with length > 3 in this particular use case.

It is important to note that I did not observe such behavior in V3. I have not yet tested this specific setup with V3, however.

Thanks!

[vnphanquang]

Putting log at:

tailwindcss/packages/@tailwindcss-vite/src/index.ts

Line 44 in bd43d63

for (let candidate of moduleGraphScanner.scanFiles([{ content, extension }])) {

will yield a single following candidate when classes.length === 4

"\n\t\t'test-red',\n\t\t'test-green',\n\t\t'test-blue',\n\t\t'test-tomato'\n\t"

while if classes.length === 3 (removing test-tomato, for example), individual correct candidates are detected, i.e. test-red, test-green, test-blue

---

Perhaps add a test case:

    #[test]
    fn classes_in_js_arrays_multiline() {
        let candidates = run(
            "let classes = [\n\t'bg-black',\n\t'hover:px-0.5',\n\t'text-[13px]',\n\t'[--my-var:1_/_2]',\n\t'[.foo_&]:px-[0]',\n\t'[.foo_&]:[color:red]'\n]",
            false,
        );
        assert_eq!(
            candidates,
            vec![
                "let",
                "classes",
                "bg-black",
                "hover:px-0.5",
                "text-[13px]",
                "[--my-var:1_/_2]",
                "--my-var:1_/_2",
                "[.foo_&]:px-[0]",
                "[.foo_&]:[color:red]",
            ]
        );
    }

to this:

tailwindcss/crates/oxide/src/parser.rs

Lines 1263 to 1265 in bd43d63

	#[test]
	fn classes_in_js_arrays() {

or stripping out \n\t?

---

Something seems off here:

tailwindcss/crates/oxide/src/parser.rs

Lines 877 to 878 in bd43d63

	let can_skip_whitespace = false; // if self.opts.preserve_spaces_in_arbitrary { !self.in_arbitrary } else { true };
	if can_skip_whitespace {

But that's as far as I could get sorry.